近接の原則とは?要素間の距離で関係を伝えるグルーピングを初心者向けに解説

近接の原則と要素間の距離の基本

まずは、要素間の距離とは何か、そして距離が関係を伝える理由である「近接の原則」を押さえましょう。

要素間の距離とは

要素間の距離とは、見出しと本文、写真と説明文、ボタンとボタンのように、隣り合う要素同士の間に取る余白の広さのことです。

ここでいう要素とは、文字のかたまり・画像・ボタン・入力欄など、画面や紙面に置かれる1つひとつの部品を指します。

要素間の距離は、ただのすき間ではありません。

近いか遠いかによって、「この2つは関係がある」「この2つは別のもの」という情報を、見る人に伝えています。

近接の原則(近接の法則)とは

近接の原則とは、近くにある要素同士は関係があるように見え、離れている要素同士は別のものに見えるという、人の見え方の性質です。

もとは20世紀前半に、ゲシュタルト心理学(人がものを部分の寄せ集めではなく「まとまり」として見る仕組みを研究した心理学)の研究者たちが見つけた、まとまりの見え方の法則の1つで、「近接の法則」とも呼ばれます(Nielsen Norman Group「Proximity Principle in Visual Design」・英語)。

そして、この性質を利用して、関係のある要素を近くにまとめることを「グルーピング」と呼びます。

次の見本は、同じ数の点を、間隔だけを変えて並べたものです。

見本Aと見本Bは、点の数も色も同じで、違うのは間隔だけです。

それでも見本Bは、何も説明しなくても「3つのグループ」に見えます。

数値でいうと、見本Aは列と列の間をすべて12pxにしています。見本Bは、近づけた2列の間を6px、グループとグループの間を28pxにしただけです。

人の目は、線で囲んだり色を変えたりしなくても、距離だけでまとまりを読み取っているのです。

距離は色や形よりも強く効く

近接の原則は、まとまりの見え方を決める手がかりの中でも、特に強く働くものです。

Nielsen Norman Groupは、近接は色や形が似ているといったほかの手がかりよりも優先されることがあると説明しています(同上・英語)。

見本Cでは、点を1列ごとに色違いにしていますが、同じ色の列同士ではなく、近くにある2列ずつがまとまりに見えるはずです。

つまり、色や形でグループを分けたつもりでも、距離がそれと食い違っていると、見る人には距離のほうのまとまりが伝わってしまいます。

グループを伝えるときは、まず距離から決めるのが確実です。

要素間の距離で関係を伝える方法

近接の原則を実際のデザインに活かすには、「関係の強さ」に合わせて距離を決めるのが基本です。

考え方と、よくある場面での使い方を見ていきましょう。

関係が強いものほど近づける

要素間の距離は、「関係が強いものほど近く、弱いものほど遠く」が原則です。

距離の近さがそのまま関係の強さとして読み取られるため、関係の強さの順番と距離の順番をそろえると、見る人が迷わなくなります。

よくある組み合わせを、関係の強い順に並べると次のようになります。

要素の組み合わせ	関係の強さ	距離の考え方
入力欄とその名前(ラベル)、写真とその説明文	とても強い(1つのセット)	いちばん近づける
見出しとその直後の本文	強い(同じ話題)	近づける
同じグループの中の項目同士(並んだカードなど)	中くらい(仲間だが別のもの)	セットの中の距離より少し広げる
別のグループ同士、別の話題同士	弱い(別のもの)	はっきり広げる

具体的な数値は、デザインの大きさや密度によって変わります。

大切なのは数値そのものより、この表の上から下へ向かって距離が順に広がっていることです。

写真と説明文の距離

写真の下に説明文(キャプション)を付けるときは、説明文を自分の写真のすぐ近くに置き、次の写真からははっきり離します。

説明文が2枚の写真のちょうど中間にあると、上の写真の説明なのか、下の写真の説明なのか分からなくなるからです。

NGの見本では、「春の庭園」が上下どちらの写真の説明なのか、ひと目では判断できません。

OKの見本では、説明文を上の写真に寄せただけで、「写真+説明文」のセットが2つ並んでいると分かります。

入力フォームのラベルの距離

入力フォームでは、入力欄の名前(ラベル)を自分の入力欄のすぐ上に置き、上にある別の入力欄からは離します。

ラベルと入力欄の関係は「とても強い」ので、ほかのどの距離よりも近くするのが基本です。

NGの見本は、どの距離も同じため、「メールアドレス」というラベルが上の欄と下の欄のどちらを指すのか、一瞬迷ってしまいます。

OKの見本は、ラベルと入力欄が1つのセットに見えるので、上から順に迷わず入力できます。

Appleのデザインガイドラインでも、関係のある項目をまとめ、余白などを使って情報を別々の領域に分けることが勧められています(Apple Human Interface Guidelines「Layout」・英語)。

