余白とは?デザインにおける意味と4つの役割を見本付きで初心者向けに解説

余白とは?デザインにおける余白の基本

まずは、デザインでいう余白の意味と、余白がどこにあるのかを押さえましょう。

「何も置いていない場所」という捉え方を変えるのが、この記事の出発点です。

余白とは「意図して空けたスペース」のこと

デザインにおける余白とは、文字・画像・ボタンなどの要素が置かれていない、意図して空けたスペースのことです。

もともと余白という言葉は、紙の上で文字や絵が書かれていない白い部分を指します。

デザインの世界では「ホワイトスペース」や「ネガティブスペース」とも呼ばれますが、色が白である必要はなく、背景が色付きでも写真でも、要素のない空間はすべて余白として扱います(Negative Space(Interaction Design Foundation、英語))。

「ネガティブ」は悪い意味ではなく、文字や写真のような主役を「ポジティブスペース」、その周りの空間を「ネガティブスペース」と呼び分ける言葉です。

次の見本は、まったく同じ内容のカードを、余白の取り方だけ変えて並べたものです。

文字の大きさも色も同じなのに、OKの見本のほうが読みやすく、ボタンも目に入りやすいはずです。

このように、余白は情報そのものを変えずに、情報の見え方を変える要素です。

「何もない」ではなく「意図的に空ける」という考え方

余白を上手に使う第一歩は、余白を「たまたま空いている場所」ではなく、「ここには何も置かない」と決めた結果として捉えることです。

余白を受け身で捉えていると、空いたスペースを見るたびに「もったいない」と感じ、つい何かを詰め込みたくなるためです。

たとえば、バナーの隅が空いているからといって、アイコンや補足の文言を足していくと、肝心のキャッチコピーやボタンが埋もれてしまいます。

一方で、余白を「設計するもの」と考えると、「ここはボタンを目立たせるために空けている」のように、1つ1つの余白に理由を持たせられます。

余白はどこにある?小さな余白と大きな余白

余白というと画面の広い空きを思い浮かべがちですが、実際にはデザインのあらゆる場所に余白があります。

海外のデザイン解説では、文字の行と行の間のような要素の中の小さな余白を「ミクロな余白」、セクションの間のような大きな余白を「マクロな余白」と分けて説明することもあります(Interaction Design Foundation、英語)。

ミクロは「とても小さい」、マクロは「全体を見渡す大きな」という意味で、ミクロな余白は部品の中のすき間、マクロな余白は部品と部品の間や画面全体のすき間、と考えると分かりやすいでしょう。

具体的には、次のような場所が余白にあたります。

余白の大きさ	余白がある場所の例
小さな余白	文字と文字の間(字間)、行と行の間(行間)、ボタンやカードの内側
中くらいの余白	見出しと本文の間、段落と段落の間、カード同士の間
大きな余白	セクションとセクションの間、画面やバナーの端の空き

字間や行間も余白の一種なので、文字の読みやすさも余白の取り方に大きく左右されます(行間の考え方は行間と行長の記事、字間の調整はカーニングとトラッキングの記事で解説しています)。

余白を作るときは、要素の周りに目に見えない透明なクッションをまとわせるようなイメージを持つと、どこをどれだけ空けるか考えやすくなります。

デザインにおける余白の4つの役割

余白には、大きく分けて「整理する」「目立たせる」「視線を導く」「印象を作る」という4つの役割があります。

ここでは全体像をつかむために、それぞれを簡単に紹介します。

役割	余白で何ができるか	身近な例
情報を整理する	どれとどれが同じまとまりかを伝える	見出しと本文を近づけ、次の話題とは離す
要素を目立たせる	周りを空けて、大事な要素に注目を集める	申し込みボタンの周りだけ広く空ける
視線を誘導する	見てほしい順番に目を動かす	キャッチコピーからボタンへ、空きをたどって目が流れる
印象を作る	窮屈・ゆったり・にぎやかなどの雰囲気を変える	高級な商品のページは余白を広く取る

情報を整理する

余白のいちばん基本的な役割は、情報のまとまりを伝えることです。

人には、近くにあるものを同じグループだと感じる性質があり、デザインではこれを「近接(関係のあるものを近くに置くこと)」の原則と呼びます(Proximity Principle in Visual Design(Nielsen Norman Group、英語))。

線や枠で囲まなくても、近づけるか離すかだけで「これは同じ仲間」と伝わるのは、この性質のおかげです(詳しくは近接の原則とはで解説しています)。

次の見本は、お店の案内を同じ間隔で並べたものと、関係の近い項目どうしを近づけたものです。

OKの見本では、線や枠を足していないのに、「営業時間」と「アクセス」の2つのまとまりがひと目で分かります(余白でまとまりと区切りを伝える方法は情報を整理する余白とはで解説しています)。

要素を目立たせる

余白は、文字を大きくしたり色を変えたりしなくても、要素を目立たせる手段になります。

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

たとえば、申し込みボタンの周りだけをほかより広く空けると、「ここが大事な操作だ」と伝わりやすくなります(余白で強調する方法は要素を目立たせる余白とはで解説しています)。

視線を誘導する

余白の配置を工夫すると、見る人の目を、見てほしい順番に動かせます。

