今更聞けないデザインの基本原則「近接」

今回は、案件において様々な上流工程を経て、いよいよ表現に落とし込む際＝狭い意味でのデザインを行う際に扱う「基本原則」のお話をしようと思います。

デザイン基本原則「近接」

人は距離が近い情報に「関係があるもの」と認識する習性があります。例えば、若い男女が一定の距離を開けて歩いている場合は「カップル」には見えませんが、寄り添って歩いているとカップルに見えます。つまり、似たような情報の距離が近ければ、１つのグループとして直感的に感じるのです。

つまり、関連している情報は距離を近づけてグループ化することで、見ている側はグループを直感的に判断でき、「整理された安定感」を感じます。逆に、関係しない情報は遠ざけて配置します。このようなレイアウトの原則を「近接」といいます。

以下は、近接ができておらず、読めはするが...というレイアウト。

以下ように近接を意識して距離を調整すると、見やすくなりますね。

デザイナーはもとより、見る側の事を考えている人ならば、当たり前のようにおこなっている事ですね。

これが、適当な営業やディレクターが作った、レイアウト完全無視のパワポなんかを見ると、まあ近接使えてない。

間隔を意識すること

入力フォームを例にします。互いに関係する「タイトル（名前）」とフォームの間隔を狭めることにより、情報をグループ化します。

次に、「名前」「メールアドレス」「郵便番号」などの異なる要素を遠ざけて、関係性を感じさせないようにレイアウトします。このように、グルーピングすることは、「狭める」だけではなく、意識的に「遠ざける」ことも重要ですね。

近接を意識しないとUIを誤る

なんだこれだけのことか、と、皆さん思うでしょう。しかししかし、これだけのことを全然見落としたり、できてないケースが多いんですよ。
ポイントは、物理的な距離だけを考慮すれば良い、訳ではないという点。

アプリやサイトのアカウント登録画面を例に見ましょう。

この画面のUIの間違いがわかりますか？

アカウント登録画面に入ったユーザーは、上から順にフォームを入力するでしょう。ということは、「登録」ボタンはフォーム入力後、利用規約にチェックをつけた後にないとユーザーが一瞬迷ってします。迷うということは、ストレスを感じるということです。小さなUIと言えど、ユーザーの信頼をそこない、立場が不利になることは避けないといけません。

「登録」ボタンはこのような位置にすることが望ましいですね。

上記は物理的な近接というよりは、ユーザーの導線を考慮した「意味」の近接です。

けっこうやってしまいがちな情報設計ミスの例でした。

サンプルは、部分的にお見せしているので間違いに気づきますが、これが実際の案件になると、情報量が膨らみ、こういった基本が疎かになりがちです。デザインのチェックをする立場のチーフやADやディレクターの方は、当然のようにこの辺りは指摘をいれて、デザイナーや情報設計する方は是非今一度意識するようにしてもらえたらと思います！

こういうデザインの基本なんかも書いていこうと思いますので、よろしくお願いします。

------------

ユウイチローデザインカレッジというチャンネルにて
YouTubeでデザインにまつわるお話をさせてもらってるのでそちらもよろしくお願いします！