近い・遠いの差ははっきりつける

近い距離と遠い距離の差は、ひと目で分かるくらいはっきりつけましょう。

差がわずかだと、見る人には同じ距離に見えてしまい、グループの区切りが伝わらないからです。

先ほどのフォームのOKの見本では、ラベルと入力欄の間を4px、項目同士の間を24pxにして、6倍の差をつけています。

倍率に決まりはありませんが、迷ったら「グループの外側の距離は、内側の距離より明らかに広い」と言える差になっているかを確かめてください。

数値そのものに迷うときは、8の倍数(8px・16px・24px・32px…、細かい部分だけ半分の4px)の中から選ぶと決めておく方法がよく使われます。

たとえば、ラベルと入力欄のような「セットの中」は4〜8px、項目同士のような「グループの外」は24pxのように、近い距離と遠い距離を離れた段に割り当てると、自然と差がはっきりします。

Figmaでは、要素を選んだ状態でOptionキー(WindowsはAltキー)を押しながら別の要素にカーソルを合わせると、間の距離が表示されるので、決めた数値どおりになっているかを確かめられます(Figmaヘルプセンター「レイヤー間の距離の測定」)。

また、使う距離の種類を「狭い・中くらい・広い」のように数段階に絞っておくと、同じ関係には同じ距離を使えるようになり、ページ全体のまとまりも伝わりやすくなります。

実践のポイント

近接の原則を使うときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• すべての要素間の距離を同じ数値にしてしまうことがあります。
  整って見えるようで、関係の強い・弱いが伝わらなくなるので、関係の強さに合わせて距離に差をつけましょう。
• 関係のない要素を、空いている場所に何となく近づけて置いてしまうことがあります。
  近くにあるだけで仲間だと思われるため、Nielsen Norman Groupも、無関係な要素をまとめると見落とされる原因になると注意しています。
  関係のないものは、はっきり離しましょう。
• 見出しが、自分の本文よりも上にある別の話題の本文に近くなってしまうことがあります。
  見出しは下の本文とセットなので、見出しの上を広く、下を狭くして、下の本文に寄せましょう。
• ここからは、HTML・CSSでWebページを自分でコーディングする人向けの補足です(デザインだけを学ぶ場合は読み飛ばして構いません)。
  CSSのmargin(要素の外側の余白)は、上下に並んだ要素同士では大きい方の値だけが使われる「マージンの相殺」という仕組みがあります。
  たとえば、上の要素の下に24px、下の要素の上に16pxの余白を設定しても、間は合計の40pxではなく、大きい方の24pxになります。
  そのため、デザインどおりの距離にならないことがあります(MDN「マージンの相殺の習得」)。
  距離がずれたときは、まずこの仕組みを疑ってみてください。

よくある質問

• Q. 要素間の距離は何pxにすればいい?
  A. 決まった正解の数値はありません。
  デザイン全体の大きさや情報量で変わるため、まず「いちばん近い距離」と「いちばん遠い距離」を決め、その間を数段階で埋めると決めやすくなります。
  8の倍数など、あらかじめ決めた数値の中から選ぶ方法もよく使われます。
• Q. 距離を離すだけでは区切りが弱いときは?
  A. 背景色を変える、薄い枠で囲む、区切り線を入れるといった方法を組み合わせます。
  Appleのガイドラインでも、余白のほかに背景の形や色、区切り線などで関係を示し、情報を分けることが挙げられています。
  ただし、線や枠を増やしすぎると画面がにぎやかになるので、まずは距離で解決できないかを考えましょう。
• Q. 「デザインの4原則」の近接と同じもの?
  A. 同じ考え方です。
  デザインの入門書などでは、近接・整列・反復・対比を「デザインの4原則」としてまとめて紹介することがよくあり、その1つめの近接がこの記事で解説した内容にあたります。
  ほかの3つは、要素の端や中心をそろえて並べる「整列」、色や見出しの形などのルールをくり返して統一感を出す「反復」、大きさや色、太さに差をつけて大事な部分を目立たせる「対比」です。

まとめ

近接の原則とは、近くにある要素は関係があり、離れた要素は別のものに見えるという人の見え方の性質で、要素間の距離はこの性質を通して「関係の強さ」を伝えています。

関係の強いものほど近く、弱いものほど遠くに置き、近い・遠いの差をはっきりつけることで、説明しなくてもまとまりが伝わるデザインになります。

まずは手元のデザインで、写真と説明文、ラベルと入力欄など「セットのはずの要素」を探し、それぞれが自分の相手にいちばん近い位置にあるかを確かめてみてください。

余白の学び方の全体像はデザイン初心者のための余白学習ロードマップで紹介しています。