WEBサイトの配色ルールをチームで共有する方法

WEBサイトの配色をデザイナー、実装担当、記事やキャンペーンを更新する担当者で共有するとき、色見本だけ渡しても「どの青をボタンに使うのか」「新しいバナーに別の色を足してよいのか」が伝わらないことがあります。必要なのは、色の一覧だけではなく用途・組み合わせ・変更方法をまとめた共通の配色ルールです。映画祭のチケット申込みサイトを例に、チームで迷わず運用する方法を紹介します。

色名だけでなく、用途と組み合わせを同じ資料で共有する

まず、チーム全員が参照する配色表を1つ決めます。各行には「色の役割」「共通の名前」「HEXコード」「使用する部品」「文字や枠線が接する背景色」を記載します。HEXコードとは、WEBの色を16進数の文字で指定する表記です。色の名前は「青1」「おしゃれな黄色」のような見た目だけの呼び方より、「購入ボタン」「補足文字」など役割が分かるものにします。

さらに、使ってはいけない組み合わせも記録します。例えば「先行販売の淡い背景を通常本文の文字色として使わない」「購入完了と入力エラーを同じ通知色にしない」といった注意です。どの画面で使うかも書いておけば、実装担当は指定を探しやすく、運用担当は新しい告知を作るときに判断できます。

共有資料の場所と更新担当も決めます。デザイナーが色の変更案と理由を記録し、実装担当が使用箇所を確認し、公開前に運用担当も新旧の表示を点検する、という分担が考えられます。これはチームに合わせて調整できる運用例で、唯一の決まりではありません。

映画祭のチケット申込み画面で配色表を作る例

白い上映日程カードの下に購入ボタンがあり、先行販売の案内と購入結果の通知も表示するサイトを想定します。次の表は、担当者間でそのまま受け渡せるよう、色と使い道を対応させた例です。

白いカード ■#FFFFFF 上で、通常文字 ■#26384B とのコントラスト比は約12.00:1、補足文字 ■#566779 とは約5.81:1です。購入ボタンは背景 ■#1B5E88 と白文字 ■#FFFFFF の組み合わせで約6.99:1です。同じ青を白いカード上のリンクに使う場合は下線も付け、クリックできることを色だけで伝えないようにします。

先行販売バッジは淡い黄 ■#FFF1D7 と濃い茶 ■#754A16 を組み合わせると、文字の比は約6.85:1です。ただしバッジの背景と周囲の白 ■#FFFFFF の比は約1.12:1なので、「先行販売」の文字を省いて色だけで区別することは避けます。

完了通知は淡い緑 ■#E9F6EF と濃い緑 ■#176446 で約6.41:1、エラー通知は淡い赤 ■#FDEDED と濃い赤 ■#A12634 で約6.51:1です。「購入が完了しました」「入力内容を確認してください」のように意味を文章でも示します。

ページ背景 ■#F5F7FA と白いカード ■#FFFFFF の比は約1.07:1です。識別に必要な入力欄の線には ■#738699 を使えば、内側の白に対して約3.75:1、外側のページ背景に対して約3.49:1です。配色表にはこのように色単体ではなく、接する色と用途を残します。

変更を提案・確認・反映する手順まで決めておく

例えば運用担当が「秋の企画だけ購入ボタンを別の色にしたい」と考えたら、その場で色を追加せず、変更対象の画面、候補のHEXコード、使う期間を配色表へ提案として記入します。実装担当はボタンだけでなく、リンクやスマートフォンの固定ボタンにも同じ役割の色が使われていないか調べます。承認後に共有表と実装を更新し、更新日と変更理由を残します。

公開前には、通常の文字と背景、ボタンの文字、入力欄の輪郭、成功・エラーの通知を実画面で確認します。WCAG（WEBコンテンツのアクセシビリティに関する指針）2.2のレベルAAでは、通常文字は背景との比4.5:1以上、規定の大きな文字は3:1以上が基準です。識別に必要な操作部品の輪郭などの非テキスト情報にも、隣接色との3:1以上が求められます。掲載数値は不透明な単色同士の計算値で、ページ全体の適合を保証するものではありません。

HueRollではHEXコードや色の濃淡候補、選択色と白・黒とのコントラストを確認できます。ただし、任意の2色の直接比較やAA・AAAの自動判定はできません。また、マイパレットは利用中のブラウザーのCookieへの保存であり、メンバー間で自動同期されません。検討した色は必ずチームの共有表に記録し、実際の隣接色も別の方法で検証してください。