TH01-02
「どこまでがひとつのまとまりなのか、パッと見てわからない」
そんなサイトに共通して欠けているのが、デザイン4原則の筆頭である「近接（Proximity）」の視点です 。
近接とは、一言で言えば「関連する情報を近づけ、関連しない情報を遠ざける」というシンプルなルールです。
しかし、この「距離感」のコントロールこそが、Webデザインにおける情報の読みやすさを左右します 。
目次
近接の役割：脳の「グループ化」を助ける
人間の脳には、近くにあるもの同士を勝手に「同じグループだ」と認識する性質があります。
- 無秩序な配置：ユーザーは「何と何がセットなのか」を解読するために、脳のエネルギーを消費します 。
- 近接を適用した配置：視線が動いた瞬間に情報の構造が理解できるため、認知負荷が減少します 。
余白は「デザインの境界線」である
近接を正しく行うために必要なのは、要素を並べることではなく、「余白（マージン）」をデザインすることです 。
- 関連する要素の間（小さな余白）：見出しと本文、画像とキャプションなど、セットで読んでほしいものは近づけます 。
- 異なるグループの間（大きな余白）：セクションや話題が変わる場所には、物理的に大きな距離（ネガティブスペース）を設けます 。
「余白を空けるのが怖い」という初心者の心理が、情報の混同を招きます。
余白は「何もない場所」ではなく、「情報を区切るための目に見えない壁」だと考えましょう 。
Webデザインにおける「近接」の具体例
たとえば、ブログの「記事カード」を想像してみてください。
- 近接なし：アイキャッチ画像、タイトル、投稿日、カテゴリタグがすべて均等な距離で並んでいる。これでは情報の優先順位がわかりません。
- 近接あり：タイトルと投稿日をセットで近づけ、少し離してカテゴリタグを置く。こうすることで、「情報の属性」が直感的に伝わります 。
サイトを「薄目で」見てみる
自分のデザインが正しく近接されているか確認する最も簡単な方法は、画面を「薄目」で見てみることです。
文字が読めない状態でも、「3つの大きな塊があるな」というように、情報のグループ（シルエット）がはっきりと見えれば、あなたの近接設計は成功しています 。