デザイナーとエンジニアで色名を統一する方法｜WEB制作のカラー管理

WEB制作では、デザイナーが「濃い青」、エンジニアが「primary」、運用担当者が「申込みボタンの色」と呼んでいて、同じ色のつもりでも話が食い違うことがあります。色名を統一するには、見た目の名前だけでなく「どこに、何のために使う色か」を共通の言葉にすることが重要です。申込みフォームを例に、呼び名を決めて共有・更新する方法を説明します。

「青」「濃い青」ではなく役割を共通名にする

色の呼び方を「青1」「明るい青」だけにすると、デザイン変更で色味が変わったとき、名前が実際の色に合わなくなります。まず「画面背景」「本文文字」「主要ボタン背景」「主要ボタン文字」「入力枠の線」「エラー文字」のように、画面での役割に基づいて名前を決めます。

こうした役割付きの色名を、チームで使うカラートークン（色の値を役割名で参照するための共通の目印）として管理すると便利です。CSSとはWEBページの見た目を指定する仕組みで、CSS変数を使う場合は --color-action-primary-bg のような名前にできます。「primary」はここでは主要な申込み操作を指し、すべての青色を意味するわけではありません。

命名規則は日本語の説明と英数字の実装名を一対一で対応させます。色を変えても意味が変わらない名前を選び、同じ役割に「main」「primary」「brand」を混在させないようにします。逆に、ブランドの装飾色とエラー表示のように意味が違うものは、見た目が似ていても別の役割として記録します。

申込みフォームの色を共通の対応表にする

例えば申込みフォームなら、デザイン資料と実装で次の対応表を共有できます。HEXカラーコードとは、「#」と6桁の英数字で色を指定する書き方です。数値だけでなく、色見本と用途を同じ行に記載します。

この例で、本文文字と画面背景のコントラスト比は約14.03:1、主要ボタンの白文字と青い背景は約6.70:1、エラー文字と白い入力欄背景は約6.57:1です。入力枠の線と白い入力欄背景は約4.76:1です。コントラスト比は明暗の差を表す数値で、色名が一致していても実際の組み合わせを確かめる必要があります。

担当者が「ボタンを少し濃く」と依頼するときも、「主要ボタン背景」の共通名で対象を指定すれば、本文リンクやブランド装飾まで変えてしまう行き違いを減らせます。デザイン資料とCSSの双方で同じ役割名を使うことがポイントです。

命名の変更・追加は確認手順も統一する

運用では、共通の一覧に「役割名・CSS名・色コード・使う画面・組み合わせる背景や文字・変更理由・確認担当」を記録します。新しい色が必要になったら、まず既存の役割を使えないか確認し、別の意味を持つときだけ新しい名前を追加します。古い名前から切り替える場合は、どの画面が影響を受けるかを双方で確認してから更新します。

色を変更するときは、ボタンの通常状態だけでなく、ホバー（マウスを重ねた状態）、キーボードで選択したときのフォーカス表示、エラー表示も確認します。状態に応じて色が違うなら、それぞれの役割と名前を別に決めます。名前の共有は表示の安全性を自動で保証するものではありません。

WCAG（WEBコンテンツのアクセシビリティ指針）のAA基準では、通常サイズの文字と背景は4.5:1以上、大きな文字は3:1以上が基本です。操作部品の輪郭や意味のあるアイコンなども、隣接する色との比を原則3:1以上確認します。共通名を合意した後も、各画面と操作状態で実際の色の組み合わせをチェックしましょう。