第2章　人間は、近いものを仲間だと思う

フォームを見て、「余白が足りない」と感じることがあります。しかし、すべての余白を広げれば読みやすくなるわけではありません。

項目名と入力欄の間まで広げると、どの項目名がどの入力欄を説明しているのか、かえって分かりにくくなることがあります。反対に、一つの項目の内側は近く、次の項目までは広く空いていれば、全体が詰まっていても境界は見えます。

余白は、何もない場所ではありません。どの情報とどの情報が関係しているかを伝える場所です。

人の間隔が、集団の見え方を変える

最初に、八人が横一列へ並ぶ図を見ます。人の形は変えず、間隔だけを変えます。

全員が等間隔の列。同じ形の八人をほぼ等間隔配置した列。 — 図 2-1A　全員の間隔が同じなら、特定の二人組より八人全体の列に見える

すべての間隔が同じなので、途中に強い切れ目がありません。八人が一つの列として見えます。

次は、二人の間だけを近づけ、その次の人までを広く空けます。

二人ずつ近い列。同じ形の八人を二人ずつ近い配置した列。 — 図 2-1B　小さな間隔と大きな間隔を繰り返すと、二人組が四つ並んで見える

小さな間隔が「二人の内側」、大きな間隔が「次の組まで」を表します。同じ形の八人でも、距離の繰り返しによって四つの組が生まれます。

最後は、中央の間隔だけを広くします。

四人ずつ近い列。同じ形の八人を中央だけ広い配置した列。 — 図 2-1C　中央だけを広く空けると、左右の四人が別の集団に見える

中央の広い空白が境界となり、左の四人と右の四人へ分かれて見えます。

実際の人なら、服装、体の向き、会話も集団を知る手がかりになります。この図は、それらを同じにして、距離だけが変わるとまとまりも変わることを見せています。

横の組、縦の組、均等な格子

次は、人の形や言葉を使わず、同じ点だけを並べます。横方向と縦方向の距離を一枚ずつ変えると、何が一組に見えるかが分かります。

まず、横の二点を近づけます。

横向きの二点ずつが近い配置。横方向だけを近づけた点の組。 — 図 2-2A　横の距離を小さくすると、二点ずつの横向きの組に見える

縦の点までの距離より、横の点までの距離が小さいため、左右の二点が一組に見えます。

次は、縦の二点を近づけます。

縦向きの二点ずつが近い配置。縦方向だけを近づけた点の組。 — 図 2-2B　縦の距離を小さくすると、二点ずつの縦向きの組に見える

今度は、上下の二点が近いため、縦向きの組が並んで見えます。点の数、大きさ、色は図 2-2A と同じです。変えたのは距離の向きだけです。

三枚目では、横と縦の距離をほぼ同じにします。

横と縦の距離が近い格子。二方向の距離差が小さい配置。 — 図 2-2C　横と縦の距離がほぼ同じなら、特定の二点組より均等な格子に見える

どちらの向きにも強い差がないため、横のペア、縦のペアのどちらか一方へ分ける理由が弱くなります。全体が均等な格子として見えます。

ここで大切なのは、「何ピクセルなら一組になる」という数字を覚えることではありません。点の大きさ、画面の縮尺、ほかの距離との比べ方が変われば、同じ数値でも見え方は変わります。「近い」は、周囲との関係で決まります。

フォームには、二種類の距離がある

フォームでは、少なくとも次の二つを分けて考えます。

項目名から、その入力欄まで
入力欄から、次の項目名まで

以前の図にあった「入力まで」「次まで」という短い言葉だけでは、何から何までの距離か分かりません。この章では、毎回、二つの端を文章で説明します。

最初のフォームでは、項目名と入力欄を近づけ、次の項目までは広く空けています。

対応するラベルと入力欄が近いフォーム。次のラベルまでを広く空ける。 — 図 2-3A　項目名と入力欄を近づけ、次の項目名までは広く空けている

小さな距離が一項目の内側を、大きな距離が項目と項目の境界を表します。囲み線がなくても、どの項目名と入力欄が一組かを追いやすい配置です。

次は、二種類の距離を同じくらいにします。

すべての間隔が同じフォーム。項目の境界が分かりにくい。 — 図 2-3B　二種類の距離が同じため、どこで一項目が終わるのかを間隔だけでは判断しにくい

文字を読めば対応は分かります。しかし、距離には「ここまでが一項目」という切り替わりがありません。毎回、項目名の内容を読み直して対応を確かめることになります。

三枚目では、入力欄から次の項目名までの方を近づけます。

次のラベルの方が近いフォーム。対応関係を取り違えやすい。 — 図 2-3C　入力欄が次の項目名へ近いため、本来とは違う二つが一組に見えやすい

距離だけを見ると、上の項目名より下の項目名の方が入力欄に近くなっています。HTML で正しく label と入力欄を結びつけていても、目で見た関係は逆を示しています。

入力エラーの文章が加われば、項目の高さは変わります。項目名、入力欄、エラー文を一つのまとまりとして近づけ、そのまとまりから次の項目までは広く空けると、状態が変わっても関係を保ちやすくなります。

