ブランド刷新に合わせてWEBサイトの色を変更する手順

ブランド刷新で新しいロゴやブランドカラーが決まっても、WEBサイトの色を一度に置き換えるだけでは、ボタンやフォームなどの見え方が崩れることがあります。変更する範囲を決め、旧配色と新配色の対応を作り、公開前後に確認することが大切です。ここでは、運用中のサイトを安全に切り替える手順を紹介します。

新しい色の承認と変更範囲を先に決める

まず、新しいブランドガイドラインの確定版を確認します。ロゴに使う色、WEB用に認められた色、変更してはいけない組み合わせを担当者と共有しましょう。未承認の色を、サイト側の判断で公式色として追加しないようにします。

次に、旧サイトで色が使われている場所を洗い出します。ヘッダー、フッター、見出し、リンク、ボタン、フォーム、通知、図表に加え、ダウンロード資料や画像内のロゴも対象です。色の変更だけで済む場所と、画像の差し替えや文言の見直しが必要な場所を分けます。

変更対象には「維持」「新色へ変更」「別途検討」の区分を付けます。たとえば、ブランドの強調色は新しくしても、エラー表示を意味する色まで自動的に変える必要はありません。状態を伝える色は、意味や読みやすさを保つことを優先します。

旧配色と新配色を役割別の対応表にする

架空の企業サービスサイトが、従来の青から深い青緑へブランド色を刷新する例です。HEX（ヘックス）は赤・緑・青の色を16進数で指定するコードです。表の色は実在するブランドの指定ではなく、移行計画を説明するための例です。

新しい本文文字■#223D37とページ背景■#F3F9F6のコントラスト比は約11.00:1、主要ボタンの白文字■#FFFFFFと青緑の背景■#126458は約7.02:1です。ホバー時の白文字■#FFFFFFと濃い背景■#0E554Cは約8.67:1です。いずれも通常サイズの文字について、WCAG（WEBコンテンツを利用しやすくするための指針）の4.5:1を上回ります。これらは不透明な2色の計算結果で、実際の配置や重なりは別に確認します。

実装ではCSS（WEBページの見た目を指定するルール）の色を無差別に一括置換せず、--color-pageや--color-actionのようなCSSカスタムプロパティ（色などの共通値に名前を付けて使う仕組み）を役割ごとに更新します。旧色が残る特別な画面も、対応表をもとに見直せます。

検証環境で切り替えてから公開後も確認する

1. 変更前を保存する：旧配色の一覧と画面の記録を残し、元へ戻す手順と公開担当者を決めます。
2. 代表ページで試す：トップ、一覧、詳細、フォーム、完了・エラー画面で旧版と新版を比較します。スマートフォン表示、ホバー（ポインターを重ねた状態）、フォーカス（キーボードなどで操作対象になった状態）も確認します。
3. 文字と操作部品を検証する：通常サイズの文字は原則4.5:1以上、識別に必要な操作部品やアイコンの視覚情報は隣接色と原則3:1以上を目安に確認します。状態は色だけでなく文言や形でも示します。
4. 公開範囲をそろえる：サイト内の共通部分、画像、配布資料などで旧ブランドの表示が残らないか確認し、関係する担当者と切替日を合わせます。
5. 公開後に再確認する：主要ページや操作を実機で確かめ、問題があれば決めた手順で戻します。修正箇所と承認済みの配色を記録します。

ブランド刷新で重要なのは、色の印象を変えることだけではありません。色の役割と操作上の意味を引き継ぎながら、サイト全体を計画的に更新することです。