以前ご紹介したデザインの4原則の中から、今回は近接について具体例を挙げながら詳しく紹介していきます。
デザインの4原則についてはこちらの記事で詳しく紹介しているので、初めての方は合わせて読んでみてくださいね♪
もくじ
近接とは
近接とは、情報をグループ化することです。
関連する情報は近くに、関連の弱い情報は離して配置することで、情報のグループを視覚的に表現します。
今回はメニュー表を例に近接について学んでいきましょう。

近接の手順
要素の役割を把握する

まずはじめに、それぞれの要素の役割を把握します。
ここでは、メニュー表の中に3つの要素があることが分かります。
- メニューの種類を示す見出し(青)
- メニューのイラスト(緑)
- メニューの名前(オレンジ)
関連する要素をグループにまとめる

要素それぞれの役割が分かったら、関連する要素をグループにまとめます。
まず、メニューのイラストとイラストに対応する名前でグループができあがりますね。(緑:メニューグループ)
さらに、メニューの種類ごとにまとめることで大きな3つのグループに分けられます。(青:メニューの種類グループ)
要素同士の距離を調整する

グループ分けができたらつぎのルールで要素の距離を調整して、情報のグループを視覚的に認識できるようにします。
- 同じグループの要素は近づけて配置する
- 異なるグループの要素は離して配置する
例では、同じ種類のメニュー同士の距離は緑色、異なる種類のメニューの距離はオレンジ色で表現しています。
近接の表現方法
要素の距離を調整するほかにも、つぎの方法で情報のグループを表現できます。
線で区切る

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

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

背景の色を変えて、グループを表現しました。今回はそれぞれ異なる色を使用しましたが、色の濃淡・明暗でグループの階層を表現することもできます。
おわりに
今回はデザインの4原則の中から「近接」について詳しく紹介しました。
要素の役割ごとにグループ分けをして、距離を調節することで、情報のグループを表現できることが分かりましたね。
デザインの4原則を活用して、より伝わりやすいデザインを目指しましょう☺︎