古く見えるWEBサイトを配色から改善する方法

以前作ったWEBサイトが古く見えると感じても、流行の色に全部変える必要はありません。広い背景、見出し、ボタンに強い色が重なり、どこを見ればよいか分かりにくくなっている場合があります。配色の役割を整理し、今ある情報を見やすくするための改善方法を、変更前後の例で紹介します。

「古さ」の原因を色の使い方から探す

最初に確認したいのは、色の流行よりも情報の優先順位と色の使い分けです。たとえば、ヘッダー、背景、カード、ボタンがそれぞれ鮮やかだと、申込みなど大切な操作が目立ちにくくなることがあります。逆に、薄い文字や装飾が多いと、どの情報を先に読むべきか判断しづらくなります。

次の3点を同じページ上で比べます。

• 面積：強い色を広い背景に使いすぎていないか。大きな面は落ち着いた色にし、目立たせる色の面積を絞れるか。
• 役割：見出し、リンク、ボタンに異なる強調色が乱立していないか。同じ役割の部品は共通の配色にできるか。
• 明暗差：文字やボタンのラベルが背景と区別できるか。色だけでなく、余白や文字の大きさでも情報を整理できるか。

鮮やかな色や暖色、グラデーション自体が古いわけではありません。サイトの対象者と目的に合うなら残し、目立たせる場所を明確にすることが重要です。

講座案内サイトを配色から整える例

架空の地域向け講座案内サイトを想定します。黄色みのある背景やオレンジの部品が多い状態から、淡い背景と濃い文字を土台にし、申込みボタンだけに暖色を残す例です。HEX（ヘックス）は、赤・緑・青を16進数で指定する色のコードです。

配色例では、変更前のオレンジのボタン背景■#F0872Bと白文字■#FFFFFFのコントラスト比は約2.56:1です。変更後の赤茶のボタン背景■#A84228と白文字■#FFFFFFは約6.04:1になり、通常サイズの文字に必要な4.5:1を上回ります。

変更後の本文文字■#293548とページ背景■#F7F8FAは約11.64:1、ヘッダー背景■#234C60と白文字■#FFFFFFは約9.23:1です。いずれも、ここで示した不透明な2色の組み合わせをWCAG（WEBコンテンツのアクセシビリティ指針）の方法で計算した値です。

一度に変えず、画面全体と操作状態を見直す

1. まず代表ページを選ぶ：トップページや講座一覧で変更前後を比べ、目立たせたい情報が伝わるか確認します。
2. 背景と文字から整える：広い面を整理した後で、カード、見出し、申込みボタンの順に調整します。色だけで解決できない場合は余白や装飾も見直します。
3. 操作状態を確認する：ホバー（ポインターを重ねた状態）、フォーカス（キーボード操作などの対象になった状態）、エラー表示でも意味が伝わるか確認します。必要なアイコンや操作部品の識別に使う色は、隣接色とのコントラストを別途検証します。
4. 他ページに広げる：スマートフォン表示、フォーム、完了画面まで確認し、同じ役割の色をそろえます。

例にある薄い区切り線は装飾用です。入力欄の輪郭など操作に必要な線へそのまま流用せず、原則3:1以上の非テキストのコントラスト基準に沿って別に確かめます。古く感じる印象は写真や文字組みからも生まれるため、配色だけで必ず改善すると決めつけず、実際の画面で判断しましょう。