余白 (Whitespace)

「スペースがもったいないから、もう少し情報を入れよう」——この判断が積み重なった画面は、ユーザーの目がどこを見ていいかわからなくなり、読む気を失わせます。すべての情報が同じ密度で並んでいると、何も目立たず、結果として「何も伝わらない」UIになります。

余白のない画面は、句読点なしで書かれた長文のようなものです。文字として読めても、意味のまとまりが掴めない。適切な余白がないUIは、ユーザーに強烈な認知負荷を与え、離脱を招きます。

よくある失敗は「余白＝空き＝無駄」という思い込みです。しかし余白は「何もない空間」ではなく、要素同士の関係性（グループ化・分離・優先度）を視覚的に伝えるための積極的なデザイン表現です。情報を区切るために「線を引く」「枠で囲む」前に、まず「余白を広げる」ことで解決できないか——この問いが余白設計の出発点です。

高級ブランドのWebサイトほど余白が広い理由は、「余裕があるから」ではなく、「余白が品質と重要度を伝えているから」です。余白は沈黙ではなく、設計された間（ま）です。

1. 原則の定義

余白（Whitespace）とは、要素と要素の間・要素の内側に意図的に設ける「何もない空間」のこと。余白を使って要素同士の関係性（グループ化・分離・優先度）を視覚的に伝え、ユーザーの認知負荷を下げ、情報の構造を直感的に理解させる設計原則。

本質は「見えない境界線を引くこと」です。余白は単なる「空きスペース」ではなく、要素同士の関係性を視覚的に伝えるための積極的なデザイン表現です。余白には2種類あります——ミクロ余白（要素内部のpadding・行間など）とマクロ余白（要素間のmargin・セクション間の空間）。この2つを意識的に使い分けることが余白設計の核心です。

2. いつ使うか（適用場面）

特に重要になるケース

• 文章量が多い記事やブログ、規約ページ（可読性に直結する）。
• ダッシュボードや入力フォームなど、情報密度が高く複雑な画面。
• 商品やブランドの「高級感」や「洗練さ」を演出したい時（高級ブランドのサイトほど余白が広い）。

トレードオフが起きる場面

• ファーストビューの情報量 vs ゆとり: 余白を大きく取りすぎると、スクロールせずに一度に見える情報量が減る。業務システムなど「一覧性」が最優先される場合は、余白を削って情報密度を上げることも正解になる。
• モバイルでの余白の扱い: デスクトップで設計した余白をそのままモバイルに適用すると、画面の大半が余白で占められることがある。デバイスごとに余白の量を調整し、限られた画面領域を有効に使う設計が必要。
• 余白の統一 vs 強調: すべての余白を均一にすると整然とするが、重要な要素を際立たせる「特別な余白」が生まれない。意図的に一部の余白を広げることで、その要素の重要度を高める効果がある。

3. なぜ重要か（設計判断の核）

余白は「もったいない空間」ではなく、レイアウトを構成する「見えないブロック」である。

設計判断の基準

• 情報を区切りたい時、安易に「線を引く」「枠で囲む」前に、まずは「余白を広げる」ことで解決できないか検討する。線や枠は視覚的ノイズを増やすが、余白は情報を整理しながらノイズを増やさない。
• 「ただ空いてしまったから」ではなく、「この2つの要素を切り離すためにXpx空ける」という明確な意図を持つ。余白のサイズは8pxの倍数など一定のルールに基づかせる。
• 「この要素を特別に見せたい」と思ったとき、色や装飾を加える前に、まず周囲の余白を広げてみる。余白は最もコストの低い「強調」の手段。

優先順位の考え方

• 1. 外周のパディング（最優先）: 文字や要素が画面端に張り付いているUIは、それだけで「雑」に見える。まず外周の余白を確保する。
• 2. 行間（line-height）: 本文テキストの行間はフォントサイズの1.5〜1.8倍が目安。行間が狭いと読む気が失せる。
• 3. セクション間のマージン: 異なる情報のまとまりの間に十分な余白を設けることで、ページの構造が視覚的に伝わる。

例外条件

• 高密度のデータテーブル（ExcelのようなUI）では、一覧性を優先してミクロ余白（セル内の余白）を最小限に抑えることがある。ただしこの場合も、テーブル全体を囲むマクロ余白は確保する。
• ダッシュボードなど「情報密度が価値」の画面では、余白よりも視覚的な区切り（色・線・背景色）で構造を伝えることが合理的な場合がある。

4. 具体の設計ルール（チェックリスト）

最低ライン（Must - これ守らないと危険）

ここをクリアしていないと製品として機能しないレベルの要件

画面の端（外周）に十分なパディング（内側の余白）が確保されているか？（文字が画面端に張り付いていないか）
行間（line-height）は適切か？（文字のサイズに対して1.5〜1.8倍程度が目安）
関連する要素同士は近づけ、無関係な要素は遠ざけているか？（近接の原則）

理想ライン（Better - できると強い/プロの品質）

熟練者が目指すべきUXをさらに高めるための品質基準

タイトル（見出し）の直上の余白はひろく、直下の余白はせまく設定され、どちらの本文に属しているか明確に伝わるか？
余白のサイズに一定のルール（例：8pxの倍数など）があり、場当たり的な数値になっていないか？
ミクロ余白（要素内の空間）とマクロ余白（要素間の全体の空間）が戦略的に使い分けられているか？

5. UI例

改善プロセス

1. 窮屈なコンポーネントの特定: 画面全体を眺めて「息苦しさ」を感じる箇所を探す。文字が枠に張り付いている・ボタンが小さすぎる・要素同士が密着しているなど、まず問題箇所を特定する。
2. 内側の余白（padding）を広げる: 窮屈なコンポーネントの内側のpaddingを広げる。目安は現在の値の1.5〜2倍。これだけで「高品質に見える」効果が出ることが多い。
3. 行間（line-height）を確認する: 本文テキストの行間がフォントサイズの1.5倍未満なら広げる。長文ほど行間の影響が大きい。
4. 線を余白に置き換える: 情報を区切るために引いた枠線・区切り線を一度消し、代わりにマージンを広げて「線なしで構造が伝わるか」を試す。伝わるなら線は不要——余白だけで構造を表現できている証拠。

6. 関連リンク

• 関連リファレンス（理論）: 認知負荷 (Cognitive Load), 視覚的階層 (Visual Hierarchy), ゲシュタルト原則 (Gestalt Principles)
• 用語集（定義）: ホワイトスペース, ネガティブスペース
• 関連するUI原則（横）: 近接 (Proximity), 情報密度の最適化 (Information Density), 視覚的階層 (Visual Hierarchy)
• 関連するUIコンポーネント: Separator（セパレーター）, Card（カード）

7. まとめ

今日から直せる一手 「見出しとその下の本文」の距離よりも、「本文と次の見出し」の距離を広げてみてください。これだけで情報のまとまりが劇的に伝わりやすくなります。

チームに共有するなら一言 「余白がないデザインは、息継ぎなしで喋り続けるスピーチと同じだ。」