「余白が多すぎると言われた」「もっとスッキリさせてと修正を重ねても決まらない」と悩んでいませんか。結論から言えば、余白はセンスではなく、近接、階層化、一貫性、意図の4つの原則と、8の倍数などのルールで数値を決め、その理由をクライアントに説明できるようにすれば、迷わず決められます。
この記事でわかること
【結論】デザインの余白はどう決めればいい？
余白（ホワイトスペース）とは、文字や画像などの要素が置かれていない空間のことで、情報のまとまりや読む順番、読みやすさ、デザインの印象をつくる役割があります。迷ったときは、次の3つの手順で決めてください。
- 関係の近さで距離を決める関連する要素は近づけ、関係の薄い要素は離す。見出しと本文の間は、セクションとセクションの間より狭くする
- 数値をルールで統一する8の倍数など決まった段階から選び、同じ役割の余白には同じ値を使う
- 理由を言葉にして確かめる「なぜこの余白か」を説明できるようにし、実際の画面や紙で見え方を確かめる
余白の量は好みではなく、「何を伝え、どう見せたいか」という目的で決まります。
余白の扱いは、Webサイト、アプリ、バナー、資料など、あらゆるデザインの質を左右します。デザインのスキルを活かせる案件を探すなら、エージェントを比べる方法もあります。
余白の基本原則は？
余白の基本原則は、関連するものを近づける「近接」、構造の大きさに合わせて余白を段階的に変える「階層化」、同じ役割には同じ余白を使う「一貫性」、すべての余白に理由を持つ「意図」の4つです。
| 原則 | 考え方 | 具体例 |
|---|---|---|
| 1. 近接 | 近くにあるものは関係がある、離れたものは別のまとまり、と見る人は受け取る | 見出しと本文の間を、上のセクションとの間より狭くする |
| 2. 階層化 | 大きな区切りほど余白を大きく、細かい要素ほど小さくする | セクションの間は大、カードの間は中、カードの中は小 |
| 3. 一貫性 | 同じ役割の要素には、同じ余白を繰り返し使う | すべてのカードの内側の余白を同じ値にそろえる |
| 4. 意図 | すべての余白に「なぜここに、この大きさか」の理由を持つ | 「この要素との関係を示すため」と説明できる値にする |
余白を広く取ると、落ち着き、上品さ、高級感などの印象を与えやすく、詰めると、にぎやかさや情報量の多さを感じさせやすくなります。どちらが正解ではなく、ブランドや目的に合わせて選ぶものです。
大きな余白と小さな余白はどう使い分ける？
余白は、ページ全体の構造やリズムをつくる大きな余白（マクロ余白）と、読みやすさや操作のしやすさを決める小さな余白（マイクロ余白）に分けて考えると、どこを調整すればよいかが分かりやすくなります。
| 種類 | 主な場所 | 役割 |
|---|---|---|
| マクロ余白 | セクションの間、ページの左右、段組みの間 | ページ全体の構造とリズムをつくり、区切りを分かりやすくする |
| マイクロ余白 | 行間、字間、ボタンの内側、リストの項目の間 | 文章の読みやすさや、押しやすさなど操作のしやすさを決める |
押しやすさは基準で確かめる
ボタンやリンクは、内側の余白も含めた押せる範囲が小さいと、スマートフォンで押し間違いが起きやすくなります。Webのアクセシビリティの国際的なガイドライン（WCAG 2.2）では、押せる範囲を少なくとも24×24 CSSピクセル（レベルAA、例外あり）、より高い基準として44×44 CSSピクセル（レベルAAA）とすることが示されています。ボタンの内側の余白は、押しやすさの基準から逆算して決めると安心です。
あわせて読みたい（文字組みと読みやすさ）
余白の数値はどう決める？
余白の数値は、8の倍数（8、16、24、32、40、48…）など決まった段階の中から選ぶ「8の倍数ルール（8ptグリッド）」を使うと、迷いが減り、デザイン全体の統一感も出ます。細かい部分には4を使うなど、4の倍数と組み合わせることもよくあります。
- 数値に迷わなくなる「28か30か」ではなく、決まった段階から選ぶだけになる
- 実装の段階で端数が出にくい値が決まった段階にそろうため、デザインと実装で同じ数値を使いやすく、エンジニアとも共有しやすい
- 認識のずれが減る「8の倍数で設計している」と伝えるだけで、修正の基準がそろう
- ツールの設定で速くなるデザインツールで、キー操作で動かす幅を8にしておくと、配置も自然にそろう
| 余白の大きさ | 使いどころの例 |
|---|---|
| 4px | アイコンと文字の間など、ごく小さな余白 |
| 8px | ラベルと入力欄の間、リストの項目の中 |
| 16px | カードの内側、まとまりの中の要素の間、スマートフォンでの画面の左右 |
| 24〜32px | 見出しと本文の間、カード同士の間 |
| 40〜64px | セクションの間、パソコンでの画面の左右 |
| 80px以上 | ページ冒頭の大きな見出しの周りや、大きな区切り |
案件の最初に、余白の段階を「S＝8、M＝16、L＝24」のように名前を付けて定義しておくと、デザインと実装で同じ値を使いやすくなります。FigmaのバリアブルやCSSの変数で管理すると、あとからの変更もまとめて反映できます。
あわせて読みたい（UI設計とツール）
余白でよくある失敗と対策は？
よくある失敗は、どこも同じ余白で区切りが分からない、画面の端に余白がなく窮屈、場当たり的な数値が混ざる、デザインと実装で余白がずれる、の4つです。
| よくある失敗 | 対策 |
|---|---|
| どこも同じ余白で、区切りが分からない | 構造が大きいほど余白を大きくし、階層をつける |
| 画面の端まで要素が張り付いて窮屈 | 画面の左右に、スマートフォンとパソコンそれぞれで一定の余白を確保する |
| 12、13、15、18pxなど数値がばらばら | 余白の段階を最初に定義し、その中から選ぶ |
| デザインでは整っていたのに、実装後にずれる | ブラウザが標準で付ける余白（margin、padding）の扱いを、エンジニアと確認する |
あわせて読みたい（制作物ごとの余白）
クライアントに余白の意図をどう伝える？
「余白は情報を整理して伝えるための空間」と役割を説明し、余白の多い案と少ない案を並べて比べてもらい、原則を根拠にひと言添えると、「スカスカに見える」という指摘にも納得してもらいやすくなります。
比較できる案を用意する
余白を広めに取った案と詰めた案を並べ、クライアント自身に見え方を比べてもらいます。
根拠をひと言添える
「関連する情報をまとめて見せるため、この間隔にしています」など、原則にもとづく理由を伝えます。
実際の画面で確かめてもらう
スマートフォンの実機や、印刷した状態で見てもらうと、画面上の印象とのずれに気づきやすくなります。
目的に立ち返って決める
情報量を増やしたい理由を聞き、目的に合う範囲で余白と情報量のバランスを一緒に決めます。
「余白が多い」と言われたときの返信の例文
ご確認ありがとうございます。今回は、初めて見る方にも要点がすぐ伝わるよう、情報のまとまりごとに間隔をとって整理しています。
比較のため、余白を詰めて情報量を増やした案も作成しましたので、スマートフォンでも見比べていただけますでしょうか。
そのうえで、特に追加したい情報があれば教えてください。目的に合わせて配置を調整いたします。
あわせて読みたい（修正のやり取りとデザインの力）
よくある質問（FAQ）
余白は、近接、階層化、一貫性、意図の4つの原則で決める。大きな余白で構造を、小さな余白で読みやすさと押しやすさを整える
数値は8の倍数などの段階から選び、変数として定義してデザインと実装で共有する。数値は目安として実際の見え方で調整する
クライアントには役割を説明し、比較できる案と原則にもとづく根拠を示して、目的に立ち返って一緒に決める
余白の扱いを身につけると、制作の速さと質が同時に上がります。次の案件から「なぜこの余白か」を言葉にしながらデザインしてみてください。
