WEBページにリズムを作る配色｜同じ背景が続くときの変化の付け方

WEBページの背景がずっと同じ色で、見出しや説明が似た並びで続くと、どこで話題が変わったのか分かりにくくなることがあります。とはいえ、区画ごとに背景を塗り替えればよいわけではありません。「同じ見せ方を繰り返す場所」と「少しだけ変化させる場所」を決めると、色を増やさずに読む流れを整えられます。ここでは架空の図書館のワークショップ案内を例に、白い背景が続くページでの配色を考えます。

配色のリズムは、繰り返しと短い変化で作る

ここでいうリズムとは、見出しの色や区画の余白を一定の規則で繰り返し、必要な場所で違いを付けることです。例えば「講座の特徴」「学べること」「参加の準備」「よくある質問」「申込み」の順に並ぶページなら、すべての区画を別々の色にする必要はありません。

まず通常の見出しには同じ文字色と小さな色付きの線を使い、見出しの左端や文章の幅もそろえます。そのうえで、持ち物や集合時間など、情報をまとめて確認してほしい区画だけを淡い色の面に入れます。繰り返しの途中に短い変化が入ると、その情報を一つのまとまりとして扱いやすくなります。

色付きの区画が長すぎたり、すべての見出しに別の色を付けたりすると、変化が当たり前になってしまいます。大きな背景の切り替えは必要な場合に限り、まず小さな目印と余白で差を付けるのが一つの方法です。

白背景の講座案内ページで試す配色と並べ方

以下は、背景を大きく変えずに色を繰り返す具体例です。HEXとは、色を「#」に続く0〜9とA〜Fの6桁で示すカラーコードの形式です。コントラスト比は、文字や図形と背景との相対的な明るさの差を表します。

通常の区画は、見出しの色と小さな線をそろえる

• ページ背景は白■#FFFFFFのままにし、本文には濃い青灰色■#243449を使います。文字と背景のコントラスト比は約12.63:1です。
• 「講座の特徴」「学べること」「よくある質問」の見出しは深い青■#164B72に統一します。白■#FFFFFFとのコントラスト比は約9.20:1です。
• 見出しの左側に短い縦線を入れるなら、青■#195781を使います。白■#FFFFFFとのコントラスト比は約7.72:1です。線は飾りの目印であり、区画の意味は見出しの文字でも伝えます。

見出しと文章の間隔も同じパターンにそろえます。例えば見出しの上に40px（pxは画面上の長さを表すピクセルという単位）、見出しと本文の間に16px程度を確保するところから調整できます。これらの数字は固定ルールではありません。区画ごとに余白が極端に変わらないようにすることが目的です。

途中の確認事項だけを淡い面にまとめる

「参加の準備」の区画には、淡い青灰色■#EDF4F8の背景を使い、持ち物・集合場所・受付時間を一緒に示します。本文は濃い青灰色■#243449でコントラスト比約11.37:1、見出しは深い青■#164B72で約8.28:1です。

白■#FFFFFFと淡い青灰色■#EDF4F8の背景同士のコントラスト比は約1.11:1と小さいため、色差だけに頼らず「参加の準備」という見出しと周囲の余白を残します。境界を示す必要がある場合は、灰青色■#587486の左側の線を追加する案もあります。この線と淡い背景■#EDF4F8のコントラスト比は約4.44:1です。

最後の「申込み」は通常の白■#FFFFFF背景に戻し、「申し込む」ボタンを青■#195781の塗りつぶしと白■#FFFFFFの文字にします。文字とボタン背景は約7.72:1です。仮にボタンを淡い背景■#EDF4F8の上へ移す場合も、ボタンと周囲の色のコントラスト比は約6.94:1です。案内欄と申込みボタンの役割を分けることで、ページ内に強い色を増やしすぎずに済みます。

同じ背景が続くときの調整と確認ポイント

完成画面では、途中に淡い区画が一つ入ることで読む順番を見失わないかを確認します。前後の区画で見出しの位置や本文幅がずれたり、淡い面が大きすぎて別ページのように見えたりするなら、色を追加せず、区画の高さと余白を調整します。色付きの案内を増やす場合も、なぜそこを区切るのかを明確にします。

スマートフォンでは、長い淡色の面が画面いっぱいに続かないか、次の見出しまでの距離が長すぎないかを見ます。小さな見出し線だけで話題を区別せず、見出しの文言や段落間の空きも保ってください。ボタンのホバー（マウスを重ねた状態）やフォーカス（キーボードで選択した状態）は通常時とは別に確認します。

WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常の文字と背景のコントラスト比は原則4.5:1以上、大きな文字は3:1以上です。操作に必要な図形や状態表示には、隣接色と3:1以上が求められる場合があります。上の比率は不透明な単色同士で計算した値です。写真や半透明の背景を重ねる場合は、実際の組み合わせで再確認しましょう。