余白は空いた場所ではなく、情報の関係を示す要素です。見出しと本文は近く、次の章とは遠くすることで、枠線を増やさなくてもまとまりが伝わります。

余白の3つの役割

  1. 関係する要素をまとめる
  2. 異なるグループを分ける
  3. 重要な要素へ視線を向ける

すべての間隔を同じにすると、どこからどこまでが一組か分かりません。

小・中・大のスケールを作る

間隔をその場で7px、13px、19pxと決めず、基準となるスケールを作ります。

間隔用途例
小アイコンとラベル、見出しと補足
中フォーム項目、カード内部
大セクション、異なる話題

デジタル庁デザインシステムは、一般的な基準単位として8 CSS pxを紹介しています。ただし、内容や画面に合わせた設計と確認が必要です。

整列する基準を減らす

タイトル、本文、ボタン、カードで左端を揃えます。意図のない微妙なずれは雑然と見えます。中央揃えを使う場合も、複数行本文まで中央にして読み始めを毎行動かさないよう注意します。

グリッドでページ全体を揃える

グリッドは要素を置くための共通基準です。外側のマージン、コンテンツのカラム、カラム間のガターを決めます。

デジタル庁デザインシステムでは、ガターが狭いと隣接テキストを誤読しやすいとして、原則として本文文字サイズの2倍を確保する考え方を示しています。

カードを増やしすぎない

すべてをカードで囲むと、カード同士の優先順位が消え、枠と影が情報より目立ちます。背景の切替や余白だけでグループ化できるか確認します。

スマホでの積み方

PCの3カラムを単純に縮小せず、重要な順に1カラムへ積みます。カード内部の左右配置も、文字が狭くなる場合は上下へ変えます。

外側の余白を狭めても、ボタンのタップ領域、フォーム項目間、章の区切りは保ちます。

よくある崩れ

  • 見出し下より見出し上の余白が小さい
  • カードごとに内側余白が違う
  • 画像の端と本文の端が揃わない
  • ボタンが画面端へ接近しすぎる
  • 固定高により文字拡大で欠ける
  • 表の列を維持するため文字を小さくする

レビュー方法

画面をぼかす、少し離れて見る、グレースケールにすると、大きなまとまりと優先順位を確認しやすくなります。その後、実際の文字と操作領域を確認します。

まとめ

余白は、近接・分離・強調のために使います。間隔スケール、整列、グリッドを共通化し、スマホでは内容を積み直します。枠や影を足す前に余白だけで構造を示せるか確認しましょう。