公開 更新

guide · 余白・整列

近接とグルーピングの使い方|距離で関係を伝える

近接とは、関係の近い情報を近くに、遠い情報を遠くに置く配置の原則です。線や囲みを足さずに距離だけで情報をまとめる使い方を、身近な例と実践の手順、整列との組み合わせまで具体的に解説します。

余白・整列を学ぶ余白灯舎の場面
ミナ項目をたくさん並べたら、どれとどれが仲間か分からなくなって。近接って、どう使うんですか?
トウカ……分けたいものほど、囲み線を足したくなった?

近接の仕組みと、身近な例

近接は、専門的な技術ではなく、私たちが毎日目にしている働きです。まず、なぜ近くのものが仲間に見えるのか、その仕組みから見ていきます。人の目と脳には、近くにあるもの同士をひとかたまりとして受け取る性質があります。ばらばらに散った点より、寄り集まった点のほうを「1つのグループ」と感じる。これは意識しなくても自動的に働く、目のしくみです。

この仕組みは、身近なところで毎日働いています。たとえば、次のような場面です。

商品の名前と値段が近くに置かれていれば、説明がなくても「この商品はこの値段だ」と伝わります。逆に、名前と値段が離れていると、どの値段がどの商品のものか、見る人は毎回考えることになります。近接は、距離という目に見えない線で、情報の持ち主を示しているのです。

たとえるなら、集合写真の立ち位置のようなものです。家族は自然と身を寄せ合って写り、他のグループとは少し間があきます。写真を見た人は、誰も説明しなくても、寄り添っている人たちを「ひとつの家族」と受け取ります。紙面の要素も同じで、近づけるだけで仲間だと伝わります。実際、近接を整えるだけで、罫線や囲みを足さなくても紙面はすっきり片づきます。 集合写真の例で分かるのは、距離が仲間関係の手がかりになることです。複雑な情報では距離だけに頼らず、見出し、順序、ラベルも合わせて使います。

まとまりを作る、距離の使い方

近接を使うときのコツは、たった1つの合言葉に集約できます。「中を近づけ、外を離す」です。具体的な手順で見ていきます。

  1. 情報を、意味のかたまりに分ける。 名前と値段、日時と場所、というように、関係の深い情報をグループにします
  2. グループの中を、近づける。 同じグループの要素同士は、ぐっと寄せます。近いほど、強い仲間に見えます
  3. グループの外を、離す。 別々のグループのあいだは、中の間隔より広い案を作り、実寸でまとまりが伝わるか比べます
  4. 線や囲みは、最後の手段にする。 距離で区切れるなら、線は足しません。線を足すほど、紙面は増える情報でにぎやかになります

この中でいちばん大切なのは、3の「外を離す」です。多くの人は中を近づけることはできても、外を離すのを忘れます。すると、全部のグループがくっついて、区切りが消えてしまいます。まとまりの外の余白を、しっかりあける。これが近接をきかせる鍵です。

なぜ「外を離す」が忘れられやすいかというと、紙面が寂しくなるのを恐れるからです。グループ同士のあいだを広くあけると、そこに空白が生まれ、もったいなく感じてしまう。でも、その空白こそが区切りの役目を果たしています。空白を埋めずに残す勇気が、まとまりをはっきりさせます。実際、うまく整理された紙面ほど、グループとグループのあいだに、ゆったりとした空きがあります。近づけることと離すことは、いつもセットで考えてください。

整列と組み合わせると、もっと効く

近接は、単独でも効きますが、整列と組み合わせると、さらに紙面が整います。グループの中で要素の端をそろえ、グループ同士を距離で分ける。この2つを合わせると、線を1本も引かずに、驚くほど整理された紙面ができます。

たとえば、名刺を考えてみます。名前・肩書きを1つのグループにして端をそろえ、連絡先をもう1つのグループにして少し離して置く。それだけで、情報が2つのかたまりに分かれて見えます。囲みも罫線もいりません。近接と整列は、紙面を整える2本の柱で、いっしょに使うと力を発揮します。中央揃えと左揃えの使い分けは、中央揃えと左揃えはどっちでくわしく扱っています。

順番としては、先に近接でグループを作り、そのあとで整列を整えるのがスムーズです。どの情報が仲間かを距離で決めてから、そのグループの中で端をそろえる。逆に、揃えることから始めると、グループの区切りが曖昧なまま端だけがそろい、まとまりが見えにくくなります。まず分ける、それから揃える。この順番を覚えておくと、2つの原則が無理なくかみ合います。

近接が効かない場合

近接は強力な原則ですが、効きにくい場合もあります。知っておくと、直しが早くなります。

ひとつは、グループ分けそのものが決まっていない場合です。どの情報とどの情報が仲間なのかが、作り手の頭の中で整理されていないと、距離のつけようがありません。近接を使う前に、まず情報を意味で分ける作業が必要です。この整理は、チラシが詰まって見える原因で扱った「グループを作る」考え方と同じです。

もうひとつは、離しすぎてしまう場合です。区切ろうとするあまり、グループ同士を極端に離すと、今度は関係のあるもの同士まで切れて見えます。近づけすぎも離しすぎも避け、「中より外を広くした版」を起点に、掲載サイズで関係が伝わる距離へ調整します。固定比率ではなく、文字サイズ、行間、画面幅も含めて判断します。

距離だけで、グループを分ける

今日のワーク:線を使わずにまとめる

手元にある紙面、あるいはこれから作るものの要素を、線や囲みをいっさい使わず、距離を近づけたり離したりするだけで、グループに分けてみてください。

  • 関係の深い要素同士を、ぐっと近づけます
  • 別のグループとのあいだは、中の間隔より広くした版を作ります

線を使わずにやってみると、距離だけでここまで伝わるのか、と実感できます。それでも区切りが弱いと感じたときだけ、線を足すかどうかを考えます。

線に頼らずまとめる練習をすると、紙面から不要な線が減り、すっきりします。近接は、足すのではなく、距離で語る技術です。

街のメニュー表や案内を見たら、料理名と値段、項目と説明など、関係のある要素の距離を観察できます。等間隔でも罫線や見出しで関係が明確な例はあるため、距離だけで良し悪しを決めません。「何が仲間に見えたか」を言葉にし、自分の紙面で同じ原則を1点だけ試すと、練習の題材になります。

近さは、関係の強さを語っている

近接とは、関係の近い情報を近くに、遠い情報を遠くに置く原則です。人の目は近くのものを仲間と受け取るので、線や囲みを足さなくても、距離だけで情報をまとめられます。中を近づけ、外を離す。この合言葉と、整列との組み合わせで、紙面は驚くほど整います。

距離で語れるようになると、紙面から線や囲みが減り、見た目も気持ちも軽くなります。近さで関係を伝え、端をそろえて線を通す。この2つがそろうと、紙面の土台が固まります。揃え方の使い分けをまだ見ていなければ、中央揃えと左揃えはどっちから、整列のもう半分を続けて確かめてみてください。