空白が置かれる場所によって、役割は変わる

同じ 16 ピクセルの空白でも、どこにあるかによって意味が違います。ここでは、ボタンの内側、カードの中、次のセクションまでを一枚ずつ見ます。

詳細を見るという文字と、ボタンの外形との間にある内側の空白を示す。 — 図 2-4A　ボタンでは、文字と外形の間にある空白も押せる範囲に含まれる

ボタンの内側の空白は、文字を囲む形を作るだけでなく、押せる範囲を広げます。ただし、大きくしすぎれば周囲の操作や文章を押し下げます。押せる範囲については第14章で詳しく扱います。

イベントカードの中で、タイトル、日時、説明文の間隔が読む順番を作る様子を示す。 — 図 2-4B　カードの中では、題名、説明、日時の距離が読む順番を作る

カード内の空白は、情報同士の関係を作ります。題名と短い説明を近づけ、日時の前を少し広くすれば、内容の説明と開催情報を分けて読めます。

イベントカードと次の会場案内の間に広い空白があり、内容の切り替わりを示す。 — 図 2-4C　カードと次のセクションの間を広く空けると、内容の切り替わりが見える

一枚のカードの中より、カードと次のセクションの間を広くすると、「ここから別の内容が始まる」という境界になります。

この三つをすべて「余白」と呼ぶことはできます。しかし、ボタン自身の内側、カード内の情報同士、二つの大きなまとまりの間では、管理する要素も役割も異なります。

`gap`、`padding`、`margin` は、誰が空白を持つか

画面で同じように見える空白でも、CSS では別の要素が管理できます。ここでは gap、padding、margin を、一つずつ DOM の関係と結びつけます。

`gap` は、親要素が子要素の間を管理する

gap が作る空白。親要素が二つの子要素の間に作る領域を示す図。 — 図 2-7A　gap では、親要素が並べた二つの子要素の間隔をまとめて管理する

たとえば、三枚のカードを並べる一覧が間隔を決めるなら、親要素へ gap を指定できます。

.card-list {
  display: grid;
  gap: 24px;
}

カードが増えても減っても、隣り合うカードの間に同じ規則が使われます。各カードが、自分の左右へ個別の空白を持つ必要はありません。

`padding` は、要素自身の境界と内容の間を管理する

padding が作る空白。カードの境界と内容の間にある領域を示す図。 — 図 2-7B　padding では、カード自身が境界と内容の間にある空白を持つ

カードの背景や枠線から、内容をどれだけ離すかは、カード自身の padding で表せます。

.card {
  padding: 24px;
}

背景色も枠線もカードの外形まで続き、空白はその内側に入ります。カードを別の場所へ移しても、内容と境界の関係はカードと一緒に移動します。

`margin` は、要素自身の外側に空白を置く

margin が作る空白。下の子要素が上側に持つ領域を示す図。 — 図 2-7C　margin では、要素が自分の外側に空白を持ち、前の要素から離れる

特定の見出しだけ、前の内容から離したい場合などは、その見出し自身の外側へ margin を置けます。

.section-heading {
  margin-block-start: 48px;
}

ここでは margin-top ではなく margin-block-start を使っています。これは、文章が進む方向の「始まる側」を表す書き方です。横書きと縦書きなどで方向が変わっても、前の内容から離すという意図を残しやすくなります。

見た目が同じでも、DOM の責任は違う

三枚の図の空白が同じ幅なら、静止画では同じように見えるかもしれません。しかし、要素を追加したとき、背景色を付けたとき、並ぶ方向を変えたときに違いが現れます。

一覧全体が、並ぶ子要素の間を決めるなら gap
カードやボタン自身が、境界と内容の間を決めるなら padding
特定の要素が、自分の外側で前後と離れるなら margin

プロパティ名を暗記してデザインを決めるのではありません。まず、誰と誰の間にある空白か、どの要素がその関係を管理するかを決め、そのあとで CSS を選びます。

余白を一律に増やさない

余白が気になったとき、ページ中の値へ同じ数字を足してはいけません。項目の内側まで広げれば、関係する情報が離れてしまいます。

見る順番は単純です。

何と何の間にある空白かを指す
一つのまとまりの内側か、次のまとまりまでかを分ける
周囲の距離と比べる
その関係を管理する DOM 要素を決める
gap、padding、margin などの CSS へ置き換える

近いものが同じ仲間に見えるなら、距離は画面の文法になります。第3章では、距離に加えて、要素の左端、右端、中心、文字の基準線が作る「そろい」を見ていきます。

参考

York University, “Laws of Organization in Perceptual Forms” — 点の距離とまとまりを扱った古典的な図を確認できます。
W3C Web Accessibility Initiative, Grouping Controls — 関係するフォーム項目を、見た目と HTML の両方でまとめる例です。
W3C, CSS Box Model Module Level 3 — 内容、padding、枠線、margin の関係を定める公式仕様です。
W3C, CSS Box Alignment Module Level 3 — gap が要素間の空白を作る仕組みを確認できます。

Keyboard shortcuts

Webデザインを見る目