余白
01 余白とは？
余白（White Space / Negative Space）とは、デザインの中に意図的に設けられた「何もない空間」のことです。テキスト・画像・ボタンなどの要素が存在しない領域を指し、「ネガティブスペース」とも呼ばれます。余白は「何もない」のではなく、「意図的にそこにある」ものとして設計されます。
余白には2種類あります。①マクロ余白：ページ全体・セクション間・コンテンツブロック間の大きな空白。②ミクロ余白：文字間・行間・要素間の細かい空白。どちらも読みやすさ・情報の優先度・ブランドの印象を決定する重要な要素です。
02 なぜ余白が重要なのか
余白が重要な理由は3つあります。①視線の誘導：余白が多い場所は視線が引き寄せられる。重要な要素の周囲に余白を設けることで、自然と注目を集められます。②可読性の向上：適切な行間・文字間・段落間の余白がテキストの読みやすさを劇的に改善します。③ブランドの印象形成：余白が多いデザインは「高級感・洗練・信頼性」を伝えます。
心理学的には、余白は「ゲシュタルトの法則」の「図と地の関係」と深く関連しています。余白（地）があることで要素（図）が際立ち、ユーザーの認知負荷が下がります。
03 余白の実例6選
世界で最も余白を活用したWebサイトのひとつ。製品を余白で際立たせ「洗練・革新・高品質」のブランドイメージを余白が伝えている。
巨大な余白の中央に検索窓のみ。シンプルな余白設計が「検索に集中させる」という目的を完璧に果たしている。
VogueやHarper’s Bazaarのページは余白が贅沢に使われている。余白の多さが高級感・ステータスを視覚的に伝える。
シャネル・エルメスのパッケージは情報が最小限で余白が多い。余白が「説明不要の品質」という自信を演出している。
各要素の周囲に十分な余白があり、タップしやすく・見やすい。余白がアクセシビリティと美しさを同時に実現している。
作品の周囲に広い余白（壁のスペース）を取ることで作品が際立つ。密集した展示より余白ある展示の方が作品の価値が高く感じられる。
04 余白のデザイン活用法
-
CTAボタンの周囲に十分な余白を確保する：ボタンの周囲の余白が大きいほど目立ち・クリックしやすくなる。余白はCVRに直結する重要な設計要素。
-
行間（line-height）を1.6〜1.8に設定する：本文テキストの行間が詰まると可読性が大幅に下がる。1.6〜1.8のline-heightが最も読みやすいとされている。
-
セクション間に十分なパディングを取る：コンテンツブロック間の余白がページの「呼吸」を作る。余白なしで詰め込むと情報が整理されて見えない。
-
重要な要素ほど周囲の余白を大きくする：最も伝えたいメッセージ・ビジュアルの周囲に最も大きな余白を設ける。余白の大きさが情報の優先度を伝える。
4px・8px・16px・32px・64pxなど、倍数で統一した余白体系を作る。バラバラな余白はデザインの一貫性を損なう。
最重要要素に最大の余白、補足情報には小さな余白という階層を作る。余白が情報設計（IA）を視覚化する。
スマホ画面では余白のバランスが大きく変わる。デスクトップの余白をそのままモバイルに適用せず、画面サイズに合わせて再設計する。
05 マーケティングへの応用
-
LPのファーストビューは余白を贅沢に使う：情報を詰め込んだファーストビューより、大きな余白でメインメッセージを際立たせた方がCVRが高くなるケースが多い。
-
メールのデザインに余白を活用する：HTMLメールで適切な余白を設けることで可読性と開封後のエンゲージメントが高まる。テキスト密度の高いメールは読まれにくい。
-
SNS投稿画像に余白を意図的に入れる：テキスト・画像がぎっしり詰まった投稿より、余白を活かしたシンプルな投稿の方がフィードで目立ちやすい。
-
高単価商品ほど余白を多くする：価格帯が高いサービスのLPほど余白を豊かに使う。余白の量がブランドの格と信頼感を伝える。
06 注意点
クライアント・上司から「余白が多すぎる・もったいない」と言われることがあります。余白は意図的な設計であり、情報の優先度・ブランド価値・可読性を向上させるものだということを、具体的な事例を示して説明しましょう。
余白には適切な量があります。コンテンツとのバランスを欠いた過剰な余白は、情報量不足・手抜きの印象を与えます。余白は「伝えたい内容を際立たせるため」に使い、コンテンツの質と両立させることが重要です。
07 まとめ
- ◉デザインの中に意図的に設けられた「何もない空間」。ネガティブスペースとも呼ぶ
- ◉視線誘導・可読性向上・ブランド印象形成の3つの役割を持つ
- ◉重要な要素ほど周囲の余白を大きくする。余白の量が情報の優先度を伝える
- ◉高単価・高品質なブランドほど余白を豊かに使う。AppleやLVMHが典型例
- ◉余白は「手抜き」ではなく「意図的な設計」。コンテンツの質と両立させることが前提
コメント