【UXデザイン第5段階: 表層】デザインの４大原則「02. 近接」グループ化の使用例①

前回はデザイン4大原則の2つめ「近接」についてご紹介をしました。近接は「関連する要素をグループ化し、ほかの要素より近くに配置すること」でした。

今回からは実際のデザインに近いかたちで「近接」の使用方法をみていきましょう。第1回目となる今回は名刺の例を使用します。

まずはこちらの名刺を見てみましょう。

名刺の主役となる名前を中央に、その周りに会社の情報を配置しています。まんべんなく要素があるので、一見するとバランスよく見えるかもしれません。

しかし住所や電話番号などの要素が四方に散らばっており、読む際に視線があちこちに動いてしまいます。さらに会社の情報が一つにまとまっていないため、住所や電話番号などの要素が、会社の情報なのか、山田さん個人の情報なのかもわかりづらいのではないでしょうか。

次にこちらの名刺を見てみましょう。

この名刺では近接の原則に沿って、各要素をグループ化しています。四方に散らばっていた会社の情報を一つにまとめて配置されています。先ほどの例と比べると「名前」「会社の情報」「シンボルマーク」という情報の構造がわかりやすくなっているかと思います。

このように比較してみると、グループ化がされていない場合とされている場合とでは、情報の伝わりやすさがまったく違うように感じられるのではないでしょうか。情報に誤解が生まれたり、いろんな場所に目線が動いて読みづらかったり、伝わりにくいデザインにならないよう、近接の原則で情報をグループ化して配置しましょう。

今回は名刺を例に使用して、近接の使用方法をご紹介しました。次回も引き続き、デザイン4大原則「近接」の使用方法をみていきます。

---

皆さまからのリクエストも募集しています。 Webサイトの構築に関わるこんな情報が知りたい！などご希望がありましたら、是非こちらからリクエストをお願いします！