デザインシステムで色を増やしすぎないための考え方

デザインシステムを作るとき、背景用の薄い青やボタン用の青が少しずつ増え、どれが正式な色か分からなくなることがあります。デザインシステムとは、WEBサイトの色や画面部品を共通のルールで設計・再利用する仕組みです。色を増やしすぎないコツは、使える色数を先に決めるのではなく、用途が重なる色を統合し、必要な違いだけを残すことです。問い合わせ管理画面を例に判断手順を紹介します。

色数の上限よりも「その色だけの役割があるか」を確認する

同じ「本文」「補足文字」「主要ボタン」に、部署やページごとに違う色を使っているなら、まず統合候補にします。逆に、エラーと完了は意味が異なるため、色相まで無理にそろえる必要はありません。利用者が操作結果を正しく理解できるかを優先します。

確認する順番は、①色が使われている場所を洗い出す、②背景・文字・操作・状態表示などの役割でまとめる、③同じ役割の色を候補として比較する、④実際の背景とのコントラストを確かめてから統合する、です。似た色だからという理由だけで統合すると、暗い背景の文字まで薄くなる可能性があります。

見た目が同じでも役割が違う色は、管理上の名前を分けてよい場合があります。例えばカードの白とボタン上の白文字は、今は同じ値でも今後別々に変更する可能性があります。管理する役割の数と、実際に使う色の値の数は同じとは限りません。

問い合わせ管理画面で似た色を統合する具体例

架空の問い合わせ管理画面で、営業担当とサポート担当が別々に色を追加したケースを考えます。ページ背景には ■#F7F9FC と ■#F4F8FC、主要操作には ■#206891 と ■#17618B、補足文字には ■#596B7E と ■#566779 が使われていました。HEXコードはWEB上の色を16進数で指定する表記です。

この例では、部署の違いだけで同じ機能の色を変える理由がないため、用途ごとに1色へ整理します。一方、「対応完了」と「入力エラー」は別の情報なので残します。整理後の具体的な役割と候補は次のとおりです。

白いカード ■#FFFFFF に本文 ■#26384B を載せたコントラスト比は約12.00:1、補足文字 ■#566779 は約5.81:1です。主要ボタンは青 ■#17618B を背景、白 ■#FFFFFF を文字にすると約6.73:1です。白いカード上の同じ青のリンクには下線を付け、色だけでリンクと判断させないようにします。

ページ背景 ■#F6F8FB と白いカード ■#FFFFFF の比は約1.06:1なので、必要な境界を背景色の差だけに任せません。識別が必要な検索欄やカードの輪郭には ■#738699 を使う例なら、白に対して約3.75:1、ページ背景に対して約3.53:1です。

完了通知は淡い緑 ■#E9F6EF に濃い緑 ■#176446 の文字で約6.41:1、エラー通知は淡い赤 ■#FDEDED に濃い赤 ■#A12634 の文字で約6.51:1です。「完了」「エラー」という文字も添えます。色数だけを減らすために両方を青へまとめると、状態の意味を区別しにくくなる場合があります。

新しい色を追加する前に使い道と影響範囲を審査する

新しい色が必要になったら、「既存の色で同じ役割を果たせないか」「文字・背景・線の組み合わせを検証したか」「別の画面でも再利用するか」を確認します。イベント告知だけに一時的な装飾色を使う場合も、共通のボタン色を増やす必要があるとは限りません。例外は使う場所と終了条件を決め、常設の色と区別します。

統合時は、色の値だけでなく使用している部品や画面を確認します。暗い画面、選択中の行、スマートフォンの固定ボタンなどは、同じ色へ置き換えると見え方が変わる可能性があります。まず代表的な画面で確認し、問題があれば一律に統合せず、役割を分け直してください。

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

HueRollではHEXコードの入力やティント・シェードなどの候補、選択色と白・黒のコントラストを確認できます。ただし、任意の2色同士の直接比較やAA・AAAの自動判定には対応していません。統合後は実際に隣接する色も別の方法で検証しましょう。