#087
視覚デザイン
#087きんせつのほうそく
近接の法則 (Law of Proximity)
別名・表記:Law of Proximity近接性
UIXHERO Definition
「近いものは仲間」。距離が近いほど、ひとかたまりのグループに見える。
概要
近接の法則とは、ゲシュタルト心理学における視覚的な知覚の原則の一つで、「物理的に距離が近い要素同士は、互いに関係しており、一つのグループを形成していると認識される」という法則です。
人間は無意識のうちに情報を整理して理解しようとします。 この法則をデザインに応用することで、枠線や区切り線を使わなくても、余白(スペース)の調整だけでユーザーに「情報のまとまり」を伝えることができます。
この法則は、人が画面を「読む」前に「見る」段階で働くため、第一印象やスキャン体験に強く影響する。
UXでの活用
- 情報のグルーピング: 関連する項目(例:見出しと本文、写真とキャプション)を近づけ、関係ない項目とは距離を置くことで、視覚的な構造を作り出す。
- フォームのユーザビリティ向上: 入力フォームにおいて、ラベルと入力フィールドの間隔を狭くし、異なる質問項目の間隔を広くすることで、ユーザーの誤認を防ぐ。
- スキャン性の向上: 適切な余白(ホワイトスペース)を活用することで、画面が整理され、ユーザーが必要な情報を見つけやすくなる。余白は単なる「何もないスペース」ではなく、情報の区切りを明確にするための「アクティブな要素」である。
💡 使いどころ
情報をグルーピングして整理し、スキャンしやすくしたい時。余白(ホワイトスペース)を使って情報の構造を直感的に伝えたい時。
⚠️ 注意点・誤用
近接性だけでグルーピングしようとせず、必要に応じて閉合(枠線)や類同(同じ色・形)も組み合わせると、より関係性が明確になる。
具体例
- フォームのラベルと入力欄: ラベルと対応する入力欄の距離を近づけ、次の項目との距離を離すことで、どのラベルがどの入力欄に対応しているかが一目で分かる。
- カードUI: 画像、タイトル、説明文をひとかたまりに配置し、隣のカードとは十分な余白(マージン)を開けることで、それぞれの独立したコンテンツとして認識させる。
- 広告と本文が近すぎて誤クリックが起きる
出典・参考文献:
- Laws of UX: Law of Proximity
- Nielsen Norman Group: The Proximity Principle in Visual Design
- Wertheimer, M. (1923) Laws of Organization in Perceptual Forms