余白とは、紙面や画面で情報を分け、まとめ、読み進める場所を作るために、意図して空ける空間です。
机の上を端まで資料で埋めると、次の一枚を置く場所がなくなります。作業用に空けた場所は「余り」ではなく、手を動かすための空間です。デザインの余白も情報を見分ける場所として働きます。ただし、机と画面は同じものではなく、空けるほど読みやすくなるという証拠にはなりません。
3か所の余白を見る
- 要素の内側。 ボタンの文字まわりやカードの内側にある空間
- まとまりの間。 見出しと本文、次の話題との距離
- 外周。 紙面や画面の端と内容との距離
関連する要素の内側は近く、別のまとまりとの間はそれより広くします。外周は内容が端へぶつからないための場所です。三つを同じ幅にする必要はありません。
余白は白色とは限らない
背景が青でも写真でも、要素を置かずに関係を作る空間なら余白として働きます。反対に、白い場所があっても、情報同士の距離が曖昧なら「余った空き」に見えることがあります。色ではなく、空間の役割で判断します。
よくある誤解
「余白は多いほど上品になる」という誤解です。離しすぎると、見出しと本文の関係が切れたり、必要な情報へたどり着きにくくなったりします。目的は空きを増やすことではなく、関係を伝えることです。
30秒で試す
手元の一枚で、見出しとその本文を少し近づけ、次の見出しまでを少し広げてください。線を足さずに二つの話題を分けられれば、その空間は余白として働いています。
関連して学ぶ
- チラシが詰まって見えるのはなぜ — 余白が消える瞬間を分解する記事
- デザイン初心者は何から学ぶ？ — 5つの基本の中での余白の位置づけ
- 余白観測室 — 余白・整列の記事がまとまる学習室