見る人が勘違いさせてしまうような表現やレイアウトは、それだけで悪いデザインになってしまします。
情報を正しく伝えることはデザインをする上でもっとも重要なことです。
今回はデザインの基本である「近接」「整列」「反復」「対比」の4原則の
「近接」のお話したいと思います。
Contents
近接とは
例えば下の写真で、左は4人のグループに見えますが、右の写真は2人の別グループに見えるのではないでしょうか。
人は近くにあるもの同士は、1つのグループとして認識しようとします。
「近接」とはこの性質をうまく利用して、情報をグループ分けすることで、見る人に正確な情報を素早く伝えることができます。
具体的には、関係性の高い要素同士は距離を近づけて配置し、そうでない関係性の低い要素は離して配置することで、理解しやすいデザインをを作ることができます。
デザインの中で明確にグループ分けをすることで、見る人が欲しい情報をすぐ探せたり、直感的に内容を理解できる良いデザインになります。
グループで分ける
下の画像は「近接」を意識しないでレイアウトしたものです。
紙面の上下見えない状態だと、どのコピーがどの色の説明かわかりにくく、非常に混乱するレイアウトになってしまします。
下の画像は色とコピーの間に適度な余白を開けました。
ここでは「色」に対しての説明の「コピー」が一つのグループなので、そのグループがわかるようにレイアウトをしました。
どの色のコピーかが一目でわかって、みやすくなりました。
近接のコツ
実際のデザインでは、要素がいくつか存在します。
どのようにグループ分けするかによってみやすく、理解しやすレイアウトになるかが決まります。
近接のコツは次の3点です。
-
関連性の高い要素同士をグループでまとめる。
-
関連性の低いグループ同士は余白をあけてつながりを持たせない
-
グループはひとかたまりに見えるようにレイアウトをする。
例えば下の名刺場合、
- 会社名
- 肩書き・名前
- 住所・電話番号・Email
この3グループに分けてレイアウトしました。
それぞれのグループの間に余白を入れることでよりわかりやすく、情報を伝えることが出来ます。
下の画像は文字だけのレイアウトですが、グループ分け、間に余白を入れることで、カテゴリーが明確になり、わかりやすいレイアウトになりました。
下の画像は個々の【色とコピーのグループ】とトーンの【上下の大きいグループ】に分かれています。
左は各色の説明はグループになっていますが、大きなトーンのグループが区別されていませんので全て同じグループと認識してしまいます。
右の画像は上下の余白をあけ、罫線でより明確に分け、大きなグループが２つあることがわかるようになりました。
このように余白だけでなく、「罫線」「色」などでグループを明確にする方法もあります。
おすすめの本
デザインの基本がとてもわかりやすく解説されている本です。これからデザイナーを目指す方、独学でデザインを勉強したい方にはとてもおすすめの本です。
まとめ
いかがだったでしょうか。
例えば鉛筆が刺さっているペン立てにスプーンが1本刺さっていたら、、なんで？って思いますよね。
デザインも同じで、グループの中に関連性の低いものが混ざっていると、見る人を迷わせてしまいます。
また、ちゃんとしたグループを作るには「整列」も重要が要素です。きちんと「整列」ができて初めてグループとして認識されます。
「整列」の記事も参考にしてください。
デザインも整理整頓が大切なんですね。
今回は基本である「近接」「整列」「反復」「対比」の4原則の「近接」の解説をしました。合わせて4原則の記事も参考にどうぞ。より理解が深まるかと思います。
参考になれば幸いです。
