要素を目立たせる余白とは?余白で強調しメリハリをつける方法を解説

要素を目立たせる余白の基本

まずは、余白で要素が目立つ仕組みと、色や文字サイズで目立たせる方法との違いを押さえましょう。

あわせて、強調と深く関わる「メリハリ」という考え方も紹介します。

周りを空けると、要素は目立つ

要素を目立たせる余白とは、目立たせたい要素の周りに、ほかよりも広い余白(何も置かないスペース)を取って際立たせる使い方です。

周りに何もない要素は、ほかの情報と注目を奪い合わないので、自然と視線が集まりやすくなるためです。

UXリサーチ企業のNielsen Norman Groupも、周りに多くの余白がある要素は、ひとつのまとまりとして見られ、より注目を集めると説明しています(Visual Hierarchy in UX: Definition(Nielsen Norman Group、英語))。

余白には、目立たせるほかにも情報を整理する・視線を導く・印象を作るといった役割があり、全体像は余白とはで解説しています。

次の見本は、同じ商品の紹介で、申し込みボタンの周りの余白だけを変えたものです。

ボタンの色も大きさも変えていないのに、OKの見本のほうがボタンに目が向くはずです。

色や文字サイズを変えずに強調できる

余白で目立たせる方法のよいところは、色や文字サイズを増やさずに強調できることです。

目立たせたいものが出てくるたびに色を足したり文字を大きくしたりすると、色数や文字サイズの種類が増え、画面全体が騒がしくなってしまうためです。

余白という別の手段を持っておくと、色や大きさは控えめなまま、伝えたい要素に注目を集められます。

もちろん、色や文字サイズと組み合わせることもでき、色での強調は強調色の使い方、文字サイズの差のつけ方はジャンプ率の記事で解説しています。

メリハリとは「詰まった部分」と「空いた部分」の差

余白で強調するときに欠かせないのが、メリハリ(強弱の差)という考え方です。

余白による強調は、周りに「詰まった部分」があってはじめて、「空いた部分」が特別に見えるという仕組みで成り立っているからです。

次の見本は、同じ告知を、余白の配り方だけ変えて3通りに並べたものです。

見本Aは情報が均等に並び、タイトルが目立ちません。

見本Bは余白こそ多いものの、どこも同じように空いているので、かえってタイトルが特別に見えません。

見本Cは、詳細を詰めて「密」な部分を作ったことで、タイトルの周りの「疎(まばら)」な余白が際立ち、タイトルに目が向きます。

混んだ電車ではぽっかり空いた1席がすぐ目に付きますが、ガラガラの車内ではどの席も特別には見えません。
余白も同じで、主役の周りを空けることと、主役以外を寄せて詰めることは、いつもセットで考えます。

余白で強調・メリハリをつける方法

ここからは、実際に余白で要素を目立たせるときの進め方を、4つのステップで紹介します。

大切なのは、余白を「足す」ことよりも、余白の「差」を作ることです。

一番目立たせたいものを1つに絞る

まずは、その画面やセクションで一番目立たせたい要素を1つだけ決めましょう。

目立たせたいものが複数あると、それぞれの周りに余白を作ることになり、結局どれも同じ強さに見えてしまうためです。

Webページなら申し込みボタン(CTAボタン。CTAは「Call to Action(行動の呼びかけ)」の略で、購入や申し込みなど利用者に起こしてほしい行動を促すボタン)、バナーならキャッチコピーが、主役になることが多いでしょう(CTAボタン全体の作り方はCTAボタンとは、キャッチコピーの見せ方はキャッチコピーのデザインの記事で解説しています)。

主役の周りを、ほかの間隔より広く空ける

主役が決まったら、その周りの余白を、ほかの要素どうしの間隔よりはっきり広くします。

ほかの間隔とほとんど同じ広さでは、見る人には違いが伝わらないからです。

申し込みボタンのOKの見本でも、ボタンの上下の余白を、ほかの行の間隔より何倍も広くしています。

周りの情報は、まとめて詰める

主役以外の情報は、関係の近いものどうしでまとめて、少し詰めて配置しましょう。

周りが適度に詰まっているからこそ、主役の周りの余白が「意図的な空き」として際立つためです。

ページ全体がまばらだと、どの余白が強調のためのものなのか、見る人には区別がつきません。

少し離れて見て確かめる

余白を調整したら、画面から少し離れたり、目を細めたりして、全体をぼんやり眺めてみましょう。

細かい文字が読めない状態にすると、要素のかたまりと余白の配置だけが見えるので、本当に主役が目立っているかを確かめやすくなります。

作った本人は内容を知っているので、ふつうに見るとつい文字を読んで「目立っているはず」と判断してしまうためです。
目を細めるのが難しければ、デザインツールで画面を小さく縮小表示しても同じ確かめ方ができます。

ぼんやり見たときに最初に目が行く場所が主役でなければ、主役の周りの余白をもう少し広げるか、周りの情報をもう少しまとめて詰めてみてください。

実践のポイント

余白で要素を目立たせるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 目立たせたい要素を増やしすぎて、あちこちに広い余白を作ってしまうことがあります。
  強調の余白は、1つの画面やセクションにつき1か所を基本にしましょう。
• ページ全体に余白を均等に配ってしまい、「ここぞ」という強調ポイントが作れていないことがあります。
  余白の量が多くても、差がなければメリハリは生まれません。
• 主役を目立たせようと周りの余白を広げすぎて、主役がほかの情報から切り離されて見えることがあります。
  たとえばボタンが説明文から離れすぎると、何のボタンか分かりにくくなるので、関係のある説明とのつながりは保ちましょう。
  離しすぎかどうか迷ったら、ボタンを見て「上の説明のボタンだ」とすぐに分かるかを確かめます。ボタンがぽつんと孤立して見えたら、離しすぎの合図です(まとまりの考え方は情報を整理する余白とはで解説しています)。

よくある質問

• Q. 余白で目立たせるのと、色で目立たせるのはどちらがいい?
  A. どちらか一方が正解というわけではなく、組み合わせて使うのが一般的です。
  ただ、色は使いすぎると画面が騒がしくなるので、色を足す前に余白で目立たせられないかを先に試すと、すっきりした仕上がりになりやすくなります(色数を抑える考え方は色数を増やしすぎない考え方で解説しています)。
• Q. スマートフォンのように狭い画面でも、余白で強調できる?
  A. できます。
  狭い画面では広い余白を取りにくいものの、強調の効果を生むのは余白の絶対的な広さではなく、ほかの間隔との差です。
  周りの間隔を少し詰めて、主役の上下だけを広めに残すと、狭い画面でもメリハリをつけられます。
  たとえばふだんの間隔が8pxなら、主役の上下だ、16〜24pxほど空けるだけでも、違いは十分に伝わります。
• Q. 余白で目立たせると、視線の流れも変わる?
  A. 変わります。
  周りが空いた要素には目が向きやすいので、余白の配置は見る順番にも影響します(視線の動き方は視線誘導とはの記事で解説しています)。

まとめ

要素を目立たせる余白とは、主役の周りをほかより広く空けることで、色や文字サイズを変えずに注目を集める使い方です。

強調の効果を生むのは余白の量ではなく、詰まった部分と空いた部分の差(メリハリ)なので、主役を1つに絞り、周りの情報はまとめて詰めることが大切です。

まずは自分のデザインを目を細めて眺め、最初に目が行く場所が一番伝えたい要素になっているかを確かめてみてください。