以前ご紹介したデザインの４原則の中から、今回は近接について具体例を挙げながら詳しく紹介していきます。
デザインの４原則についてはこちらの記事で詳しく紹介しているので、初めての方は合わせて読んでみてくださいね♪
もくじ
近接とは
近接とは、情報をグループ化することです。
関連する情報は近くに、関連の弱い情報は離して配置することで、情報のグループを視覚的に表現します。
今回はメニュー表を例に近接について学んでいきましょう。
近接の手順
要素の役割を把握する
まずはじめに、それぞれの要素の役割を把握します。
ここでは、メニュー表の中に３つの要素があることが分かります。
- メニューの種類を示す見出し（青）
- メニューのイラスト（緑）
- メニューの名前（オレンジ）
関連する要素をグループにまとめる
要素それぞれの役割が分かったら、関連する要素をグループにまとめます。
まず、メニューのイラストとイラストに対応する名前でグループができあがりますね。（緑：メニューグループ）
さらに、メニューの種類ごとにまとめることで大きな３つのグループに分けられます。（青：メニューの種類グループ）
要素同士の距離を調整する
グループ分けができたらつぎのルールで要素の距離を調整して、情報のグループを視覚的に認識できるようにします。
- 同じグループの要素は近づけて配置する
- 異なるグループの要素は離して配置する
例では、同じ種類のメニュー同士の距離は緑色、異なる種類のメニューの距離はオレンジ色で表現しています。
近接の表現方法
要素の距離を調整するほかにも、つぎの方法で情報のグループを表現できます。
線で区切る
線で区切ることでも、グループの境目がより分かりやすくなります。線の太さや濃さを変えることで、グループの階層も明確になりましたね。
線で囲む
線で囲むとグループのまとまりがより分かりやすくなりましたね。
色分けする
背景の色を変えて、グループを表現しました。今回はそれぞれ異なる色を使用しましたが、色の濃淡・明暗でグループの階層を表現することもできます。
おわりに
今回はデザインの４原則の中から「近接」について詳しく紹介しました。
要素の役割ごとにグループ分けをして、距離を調節することで、情報のグループを表現できることが分かりましたね。
デザインの４原則を活用して、より伝わりやすいデザインを目指しましょう☺︎
