デザインの4原則【近接】で情報のグループを表現しよう!

以前ご紹介したデザインの4原則の中から、今回は近接について具体例を挙げながら詳しく紹介していきます。
デザインの4原則についてはこちらの記事で詳しく紹介しているので、初めての方は合わせて読んでみてくださいね♪

近接とは

近接とは、情報をグループ化することです。
関連する情報は近くに、関連の弱い情報は離して配置することで、情報のグループを視覚的に表現します。

今回はメニュー表を例に近接について学んでいきましょう。

近接の手順

近接の手順

要素の役割を把握する

要素の属性を把握する

まずはじめに、それぞれの要素の役割を把握します。

ここでは、メニュー表の中に3つの要素があることが分かります。

  • メニューの種類を示す見出し(青)
  • メニューのイラスト(緑)
  • メニューの名前(オレンジ)

関連する要素をグループにまとめる

関連する要素をグループにまとめる

要素それぞれの役割が分かったら、関連する要素をグループにまとめます。

まず、メニューのイラストとイラストに対応する名前でグループができあがりますね。(緑:メニューグループ)
さらに、メニューの種類ごとにまとめることで大きな3つのグループに分けられます。(青:メニューの種類グループ)

要素同士の距離を調整する

グループ分けができたらつぎのルールで要素の距離を調整して、情報のグループを視覚的に認識できるようにします。

  • 同じグループの要素は近づけて配置する
  • 異なるグループの要素は離して配置する

例では、同じ種類のメニュー同士の距離は緑色、異なる種類のメニューの距離はオレンジ色で表現しています。

近接の表現方法

要素の距離を調整するほかにも、つぎの方法で情報のグループを表現できます。

線で区切る

線で区切る

線で区切ることでも、グループの境目がより分かりやすくなります。線の太さや濃さを変えることで、グループの階層も明確になりましたね。

線で囲む

線で囲む

線で囲むとグループのまとまりがより分かりやすくなりましたね。

色分けする

色分けする

背景の色を変えて、グループを表現しました。今回はそれぞれ異なる色を使用しましたが、色の濃淡・明暗でグループの階層を表現することもできます。

おわりに

今回はデザインの4原則の中から「近接」について詳しく紹介しました。
要素の役割ごとにグループ分けをして、距離を調節することで、情報のグループを表現できることが分かりましたね。
デザインの4原則を活用して、より伝わりやすいデザインを目指しましょう☺︎

< Blog Top