フッターの色はどう決める？ページを引き締めるWEB配色

WEBサイトの最後にあるフッターを濃い色にすると、ページが締まって見えることがあります。ただし、黒に近づけるだけでは十分ではありません。営業時間・アクセス・問い合わせ・利用規約など、ページを読み終えた人が探す情報を見つけられる色の組み合わせが大切です。ここでは料理教室の体験レッスン案内サイトを例に、明るい本文から落ち着いたフッターへ切り替え、最後まで読みやすくする方法を考えます。

フッターは濃さよりも、本文との切り替わりと情報の役割で決める

フッターはページ末尾の共通案内で、教室の連絡先や所在地、利用条件などをまとめる場所です。本文と同じ薄い背景でも、余白や区切りで独立した領域にできます。一方、本文が明るいサイトなら深い青灰のフッターを選ぶことで、記事や予約案内が終わったことを伝えやすくなります。暗い色が正解という意味ではなく、ページ全体の明暗の配分で考えましょう。

背景を暗くしたら、通常の文字だけでなく、営業時間などの補足文字、小さな著作権表示、利用規約へのリンクも背景とのコントラスト比を確認します。コントラスト比は2色の相対的な明るさの差です。目立たせるリンクは下線も付け、色だけで操作を伝えないようにします。

また、フッターを第二の大きな申込みエリアにせず、体験予約の主なボタンは本文側に置きます。フッターには連絡先や補助的な導線を整理すると、本文と末尾の役割が分かれます。

料理教室の体験レッスン案内サイトの配色例

レッスン内容、料金、体験予約、アクセス、問い合わせ、利用条件を載せる仮想サイトを想定します。HEXとはWEBで色を指定する16進数のコードです。まず本文の色を決め、その続きとしてフッターの背景・文字・リンクを設計します。

• 本文の背景と文字：温かみのあるオフホワイト■#FAF7F1にチャコール■#30363Bでレッスンの説明を書くと約11.44:1です。見出しの落ち着いた青灰■#315866は同じ背景との比率が約7.22:1です。フッターだけが別のサイトに見えないよう、全体の彩度を抑えます。
• レッスン案内カード：白■#FFFFFFのカード上にチャコール■#30363Bを使うと約12.23:1です。白■#FFFFFFと本文のオフホワイト■#FAF7F1の差は約1.07:1なので、必要に応じてグレー■#788389の枠線を加えます。この線と白■#FFFFFFは約3.88:1です。
• 体験予約の主なボタン：本文中では赤茶■#934832に白■#FFFFFFの文字を載せます。文字とボタンは約6.53:1、ボタンと周囲のオフホワイト■#FAF7F1は約6.11:1です。フッターに同じ大きなボタンを何度も並べることは避けます。
• フッター直前の案内帯：予約後の持ち物や当日の流れを知らせる短い帯には淡いセージ■#E4ECE6と深い灰緑■#304244を使い、文字との比率を約8.77:1にします。帯と本文背景■#FAF7F1の差は約1.13:1と控えめです。続く濃色のフッターへの急な切り替わりを整理します。
• フッター全体の背景：深いブルーグレー■#253D47をページの末尾に使います。本文のオフホワイト■#FAF7F1とは約10.69:1、直前のセージ■#E4ECE6とは約9.49:1の差があります。「教室情報」「問い合わせ」「ご利用案内」を見出しと余白でまとめ、全体を濃い線で囲みません。
• フッターの見出しと主要情報：深いブルーグレー■#253D47に白■#FFFFFFで教室名や見出しを表示すると約11.43:1です。小さな文字を無理に太字にするのではなく、文字の大きさと段組みでも探しやすくします。
• アクセス・問い合わせ・規約のリンク：淡いサンド■#F5DFB9をフッター背景■#253D47に合わせると約8.78:1です。「アクセス」「お問い合わせ」「利用規約」「プライバシー」を下線付きリンクで並べます。マウスを重ねた際も下線を残し、リンク先の意味を文字で伝えます。
• 営業時間と著作権表示：白ほど目立たせたくない補足には明るい青灰■#D2DEDDを使います。フッター背景■#253D47との比率は約8.29:1です。小さな著作権表示だからといって極端に薄い文字にせず、連絡先や受付時間も読める状態にします。
• 装飾的な区切り線：フッターの最下部を分ける細い線には青灰■#68838Bを使うと、背景■#253D47との比率は約2.83:1です。この線は装飾的な区切りに限り、リンクや必須情報を識別する唯一の手がかりには使いません。見出しと余白で情報のまとまりを示します。
• アイコンとキーボードのフォーカス：問い合わせ先を開くアイコンやリンクのフォーカス輪郭には淡いサンド■#F5DFB9を使い、背景■#253D47との約8.78:1を確保します。アイコンには「メールで問い合わせる」などの文字や適切な操作名を用意し、キーボードでもリンクの位置が分かるようにします。

この配色では、本文の明るさを残しながら、最後に深い青灰をまとまった面として置いています。フッター内では白を見出し、サンドをリンク、明るい青灰を補足に使い、すべての要素が同じ強さで主張しないようにします。

小さな文字・リンク・画面幅まで確認して仕上げる

スマートフォンではフッターの3列を縦に並べ、見出しとリンクの間隔を確保します。長い住所や営業時間が折り返されても読めるか確認してください。リンクに下線を付けたうえで、キーボード操作時のフォーカス輪郭も消さず、マウスを重ねた状態だけに頼らないようにします。

WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字は背景と4.5:1以上、大きな文字は3:1以上が原則です。操作に不可欠なアイコンやフォーカス表示など、必要な非テキスト情報は隣接色との3:1以上が基準ですが、意味を伝えない装飾線すべてに同じ数値が必要なわけではありません。

最後に本文の申込みボタンからフッターの連絡先までを続けて見て、途中で目立つ色が増えすぎていないか確認します。HueRollでは選択色と白・黒とのコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定には対応していません。ここで示した独自の色同士の比率は別途計算しています。