要素がぎっしり並んでいると、どこから見ればよいか迷いますが、余白で区切られていると、まとまりごとに順番に目を移していけるためです。

余白で区切られたところは「ここで一区切り」という合図になり、見る人はそこでひと息ついてから、次のまとまりへ目を移します。

たとえば、キャッチコピーと説明文の後に広めの余白を置き、その先にボタンを置くと、「読む→ひと息つく→ボタンを見る」という順番を作れます(余白で読む順番を作る方法は視線を誘導する余白とはで解説しています)。

視線の動き方そのものについては、視線誘導とはの記事で詳しく解説しています。

印象を作る

余白の量は、デザイン全体の雰囲気も左右します。

余白を広く取ると落ち着いた印象に、余白を狭くすると情報が多くにぎやかな印象になりやすい傾向があります。

高級な商品を扱うサイトに余白の広いデザインが多く、セールのチラシに情報がぎっしり詰まったデザインが多いのは、この性質を使い分けているためです。

余白の量による印象の違いと、高級感やにぎやかさを余白で作る方法は、余白が与える印象とはの記事で詳しく解説しています。

余白を意図して作るための考え方

余白の役割が分かったら、実際にデザインするときに「意図して空ける」ための考え方を身につけましょう。

難しいテクニックではなく、作業の順番と考え方を少し変えるだけです。

要素を足す前に「空けておく」を検討する

空いているスペースを見つけたら、すぐに埋めずに「本当にここに何か必要か」を考えましょう。

要素を1つ足すたびに、ほかの要素の存在感は少しずつ弱くなるためです。

「寂しいから」という理由で足したくなったときは、その余白が何かを目立たせたり、区切ったりする役割を果たしていないかを先に確かめます。

「近いもの」と「遠いもの」を決めてから空ける

余白の広さは、なんとなくではなく、要素どうしの関係の近さで決めるのが基本です。

関係の近い要素は近くに、関係の遠い要素は離して置くと、余白がそのまま情報の構造を表してくれます。

たとえば、見出しとその本文は近く、本文と次の見出しは遠く、という順番で考えると迷いにくくなります。

慣れないうちは、使う間隔を「小・中・大」の3段階くらいに決めておくと迷いません。

たとえば小を8px、中を16px、大を32pxのように決め、見出しと本文の間は小、段落と段落の間は中、話題が変わるセクションの間は大、と割り当てると、感覚ではなく理由を持って余白を決められます(セクションの間の余白についてはセクション間の余白とはで解説しています)。

空けた理由を言葉にしてみる

デザインができたら、主な余白について「なぜここを空けたのか」を一言で説明できるか確かめましょう。

理由を言えない余白は、感覚で決めた余白なので、ほかの場所と広さがばらついていたり、役割があいまいになっていたりすることが多いからです。

「ボタンを目立たせるため」「ここから別の話題になるから」のように説明できれば、その余白は意図して作れています。

理由を言葉にできると、依頼主から「空いているところに情報を足したい」と言われたときにも、余白を残す根拠を説明できます。

実践のポイント

余白を意識し始めたばかりの人が陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 情報をたくさん載せたいあまり、余白を削って詰め込んでしまうことがあります。
  すべてが同じ強さで並ぶと、かえって何も伝わらなくなります。
  載せる情報に優先順位をつけ、余白を残せないか検討しましょう。
• 「余白が多い=手を抜いている」と感じて、空きを埋めることを優先してしまうことがあります。
  意図して空けた余白は、手抜きではなくデザインの一部です。
• 反対に、余白は多いほどよいと考えて、どこも広く空けすぎてしまうこともあります。
  関係の近い要素まで離れると、まとまりが分からず間延びして見えます(次の見本)。
  大切なのは量ではなく、近いものと遠いものの差です。

よくある質問

• Q. 余白は何pxくらい空ければいいの?
  A. どんな場面にも当てはまる「正解の数値」はありません。
  画面の大きさや情報量、伝えたい印象によって適切な広さが変わるためです。
  まずは「関係の近いものは狭く、遠いものは広く」と差をつけることを優先し、慣れてきたら使う間隔を何種類かに絞ってルール化していきましょう。
• Q. Wordなどで設定する「余白」と同じもの?
  A. Wordの余白設定は、主に用紙の上下左右の端に空ける部分を指します。
  これはデザインでいう「画面や紙面の端の余白」にあたり、この記事で紹介した余白の一部です。
  デザインでは、端の余白に加えて、要素と要素の間の空きもすべて余白として考えます。
• Q. 余白を広くすると、情報が少なく見えてしまわない?
  A. 余白を広く取ると、一度に目に入る情報は確かに減ります。
  ただ、そのぶん1つ1つの情報が読み取りやすくなり、大事な情報に注目してもらいやすくなります。
  どうしても多くの情報を載せたい場合は、余白を一律に削るのではなく、まとまりの間の余白だけは残すようにしましょう。

まとめ

余白とは、要素が置かれていない「何もない場所」ではなく、デザインのために意図して空けたスペースのことです。

余白には、情報を整理する・要素を目立たせる・視線を導く・印象を作るという4つの役割があり、情報そのものを変えずに見え方を変えられます。

まずは自分が最近作ったデザインを1つ開き、主な余白について「なぜここを空けたのか」を一言で説明できるか確かめてみてください。