全幅セクションに背景色を使う方法｜ページが分断して見えない配色

WEBページの途中に、画面の左右端まで背景色を広げる「全幅セクション」を入れると、特定の情報を一つのまとまりとして見せられます。一方で、色の付いた部分だけ文字の位置がずれたり、濃い背景が何度も現れたりすると、ページが途中で分断されたように見えます。大切なのは、背景の広がりと本文の配置を別々に考えることです。ここでは架空のクラウド請求書サービスの紹介ページを例に、自然につながる配色と作り方を説明します。

背景だけを全幅にして、本文は同じ幅にそろえる

全幅セクションとは、背景色などがブラウザーの表示領域の左右端まで続く区画です。文字やボタンまで画面端に寄せる必要はありません。CSS（WEBページの見た目を指定するルール）では、外側の区画にbackground-colorで背景色を設定し、内側の本文領域にmax-widthで最大幅を設ける方法があります。

例えば、通常の本文も色付きの帯の内部も最大幅960pxにそろえ、狭い画面では左右に余白を確保します。背景が白から淡い色へ変わっても、見出しの左端、本文の幅、ボタンの位置が大きくずれなければ、読む位置を追いやすくなります。この960pxは設計例であり、写真や文章量に合わせて調整して構いません。

色付きの帯には上下の余白を十分に取り、直前の説明と帯の見出しがくっつかないようにします。すべての見出しを全幅の帯に変えるのではなく、手順の紹介や最後の案内など、内容をひとまとまりで示したい場所に限定すると、ページの流れを保ちやすくなります。

サービス紹介ページで使う2種類の全幅背景

淡い帯で「利用開始の3ステップ」をまとめる

機能説明の後に「登録・設定・利用開始」の3ステップを並べる場面を考えます。前後のページと同じ本文幅を保ったまま、帯の背景だけを横いっぱいに広げます。

• 通常の説明エリア：白■#FFFFFFの背景に、濃い青灰色■#273847の本文を置きます。コントラスト比は約12.05:1です。
• 3ステップの全幅帯：淡い青灰色■#EDF3F5の背景に、同じ青灰色■#273847の文字を使います。コントラスト比は約10.75:1です。
• 帯の見出し：深い青■#1D4E66を淡い青灰色■#EDF3F5の上に配置します。コントラスト比は約8.03:1です。

白■#FFFFFFと淡い青灰色■#EDF3F5の背景同士の比は約1.12:1と小さめです。境界の色差だけで区画を示そうとせず、「利用開始までの流れ」という見出し、上下の余白、3つの手順番号を組み合わせます。帯の中にさらに別々の背景色のカードを増やさなくても、番号と文字の配置で内容を整理できます。

濃い帯はページ末尾の問い合わせ案内に使う

ページの最後にだけ、深い青■#244459の全幅帯を置く方法もあります。見出しと説明は白■#FFFFFFで表示し、コントラスト比は約10.26:1です。「相談する」ボタンは温かみのある淡い黄■#F4CE89を背景に、濃い青灰色■#273847の文字を置きます。ボタンの文字と背景は約8.05:1、ボタンの面と濃い帯は約6.86:1です。

ここでは青系の帯を見出しから問い合わせまで何度も繰り返さず、最後の行動を案内する短い区画として使います。明るいボタンは周囲の暗い背景との明るさの差で区別できるため、他の場所にも同じ強調色を散らす必要はありません。

ページが切れて見えないか、完成画面で確認する

確認したいのは色だけではありません。全幅帯の手前と後ろで見出しの位置や本文の行幅がそろっているか、上下の余白が極端に変わらないか、内容の続きを自然に読み進められるかを見ます。背景の端にさらに太い装飾線を足すと、かえって別ページのように見える場合もあります。

スマートフォンでは3ステップを縦並びにしても、順番と余白を保ちます。濃い帯が画面を埋め尽くすほど長くならないか、ボタンが押しやすい位置にあるかも確認してください。また、ボタンのホバー時やキーボードで選択したときの表示は、通常時とは別に確認します。

WCAG 2.2（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常の文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上が原則です。意味を伝える操作部品の輪郭など、必要な非テキストの視覚情報には隣接色と3:1以上の基準があります。一方、飾りとしての背景帯の境界そのものに一律3:1が必要なわけではありません。上の比率は不透明な指定色同士の計算値なので、半透明の背景や画像を重ねる場合は実際の組み合わせで再確認しましょう。