最近Staartの更新情報ばかりなブログになっておりますハレノヒブログです。
そして今回も新機能追加のお知らせです！
アクセスランキングのページを公開しました。
Staartの成長と共にランキングのアクセス数も増えていってくれると思います。
ランキングは今日までの一週間のランキングと、期間を指定して一週間ごとのランキングを見ることが出来ます。まだリリースしたてなのでアーカイブはありませんが、過去のランキングを見たい場合は右側の週間アーカイブからどうぞ。
いまどのライブがアツいのか、トップページのバナーから確認してみてください！
先日追加した検索バーを改良しました。
より見やすく、使いやすくなりましたので沢山検索していただけると嬉しいです。
それから、ユーザー機能も開発が進んでいるようです。どうぞお楽しみに！！
アクセスはこちらから！↓
https://www.staart.jp/
こんにちは！
Staartをご利用いただいている皆様、いつもありがとうございます。
おかげさまでアクセス数をはじめツイッターアカウントのフォロワー様も着々と増えております。
これから開催されるライブ件数も800件を突破しました！
アクセスはこちらからどうぞ↓
Staartのデータ管理には細心の注意を払っておりますが、もしご利用される中で実際の情報と違う内容やバグなどを発見されましたら、報告フォームよりお問い合わせいただけますと幸いです。
ライブ情報に関するお問い合わせは詳細ページ、アーティストやライブハウスに関するお問い合わせは各プロフィールページからフォームのリンクをご用意しております。
頂いた内容につきましては早急に対応いたします。
どうぞよろしくお願いいたします。
次は、Staartで使用しているアイコンに関してちょっと書いてみます。
Staartではライブ・ユーザー・アーティスト・ライブハウスに関してオリジナルのアイコンを使用しています。サービスの雰囲気に合うよう留意しながら以下の４種類をそれぞれ制作しました。
特にライブに関しては完全にオリジナルの意味を表すアイコンなので、これらの意味を把握しておくともっとサービスが使いやすいんじゃないかと思います。さり気なくマイクのコードがライブマークを意識してたりします。
現在は上のようなカラーリングで使っているアイコンは、リリース当初ちょっと雰囲気が違いました。
ライブっぽさを意識してグラデーション背景だったんです。
これはこれで個人的に気に入っていますが、全体的にフラットなデザインとの質感の差と、縮小した時の見栄えも考慮して修正しました。
ちなみにグラデーションを作ってからの強い色調補正は色の境界線が出来てしまって綺麗にいかないという勉強にもなりました。
サイトで使用する時は最小で25px四方とかなり縮小されるため、アイコン自体の視認性には悩んでいます。
試行錯誤しながらベストなところに落ち着けたらなと思います！
このアイコンがどんな風に使われているかまだ見ていないという方はこちらから！↓
ユーザーの事前登録、twitter公式アカウントのフォローもよろしくお願いします！
こんにちは！雨の日が続きますね。
そんな中でもハレノヒではがっつりと開発進行中です！
今回はStaartのUIについてと更新情報をお届けしたいと思います。
その前に、Staartって何？という方はこちらから↓
Staartの開発をする中で大事にしていることは情報をできるだけたくさん、見やすく表示することです。
メニューや検索バーを縦60pxのヘッダーに収めて、ライブ情報を載せる領域を少しでも広く確保しています。
これは表面的にはPinterestのスタイルに近いのですが、扱っている情報がもう少し複雑なため、テキストのサイズや配置に気を配りました。様々な長さの文章が入ることを想定して省略などを駆使しながらレイアウトするのはwebならではだと思いました。
また、適宜タブを使って必要な箇所にすぐたどり着けるように作っています。
そして何より、各ページの上部に余計なものを入れないということにはかなり注意を払っています。
たとえばSNS関係のいいねボタンなどを上部に入れればクリックしやすいです。けれどその分ファーストビューに表示される情報が減ってしまいます。各SNSに拡散していただけることも勿論ありがたく、Staartでも重要視していますが、少しでも多くのライブ・イベント情報を配信したいという立場から優先順位を考えた上で現在の配置になりました。
前回更新したピックアップバナーエリアも、ピックアップという特別感（他とは違う見え方）を演出しつつ、使用面積は出来るだけ抑えるという条件のもとエンジニアとデザイナーとで相談し合いながらレイアウトを決めました。
開発中のエリア別検索用のナビゲーションについても、使い勝手とコンパクトさを両立したUIを作るのは結構苦労したので、個人的にも実装が楽しみなところです。
これからユーザーが増えていった時に、現状のUIが最適ではないということが間違いなくあると思います。
自分たちも１ユーザーとして、このUIでいいのかどうかを常に見直しながらブラッシュアップしていきたいです。
では、ここからはStaartの更新情報です。
日々少しずつ進歩していっております！
ライブ詳細ページの横にもPickupライブ・イベントがランダムで３つ表示されるようになりました。
トップページで見逃してしまっても、これ、注目です。
そして、概要の中のテキストURLにリンクが貼られるようになりました。
今までご不便をおかけしましたが、これで予約ページやオフィシャルページにアクセスしやすいですね。
そしてそして、ユーザー機能実装に向けて、お気に入り機能が追加されました。
☆のアイコンがお気に入りを表します。
これを活用すれば、気になるライブ・イベント情報をコレクション出来ちゃいます。
はやくポチッと押したいです。
ただいまトップページより、ユーザーの事前登録を受付中です！
Staartのユーザー機能実装をいち早くお知らせいたします。
ご登録お待ちしております！！
Staartのツイートも、アーティストご本人や所属事務所などからのリツイートをいただいています。
フォロー・リツイート・お気に入りお気軽にどうぞ！
Staart公式アカウントをフォローしてライブ情報をチェックしよう！
@staartjp
それでは引き続きStaartをよろしくお願いします！
アクセスはこちらからどうぞ↓
こんにちは！梅雨入りして雨の日が続きますが、明けたらあっという間に夏が来ますね。
夏といえば！ライブ！！！
Staartでは夏フェスの情報も随時更新しております。ぜひチェックしてみて下さい！
アクセスはこちらから↓
今回は、昨日紹介記事を書くのと同時に実装された新機能をご紹介いたします。
新しく追加されたのは[ピックアップバナーエリア]です。
これはライブ一覧ページの最上部についたバナーエリアで、いまアクセス数が多い注目のライブや特集などのおすすめコンテンツをご紹介していきます。
ライブが沢山ありすぎてどこを見たらいいか分からない時や、サクッと情報を拾いたい時などにどうぞ！
ちなみにこのバナーエリアは他のコンテンツと違って横スクロールです。
必要に応じてスクロールしてご覧ください。
ただいま開発中のユーザー機能（コメント投稿・お気に入り機能など）や便利検索（エリア・日付検索など）のリリースも待ち遠しいですが、さらにミーティングなどで面白いと思ったアイデアも盛り込んでまいります！
また、もしStaartにこんな機能があったらなというご要望などがありましたら
info@halenohi.jp
までお送りいただけますと幸いです。
登録されている[これから開催されるライブ数]700件突破！
どんどん成長していくStaartをよろしくお願いします！！
お久しぶりです覚えてますか！森田です。
しばらくブログを書いていない間に色んなことがありました。
新たにエンジニアさんを迎えて開発チームがだいぶ盛り上がっていたり、Staartが前回の記事の通りようやくリリース報告が出来るまでになったりと、刺激だらけの日々です。
特にStaartは、私が入社前から構想されていたものがついに形になったんです。胸熱です。
どんなものか見てみたいという方は↓からどうぞ！
とはいえ、まだまだ各種機能は絶賛開発中です。
今後さらに便利に、より楽しく使っていただけるように頑張っておりますのでお楽しみに！
さて今回は、そんな新音楽サービスStaartについてご紹介したいと思います。
まだ全然知らないという方！ちょっと見ただけという方！要チェックですよ！！
公式の紹介文がこちらです。
[みんなの街＝日本全国のライブ・イベント情報を集めて、その情報を検索できるサービス]ということなんですが、それだけじゃありません。ただ探すだけではなく、ジャンルや位置情報に応じて関連ライブを紹介して[今まで見逃していたかもしれないライブ・イベント情報を発見できるサービス]なんです。
Staartではライブ・イベント/アーティスト/ライブハウスの３種類の情報を集めているため、それぞれをベースに探していくことが出来ます。
関連のおすすめ情報からも、意外な発見があるかも知れません。
今はまだ公開していないユーザー機能が実装されたら、ユーザー同士のつながりからも自分好みの情報を見つけられるはず。
このように多彩な発見ルートをご用意して、行きたい！と思えるライブ・イベント情報とユーザーとをつなぐサービスを目指しています。
こちらはキャッチコピーです。
もっとライブを楽しむとはどういうことか？
それは、行きたいライブを見つけて→行って体感し→レビューして残すことなんじゃないかと思います。
「ライブの体感」自体の提供は難しいかも知れませんが、その「動機作り」と「感想をシェアし合う場」があったら。情報を発見したところが体感の始まりになり、同じライブに行く/行った仲間同士がつながる、そしてそれが次へのモチベーションになれば、きっと体感が何倍にも広がるんじゃないでしょうか。
このさがす→つながる→のこすというプロセスを通して、今までよりもっとライブを楽しんでいただけたらと思います。
どんなサービスなのかを知っていただいたら、次は実際にどんな機能があるのかをご紹介します。
開発は常に進行中なので2014年6月10日時点での機能紹介になります。
最新情報はまたこのブログなどでお知らせしていきますね。
一覧ページを開くとこのようにライブ情報が並んでいます。
右上が検索バー、左上がメニューボタンです。
メニューの内容はこんな感じです。
いつも左上にいますのでいつでも使って下さい。
一覧ページをスクロールしはじめると、タブバーが出てきます。
このタブもしくは先ほどのメニューから一覧表示をライブ・イベント/アーティスト/ライブハウスに切り替えられます。
また、それに合わせて検索バーも切り替わっているので、３種類の情報をそれぞれ閲覧・検索できます。
Staartの情報はカード形式になっています。
まずライブはカバー画像・詳細情報・アーティストの情報で構成されています。
すこし細かくはなりますが、下記のようにリンクしています。
これらを利用して気になった箇所からどんどん探していってみてください。
ライブ・イベントの詳細表示はこのような感じです。
近くのライブハウスで開催されるライブ情報が関連情報として右側に表示されています。
この画面を閉じる時は、右上の×ボタンか周囲の暗い部分をクリックすると一覧に戻れます。
下部に用意してあるコメント機能はただいま開発中です。
公開されたら、行きます宣言したり感想を書き込んだりと楽しく使っていただきたいです。
アーティストとライブハウスは、登録してあるこれから開催されるライブ数と一緒にカードになっています。
Staartのロゴにもあるイナズママークがライブを意味するマークです。※重要
詳細ページに行くと、これから・これまでのライブに加えて、そのアーティストがどんなライブハウスでライブしたか、そのライブハウスではどんなアーティストが出演したかもそれぞれ見ることが出来ます。
こちらがアーティスト。
こちらがライブハウスです。
先ほども書いたように、現在は
の３種類をご用意しています。
今後はこれらに加えて、エリア検索・日付検索なども追加していく予定です！
「ここから近いライブハウスでどんなライブやってるんだろう」
「来週はどんなライブがあるかな？」
「今まで知らなかったバンドを開拓したい！」
たとえばこういった声に、Staartを見れば応えられるのが目標です。
Staartの公式Twitterでは、登録されているこれから開催されるライブ情報をご紹介しています！
フォローしたらライブのウッカリ忘れが少なくなるかも？！
リツイート大歓迎、フォローお待ちしております！！
長くなりましたが、Staartがどんなサービスなのか少し分かっていただけたでしょうか？
Staartへのアクセスはこちらです！↓
ただ今、ユーザー機能公開時にいち早くお知らせする事前登録を受け付けております！
今までよりもっとライブを楽しんじゃいたい方はぜひ！
こんにちは！新人森田です。
新学期ですねーとか言ってたらあっという間にGW突入ってハヤイヨ！
気がづけばブログの更新さぼっておりましたすみません。
そういえば、無謀と思われていた10kmマラソンは無事に完走出来ました！！
皇居ランも毎週恒例イベントになりつつあり、ハレノヒマラソン部けっこうがんばってます。
ついでにシェイプアップも出来たらいいなと走った後にガッツリ食べながら願ってます。
さて、今回はデザインの勉強ということでECサイトをテーマに見ていきたいと思います。
国内外から気になるものを選りすぐって集めてまいりました！
ではいってみましょう。
扱う情報量が増えるほど、コンテンツの整理が一苦労。
他サイトとの差別化をはかりつつ、どのように商品を見せるかが腕のみせどころです。
こちらはハンドメイド作品の購入・販売が出来るサイトです。
トップバッターにして今回紹介する中でダントツの情報量を誇っています。
でもあまりゴチャゴチャして見えないのはメリハリのきいたグリッドのおかげでしょうか。
トップページの下部です。
スクロールすると[注目の作家]、[RANKING]、[SOLD OUT]、[USER VOICE]、[NEW WORKS]と更にコンテンツが続いています。
商品のジャンルもテイストも違うからか、それぞれに目移りしてどれもクリックしたくなっちゃいます。
( ﾟдﾟ)ﾊｯ!これってまさに、街なかで雰囲気に惹かれてフラッと入った雑貨屋さんの感覚！
商品を立たせるために装飾は必要最低限ではありますが、その必要最低限の中にも一工夫を感じます。
ただ情報が多いだけでなく検索機能も豊富でユーザビリティの点でもしっかり作ってあります。
これはウッカリ眺め続けてしまう。。
岡山市にある雑貨屋さんのオンラインストアです。
オンライン先行であっても不思議じゃないほど充実した内容です。
スクリーンショットでお見せできないのがもどかしい、楽しいスクロール＆ホバーアクション！
ロゴや商品周りの◯がぷにぷにふよふよします。
ページを読み込むと新着ニュースが降りてきて、一定時間経つと収納されます。
この新着ニュースと買い物カゴの部分だけ立体的に作ってあって、他と差別化されているなぁと思いきや、ページトップに固定されてスクロールしてもついてくるんです。
なるほど、これならコンテンツに埋もれずに目がいくなあ。
半フラットっていうべきなのか、リッチとフラットをいいとこ取りで使い分けてますね。
ECサイトの主役は何と言っても商品です。
実際に触れられないからこそデザインが必要です。
じゃあどんな風に見えたら商品をカゴに入れてもらえるんでしょうか。
ちょっとした環境や地域活動をベースに商品を製作販売しているサイトです。
その精神を反映しているみたいに、実直な、整った印象を受けます。
必要以上に文字を出しすぎず、言葉とモノの情報バランスがちょうどいい感じ。
商品詳細はこのようなデザインです。
丁寧に撮られた商品写真が、手にとって見るように商品の魅力を物語っています。
そしてテキストが控えめに、けれど的確に情報を提供してくれます。
すごく心地の良い買い物体験が出来そう…これがUXってやつ？！
こちらは先ほどのサイトよりも更にテキスト要素を排除してプロダクト一本で勝負しているサイト。
もちろん必要な箇所にはテキストがありますが、この潔さはすごい。
国内ではこういうサイトはあまりないような気がします。
商品詳細においても徹底されてます。
スクロールすると、それだけで絵になる商品写真がたっぷりとスペースを使って並べられています。
海外のECサイトデザインの◯個のポイントみたいな記事を読んだ時に、「ナビゲーションに言葉を使い過ぎない」的なことが書いてあった気がしますが、それの極みっていうか。
巧みな言い回しじゃなく商品そのものに目がいくし、販売する側も商品そのもので勝負してる所が好感にも繋がりそうです。
はい、出ました。フラットとしか言いようがない完全なるフラットなフラットサイト。
アマゾンの商品をピックアップしてキュレートしているサイトのようです。
この流行突っ走ってます感がたまらなくたまらないです。
カテゴリー別や、商品のテイスト別でソートして商品を見ることも出来ます。
詳細画面もオールフラットでいちいちカッコいいです。
ナビゲーションも洗練されてるし、ばっちりレスポンシブだし、作りたかったものがそこにある感じでなんかくやしい！
今やECサイトなんて山ほどありますが、ピックアップしてみた５つのサイトはどこか似た所があるように思います。
そもそもサイトのトーンがホワイト〜グレー基調なのが大きいのかもしれません。
色味は扱っている商品に任せてナビゲーションはミニマルに、ということなのでしょう。
そのような共通したテーマの元でも、表現の仕方は様々でした。
また、紹介した順序はテキスト情報の多さ順だったりもします。
日本のサイトはそういう風潮なのかテキスト要素がかなり多いように感じます。
それは悪いことではありませんが、後半の２サイトから学ぶ部分も大いにあると思います。
リッチデザインとフラットデザイン、テキストとプロダクト、ユーザビリティとミニマルナビゲーション。
バランスが大事だなぁと思いつつ、かっこいいカタカナ並べたかっただけです。
あと、あまり触れませんでしたが、それらが最終的に購入に結びつかなければならないわけで。
うーむ奥が深いです。
若干迷宮入りし始めたので今回はこの辺で。
最近コーディングを頑張ってるので、その中で気づいたことなども書いていけたらなと思ってます！押忍！
こんにちは！新人森田です。
街で新入生や新社会人な方々を見かけたり、新年度や新学期が始まったりと、新しいことづくめの季節になりましたね。 この空気だけで結構ワクワクしちゃうから春って好きです。
ではフレッシュな感じに今回もはりきって告知します！
なんと！ 真ん中バースデーのWebサイトをリニューアルしましたー！
どのへんが変わったのかというと、
以前はロゴの下にキャッチフレーズやデモ画面の紹介等を置いていたんですが、ちょっと散漫な印象が。。
あとは、新機能の実装するためのスペース確保をするために周辺要素をひとまとめにしてみました。
まずロゴとデモ機を合わせました。 App Storeのボタンもこのどこかに配置するとのことだったので、リボンをあしらって目立たせ＆まとまり感を演出。左側に空いたスペースには無料ダウンロードのメッセージを入れようと試行錯誤していたら、バッジ形式がよさげでした。フォントに他とは違うやわらかい明朝体を使って、ペタッと貼ったようなちょっと変わった質感を出しました。明朝体は単なる思いつきだったけど気に入ってます。 色はリボンと合わせて全体のトーンを整えつつ、これならキャッチコピーは上かな！という流れで完成！
情報が一カ所にまとまったことで、見てほしいポイントが絞られる効果もあったんじゃないでしょうか。
で、この下に空いたスペースに何を置いたのかというと。
はいっ！こちらです！
web上で真ん中バースデーをおためし体験できます！
名前は入れなくても調べられるので、是非使ってみて下さいね。
ただし、おためしは１日１回までなんですすいません。
もっと調べてみたい時はApp storeからアプリをダウンロードしていただけると嬉しいです！
単に説明だけだったWebページでしたが、内容が充実してきました。
前に見ていただいた方もよろしければ是非おためししていってみてください。
http://www.mannaka-birthday.com/
ただいまハレノヒでは現在進行形で真ん中バースデーアプリのアップデート作業を遂行中です。
プログラムの方は師匠がすでにバッチリ作り上げてくださっております。
私の方の素材準備が間に合うかどうかのギリギリなところですが、間に合わせてみせる…！
iPhoneだけどFacebookアカウント持っていなくて真ん中バースデーを調べられなかったという方！
お待たせしました！
次のアップデートでは、Facebookアカウントなしでもアカウント作成出来るように仕様変更いたします。
今までだいぶユーザーが限られてしまって申し訳なかったのですが、これでもう少し広げられるんじゃないかと思います。
また、Facebookアカウントなしでアカウント作成した場合は友だちが０人の状態からのスタートとなります。 そうなっても寂しくないように、もう１つのアップデートをご用意しておりますのでどうぞお楽しみに！！
今回リニューアルした真ん中バースデーwebサイトでおためししたい方は、
http://www.mannaka-birthday.com/
真ん中バースデーアプリをダウンロードしたい方は、
真ん中バースデー on the App store
どうぞよろしくお願いします！！
こんにちは！新人森田です。
エイプリルフールというイベントもありつつ、今日からいよいよ新年度ですね。
今年度はがっつり活躍するのが私の目標です。
その為にも修行あるのみ！
コーディングの修行をいくつかやったところで、Javascript（以下js）の勉強を再開しました。
というのも、流行っている内に一度はパララックス作ってみたいんです。
いまだに私のjsコードは師匠からのアドバイス９割で出来ているので、少なくとも今の自分のhtmlやcssの知識くらいに、試行錯誤しながら作っていけるレベルにはなりたいところ。
師匠に色々教わった中でも、今回は基礎中の基礎である“jsを書く時の注意点”をまとめてみます。
これを絶対守らなければだめだという訳ではなく、こういったことに気をつけると見やすいコードになるよという目印ですね。
ブログが練習ノートみたいになってますすいません。
htmlでは<div class=“”>のようにダブルコーテーションを使うのが一般的ですが、たとえばRubyではダブルコーテーションには特別な意味があったりします。様々な言語に共通して使えるという面もあり、特別な理由がない限りはシングルコーテーションを使うと無難そうです。
ただし文字列の中にコーテーションが使われる場合はダブルコーテーションで囲います。例：“I’m …”
{}で囲われるオブジェクトは、中身が複雑化しがちなため括弧の内側にスペースをあけて見やすくします。
また、オブジェクト内に複数の要素が入る場合はカンマで区切ったあとにスペースをあけて次を記述します。
一方、[]で囲われる配列にはスペースを使わずに記述します。
複数の要素を書く場合はオブジェクトと同じです。
ここではif文の引数という形で見てみます。
関数(function)の時も同じです。
ifと()の間にはスペースをあけて、()と{}の間は続けて書くことが多いです。
引数、つまり()内はスペースをあけません。
ifの後にelse ifを書く場合、if(){…}に続いていることを明確にするため}の隣にスペースをあけて書き始めます。
また、条件定義する時に同じ項目を使う場合は左項にまとめたりすると見やすいです。
≦≧はそれぞれ“<=”、“>=”と書きます。
関数定義に使う名前はキャメルケース（上の行）、それ以外の定義ではアンダーバーでつなげるスネークケース（下の行）を使います。
また、戻り値が真偽値の時は“is~”という形式でキャメルケースを使って名前を付けます。
計算式を記述する場合は、数字と記号の間にスペースをあけて書きます。
このとき記号は、足す“+”、引く“-”、掛ける“*”、割る“/”を使います。
通常の数式と同じで掛け算割り算が優先して行われるので、足してから掛けたい場合は()でくくります。
細かい部分ではありますが、細かい部分が疎かになっているとコードが膨大になった時に散々な目にあうかも知れません。
私が高校大学でやってきた弓道でも、どんなに的に当たっても型が疎かではいけませんでした。
出来る人っていうのはそういう部分からしっかりしてるから結果的に出来てるんじゃないかなと思ったり。
あとjsが思った以上に計算地獄で、もともとない数学の頭をフル稼働してしんどいです。
でも書いたものが稼働してるのを見るとそんなの吹っ飛んじゃうんですけどね！
早くコードがすっと頭に入ってくるようになりたいです。押忍！
こんにちは！新人森田です。
何気にマラソン大会を間近に控えた先週末、はじめて皇居ランしました。
走る前は諦める気満々でしたが、だんだん楽しくなってきて約5km完走できました！
恥ずかしながら人生初の快挙です。
筋肉痛がおさまったらまた走ろうと乗り気でいたら、日曜日に微熱とだるさに襲われるという重傷っぷり。
風邪引いたのかと思いました。
日頃の運動不足がたたりまくっています。。
なんとか良くなった今回は、サイトコピーの番外編な感じでクラス名の扱いについてまとめてみます。
最近取り組んでいるのは、BEMの命名規則を取り入れたやり方です。
師匠はCSSの命名規則をちゃんとやるためにBEMはいい選択だと思うそうです。
BEMとは。
アメリカのある企業でエンジニアと非エンジニア社員がhtml内の要素を正確に把握する為に作られたもので、お互いの意思疎通・情報共有を促進するためにお互いが歩み寄りながら出来たのだとか。
また、後から参入したメンバーにもすぐ理解しやすく、自分で読み返しても分かりやすいという利点もあります。
バリバリのエンジニアさんからすると美しくないようですが、上記のような利点はとても現実的と言えそうです。
BEMという命名規則とSass 3.3の新しい記法
こちらに分かりやすく且つ実践的にまとめてあります。
BEM
こちらが本家。英文ですが概要がつかめると思います。
ルールが分かったところで、前回作ったインデックスページを例にして見てみましょう。
内容を省略して大枠の部分のクラスを取り出すとこんな感じです。
hamlという書き方で作ったので<div>などが省略されてます。
インデントで入れ子状態を表していて、閉じタグ不要なのが楽々です。
一番上の.tosakenで囲っているのは、他ページとの名前のバッティングを回避するためです。
以下の部分は実際の表示と照らし合わせて見ると分かりやすいかもしれません。
.sectionで行を分けて、.section__innerで内側の要素を囲っています。
ヘッダー部は.section__inner––header（innerがheaderの状態）と書いて差別化してあります。
コンテンツ部はアイコンを.section__label、内容を.section__contentでまとめて、この枠組みを繰り返しています。
BEMで正確に追おうとすると、例えばロゴは.section__inner––header__logoとなるかと思いますが、大事なのは正確さではなくて分かりやすさです。
ロゴといえばこのページではタイトルロゴしかあり得ないので独立した.logoになっています。
クラス名とスタイルが対応していれば内容はどうであれデザインには反映されるわけで、正確すぎるのも自己満足の極みというか、それを言っちゃうと元も子もないんですが。
要するに誰が見ても分かりやすく書こう！という意識が大事ということです。
正解例を挙げたあとで私が最初に書いていたコードを再現してみます。
全体の構成的には全く同じで、これにスタイルを当てれば実際の表示も変わりません。
BEMの命名規則にも従った書き方です。
ではなにが良くないのかというと、クラス名が内容に引っ張られすぎている点です。
.header（headerタグでも可）でコンテンツと差別化。
.companyというクラスは、その中身が会社情報であったことから付けました。
それぞれの要素の役割をもっと俯瞰して見てみると、区分けするパーツなのに.companyはちょっとおかしい。
icon、addressといった部分も直接的すぎます。
枠組みはあくまで枠組みとしてクラス名を付けることで、どんなサイトにも適応できるコーディングが出来上がるんですね。
ビフォーアフターはこんな感じです。
スッキリまとまりました！
サイトコピーの作業の間に師匠からクラス名のご指摘をがっつり頂いたので、復習の意味も兼ねてまとめてみました。
BEMで追う範囲や汎用的な名付け方を見極めるにはまだ修行が足りないようです。
あと“__”と“––”の使い分けもまだまだ甘かったりします。
この辺はたくさん読んだり書いたり数をこなして慣れていくに限るんじゃないかと思います。
空いた時間でもっとガツガツ書かねばー。
というわけで今回はこの辺で終わります。押忍！
こんにちは！新人森田です。
そろそろ桜も咲いてきましたね。お花見したいです。
今年はどのお花見スポットに行こうかなあ。
さて、それでは前回に引き続きサイトコピーしてコーディングの修行をしていきたいと思います。
今回もギャラリーサイトから気になるサイトを見つけてきました。
株式会社トサケンのオフィシャルサイトです。
内容はシンプルですが、縦横100%に引かれたこのラインをどうやって表現するかが鍵になりそうです。
はじめ私は縦100%のborderをもった空divをposition: absoluteで置いてから中を作り込んでいこうと考えました。
でもpositionで場所指定すると、何層にも重なった要素のレイヤーの一番上にきてしまいます。
見た目だけ同じになっても、リンクが機能しなかったりとサイトとしては成立しませんでした。
最終的にこんな風に整理してみました。
まずborder-bottomをもった横100%のブロックで要素を横に分割。
その中に横幅が等しいブロックを入れ子にしてborder-left,rightをつけて線がつながっているように見せる。
内容は更にその中に記述していく。
という感じです。
一枚目のスクリーンショットをよく見ると、“NEWS”の上に黒丸が表示されています。
これはホバー時に表示されて、普段は非表示になってます。
森田：
displayで表示切り替えだと要素の高さ分ずれたりするだろうし…
htmlの方に●って書いておいてfont-colorを白→黒にすればいっか！
師匠：
それだと本来必要ないものがhtml上に記述されることになるよね。
こういう時は疑似要素を使うといいよ。
疑似要素とは。
私がよく見るのは“:before”、“:after”あたりです。
float解除とかアイコンフォント用に使っていますが実はよく分からずに使ってました。
contentと併せてコード上に実体はないけど仮の要素を生成する仕組みのようです。
どうやらこれを極めると表現の幅がグッと広がるらしいです。面白そう！
その第一歩として:beforeを使って作ってみました。
10pxの円をpositionで位置指定しています。
文字のクリッカブル領域内だと近い気がして、ちょっとはみ出してます。
これが気になる人は文字のpaddingを調整すればボックスに収まると思います。
ちなみに:hoverは疑似クラスといって、要素のスタイル指定を表示するための条件定義のようなもののようです。
これも今まで何気なく使ってきてました。そういうことだったのか。
ヨコ幅の中央だったらtext-align: center;もしくはmargin: 0 auto;でそんなに苦労なく揃えられます。
でもそれがタテになるとヨコほど一筋縄じゃなかったりします。
タテの高さを揃える為に使うスタイルはvertical-alignなのですが、これが子要素に効かないからです。
vertical-alignを使って一発で中央揃えしたい場合は“display: table”の出番です。
ブロックをテーブル扱いにすると楽に解決できちゃうんです。
このように親要素をdisplay:table;にして、子要素をdisplay:table-cell;にすれば楽でした。
また、table-cellのブロックを分けることで３行の文字列に対してアイコンが中央に来てくれるという嬉しいおまけ付き。
なるほどこういうやり方もあるんですね。
アイコンはFontawesomeから同じ意味合いのもので代用してあります。
これで完成！と思って全体のチェックをしていると、
あれ。borderが1pxずれてる…。
最初はborderの位置を%で指定したからウインドウ幅で誤差が生じているのかと思いました。
（実際ウインドウ幅によって合ったり合わなかったりしてました）
でもどのクラスも同じスタイルを継承してあるので、ずれるはずがありません。
違いがあるとすれば、上のdivはdisplay:block;、下のdivはdisplay:tableだということです。
結果的に全てをdisplay:tableにすることで解決しましたが、
もしかするとそれぞれの座標の出し方がちょっと違うのかもしれません。
ここを直して、フォントの調整もして改めて完成です。
一応レスポンシブになってます。
1230pxくらいのウインドウで比べるとちょっと似てる気がします。
というわけで、インデックスページをコピーしてみました。
シンプルなサイトではありましたが、タイトルロゴ・メニュー・コンテンツと役割の異なる要素が盛り込まれていて、前回よりボリュームのある内容になったんじゃないかと思います。
大体ひととおり作れるようになったかなとサクッとやるつもりでいたら、初歩的なことをいくつも気付かされました。
クラス名の付け方も根本的に見直したりして、やっぱりまだ足りないことだらけです。
クラスの扱いに関して気付いたことなどはまた別でまとめたいと思います。
あとは、当たり前といえばそうなんですが、やっぱりやるのとやらないのとでは全然違います。
出来そうなところから少しずつでもコーディングしてくのがホントに大事だなと思いました。
手をうごかしてこー。おす！
