管理画面のテーブル行を色で強調する方法｜重要データを見つけやすくする配色

管理画面で重要な行を見つけやすくするには、目立つ色で表を埋めるより、何を優先して確認すべきかを決めることが先です。ここでは問い合わせの返信期限を管理するテーブルを例に、期限超過と間もなく期限が来る行だけを淡く強調する方法を紹介します。利用者がチェックして選択した行とは別の意味なので、選択状態と混同しない設計も必要です。

重要な行は色より先に、判定条件を決める

テーブルとは情報を行と列に並べた表です。この例では、未返信で期限を過ぎた行を「期限超過」、未返信で返信期限まで6時間以内の行を「要対応」、それ以外を通常の行とします。返信済みの行は、期限の時刻が過ぎていても自動的に「未返信の期限超過」とは扱いません。返信状態と期限を組み合わせて判定することが大切です。6時間という境目は架空の運用例で、実際にはチームの対応ルールに合わせて決めます。

行には「期限超過・1時間」「要対応・残り2時間」といった文言を残します。WCAG 2.2（Web Content Accessibility Guidelines：WEBコンテンツを利用しやすくするための国際的な指針）の「色の使用」では、色だけを情報の唯一の手がかりにしないことが求められます。重要かどうかを背景色だけで判断させず、時刻、返信状態、判定の理由を文字でも示します。

また、返信期限を強調することと、行を利用者が「選択中」にすることは別です。期限超過の行を選んだからといって警告色を消すと、業務上の注意と操作状態が混ざります。選択はチェックボックス、キーボードの位置はフォーカスの輪郭など、別の目印を用意します。

期限超過・要対応・通常の3種類を行の色で整理する

表は白■#FFFFFFを基準に、本文と番号を濃いグレー■#1F2937にします。この組み合わせのコントラスト比は約14.68:1です。コントラスト比とは2色の相対的な明るさの差を示す数値で、WCAG 2.2のレベルAAでは、通常サイズの文字に原則4.5:1以上が必要です。補足文字の青灰色■#475569も白■#FFFFFFに対して約7.58:1を確保できます。

• 期限超過：行の背景を淡い赤■#FFF1F2とし、判定文字と左線に濃い赤■#9F1239を使います。判定文字と背景の比率は約7.30:1で、通常の本文色■#1F2937も同じ背景■#FFF1F2に対して約13.36:1です。
• 要対応：行の背景は淡い黄■#FFFBEB、判定文字と左線は濃い茶■#92400Eを使います。判定文字の比率は約6.84:1、本文色■#1F2937との比率は約14.16:1です。
• 通常・対応済み：背景は白■#FFFFFFのままにし、状態や期限を文字で表示します。色が付いていないことだけを「対応済み」の意味にしません。

淡い赤■#FFF1F2と白■#FFFFFFの差は約1.10:1、淡い黄■#FFFBEBと白■#FFFFFFは約1.04:1しかありません。そのため、背景だけでなく濃い左線と「期限超過」「要対応」の文字を残します。左線はそれぞれ自分の行の背景に対して約7.30:1、約6.84:1の差があります。HEXとは、色を16進数のコードで表す指定方法です。

次の表は、ある日の15:00を判定時刻とした架空の表示例です。T-404は12:30に返信済みで、本日13:00の期限より前に対応しているため、注意色を付けていません。表内の背景と左線は説明用の表示であり、実際の操作機能ではありません。

データ欠落やホバー、確認操作との混同を防ぐ

返信期限が未取得の行を「残り0時間」として期限超過に分類してはいけません。「期限データ未取得・判定保留」と書き、データが取得できた後に判定します。また、期限の基準時刻やタイムゾーンを画面のどこかに示さなければ、担当者によって「本日」の解釈が変わることがあります。期限を過ぎたというだけで、顧客へどのような影響があったかまで断定しないようにします。

マウスを重ねた位置を示すホバー色として薄いグレー■#F1F5F9を使う場合、通常行の白■#FFFFFFとの差は約1.10:1です。ホバーは一時的な操作位置であり、期限への注意を示す色と置き換えません。キーボード操作の対象位置を示すフォーカスには濃い青緑■#0F766Eの輪郭を使う例があり、白■#FFFFFFとの比率は約5.47:1、淡い赤■#FFF1F2とは約4.98:1、淡い黄■#FFFBEBとは約5.28:1です。

「期限超過のみ表示」などのフィルターを付けるなら、適用中の条件と件数を文字でも明示します。行を確認済みにする操作を設ける場合も、返信済みと混同せず「確認済み」と別に記録します。「詳細を確認」ボタンに青■#1D4ED8と白文字■#FFFFFFを使えば、文字の比率は約6.70:1で、淡いページ背景■#F8FAFCに対するボタンの比率も約6.41:1です。操作部品の識別に必要な輪郭や状態表示などは、隣接色に対して原則3:1以上が基準です。

表の線が重要な場合は、青灰色■#64748Bと白■#FFFFFFの比率約4.76:1の組み合わせも検討できます。スマートフォンでは行の強調だけを残して期限や状態の列を隠すのではなく、問い合わせ番号・返信状態・期限・判定をまとめて読めるようにしましょう。

HueRollではHEXコードを入力して色を選び、選択した色と白・黒とのコントラストを確認できます。ただし、任意の2色の比較やAA・AAAの自動判定には対応していません。今回の行背景・文字・左線の比率は別途計算した値です。強調する行を増やす前に、重要と判定する条件と、次に必要な対応が伝わるかを確かめてください。