WEBサイトの色を後から変更しやすくする設計方法

WEBサイトを制作した後、ロゴやブランドの色を変更したい場面があります。そのときボタン、文字、入力フォームまで一斉に塗り替えると、読みやすさや操作の意味が崩れることがあります。色を後から変更しやすいサイトは、制作時から「変える色」と「維持する色」を分けて設計しています。宅配クリーニングの集荷予約サイトを例に、考え方と確認手順を説明します。

変更する範囲を決め、色を役割ごとに分けておく

最初に、色を「ブランドの目印」「予約などの主要操作」「背景・文字」「状態表示」に整理します。ブランドの目印はロゴ周辺や見出しの装飾、主要操作は予約ボタンやリンク、背景・文字は情報の読みやすさ、状態表示はエラーなどの意味を伝えるためのものです。同じ色を使っていても、役割が違えば必ず同時に変更する必要はありません。

例えばブランド色を変更する場合、予約ボタンも一緒に変更するかは、その新しい色がボタンの文字と十分に区別できるかを確認してから決めます。一方、入力エラーの赤や通常の本文色は、ブランド変更とは独立して維持できます。部品ごとに実際のカラーコードを直接決めるのではなく、「どの役割の色を使うか」を割り当てておくことが重要です。

CSS（WEBページの見た目を指定する仕組み）のカスタムプロパティを使えば共通の色を再利用できますが、変数にまとめるだけでは変更範囲は整理されません。予約ボタン、リンク、エラー表示がそれぞれどの役割の色を参照するかまで、制作時に決めておきます。

集荷予約サイトの配色を青緑から紫へ変更する例

青緑を基調にした集荷予約サイトで、ブランドの目印と予約操作を紫に変える場合を考えます。HEXはWEB上の色を16進数で表すコードです。次の表では、背景、文字、境界線、入力エラーの色は変更しない方針にしています。

変更前の青緑 ■#176A70 と白いボタン文字 ■#FFFFFF のコントラスト比は約6.30:1です。変更後の紫 ■#59407B と白 ■#FFFFFF は約8.59:1なので、この例では予約ボタンの背景と白文字を組み合わせられます。白い予約カード ■#FFFFFF 上の下線付きリンクにも同じ青緑または紫を使い、リンクであることは色だけに頼らず下線で示します。

本文 ■#263648 とカード背景の白 ■#FFFFFF は約12.33:1、補足文字 ■#526273 と白は約6.26:1です。これらは予約内容や集荷条件を読むための色なので、ブランド変更に合わせて無理に変えません。

ページ背景 ■#F6F8FA と白いカード ■#FFFFFF の比は約1.06:1で、色の差だけでは境界として弱いため、必要な場所には線 ■#73879C を使います。この線の比は白に対して約3.70:1、ページ背景に対して約3.48:1です。また、入力エラーは淡い赤 ■#FDEDED と濃い赤 ■#A12634 の組み合わせを維持し、文字の比は約6.51:1です。エラーの原因を文章でも示します。

変更後の画面で、色の意味と組み合わせを再確認する

変更しやすさを確かめるには、まず「ブランド色を変更すると動く部品」を一覧にし、変更対象外の本文やエラー表示が巻き込まれないか確認します。次に予約一覧・予約フォーム・完了画面など、同じ色の役割を使う代表的な画面を確認します。画面幅によって固定ボタンやメニューの表示が変わるため、スマートフォンでも見直します。

新しいブランド色は、白背景上のリンクと、白文字を載せたボタンでは使い方が違います。ホバー（ポインターを重ねた状態）やフォーカス（キーボードなどで操作対象になった状態）も含め、実際に隣接する色を確認してください。状態を色だけで伝えず、下線や文字、輪郭も残します。

WCAG（WEBコンテンツのアクセシビリティに関する指針）2.2のレベルAAでは、通常の文字と背景のコントラスト比は4.5:1以上、規定の大きな文字は3:1以上です。必要な操作部品の境界などの非テキスト情報は、隣接色との3:1以上が求められる場合があります。掲載した比率は不透明な単色同士の計算結果で、ページ全体の基準適合を保証するものではありません。

HueRollではHEX入力や濃淡候補、選択色と白・黒とのコントラストを確認できます。任意の2色の直接比較やAA・AAAの自動判定には対応していないため、色を変更する前後で実際の文字・背景・境界線を別の方法でも検証してください。