「空いているところがもったいない」と感じて、情報をぎゅっと詰めていませんか。余白は空きではなく、内容を区切り、主役を見せるための場所です。
余白は、同じ内容の中では小さく、別の内容との間では大きく取るのが基本。外側の余白、要素の間、文字の行間を分けて確認すると整えやすくなります。
余白を広げると、情報が入りきりません。
PORT編集部先に情報の優先順位を決め、なくても伝わる文言を削りましょう。文字を極端に小さくして詰め込むより、内容を分けるほうが読まれやすい場合があります。
- 余白は「何もない場所」ではない
- 3種類の余白を順に整える
- 余白の大小で情報を整理する
余白は「何もない場所」ではない
写真と見出しの距離、カード同士の間隔、画面の端から文字までの幅には意味があります。近いものを一組として見せ、別のまとまりを離す。余白があると、読み手はどこで区切ればよいか分かります。
| 場所 | 役割 | 確認点 |
|---|---|---|
| 画面の外側 | 窮屈さを防ぐ | 左右が極端に狭くないか |
| 同じグループ内 | 関係を示す | 見出しと本文が離れすぎないか |
| グループ間 | 話題を区切る | 内側より広いか |
余白は情報の区切りになる
同じ情報でも、見出しと開催情報をまとめ、申込の前を広く空けると区切りが分かります。
3種類の余白を順に整える
まず画面の外側に一定の余白を取り、文字が端に張り付かないようにします。次に見出しと説明、カード同士の距離を決めます。最後に本文の行間を見て、詰まりすぎ・開きすぎを調整します。
余白の大小で情報を整理する
例えば「イベント名＋日時」を一組にし、その下の「申込方法」との間を広げます。同じグループの内側を狭く、違うグループとの外側を広くすると、線を引かなくても情報の階層が伝わります。
余白を埋めすぎるNG例
小さな文字を空きに足す、背景模様で埋める、意味のないアイコンを増やす。こうした追加は、主役への視線を散らします。余白が気になるときは、情報が足りないのか、それとも主役をもっと見せたいのかを先に判断しましょう。
スマホでは余白を再確認
PCで横に並べた二つのカードをスマホで縦にすると、カード内とカード間の距離が同じになりがちです。小さな画面でも、カードの内側と次のカードとの間に差をつけます。文字が端に寄りすぎていないかも確認しましょう。
実例｜イベント案内の詰め込みを直す
見出し、日時、説明、申込ボタンが上下ほぼ同じ間隔。画面の端にも文字が近く、息苦しく見える。
左右の余白を確保し、見出しと説明は近く、申込情報との間は広く取る。装飾を減らして主役を残す。
直す手順
- 外側に余白を作って文字を端から離す。
- 同じ話題を近づけ、別の話題を離す。
- スマホで窮屈な箇所があれば、文章を短くする。
まとめ
余白は「余ったスペース」ではなく、情報を読ませるための設計です。何を近づけ、何を離すかから考えましょう。
