第2回では、第1の足である「色彩」について書きました。
色は、好き嫌いで選ぶものではなく、目的に合わせて選ぶもの。
そして、色彩学や色彩心理、視認性や可読性を学ぶことで、感覚に根拠を持たせることができる。
それが、前回のテーマでした。
今回は、第2の足である「構成」について考えます。
構成というと、難しく聞こえるかもしれません。
しかし、基本的な考え方はとてもシンプルです。
- 揃える
- まとめる
- 余白をつける
- 強調する
この4つです。
構成とは、見た目をきれいに並べることだけではありません。
情報の優先順位を決め、見る人が迷わず理解できるようにするための設計です。
構成は、情報の優先順位を決めること
デザインでは、よく「バランスが悪い」「なんとなく見づらい」と言われることがあります。
しかし、その原因は単に見た目の問題ではないことが多いです。
- 何が重要なのか。
- 何から見ればよいのか。
- どこを押せばよいのか。
- どの情報同士が関係しているのか。
それが整理されていないと、人は迷います。
構成とは、情報の順番と関係性を整理することです。
すべての情報を同じ大きさ、同じ強さで並べてしまうと、見る人は何を優先すればよいのかわかりません。
つまり、構成とは「きれいに置くこと」ではなく、伝わる順番を作ることです。
揃える：視線の迷いを減らす
構成の基本のひとつが「揃える」ことです。
- 文字の左端を揃える。
- 画像の位置を揃える。
- ボタンの幅を揃える。
- 見出しと本文の開始位置を揃える。
たったそれだけで、画面や紙面は見やすくなります。
なぜなら、人の目は、揃っているものを自然にまとまりとして認識するからです。
逆に、少しずつズレた要素が多いと、見る人は無意識に違和感を覚えます。
どこから読めばいいのか、どこに視線を動かせばいいのかがわかりにくくなるからです。
揃えることは、単なる見た目の整えではありません。
視線の道を作り、読む人の負担を減らすための設計です。
まとめる：関係のある情報を近づける
次に大切なのが「まとめる」ことです。
関係のある情報は近くに置く。
関係の薄い情報は離す。
これだけでも、伝わり方は大きく変わります。
たとえば、商品名、説明文、価格、購入ボタンが離れて配置されていたら、ユーザーはそれらが同じ商品に関係する情報なのか迷ってしまいます。
逆に、関係する情報がまとまっていれば、ユーザーは自然に理解できます。
まとめることは、情報の関係性を見える形にすることです。
これはWebサイトでも、パンフレットでも、資料でも同じです。
デザインは、ただ情報を置く作業ではありません。
情報同士の関係を整理し、見る人が理解しやすい形に変換する作業です。
余白をつける：理解するための間を作る
余白は、何もない場所ではありません。
余白には役割があります。
- 情報を区切る。
- 視線を休ませる。
- 重要なものを目立たせる。
- 読みやすくする。
- 高級感や安心感をつくる。
余白が足りないと、情報は詰まって見えます。
詰まって見えると、読む前から疲れます。
逆に、適切な余白があると、情報のまとまりがわかりやすくなります。
余白は、デザインをおしゃれに見せるためだけのものではありません。
見る人が情報を理解するための「間」です。
会話にも間があるように、デザインにも間が必要です。
余白をつけることは、情報を減らすことではありません。
情報を正しく伝えるために、呼吸できる空間を作ることです。
強調する：全部を目立たせると、何も伝わらない
構成で特に重要なのが「強調」です。
デザインの現場では、よくこう言われます。
「これをもっと目立たせたい」
「あれも大事だから大きくしたい」
「この情報も埋もれないようにしたい」
もちろん、どの情報も大切です。
しかし、すべてを強調すると、結果的に何も強調されません。
大きな文字。
太字。
赤い色。
派手な背景。
目立つアイコン。
強い装飾。
これらをすべて使うと、見る人は何を最初に見ればよいのかわからなくなります。
強調とは、ただ目立たせることではありません。
情報に優先順位をつけることです。
一番伝えたいことは何か。
次に見てほしいことは何か。
最後に確認してほしいことは何か。
その順番を作るために、文字の大きさ、太さ、色、余白、配置を使います。
構成が悪いと、誤解や迷いが生まれる
構成は、単なる見栄えの問題ではありません。
構成が悪いと、見る人は迷います。
- 重要な注意事項を見落とす。
- 押すべきボタンがわからない。
- 申し込みの流れを誤解する。
- 必要な情報にたどり着けない。
- 優先順位を間違えて判断してしまう。
こうしたことは、ユーザーにとって大きな負担になります。
場合によっては、損失やトラブル、事故につながることもあります。
だから、構成は軽く扱ってはいけません。
デザインは「なんとなく見やすい」では不十分です。
なぜ見やすいのか。
なぜ伝わるのか。
なぜ迷わないのか。
そこを説明できることが大切です。
構成は、非デザイナーにも必要な考え方
構成は、デザイナーだけのものではありません。
資料を作る人。
Webページを発注する人。
チラシを確認する人。
サービスの導線を考える人。
社内で情報を伝える人。
すべての人に関係があります。
- 情報をどう並べるか。
- 何を先に伝えるか。
- どこを強調するか。
- どこに余白を置くか。
これらは、コミュニケーションそのものです。
構成を理解すると、「なんとなく見づらい」という感覚を、言葉にできるようになります。
「左端が揃っていないから読みづらい」
「関係する情報が離れているから理解しにくい」
「余白が足りないから詰まって見える」
「全部が強調されていて優先順位がわからない」
こう言えるだけで、デザインの会話は大きく変わります。
第2の足としての構成
構成とは、情報を美しく並べることだけではありません。
- 揃える
- まとめる
- 余白をつける
- 強調する
この4つを使って、情報の優先順位と関係性を整理することです。
- 見る人が迷わないようにする。
- 必要な情報に自然にたどり着けるようにする。
- 誤解や見落としを減らす。
- 正しく判断できるようにする。
それが、私が考える「第2の足：構成」です。
構成は、デザインの土台です。
色が良くても、文字が美しくても、構成が崩れていれば伝わりません。
虹色のタコは、色を理解するだけでは不十分です。
情報をどう並べ、どう見せ、どう伝えるかを考える必要があります。
次回は、第3の足である「視覚生理」について考えていきます。
人の目は、どのように情報を見ているのか。
なぜ見やすい、読みにくい、目立つ、目立たないと感じるのか。
次回は、人間の視覚の仕組みから、デザインを考えていきます。
コメント