デザインを見やすく整えるために最も効果が大きい基礎が「近接」です。
関連する情報を近づけて配置するだけで、伝わりやすさが一気に変わります。
デザイン経験が浅くても、近接を理解すると“素人っぽさ”が消え、情報の流れが自然と整理されていきます。
実務でも資料、バナー、LP、UI のどれでもすぐ使えるため、学んだその日から成果につながる基礎です。
この記事では、近接の意味から実践例、よくある失敗、UI/UXへの応用までをわかりやすく解説します。
デザインの本質である「情報を正しく届ける力」を一緒に育てていきましょう。
近接とは？デザイン4原則における位置づけ
グラフィックやWebの入門書として知られる『ノンデザイナーズ・デザインブック』では、良いデザインの基本原則として「コントラスト・反復・整列・近接」の4つが紹介されています。
その中で近接（proximity）は、「関連する情報同士を近くにまとめて配置し、関係の薄い情報とは距離をとることで、情報をグループとして認識させる」ための原則です。
視覚心理学の分野では、ゲシュタルト心理学の「近接の原理」として、 「互いに近く配置された要素は、離れた要素よりも“同じグループ”として知覚されやすい」 と説明されています。
つまり近接は、
- 何がひとまとまりの情報なのか
- どこからどこまでが一つのセットなのか
- どの情報同士が関係しているのか
といったことを、文字や線で説明しなくても配置だけで伝えるためのルールです。
なぜ「近接」で見やすさが劇的に変わるのか
情報のグルーピングで「考える負荷」を減らす
人間は画面や紙面を見るとき、まず「かたまり（グループ）」を探します。近接を適切に使うと、
- 見出し＋リード文
- 商品名＋価格＋ボタン
- 図表タイトル＋グラフ
といったセットが自然にひとかたまりで認識され、一目で構造が理解しやすくなります。
逆に、関連情報がバラバラに離れていると、「どれとどれがセットなのか」を毎回判断し直す必要が出てきて、読む側の負担が大きくなります。
視線の流れ（視線誘導）が自然になる
近接は、視線のスタート地点と流れをつくります。
- 大きな見出し
- そのすぐ近くの説明文
- さらにその近くのボタンやリンク
このように近接を意識した配置は、無言の案内板のようにユーザーの視線を誘導してくれます。
視覚設計の解説でも、近接は情報の階層や視線の優先度を整理するための基本とされています。
文脈や意味の関係性が伝わりやすくなる
同じ文章や図でも、
- 関係の深いテキストや要素同士が近い
- 関係の薄いものとは距離や余白で切り分けられている
というだけで、「どの情報がどの文脈に属するか」が直感的に分かるようになります。
その結果、ページ全体の理解スピードが上がり、「なんとなく読みやすい」「プロっぽく見える」と感じてもらいやすくなります。
近接の基本ルール3つ
① 関連する情報は物理的に近づける
近接の第一原則はとてもシンプルで、「関係のあるものは近づける。関係の薄いものは離す」ことです。
- 見出しと本文
- 図とそのキャプション
- ボタンとその説明文
こうしたセットが離れていると、ユーザーはセットであることに気づきにくくなります。
逆に、言葉で「これは◯◯の説明です」と書かなくても、距離だけで関係性を伝えられるのが近接の強みです。
② 距離で「強い関係」と「ゆるい関係」を表現する
近接は「グルーピングする／しない」だけでなく、関係の深さも表現できます。
- ほぼセットとして扱いたいもの …… かなり近づける
- 関係はあるがサブ情報であるもの …… 少し距離をあける
- グループを分けたいもの …… しっかり余白をとる
こうすることで、ユーザーは「どれがメイン情報で、どれが補足なのか」を視覚的に感じ取ることができます。
③ 余白は「分けるための道具」として使う
近接とセットで語られるのが余白です。
余白は「余り」ではなく、「情報どうしの関係を区切るための強力なツール」です。
- グループ間はしっかり余白を空ける
- グループ内は余白を詰めてひとかたまりにする
というコントラストをつくると、ページ全体の構造が明快になります。
ゲシュタルトの考え方でも、共通の領域や近さによってグループが知覚されるとされています。
良い例・悪い例で見る「近接」
【悪い例】要素の間隔が全部ほぼ同じ
見出し、本文、画像、キャプション、ボタンなどが、どれも似たような間隔でバラバラに置かれているレイアウトは、グループが見えづらくなります。
ユーザー視点では、
- どこが一つのブロックなのか
- どこから別の話が始まるのか
が判別しづらく、「なんとなくゴチャっとした印象」になります。
【良い例】グループ内は近く、グループ間はしっかり離す
例えば、
- 見出し＋リード文＋ボタン → かなり近づけて一つのかたまりにする
- 次のセクションの見出しとは、十分な余白をあけて切り替える
このように、
- セット内の距離：小さい
- セット同士の距離：大きい
というメリハリをつけることで、視線の流れと情報構造が自然に整理されます。
【やりすぎ例】とにかく全部詰めてしまう
近接は「寄せる」と聞いて、なんでもかんでも詰めてしまうのも典型的な失敗です。
- 行間が狭くなりすぎて文字が読みにくい
- 異なるグループまでくっついて見える
- 情報の優先順位が不明瞭になる
近接は「詰めること」そのものが目的ではなく、「関係性を伝えるために距離を設計すること」が目的です。
詰めるところと、あえて離すところのメリハリが重要です。
実務ですぐ使える「近接」のコツ
バナー・SNS画像での近接
- キャッチコピー＋サブコピーを近づけてひとかたまりにする
- ボタンと価格・特典などの訴求も近づけて「行動のかたまり」にする
- 不要な装飾や要素はグループから離すか削除する
これだけでも、「何を見てほしいか」が強く伝わるバナーになります。
資料・スライドでの近接
- スライド1枚につき「メインメッセージ＋図＋補足」を一つのブロックにまとめる
- セクションタイトルは、本文とグループ化しつつ、次のスライドとは余白で区切る
- 箇条書き同士の間隔よりも、「見出しとその箇条書き」の間隔を小さくする
会議資料や提案書では、近接を意識するだけで“ちゃんとして見える資料感”が一気に上がります。
Web・LPでの近接
- セクションごとに背景色や余白を変えて「グループの境界」をわかりやすくする
- フォームでは、名前・メールアドレスなどのフィールドを論理的なまとまりごとにまとめる
- CTAボタンは、その説明文やメリット訴求のすぐ近くに置く
UXデザインの解説でも、ナビゲーションやフォーム要素をグループ化するために、近接が重要な役割を持つと言われています。
UI/UXと「近接」：ゲシュタルトの原理としての応用
ボタンと説明文の距離
ボタンから離れたところに説明文があると、関連づけて読まれにくくなります。
一方、 ボタンのすぐ近くに説明文や補足を置くと、「この説明はこのボタンのため」と理解されやすくなります。
ユーザビリティの説明でも、「近くにある要素は関連していると知覚される」という近接の原理が繰り返し紹介されています。
入力フォームのグループ化
フォームでは、
- 「氏名」や「住所」など、論理的なまとまりごとにフィールドをまとめる
- グループ間には余白や罫線を入れて切り分ける
といったグループ化＋近接によって、ユーザーは「どこまでが一つのまとまりなのか」「次に何を入力すればいいのか」を迷わず進めることができます。
エラーメッセージの位置
入力欄から離れた位置にエラーメッセージが出ると、「どの項目のエラーなのか」が分かりづらくなります。
問題のある入力欄のすぐ近く、もしくは上下に表示すると、原因と結果の結びつきが明快になります。
これも近接の原理そのもので、原因（入力欄）と結果（エラー）を近づけることで、ユーザーは直感的に理解できます。
初心者がつまずきやすい「近接の落とし穴」
余白＝無駄だと思って詰めてしまう
紙面や画面が「スカスカに見えるのが不安」で、余白を埋めようとしてすべての要素を詰めてしまうケースがあります。
しかし、視覚心理学の観点では、余白は情報を分けるための立派な機能であり、要素を組織化した結果として生まれるものとされています。
近接と整列を混同する
近接とよくセットで出てくるのが整列です。
- 整列：目に見えない線に沿って揃えること
- 近接：関係のあるもの同士の距離を近くすること
この2つは一緒に使われることが多く、混同されがちです。
整列で「きれいに揃え」、近接で「意味のグループをつくる」と分けて考えると、設計の意図がクリアになります。
情報の優先順位を考えずに距離だけいじる
距離だけを調整しても、そもそもの情報の優先順位や構造が整理されていないと限界があります。
- まず、何がメインで何がサブかを決める
- そのうえで、近接と余白で関係性を可視化する
という順番を意識すると、近接がより効果的に機能します。
まとめ：近接を理解すると、デザイン全体の“見やすさ”が変わる
近接は、「関連する情報を近くにまとめ、関係の薄い情報とは距離と余白で切り分ける」という、とてもシンプルな原則です。
しかし、このシンプルな原則が、
- 情報のグルーピング
- 視線の流れ
- 文脈や意味の理解
- UI/UXのわかりやすさ
といった多くの要素に同時に効いてきます。
デザインの世界で広く紹介されている4つの基本原則（コントラスト・反復・整列・近接）の中でも、「とりあえずこれだけ意識しても大きく変わる」のが近接です。
今日からできることはシンプルです。
- 関連するものはしっかり近づける
- グループ同士は思い切って離す
- 余白を「分けるための道具」として使う
この3つを意識していくだけで、「なんとなく素人っぽい」を一歩ずつ抜け出していけます。
地味ですが、確実に効いてくる基礎なので、少しずつでも日々のデザインに取り入れていきましょう。
コメント