余白は関連する情報を近づけ異なる話題の境目を示す
余白を設計する時は、どの文章と画像が同じ説明に属するかを決めます。見出しと直後の本文、写真と説明文の関係を距離で示し、話題が変わる箇所には別の間隔を設けます。余白だけで高級感や信頼が決まるという断定は、制作の判断基準として使えません。
料金表の下に問い合わせボタンを置くなら、料金に関する補足と次の操作を区別できる配置を考えましょう。余白を一律に増やす方法より、文章の関係に合わせた調整が必要です。
ホームページの余白を設計する｜関連する情報と話題の境目を示す
概要
ホームページの余白は、見出しと本文、写真と説明、異なる話題の関係を示します。この記事では、要素の距離を決める方法、段落や行間の点検、狭い画面での配置、利用者が文字間隔を変更した際の表示を解説します。
公開日
更新日
見出しと本文の関係に合わせて距離を決める
同じ説明に属する要素は近くに配置し、別の話題へ移る箇所には広い間隔を設ける方法から試します。数値を決めた後は、実際の原稿で関係が伝わるかを点検します。
写真と説明文を一つのまとまりとして配置する
実績写真の説明が次の写真へ近づくと、何を説明しているかが曖昧になります。画像とその説明を同じ領域に置き、事例同士には別の間隔を設けます。
| 組み合わせ | 距離を決める目的 |
|---|---|
| 見出しと本文 | 見出しが説明する範囲を示す |
| 写真と説明文 | どの写真の説明かを示す |
| 異なる節 | 話題の切り替わりを示す |
| FAQと記事ナビゲーション | 回答と次の記事への操作を区別する |
余白と見出しの構造を両方設計する
画面上の距離に加え、見出しにはH2やH3を使います。W3Cは、内容の関係に沿って見出しを階層化する方法を説明しています。空行や大きな文字だけで節を表現すると、見出しを使った移動に構造が伝わりません。（W3Cのページ構造）
文字間隔を変更しても文章と操作を残す
利用者は行間や文字間隔を変更して読むことがあります。WCAGの文字間隔の基準は、指定された間隔へ変更しても内容や機能が失われないことを求めています。点検するのは、利用者が間隔を変更した時の表示と操作です。高さを固定した説明欄で文章が欠けるなら、高さの制限を見直します。（W3Cの文字間隔）
狭い画面と長い原稿で間隔を点検する
見出しが複数行になった時、写真の縦横比が変わった時、FAQを開いた時の間隔を点検します。写真と説明が離れていれば同じ領域へ移し、節の境目が判別できなければ間隔や見出しを変更しましょう。
余白を確保するために料金や連絡方法を削る前に、重複した説明と装飾を見直します。本文のサイズや書体については フォントと文字表示の設計 でも説明しています。
SpreadSite は、Googleスプレッドシートで内容を管理し、テンプレートを使ってホームページを作成・公開・更新できるノーコードツールです。
情報の関係と余白を点検するホームページづくりに、ぜひ使ってみてください！
よくある質問
Q: 余白は大きいほどよいですか？
A: 写真と説明が離れると関係が曖昧になります。同じ話題の距離と、話題が変わる距離を比較して調整します。
Q: 余白だけで高級感を出せますか？
A: 掲載する写真、文章、書体も印象に関わります。余白は、情報の関係と節の境目を示すために設計します。
Q: 改行を増やして余白を作ってもよいですか？
A: 節や段落には適切な要素と余白の設定を使います。画面の幅や文字サイズで改行の見え方が変わるためです。
Q: WCAGの文字間隔を初期値にする必要がありますか？
A: その基準は、利用者が指定の間隔へ変更した際の内容と機能の維持を求めます。初期値を一律に定めるものとして解釈しないことが必要です。
