Proximity = 近接・近接の原則。Spacingとの違いは?

名詞: Proximity

不可算名詞

IPA表記: /prɑːkˈsɪm.ə.t̬i/

読み表記: プロキシミティ / prok-SIM-i-tee

意味:

UI/UXや視覚デザインにおいて、物理的に距離が近い要素同士を人間の脳が無意識に一つの関連グループとして認知するゲシュタルト心理学の基本原則。

一般的な訳語:

近接、近接の法則、近接性。UI/UXデザインやレイアウト設計の現場では「近接の原則（Proximity Principle）」または単に「近接」と呼ばれる。

詳細:

Webレイアウトやインターフェース設計において混同されやすい概念に「Spacing（余白・スペース設計）」がある。Spacingは、CSSのmarginやpaddingなどによって要素同士の間に挿入される物理的・幾何学的な「空間の寸法や間隔そのもの」を指す。デザインシステムにおいて8pxグリッドなどで数値的に定義される技術的な実装単位である。

これに対してProximityは、ゲシュタルト心理学に根ざした「人間の知覚認知メカニズム」を指す。要素間の余白の広狭を意図的に制御することで、罫線や枠線（ボーダー）を追加することなく、どの見出しがどの本文に属し、どのボタンがどの入力フォームと対になっているかをユーザーの脳に瞬時に直感させる。動画内でも語られているように、見出しと本文の間隔を周辺の別ブロックとの間隔より狭く設定するだけで、視覚的なグループ化（Visual Grouping）が成立する。Spacingが「画面上に数値を割り振る物理的な間隔」を指すのに対し、Proximityは「距離の長短を利用して情報の論理構造と主従関係を直感的に伝達する認知工学的な原則」である点で、設計のレイヤーが根本から異なる。

ネイティブな組み合わせ:

Law Of Proximity (近接の法則)

"Applying the law of proximity allows users to perceive form labels and input fields as single cohesive units without extra dividers."

近接の法則を適用することで、余計な区切り線を用いることなく、ユーザーに入力ラベルとフォーム項目を単一のまとまった単位として認識させることができる。

Leverage Proximity (近接の原則を活用する)

"Product designers leverage proximity to create intuitive mega menus where related category links are naturally grouped together."

プロダクトデザイナーは近接の原則を活用し、関連するカテゴリリンクが自然とグループ化されて見える直感的なメガメニューを構築する。

Spatial Proximity (空間的な近接性)

"Decreasing the spatial proximity between the headline and the body copy prevents visual detachment on mobile viewports."

見出しと本文の間の空間的な近接性を狭めることで、モバイル画面における視覚的な分断を防ぐことができる。

動画から切り取った生の文:

"(5:29) Elements placed close to each other are perceived as related. And the ones separated by space feel like different things."

互いに近くに配置された要素は関連していると認識され、空白で隔てられた要素は別個のものとして感じられます。

"(5:44) The space between the headline and the text block is smaller than the space to the neighboring blocks. That creates a visual grouping effect."

見出しとテキストブロックの間のスペースを隣接するブロックへのスペースよりも小さくすることで、視覚的なグループ化効果が生まれます。

"(6:02) See how the proximity principle makes things easier to perceive and helps you quickly understand which element relates to which?"

近接の原則によって物事がどれほど認識しやすくなり、どの要素がどの要素に関連しているかを素早く理解するのに役立っているかがわかるでしょう。