多数のステータスがある管理画面の色を整理する方法

制作案件の管理画面に「未着手」「制作中」「承認待ち」などの状態が増えると、状態ごとに色を付けたくなります。しかし、9種類の状態を9色にすると、色の意味を覚えにくく、一覧も散らかって見えがちです。重要なのは色数を状態数に合わせることではなく、次に必要な対応で整理することです。ここでは制作案件9状態を4系統の配色にまとめる手順を紹介します。

9種類の状態を、次の対応が近い4グループにする

ステータスとは、案件が今どの段階にあるかを表す状態名です。制作案件の例では、9種類を「未着手・保留・中止」「制作中・テスト中」「承認待ち・差戻し」「納品済み・完了」の4グループに整理できます。順に、待機や終了の記録、進行中、担当者の対応が必要、作業が終わった状態という分類です。実際の業務で「保留」や「中止」に別の対応が必要なら、分類も見直します。

色はグループを探す目印とし、9種類それぞれの名前は必ず文字で残します。例えば「承認待ち」と「差戻し」は同じ色でも、次の作業は承認と修正で異なります。表に「確認担当」「次の対応」も示せば、色の凡例を覚えなくても判断できます。緊急度は進行状態と別の情報なので、「差戻し」をすべて赤色にするなど、色だけで危険度まで決めないようにします。

WCAG 2.2（Web Content Accessibility Guidelines：WEBコンテンツを利用しやすくするための国際的な指針）の「色の使用」では、色だけを情報の唯一の手がかりにしないことが求められます。同系統の色にまとめても、状態名と必要な行動を文章で示すことが前提です。

制作案件の一覧で使う4系統の配色例

一覧の基本は白■#FFFFFFの背景と濃いグレー■#1F2937の文字にします。この組み合わせのコントラスト比（文字と背景の相対的な明るさの差）は約14.68:1です。短い状態名を囲む「バッジ」には、以下の淡い背景と濃い文字を組み合わせます。HEXとは色を16進数のコードで表す形式です。

• 待機・記録：「未着手」「保留」「中止」は薄いグレー■#F3F4F6に濃いグレー■#374151の文字。比率は約9.37:1です。色が同じでも「中止」と「未着手」を同じ意味にはしません。
• 進行中：「制作中」「テスト中」は淡い青■#DBEAFEに濃い青■#1E40AFの文字。比率は約7.15:1です。
• 対応が必要：「承認待ち」「差戻し」は淡い黄■#FEF3C7に濃い茶■#78350Fの文字。比率は約8.15:1です。色ではなく「承認してください」「修正してください」の案内で次の行動を分けます。
• 終了済み：「納品済み」「完了」は淡い緑■#DCFCE7に深緑■#166534の文字。比率は約6.49:1です。納品と完了の意味の違いはラベルで維持します。

いずれも通常サイズの文字に求められる4.5:1以上の比率です。一方、薄いグレー■#F3F4F6と白■#FFFFFFの差は約1.10:1しかありません。色の塗り分けだけで区画を伝えず、バッジの文字、余白、列見出しを残します。状態名が短くても色だけの丸印に置き換えないようにしましょう。

フィルター・状態変更・運用ルールもそろえる

一覧に「対応が必要だけ表示」というフィルターを置くなら、選択状態は色だけでなくチェックマークや「選択中」の文字でも示します。キーボード操作で位置が分かる輪郭には濃い青■#1D4ED8を使う例があり、白■#FFFFFFに対して約6.70:1、薄いグレー■#F3F4F6に対して約6.09:1です。意味を伝える操作部品の表示には、隣接色との3:1以上が原則として求められます。

色の管理表には「状態名」「所属グループ」「背景色」「文字色」「担当者・次の対応」を記録します。新しい状態が追加されたら、まず既存グループで表せるか確認し、別の対応が必要なときだけグループを増やします。状態が変化する一覧では、表示の更新と操作結果を文字でも知らせ、色の変化だけを通知にしないようにします。

HueRollではHEXコードで選んだ色と白・黒とのコントラストを確認できます。ただし任意の2色の比較や、AA・AAAの自動判定はできません。今回のバッジ背景と文字の組み合わせは別途計算した値です。通常文字は4.5:1以上、大きな文字は条件により3:1以上という基準を、実際の画面と合わせて確認しましょう。