Webデザインにおける余白の効果｜情報を伝わりやすくする使い方

「余白がもったいないので、もう少し情報を詰めてほしい」。Web制作の現場で頻繁に出る要望です。しかし多くの場合、この変更は逆効果になります。情報量が増えても、読まれる量は増えないためです。

余白（ホワイトスペース）は、装飾でも空きスペースでもありません。どこを見るべきかを指示し、内容のまとまりを伝えるための機能です。余白を削ると、この機能が失われ、結果として「情報はあるのに伝わらない」ページになります。

この記事では、余白が果たす3つの役割を整理したうえで、実務で使える設計ルール、余白を詰めてよい場面と詰めてはいけない場面、そして社内で「余白が多い」と言われたときの説明方法までを解説します。

結論：余白は「空き」ではなく「指示」

余白には3つの機能があります。

2番目のグルーピングは、余白の機能の中で最も見落とされます。人は近くにあるものを「関係がある」と判断します。見出しと本文の間隔より、本文と次の見出しの間隔のほうが狭いと、見出しがどちらにかかるのか判断できません。

要素間の余白を決めるルール

関係の近さと余白を対応させる

設計の基本は1つだけです。関係が近い要素ほど余白を狭く、遠い要素ほど広く。

数値は目安であり、絶対値に正解はありません。重要なのは比率の一貫性です。同じ関係性の箇所で余白量がばらついていると、まとまりが伝わりません。

4の倍数や8の倍数で揃える

余白の値を8px、16px、24px、32px、48pxのように一定の刻みで揃えると、制作者が変わっても一貫性が保てます。「なんとなく20px」「ここは18px」という指定が混ざると、全体の統一感が崩れます。デザインルールとして明文化しておくと、外注時の品質が安定します。

文字まわりの余白

最後の2行が、グルーピングの実装です。見出しの「上」を広く、「下」を狭くする。これだけで、見出しがどの本文にかかるかが明確になります。逆にしているサイトは意外に多く、読みにくさの原因になっています。

スマートフォンでの調整

画面幅が狭いため、PCと同じ余白では窮屈にも間延びにも見えます。

• 左右の余白は16〜24px程度を確保する（端まで文字を詰めない）
• 1行あたりの文字数は20〜25文字程度になる
• セクション間の余白はPCより縮める（縦スクロール量が増えすぎるため）
• 行間はPCと同等かやや広めを維持する

セクション間の余白は、PCの値をそのまま使うと縦に間延びします。左右は確保し、上下は縮めるのがスマートフォンでの基本です。

詰めてよい場面・詰めてはいけない場面

CTAボタンの周囲は特に重要です。ボタンを目立たせる最も確実な方法は、色を強くすることではなく、周囲に余白を取ることです。周囲に他の要素が詰まっていると、色を変えても埋もれます。

「余白が多い」と言われたときの説明

社内レビューで余白の削減を求められたときは、好みの議論にせず、機能の話に戻してください。

3番目は実際によく起こります。大画面のPCで作って確認すると、余白は過剰に見えます。判断は必ず実機で行ってください。ファーストビューの確認方法はファーストビュー設計の重要性で解説しています。

余白の設計が崩れる原因

原因1：ルールが決まっていない

ページごとに担当者の感覚で余白を決めると、サイト全体の一貫性が失われます。8の倍数などの刻みを決め、ドキュメント化してください。

原因2：運用時に要素が追加される

公開後にバナーやお知らせが追加され、当初の余白設計が崩れるケースです。追加する場所と余白量をあらかじめ決めておくと防げます。

原因3：CMSの編集画面で調整してしまう

更新担当者が改行や空白で間隔を調整すると、デバイスによって見え方が変わります。余白はCSSで管理し、編集画面では文章のみを扱う設計にしてください。

原因4：レビューで「詰めて」の指摘が通ってしまう

根拠のない削減要求に応じ続けると、設計意図が失われます。上の説明表を使って、機能の議論に戻してください。

よくある質問

Q. 余白の具体的な数値に正解はありますか？

絶対値の正解はありません。フォントサイズ、行間、画面幅との関係で決まります。重要なのは、同じ関係性の箇所で余白量が揃っていることと、関係の遠さと余白の広さが対応していることです。

Q. 余白を増やすとスクロール量が増えて離脱しませんか？

スクロール自体は離脱の直接原因ではありません。離脱するのは「読み進める理由がない」ときです。むしろ詰まったページのほうが、途中で読むのをやめられます。ただしスマートフォンでは、セクション間の余白をPCと同じにすると間延びするため、上下は縮めてください。

Q. 情報量が多いサイトではどうすればよいですか？

1ページに詰め込むのではなく、ページを分けるか、アコーディオン等で初期表示を絞ってください。余白を削って詰め込むと、情報量は増えても伝達量は増えません。ページの分け方は情報設計（IA）とは？わかりやすいサイト構成の作り方で解説しています。

Q. 余白の効果は数字で確認できますか？

直接的な指標はありませんが、スクロール率、CTAのクリック率、滞在時間の変化で傾向は見えます。改善前後で比較する場合は、余白以外を変更しないようにしてください。

まとめ

余白は空きスペースではなく、視線誘導・グルーピング・可読性という3つの機能を担っています。削ると情報量は増えますが、伝わる量は減ります。

設計の基本ルールは1つ、関係が近い要素ほど余白を狭く、遠い要素ほど広く。特に見出しは「上を広く、下を狭く」することで、どの本文にかかるかが明確になります。値は8の倍数などの刻みで揃え、ドキュメント化してください。

詰めてよいのは一覧表やフッターです。ファーストビュー、見出しまわり、CTAの周囲、本文の行間は詰めてはいけません。特にCTAは、色を強くするより周囲に余白を取るほうが確実に目立ちます。

「情報はあるのに伝わらない」「CTAを目立たせたいが埋もれる」「サイト全体の統一感がない」といった状態にある場合は、要素の追加ではなく余白のルール整備から見直す価値があります。

当社ではデザイン制作からWeb制作、計測設計までを横断して支援しています。資料ではデザインルールの整え方と改善の進め方をまとめていますので、自社の課題を整理したい方はぜひダウンロードしてご活用ください。