余白のコントラストとは?密と疎の対比でデザインにメリハリをつける方法

余白のコントラストの基本

まずは、余白のコントラストとは何か、なぜ余白の差だけでメリハリが生まれるのかを押さえましょう。

余白のコントラストとは

余白のコントラストとは、余白の少ない「密」な部分と、余白の多い「疎」な部分を並べ、その差によってメリハリを生み出す考え方です。

コントラストは「対比」や「差」という意味で、デザインでは、2つのものの違いをはっきりさせて目立たせることを指します。

コントラストというと、白と黒のような色の明るさの差を思い浮かべる人が多いでしょう。

しかし、大きい文字と小さい文字、太い文字と細い文字と同じように、余白の「多い・少ない」も対比を作る材料になります。

ここでいう「密」は、要素どうしの間隔が狭く、情報がぎゅっと詰まっている状態です。
「疎」は、要素の数が少なく、周りに広い余白がある、ゆったりした状態です。

余白の差だけでメリハリが生まれる理由

余白の差でメリハリが生まれるのは、人の目が「周りと違うところ」に引きつけられるからです。

ぎっしり詰まった情報のすぐそばに、広々とした空間があると、その差によって空間の側に目が向きます。

ユーザビリティ(使いやすさ)の調査で知られるNielsen Norman Groupも、周りに多くの余白を持つ要素はひとまとまりとして認識され、より注目を集めると説明しています(Visual Hierarchy in UX: Definition(英語))。

次の見本は、同じ文字・同じ色で、余白の配り方だけを変えたものです。

見本Aは、どの行も同じ間隔で並んでいるため、最後の一文も仕様の一部のように見えてしまいます。

見本Bは、仕様をひとかたまりに詰めたことで、その下に広い余白ができ、伝えたい一文がはっきり目に入ります。

数値でいうと、見本Aはどの行の下も同じ14pxずつ空けています。
見本Bは、スペック4行の間を2pxまで詰めて1つのかたまり(密)にし、スペックと一文の間だけを40px空けて(疎)います。

40pxは、この見本の文字1行分の高さのおよそ2倍なので、スペックの下に2行分の空白を入れて、一文をぽつんと置いたイメージです。

色や文字サイズは変えていないのに、余白の量に差をつけただけで、情報の強弱が伝わるようになりました。

色のコントラストとの違い

色のコントラストと余白のコントラストは、どちらも「差」で目立たせる点は同じですが、使う材料が違います。

比べるポイント	色のコントラスト	余白のコントラスト
差をつけるもの	色の明るさ・鮮やかさ	余白の量(詰める・空ける)
得意なこと	1つの要素をピンポイントで目立たせる	ページの中の「まとまり」と「区切り」を目立たせる
気をつけること	色数が増えると散らかる、色だけでは伝わらない人がいる	ページが長くなる、空けすぎると間延びする

色の見え方は人によって違い、色の区別がつきにくい人もいます。

そのため、Webのアクセシビリティ(誰もが情報を利用できるようにすること)の国際的なガイドラインであるWCAG(Web Content Accessibility Guidelines。Webの標準化団体W3Cが定めたもの)でも、色の違いだけで情報を伝えないことが求められています(WCAG 2.1 達成基準 1.4.1 色の使用(WAICによる日本語訳))。

余白のコントラストは色に頼らない手段なので、色と組み合わせると、より多くの人にメリハリが伝わるデザインになります。

文字と背景の色のコントラストについては、コントラスト比とは?WCAGの基準をやさしく解説で詳しく解説しています。

余白のコントラストでメリハリをつける方法

ここからは、余白のコントラストを実際のデザインに取り入れる方法を3つ紹介します。

ページの中に「密」と「疎」の場所を作る

Webページやチラシ全体では、情報の多い「密」なエリアと、要素を絞った「疎」なエリアを交互に置くと、単調さがなくなります。

どこもかしこも同じ密度だと、たとえ色や文字サイズに強弱をつけても、ページ全体が平らに見えてしまうためです。

次の見本は、Webページの縦の並びを簡単な図にしたものです。

NGの見本は、画像・見出し・文章がどこも同じ間隔で並び、流し見したときに止まる場所がありません。

OKの見本は、詰まった情報のあいだに広い余白のエリアがあるため、見出しとボタンのところで自然と目が止まります。

実際のWebサイトに置き換えると、商品写真とスペックがずらりと並ぶエリア(密)の後に、キャッチコピー1行と申し込みボタンだけの広々としたエリア(疎)が来て、その後にまたお客様の声の一覧(密)が続く、という並びです。

このような「商品の特徴」「お客様の声」「よくある質問」といった、見出しと内容をひとまとめにしたテーマごとのブロックを、セクションと呼びます(セクション間の余白の取り方はセクション間の余白とはで解説しています)。

