余白の設計(ホワイトスペース)

作ったバナーを見て「なんかごちゃごちゃする」と感じたことはありませんか？

そういうとき、足りないのは飾りではなく余白です。
余白は「何も置いていない場所」ではなく、置き方を決める道具です。ここでは、どこをどれだけ空けるかを数字で決められるようにします。

余白とは（ホワイトスペース・ネガティブスペース）

余白は、要素と要素のあいだ、要素と枠のあいだに空いている場所のことです。デザインではホワイトスペースとも呼びます。白い必要はありません。背景が黒でも写真でも、何も置いていなければ余白です。

似た言葉にネガティブスペースがあります。こちらは主役（ポジティブスペース）以外の場所を指す言い方で、ロゴやイラストの形を語るときによく使います。
Webやバナーの制作では、どちらも「空けておく場所」という意味で使って問題ありません。

余白が足りないと何が起きるか

要素が詰まると、読む人は3つのことができなくなります。

• まとまりが分からない。どこからどこまでが1つの情報なのか判断できません
• どこから読むか分からない。全部が同じ強さで並んで見えます
• 読む気にならない。文字が詰まっているだけで、人は読み飛ばします

1つ目は4原則の近接そのものです。余白は近接を実行するための手段でもあります。

余白の3つの役割

1. まとめる

近い要素は仲間に見えます。だから、仲間の中は詰めて、仲間どうしは離します。線で区切る前に、余白で区切れないか考えてください。線を引くほど画面はうるさくなります。

2. 目立たせる

主役を目立たせる方法は、大きくするだけではありません。まわりを空けると、それだけで目立ちます。高級ブランドのサイトが文字も写真も小さいのに強く見えるのは、まわりを大きく空けているからです。

3. 読ませる

行間と字間も余白です。行間が狭いと目が次の行を見失います。長い文章ほど、行間を広げたほうが最後まで読まれます◎

余白の決め方（数字の目安）

感覚で空けると、毎回ばらつきます。次の4つを決めておけば迷いません。

1. 単位は8の倍数にする。8・16・24・32・48・64px から選びます。使う値を6つに絞るだけで、画面が揃います
2. グループ間はグループ内の2倍以上。中が8pxなら、外は16px以上。差が小さいと分けたことが伝わりません
3. 外周は内側より広く。バナーやカードの外枠の余白は、中の間隔の1.5倍以上にします
4. 行間は文字サイズの1.7〜2.0倍。16pxの本文なら27〜32pxです。見出しは1.4倍前後まで詰めます

この4つは、そのままCSSの設計にもなります。数字を先に決めておくと、あとで迷わずに済みます💡

余白を調整する順番

外 → 中 → 行間の順で決めると、手戻りが出ません。

1. 外：全体の外周を先に決める。ここが狭いと、中を何度直しても窮屈なままです
2. 中：グループ間の余白を決める。近接のとおり、2倍の差をつけます
3. 行間：最後に文章の読みやすさを整えます

逆からやると崩れます。行間を先に整えても、外周が狭いままだと全体は詰まって見えます。大きいところから決める。これは4原則の順番と同じ考え方です。

やってしまいがちな失敗

空いている場所に何か足してしまう

いちばん多い失敗です。空白が気になって、飾りや文字を置いてしまいます。
直し方は、足す前に減らす。要素を1つ削ると、残ったものが強くなります。余白は埋めるための場所ではありません。

全部を同じ間隔で空ける

等間隔はきれいに見えますが、まとまりが消えます。
直し方は、2種類の間隔を作る。中は狭く、外は広く。差をつけて初めて、グループが伝わります。

端ギリギリまで文字を寄せる

特にバナーで起きます。情報を入れたくて、外周を削ってしまいます。
直し方は、外周を先に確保して、入る分だけ入れる。入りきらないなら、文字を減らします。

スマホで確認していない

PCでちょうどよくても、スマホでは詰まって見えます。画面が狭いぶん、余白の割合が変わるためです。
直し方は、狭い画面から作る。スマホで成立していれば、PCでは余裕が生まれます。

練習：余白だけを直してみる

自分が過去に作ったバナーか資料を1つ開いてください。手元になければ、届いたチラシや会社の資料でも構いません。
文字も色も画像も変えず、余白だけを直します。

1. 外周を広げる。短辺の5%以上を目安にします
2. 情報を2〜3グループに分ける。グループ内は詰め、グループ間は2倍以上あける
3. 使う間隔の種類を数える。4種類を超えていたら、8の倍数に丸めて減らす
4. 行間を文字サイズの1.7〜2.0倍にする

できたら、次のチェックリストで確認してみてください。

• 外周が中の間隔より広い
• グループ間とグループ内の差が2倍以上ある
• 使っている間隔の種類が4つ以内
• スマホの幅で見ても詰まって見えない

Before / After を並べて見ると、変えたのが余白だけだと分かります。この差が余白の効果です。

よくある質問

余白を広げると情報が入りません

入らないのは余白のせいではなく、情報が多いからです。
1つの画面に載せる要素を減らすか、面を分けます。全部載せて全部読まれないより、絞って1つ伝わるほうが結果は出ます。

どこまで空けたら「空けすぎ」ですか

グループが分かれて見えなくなったら空けすぎです。
本来は仲間の2つが、別々のものに見えたらやりすぎ。判断できないときは、少し離れて画面を見てください。まとまりが崩れていなければ大丈夫です。

なぜ8の倍数なんですか

4でも10でも構いません。大事なのは単位を1つに決めることです。8が多いのは、画面のサイズが8で割り切れることが多く、半分の4も使いやすいからです。チームで作るときは、この単位を最初に決めておくと揃います。

余白が広いだけで、おしゃれになりますか

なりません。余白は見づらさを消すところまでが仕事です。
その先の印象は、配色・フォント・写真で決まります。まず読める状態を作って、それから雰囲気を作る。この順番です。

次に学ぶこと

このレッスンのまとめです。

• 余白は空き地ではなく、まとめる・目立たせる・読ませるための道具
• 単位は8の倍数。使う種類は4つ以内に絞る
• グループ間はグループ内の2倍以上、外周は中の1.5倍以上
• 行間は文字サイズの1.7〜2.0倍
• 調整の順番は 外 → 中 → 行間

次のレッスンは「ジャンプ率」。大きい文字と小さい文字の差をどれくらいつけるか、という話です。4原則の対比を数字で扱えるようになります。余白とセットで効くので、続けて読んでみてくださいね。

バナーで実際に使う手順はバナーデザインの手順とコツにまとめています。練習の題材がほしい方はバナーデザインお題20選もどうぞ。