ECサイトの余白は、購入に必要な情報を残したうえで、関連する要素をまとめ、別の内容との区切りを示すために調整します。空白を増やすこと自体が目的ではありません。送料やサイズの説明を削って見た目を整えると、かえって判断しにくくなる場合があります。この記事では、商品ページを例に情報整理と余白調整の進め方を説明します。
最初に「削る情報」と「整理して残す情報」を分ける
一画面のメッセージを一つに絞る考え方は、購入条件まで一つに減らすという意味ではありません。商品ページには、価格、選択肢、在庫、配送、返品など、購入判断に関わる情報があります。現在の掲載項目を書き出し、重複する説明と、独立して必要な説明を区別します。
| 状態 | 整理の方向 | 確認する点 |
|---|---|---|
| 同じキャンペーン告知が何度も出る | 掲載箇所を集約する | 条件と期限へ到達できるか |
| 価格と追加料金の説明が離れている | 関連する条件を近づける | 購入前に費用の意味が分かるか |
| サイズや素材の文章が長い | 見出し・短い段落・表で整理する | 必要な仕様が欠けていないか |
| 購入ボタンと無関係な特集が混在する | 購入操作のまとまりから分ける | 特集から戻っても選択状態が分かるか |
例えば送料の説明を折りたたむなら、見出しに「配送・送料」と明記します。「詳しくはこちら」だけでは、どの情報があるか分かりにくくなります。表示を隠す場合も、スマートフォンやキーボードで開けるかを確認してください。
余白は近い関係から外側へ調整する
- 文字と段落：長い説明を意味の切れ目で分け、見出しが次の段落と結び付いて見えるか確認します。
- 操作のまとまり：色・サイズの選択、数量、購入ボタンなどの関係を分かるようにします。エラー文を別のまとまりへ離さないようにします。
- セクション間：商品の仕様、配送、関連商品などの区切りを調整します。区切りが同じなら、同じ間隔のルールを使います。
- 画面全体：PCとスマートフォンで、情報の順序と横幅を確認します。画面が狭い場合は列数も見直します。
一律に「普段の倍の余白」にするのではなく、何と何の関係を表したいかで決めます。大きな空白でボタンと説明が遠くなったり、無関係な画像を挟んで読み順が途切れたりしていないかも点検します。
行間の値を決めることと、利用者の変更に対応することは別
W3CのWCAG 2.2「テキストの間隔」の解説は、利用者が行間や段落間隔などを変更したときに、内容や機能が失われないことを説明しています。すべてのサイトの初期表示に同じ値を設定する、という指示ではありません。日本語の文章についても、文字拡大や間隔変更で固定高さの枠から文章が切れないか確認します。
Shopifyではテーマ設定から小さく変更する
作業前にテーマを複製し、変更するページ、現在の設定、戻す方法を記録します。テーマ編集でセクションやブロックの並び、余白、文字サイズなど、現在のテーマが提供する設定を確認してください。設定できる項目はテーマによって異なります。
まず一つの商品テンプレートで試し、同じテンプレートを使う他の商品にも影響が出ることを確認します。説明の長い商品、選択肢の多い商品、売り切れ商品を含めて表示を見ます。カスタムCSSが必要な場合は、対象を特定して変更し、サイト全体へ同じ余白を強制する前に影響範囲を確認します。
- 余白を減らすために文字サイズを過度に小さくしない
- 段落やボタンを固定高さにして、長い文字を切らない
- 装飾目的だけで見出しの階層を飛ばさない
- 操作に必要な説明を画像の中だけに閉じ込めない
狭い画面・拡大・長い文章でテストする
W3Cの「リフロー」は、縦方向に読む一般的なコンテンツについて、幅320 CSSピクセル相当でも情報や機能を失わず、縦横両方向のスクロールを必要としない表示を扱っています。データ表など二次元の配置が必要な部分には例外がありますが、通常の本文まで横へはみ出してよいという意味ではありません。
公開判断に使うチェックリスト
- 狭い画面でも本文と購入操作が横へはみ出さない
- 文字を拡大しても価格、選択肢、ボタンの文言が切れない
- 説明を長くしても後続の要素と重ならない
- 折りたたみの見出しから内容を予測でき、開閉できる
- キーボードで操作すると、現在位置が見える
- 送料や返品条件の案内へ購入前に到達できる
公開後は見た目の印象だけでなく、問い合わせや購入操作で問題が減ったかを調べます。変更日と対象を残し、広告・価格・在庫なども変わっている場合は、売上の変化を余白だけの効果と断定しないようにします。
よくある質問
余白を増やせば高級感や売上が上がりますか？
一律には判断できません。ブランドの表現に合うことに加え、商品の内容と購入条件を確認しやすいかを検証します。
長い説明はすべて削るべきですか？
重複は整理できますが、必要な仕様や条件は残します。見出し、表、段落分けなどで探しやすくする方法を先に検討します。
スマートフォンとPCの余白は同じ値でよいですか？
同じ値で問題がないかは内容とテーマによります。狭い画面でも、関係する要素がまとまって見え、操作を続けられるかで判断します。
公式資料
公式情報の確認日：2026年10月21日。情報整理例と作業手順はAO編集の実務向け整理です。ここで示す確認項目は、WCAG全体の適合判定を行うものではありません。
関連記事・ご相談
対象ページと、読みにくい・操作しにくい箇所をお知らせください。ECサイトのレイアウト改善を相談する
コメント