情報の多いセクションの直後に、要素を1〜2個に絞ったシンプルなセクションを置くと、内容の切り替わりも見た目で伝わります。

一番伝えたいものを「疎」の側に置く

密と疎を作ったら、一番伝えたい要素は「疎」の側、つまり余白の広い場所に置きます。

周りが詰まっているほど、広い余白に置かれた要素は「特別なもの」として目に入りやすくなるからです。

たとえばキャンペーンページなら、商品の細かな説明は密にまとめ、キャッチコピーや申し込みボタンの周りだけを大きく空けると、見てほしい場所がはっきりします。

反対に、細かな情報を「疎」の側に置いてしまうと、余白が大事なものを指し示しているように見え、見る人を迷わせてしまいます。

余白の差は「はっきり」つける

余白のコントラストを作るときは、差を中途半端にせず、ひと目で分かるくらいはっきりつけるのがコツです。

差が小さすぎると、見る人には「わざと変えた」のではなく「そろえ損ねた」ように見えてしまうためです。

デザインの基本書でもよく言われるように、「同じにするなら完全に同じに、違えるならはっきり違える」と考えると判断しやすくなります。

NGの見本は、余白に差はあるものの小さすぎて、全体がなんとなく均等に並んでいるように見えます。

OKの見本は、まとまりの中は詰め、まとまりとまとまりの間は大きく空けたので、2つのグループがひと目で分かります(距離で仲間を伝える考え方は近接の原則とはで解説しています)。

数値で比べると、NGの見本は14px÷10pxで1.4倍ほどの差しかありませんが、OKの見本は32px÷6pxで5倍以上の差があります。

迷ったときは、まとまりの間の余白を、まとまりの中の余白の2倍以上にすることを目安にしましょう。

実際のページでは、まとまりの中を8px、まとまりの間を24〜32pxのように、8の倍数の中から選ぶと決めやすくなります(8pxグリッドとは)。

実践のポイント

余白のコントラストを使うときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 色や文字サイズの強弱ばかりに気を取られ、余白の量がページ全体で均一なままになっていることがあります。
  デザインを少し離れて見て、「詰まった場所」と「空いた場所」があるかを確かめましょう。
• 「疎」を作ろうとして、どこもかしこも広く空けると、今度はページ全体が間延びして差がなくなります。
  疎が引き立つのは、密な場所があるからです。
• 「密」にするときに要素どうしを詰めすぎて、文字や画像がくっついてしまうことがあります。
  密な場所でも、まとまりの区切りや読みやすさに必要な最低限の余白は残しましょう。
• 余白の差に加えて、色・太字・大きな文字など、あらゆる強調を同じ場所に重ねすぎると、かえって主張が強すぎて落ち着かない画面になります。
  まずは余白の差だけでどこまで伝わるかを試してから、足りない分を色や文字サイズで補いましょう。

よくある質問

• Q. 余白の差は何倍くらいつければいい?
  A. 決まった倍率はありませんが、並べて見たときに「明らかに違う」と感じられることが大切です。
  迷ったら、まとまりの中の余白の2倍以上を目安に広げてみて、実際の画面で区切りが伝わるかを確かめましょう。
• Q. 余白のコントラストと「余白による強調」は違うもの?
  A. 重なる部分の多い考え方です。
  余白のコントラストは、ページ全体の「密」と「疎」の対比でメリハリをつけることに注目し、その対比を使って特定の要素を目立たせるのが余白による強調だと考えると整理しやすいでしょう。
  余白による強調は要素を目立たせる余白とはで解説しています。
• Q. 情報量が多くて、「疎」の場所を作る余裕がありません。
  A. すべての情報を同じ重さで並べる必要があるかを見直してみましょう。
  たとえば、長い文章で説明している部分は箇条書きに、スペックは表に、短い特徴はアイコンと短い一文に置き換えると、同じ内容でも占める面積が小さくなり「密」にまとまります。
  そうして空いたスペースを、伝えたいことの周りの「疎」に回しましょう。

まとめ

余白のコントラストとは、余白の少ない「密」と多い「疎」を並べて、その差でメリハリを生み出す考え方です。

ページの中に密と疎の場所を作り、一番伝えたいものを疎の側に置き、差をはっきりつけると、色に頼らなくても情報の強弱が伝わります。

まずは、自分が作ったページやスライドを縮小表示して文字が読めない状態にし、「詰まった場所」と「空いた場所」がどこにあるかを確かめてみてください。

文字が読めなくなると内容の意味に気を取られず、要素のかたまりと余白の配置だけを見られるので、密と疎のバランスがよく分かります。

色の強弱で視線を集める方法は強調色の使い方で、余白の学び方の全体像はデザイン初心者のための余白学習ロードマップで紹介しています。