近接

定義

近接とは、たがいに近くに置かれた要素を、目が自然にひとつのかたまりとして まとめて認識する性質のことです。関連するものどうしはぴったり寄せ、関係のない ものとははっきり離してあげると、見出しや区切り線をわざわざ引かなくても、どれと どれがひとまとまりなのかが自然と伝わります。たとえばフォームで、ラベルをすぐ下の 入力欄にくっつけて置くと、その二つがひと組として読まれ、次の項目との間隔を 広げれば、別々の項目だということも同時に伝わります。こうして近接は、距離という たったひとつの手がかりだけで画面の構造を静かに伝える方法であり、ゲシュタルトの 四つの原則のなかでも、目の働き方をいちばん直感的に見せてくれる原理でもあります。

なぜ重要か

画面にはたいてい情報が多く、ユーザーはそれを一文字ずつではなく、かたまり単位で ざっと目で追っていきます。近接がきちんと守られていれば、目は関連する項目を すぐにひとつにまとめて読み取り、ずっと少ない労力で全体の構造をつかめます。逆に すべての間隔が均一で、何と何がひと組なのか分からないと、ユーザーは毎回そのつど 関係を自分で推測しなければならず、その小さな負担が項目ごとに積み重なって、画面 全体が雑然として見えてしまいます。近接の大きな利点は、線や枠、背景色といった 視覚的な要素をひとつも足さずに情報を整理できることです。おかげで画面は軽いまま 保たれつつ関係がくっきりし、要素が増えても構造が崩れにくいので、保守や拡張の面 でもずっと有利になります。

よくある間違い

• すべての要素の間隔を同じにしてしまうケースです。間隔が均一だとグループの境目が 消えてしまい、ひとまとまりであるべき項目と、まったく関係のない項目が入り混じって 見え、ユーザーはどこまでがひとかたまりなのかを毎回あらためて判断させられます。
• ラベルと入力欄の間は広げているのに、次の項目との間隔をかえって狭くしてしまう、 距離を逆に付けてしまうケースです。すると、ラベルが見当ちがいの入力欄にくっついて 見えてフォームを読み違え、入力ミスにつながることもあります。
• グループを分けるといって、間隔はそのままにして区切り線ばかりをたくさん引いて しまうケースです。線が増えるほど画面はごちゃつくのに、じつは余白を調整するだけで すっきり片づく関係がほとんどです。

実務のヒント

• グループとグループの間隔を、グループの内側の間隔よりはっきり大きく取りましょう。 この対比ひとつを守るだけで、線や背景なしに余白だけで、どこまでがひとまとまりなのかを 正確に伝えられます。
• 関係が分かりにくいときは、区切り線や背景色を足す前に、まず間隔から調整してみて ください。距離で解決できれば画面はぐっと軽くなり、それでも足りないときだけ最小限の 線を重ねれば十分です。
• 間隔の値はそのつど決めるのではなく、あらかじめ決めた余白スケールのなかから選び ましょう。内側と外側の間隔をそれぞれ決めておけば、グループ構造が画面全体でぶれずに 一貫して保たれ、あとから項目が増えても同じルールをそのまま当てはめられるので、 管理がずっと楽になります。

関連概念