近接(ゲシュタルト原則)
Proximity

距離が近いものを1つのグループとして認識する傾向

物理的に距離が近いもの同士を、関連性があると認識する傾向。色や形、サイズや要素が異なっていても、距離が近ければ1つのグループとして認識する。

近接はグラフィックデザインやUIでも利用されており、意図的に余白を作り、グループを認識して、見やすく使いやすい設計を行うことができる。近接を効果的に使うために、適切に情報設計していることが重要だ。

近接

色も形も違う図形が並んでいるが、左右2つのグループがあるものとして受け取られる

近接は、人が情報を目にして認識する際の特徴をまとめた「ゲシュタルト原則」のひとつである。

1910年にチェコ出身の心理学者Max Wertheimerマックス・ヴェルトハイマーらを中心に仮現運動というアニメーションの研究が始まる。それを基に1923年「ゲシュタルト原則」の基礎となる6原則の近接・類同・連続・閉合・共通運命・良い形が発表された。

Max Wertheimer(マックス・ヴェルトハイマー)

Max Wertheimer
(マックス・ヴェルトハイマー)
引用:Max Wertheimer – Wikiquote

近接を使って誤解なく情報を伝える

関係のない要素同士が近づくと、ユーザーの誤解を招いてしまう。近接を使うことで、読み手に誤解なく伝えることができる。フォームを例に、近接の効果を説明する。

誤解してしまう例(クレジットカード発行申し込みフォーム)

誤解してしまう例として、フォームがある。

あるクレジットカード発行申し込みフォームでは、タイトルと入力フィールドが離れているため、タイトルが一つ前の入力フィールドを指していると誤解してしまう。

他にも、タイトルの下にラインがあるため、関連している項目をグルーピングしているように誤解が生じてしまう。

タイトルと入力フィールドが離れているので、グルーピングに誤解を与えるフォームの例

線と空白で区切れがわかりにくい

近接の効果をわかりやすくするため、元のデザインからタイトル下の黄緑色のラインを削除した。ラインによるグループの区切りはなくなったが、タイトルが上下どちらの入力フィールドを指しているのかわかりづらい。

グルーピングに誤解を与えていたラインを削除したフォーム

要素同士が離れていると同じグループだと認識しにくい

関連性を明確にするため、タイトルと入力フィールドを近づけた。要素同士が近づいたことで、タイトルがどこの入力フィールドを指しているのか、誤解なく伝わるようになった。

関連性の強いタイトルと入力フィールドの距離を使づけることで、誤解のないグルーピングになったフォーム

タイトルを入力フィールドと近づけることで強い関連性が発生した

改善前と改善後のフォームを比較すると、タイトルと入力フィールドに強力な関係性が産まれ、誤解のないグルーピングを行うことができた。

改善前と改善後のフォーム

まずは関連する情報を整理する

情報を誤解なく伝えるためには、伝えたい情報を明確にし、関連する情報を集める必要がある。情報をなんとなく配置してしまうと、伝えたいことが不明確になり、近接を使っても誤解が生じてしまう。近接も含めた人の知覚や認知の原則である「ゲシュタルト原則」は、情報設計ができて初めて正しい効果を発揮することができる。

関連用語

参考文献

blank

nayumi

東京在住のWEBデザイナー。
趣味:映画鑑賞、気分がノってる時の料理
好きな食べ物:ビリヤニ、野菜、虫
マイブーム:テキスト読み上げ機能での読書