デザインデータからCSSへ色を渡すときのルール作り

デザインデータの色をCSS（WEBページの見た目を指定する書き方）へ渡すとき、色の数値だけでは仕上がりがずれることがあります。使用箇所や操作状態が伝わらず、実装側で別の色が選ばれるためです。デザインと実装の色をそろえるためのルールを、具体例とともに説明します。

色コードと一緒に用途・状態を指定する

HEX（ヘックス）は色を16進数で指定する記法で、6桁では赤・緑・青の成分を表します。HEX値だけでは、どの部品に使うかは伝わりません。最低限、次の情報をそろえます。

1. 色の数値：採用するHEXコードを確定し、似た色を独自に増やさないようにします。
2. 使用する場所：ページ背景、本文、ボタン、境界線など、色の役割と対象画面を記します。
3. 操作時の状態：通常時に加え、ホバー（ポインターを重ねた状態）や選択時などの変化を指定します。
4. 透過と背景：透明度を使う場合は、その値と下に重なる背景を明記します。

色の役割に付けた名前をデザインとCSSで対応させ、どの部品を変更するか追えるようにします。

デザイン一覧からCSSに引き継ぐ具体例

資料請求ページの背景・文字・主要ボタンを例に、5つの色を一覧にします。CSSカスタムプロパティ（CSS変数）は、値に名前を付けて繰り返し参照する仕組みです。

実装側は表のHEX値を対応する変数として:rootなどに定義します。ページ背景にはbackground-color: var(--color-page);、本文にはcolor: var(--color-text);を指定します。ボタンにはvar(--color-action)とvar(--color-on-action)を組み合わせ、ホバー時の背景をvar(--color-action-hover)に切り替えます。色の値と使用箇所が対応する形です。

WCAGの計算方法で確認すると、本文文字とページ背景のコントラスト比は約11.94:1、通常ボタンの白文字と青背景は約7.10:1、ホバー時の白文字と濃い青背景は約9.69:1です。いずれも通常サイズの文字に求められる4.5:1を上回ります。ただし、これは表の不透明な2色での計算値であり、実際の画面でも重なり方を確かめます。

実装後に照合する項目と変更ルール

受け渡し後はデザイン画面とブラウザーで表示したページを並べ、次の順に確認します。

• 値の一致：背景、本文、ボタンのCSS値が一覧と一致するか。似た色を別の場所に直接入力していないか。
• 状態の一致：ホバーや選択状態で指定色に切り替わるか。キーボード操作時のフォーカス表示も確認します。
• 背景との組み合わせ：文字や必要なUIの境界が背景に埋もれないか。半透明部分は重なった状態で確かめます。
• 変更の連絡：修正時は、変数名・変更前後の値・対象画面・承認済みの版を記録します。

差が見つかっても別の色をその場で増やさず、デザイン側の指定が更新されたかを先に確認します。「どの色を、どこで、どの状態に使うか」が一覧で分かることが、手戻りを減らす基本です。