WEBサイトの色を変更するときに確認するページとUI一覧
WEBサイトのメインカラーを変更した後、トップページのボタンが直っていれば作業完了でしょうか。色は複数のページや操作部品で共用されるため、フォームのエラー表示やスマートフォンの固定ボタンなど、見落としやすい場所にも影響します。変更前後に確認するページとUI（利用者が操作する画面の部品）を一覧にして、確認漏れを防ぐ方法を説明します。
確認するページを種類ごとに洗い出す
最初に色を変更した部品がどのページで使われているか確認します。同じテンプレート（ページ表示の共通のひな形）を使っていても、背景や周囲の部品が違うページは別に点検します。次の一覧から、実際のサイトに存在するページを選んでください。
- トップページ・共通領域：ヘッダー、メニュー、フッター、告知帯、主要ボタン、スマートフォンの固定ボタン
- 記事・商品・サービスの詳細：見出し、本文のリンク、写真上の文字、カード、比較表、申込み導線
- 一覧・検索結果：カテゴリーボタン、絞り込み、選択中の項目、検索結果が0件の画面
- フォーム・購入手順：入力枠、必須表示、エラー文、確認画面、完了画面、押せない状態のボタン
- 会員向けページ：ログイン、マイページ、カート、決済、通知など、実際に提供している画面
- 重なって表示する部品：モーダル（手前に開く小画面）、タブ、開閉メニュー、ツールチップ（短い補足表示）
- 例外ページ：404（ページが見つからない状態）、メンテナンス案内、過去の特集ページ
全ページを一度に目視するのではなく、「共通部品が使われる代表ページ」と「背景や状態が異なるページ」を組み合わせると点検しやすくなります。存在しない機能まで追加する必要はありません。
申込みボタンを青から青緑へ変えた場合の点検例
予約サービスの申込みボタンを変更すると仮定します。以下のHEXカラーコードは、「#」と6桁の英数字で色を指定する方法です。変更前は青の#1D4ED8を背景に白の#FFFFFF文字を載せ、コントラスト比は約6.70:1。変更後は青緑の#0F766Eと白の#FFFFFFにして、約5.47:1になります。どちらも通常サイズの文字に必要な4.5:1以上です。
この変更では、トップの「予約する」ボタンだけでなく、プラン一覧、プラン詳細、入力フォーム、確認画面にある同じ操作を点検します。背景が白以外になる場所では、その隣接色に対してボタンの存在や文字が分かるかも別に確認します。ボタンを押した後の遷移先や表示文言は、配色変更だけで変わらないことも確かめます。
共通の本文は濃いグレーの#1F2937を白の#FFFFFFに載せ、コントラスト比は約14.68:1。白い#FFFFFFフォームの入力枠には#64748Bの線を使う例なら、境界線と背景は約4.76:1です。申込みボタンを変えた結果、本文や入力枠まで意図せず変わっていないかを比較します。
チェック表には「ページ／部品／変更前後の色／通常・選択中などの状態／PC・スマートフォン／確認結果」を記録します。例えば同じボタンでも、トップページでは合格、入力フォームでは背景の違いにより再調整、という結果を残せます。
操作状態と公開後の表示まで確認する
ボタンは通常時だけでなく、ホバー（マウスを重ねた状態）、押しているとき、キーボードで選んだときのフォーカス表示、無効状態を確かめます。フォームは未入力・入力中・エラー・送信完了の各画面を表示し、メッセージの意味を色だけに頼っていないか確認します。無効状態には通常と異なるコントラスト上の例外がありますが、操作できないことが分かる表示は必要です。
WCAG（Webコンテンツを利用しやすくするための国際的な指針）のAA基準では、通常サイズの文字と背景には4.5:1以上、大きな文字には3:1以上のコントラスト比が求められます。操作部品や状態アイコンの識別に必要な部分は、隣接色と原則3:1以上を確認します。数値は実際に隣り合う色の組み合わせで判断し、別の背景で測った結果を流用しないでください。
公開前にPCとスマートフォンの表示を比較し、公開後もキャッシュが更新された状態で代表ページを確認します。変更した色の役割、対象URL、点検した状態、未修正の箇所を記録しておけば、次の配色変更でも同じ一覧を活用できます。