この章では、余白の使い方を学びます。
余白は、Webデザインでとても重要です。
余白が整うと、情報のまとまりがわかりやすくなり、読みやすくなり、ページ全体に落ち着きが出ます。
余白の役割
余白は、何もない空間ではありません。
情報を読みやすくするための大事な要素です。
余白には、次のような役割があります。
- 情報のまとまりを作る
- 重要な情報を目立たせる
- 読みやすさを作る
- 窮屈な印象を減らす
- セクションの切り替わりを伝える
- 操作しやすさを作る
余白がないページは、情報が詰まって見えます。
逆に、余白が大きすぎると、情報のつながりがわかりにくくなることがあります。
近いものは関連して見える
余白を考える時は、近いものは関連して見えるという性質を意識します。
見出しと本文が近ければ、同じまとまりとして見えます。
カード同士の間隔が広すぎると、別々の情報に見えます。
セクション間の余白が狭すぎると、どこから次の内容かわかりにくくなります。
余白は、情報の関係性を伝えます。
セクション間の余白
セクション間の余白は、ページの大きな区切りを作ります。
セクションとは、ページ内の大きなまとまりです。
たとえば、次のようなものです。
- ファーストビュー
- 特徴
- サービス内容
- 実績
- 料金
- よくある質問
- お問い合わせ
セクション間の余白がしっかりあると、内容の切り替わりがわかりやすくなります。
ただし、毎回大きく空けすぎると、ページが間延びします。
内容の重さに合わせて、余白の大きさを決めます。
見出し周りの余白
見出しの上下の余白も重要です。
見出しは、その下に続く内容のタイトルです。
そのため、見出しと下の本文は近く、前の内容とは少し離れている方が自然です。
たとえば、次のような考え方です。
- 見出しの上は広めに空ける
- 見出しの下は本文と近づける
- 同じ階層の見出しは余白ルールをそろえる
見出しの上下が同じ余白だと、どちらの内容に属しているのかわかりにくくなることがあります。
本文周りの余白
本文は、読みやすさを優先します。
本文同士の行間や段落間が詰まりすぎていると、読む負担が増えます。
確認したい項目は次の通りです。
- 行間が狭すぎないか
- 段落間が詰まりすぎていないか
- リストの項目間が読みやすいか
- 本文幅が広すぎないか
- スマホで左右余白が狭すぎないか
本文は、装飾よりも読みやすさが大切です。
カード内の余白
カード内の余白は、情報の見やすさに影響します。
カードの内側に余白がないと、文字や画像が窮屈に見えます。
カード内では、次の余白を確認します。
- カードの内側の余白
- 画像と見出しの間
- 見出しと本文の間
- 本文とボタンの間
- カード同士の間隔
カードが複数並ぶ場合は、カード内の余白ルールをそろえます。
同じ一覧の中で余白がばらばらだと、統一感がなくなります。
ボタン周りの余白
ボタンは、クリックやタップされる要素です。
そのため、ボタン自体の内側余白と、周囲の余白を考えます。
確認したい項目は次の通りです。
- ボタンの文字が窮屈ではないか
- 横幅に余裕があるか
- 高さが押しやすいか
- 近くのテキストと詰まりすぎていないか
- 複数ボタンの間隔が適切か
スマホでは、指で押しやすい大きさも必要です。
ボタンは見た目だけでなく、操作しやすさも考えます。
余白のルールを決める
余白は、毎回感覚だけで決めるとばらつきやすくなります。
そのため、ある程度ルールを決めます。
たとえば、次のような考え方です。
- 小さい余白: 8px
- 中くらいの余白: 16px
- 大きい余白: 32px
- セクション間: 64px
実際の数値はサイトによって変わります。
大切なのは、余白に一貫性を持たせることです。
よくある失敗
余白でよくある失敗は、次の通りです。
- セクション間が狭く、内容の切り替わりがわからない
- 見出しと前の内容が近すぎる
- カード内の文字が窮屈
- ボタンと本文が詰まりすぎている
- 余白が場所ごとにばらばら
- スマホで左右余白が狭すぎる
- 余白を空けすぎて情報が散らばる
余白は、大きければよいわけではありません。
情報の関係性に合わせて調整します。
この章のまとめ
- 余白は、情報のまとまりと読みやすさを作る重要な要素
- 近いものは関連して見えるため、余白で情報の関係性を伝える
- 見出しの上は広め、下は本文と近めにすると流れがわかりやすい
- カードやボタンでは、内側と周囲の余白を確認する
- 次の章では、文字サイズ、行間、太さなど文字のデザインを学ぶ