デザインの今更聞けないキホン！〜レイアウト編〜

こんばんは！
静岡で初めて友達ができそうな、河村です。

たまに行くライブバーの店長に、一緒にバンドをやらないかと声をかけていただきました。
静岡に来てから2年以上友達0だったので、これは嬉しい＾＾

しかも、メンバー全員女性です。
ガールズバンドってちょっと憧れだったんですよね〜
（年齢的にガールズではない気はするが）

先日顔合わせしましたが、気が合いそうな感じで一安心。
楽しみが増えました。

初心に立ち返る

大人になってからできる友達は貴重ですよね。
たまに機会があると、子供の頃ってどうしてたんだっけ？とか思っちゃったり。

常に新しい知識を追い求め、先に進んでいくことも大事。
ですが、時には過去を振り返り、忘れていることを思い出すことも時には大事かも。

ということで、ここで改めて「デザインのキホン」をおさらいしてみましょう！
今回は「レイアウト編」です。

なお、今回のアイキャッチは藤原先生に作っていただきました。

レイアウトとは

デザインの本質は「情報をわかりやすく伝えること」にありますよね。

どんなにおしゃれでも、伝えたいことが伝わらなければ意味がありません。
特にWebサイトでは、訪問者が一瞬でサイトの内容（概要）を理解できるような工夫が必要です。

その工夫の1つが「レイアウト」（＝情報を見やすく配置すること）です。

レイアウトの4原則、覚えていますか？
恐らくぬるま湯デザイン塾で皆さん学んでいるはず。

キホンであり非常に重要なことなので、サクッと振り返っていきますよ！

原則①近接

一言で言えば
「関連する情報は近づける」
です！

逆に「そうでないものは遠ざける」ことも必要です。
「余白の取り方」がポイントになります。

Appleのサイトのフッターなどが美しく整理されていると、
よく参考に挙げられますね。

あとはこういうデザインの時にも必ず意識すべきことです。

新カリキュラムのL5で制作する自己紹介ページの「経歴」セクションです。
赤い枠がひとまとまりの情報なので、青い余白よりも赤い余白を小さくします。

この画像内には収まっていませんが、
セクション間の余白は青い余白よりも大きくする必要があり、
デモサイトもそのようになっています。

細かいですが、余白1つに対しても「なぜそうするのか」をしっかり考えて、数値の設定をしましょう。

原則②整列

一言で言えば
「見えない線で揃える」
です！

先ほどの自己紹介ページの「経歴」も、
見えない線で整列されています。

線を可視化するとこんな感じ↓

実際に線を引いてあるわけでなくても、
見えない線で整列されているだけで情報がスッキリまとまって見やすくなります。

原則③反復

一言で言えば
「特徴的な要素を繰り返し使う」
です！

例えば自己紹介ページでは、
セクションの見出しが「40pxの青（#046bd2）」で統一されています。

これにより、全体に一貫性が生まれて
意味がわかりやすくなります。

仮に全ての見出しの色が違ったり、サイズが違ったりしたら、どうでしょう。
なんで赤だったり青だったり緑だったりするんだ？
色やサイズによって何か違いがあるのか？？
と、無駄に意識が割かれませんか？

情報を正確に伝えるには、
「余計なことを考えさせない」ことも大切です。

原則④強弱・コントラスト

一言で言えば
「情報の優先度を明確にする」
です！

またまた自己紹介ページの「経歴」セクションを例にします。

このセクションで読んでほしい優先順位は
1. セクション見出し
2. 小見出し
3. 文章
です。

見ればわかるよ、って思うかもしれません。
この優先順位に基づき、強弱がつけられているからこそ、見ればわかるわけです。

バナー制作やLPのFV制作なんかでも同じで、
「どこを1番見てもらいたいか？」
「それ以外の箇所の優先順位は？」ということを意識してデザインしますよね。

Webサイトのレイアウトでも、情報の優先度を明確にして
強弱・コントラストをつけることが大切です。

実装するまでがデザイン

いかがでしたか？

しっかり身についている人にとっては、
あたりまえ体操〜♪と聞こえてきたかもしれません。

しかしEBC/TWCで講師をしていると、
実装するとなった途端にこれらが意識できなくなってしまう人が多くいるように感じます。

家に帰るまでが遠足、
実装するまでがデザインです。

もう一度しっかりキホンを確認して、
実装にも反映できるようになりましょう！

余談

これ、浜松駅の新幹線ホームの案内板なんですが、
めちゃくちゃわかりにくくないですか？

なぜわかりにくいのか、
ここまで読んでいただいた皆さんなら理由の説明ができますね？

WhyをBecause、クライアントワークで非常に重要です。

ぜひ、わちゃわちゃ会に来て、講師をつかまえて説明してみてください＾＾