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