ヘッダーの色はどう決める？WEBサイト全体になじむ配色の考え方

WEBサイトのヘッダーは最初に目に入りやすく、ロゴやメニュー、必要に応じて予約などの操作を置く場所です。目立たせようと濃い色を使っても、本文や写真と合わなければヘッダーだけが浮いて見えることがあります。反対に薄い色では、ロゴやリンクの位置が伝わりにくい場合もあります。色は単体で決めず、ヘッダーの下に続く画面と、そこで何を探してほしいかを基準に選びましょう。今回はシーカヤック体験の予約サイトを例に考えます。

ヘッダーの色はロゴ・メニュー・次の画面を並べて決める

最初に、ヘッダーへ置く情報を絞ります。体験サイトなら「サイト名」「体験コース」「料金」「アクセス」「空き枠を見る」程度にまとめ、長い説明は本文へ移します。ヘッダーの背景はブランドの主な色とつながるものを選び、メニューの文字には十分な明暗差を付けます。コントラスト比とは、隣り合う色の相対的な明るさの差を表す数値です。

ヘッダーだけを見て配色を決めず、その直下にある写真や見出し、本文背景と並べて確認することが大切です。例えば青緑の濃いヘッダーを使うなら、次の案内面は明るくすると、画面の入口と内容を自然に分けられます。写真を大きく使う場合も、背景が変化する写真の上へヘッダー文字を直接重ねるより、文字の後ろに単色の面を残すと確認しやすくなります。

ブランドのロゴは形や色が決まっている場合もあるため、ロゴ自体を無理に塗り替えず、背景に合う白版や単色版を用意できないか検討します。ロゴタイプの文字にはWCAG 2.2の通常文字のコントラスト基準の例外がありますが、ヘッダーからトップへ戻る操作の見つけやすさは別に確認してください。

シーカヤック体験サイトでヘッダーと本文をつなぐ配色例

コースの写真、体験時間と料金、集合場所、予約できる日程を載せるサイトを想定します。HEXはWEBで色を指定する16進数のコードです。ヘッダーを濃い青緑にまとめ、写真と本文の周囲には明るい面を使います。

• ヘッダー背景：深い青緑■#244E60を背景の広い面に使います。すぐ下の案内エリアを淡い青緑灰■#E8F0EDにすると、両方の面の比率は約7.76:1です。濃い面をヘッダーに限定し、コース説明まで暗くしません。
• ロゴとサイト名：ロゴの小さな波のマークを淡いサンド■#F4DEB0、横のサイト名を白■#FFFFFFで表示します。深い青緑■#244E60との比率は、マークが約6.82:1、白文字が約9.00:1です。ロゴの見た目だけに任せず、リンクの名前も分かるようにします。
• 通常のメニュー文字：「体験コース」「料金」「アクセス」の文字は白■#FFFFFFで統一します。ヘッダーの青緑■#244E60に対して約9.00:1です。項目ごとに新しい強調色を増やさず、言葉と間隔で行き先を区別します。
• ヘッダーの「空き枠を見る」：淡いサンド■#F4DEB0のボタンに濃いグレー■#293A40の文字を使うと約8.98:1です。ボタンと周囲の青緑■#244E60は約6.82:1です。すぐに日程を確認するための補助操作として使います。
• スマートフォンのメニュー：開いたメニューの背景をさらに深い青■#1C3F50にし、リンク文字は白■#FFFFFFで表示します。比率は約11.19:1です。三本線だけでなく「メニュー」と表示し、開いた後も同じリンク名を使います。
• キーボードのフォーカス：暗いヘッダーでリンクを選んでいるときは、淡いサンド■#F4DEB0の輪郭線を付けます。ヘッダー背景■#244E60との比率は約6.82:1、スマートフォンの開いたメニュー■#1C3F50とも約8.49:1です。マウスを重ねた状態とフォーカスを別々に示します。
• 写真の隣の導入文：海の写真の横には淡い青緑灰■#E8F0EDの単色面を使い、本文文字を濃いグレー■#293A40にします。文字と背景は約10.22:1です。見出しを深い青■#275867にすると約6.77:1になり、ヘッダーと色の系統をそろえられます。
• コース料金の本文：背景をオフホワイト■#F8F7F2にし、文字を濃いグレー■#293A40にすると約11.04:1です。見出しは深い青■#275867を使い、同じ背景と約7.31:1です。ヘッダーの青緑を本文の文字色へそのまま広げすぎないようにします。
• 集合場所・持ち物のカード：白■#FFFFFFに濃いグレー■#293A40で案内すると約11.84:1です。白■#FFFFFFと本文背景のオフホワイト■#F8F7F2は約1.07:1なので、必要に応じてグレー青■#73858Bの枠線を付けます。枠線と白■#FFFFFFは約3.85:1です。
• 本文の「体験を予約する」ボタン：赤茶■#984832のボタンに白■#FFFFFFで文字を表示すると約6.35:1、ボタンと本文背景■#F8F7F2は約5.92:1です。ヘッダーの空き枠ボタンとは目的と配置を分け、申込みの操作を本文で目立たせます。

この例のポイントは、ヘッダーの濃い青緑をサイト全体に塗り広げないことです。同系統の青を見出しにも使いながら、長く読む部分を明るく保つことで、ヘッダーと本文に一体感を作れます。

写真・固定ヘッダー・スマートフォンで色を再確認する

ヘッダーを写真の上へ重ねる場合、半透明にすると背景写真の明るさやスクロール位置で文字の見え方が変わります。ロゴや通常のメニューがどの写真でも読めるとは限りません。背景を単色にするか、文字の直下へ不透明な面を敷き、重なった状態ごとに確かめます。スクロールして画面上部に残る固定ヘッダーも同じです。

また、赤茶■#984832の予約ボタンを濃い青緑■#244E60のヘッダーにそのまま置くと、ボタンと背景の比率は約1.42:1しかありません。同じボタンでも配置場所によって輪郭が見つけにくくなるため、暗いヘッダーにはサンドのボタン、明るい本文には赤茶のボタンを使います。

WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字は背景と4.5:1以上、大きな文字は3:1以上、操作の識別に必要な非テキストの表示は隣接色と3:1以上が原則です。画面幅を変えて、ロゴ、メニュー、ボタン、キーボードのフォーカスを確認しましょう。HueRollでは選択色と白・黒のコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定には対応していません。この記事の任意の色同士の比率は別途計算しています。