データが0件のときの画面に合う色は？Empty UIを自然に見せる方法

注文管理画面で「今月」「返品済み」を指定した結果が0件になったとき、画面を真っ白にしたり赤いエラー表示にしたりすると、データがないのか、検索に失敗したのか分かりにくくなります。データが0件の画面（Empty UI）は、現在の条件では該当する項目がないことを自然に知らせ、次にできる操作を示すことが大切です。ここでは検索結果が0件になった注文一覧を例に配色を考えます。

0件の結果はエラー色ではなく、通常画面の配色を基準にする

「該当する注文は0件です」は、検索が正常に完了し、条件に合う注文が見つからなかった場合に表示します。読み込み中、通信エラー、権限不足でデータが取得できない状態とは区別してください。取得できていないのに「0件」と断定してしまうと、利用者が本当にデータがないと誤解するおそれがあります。

画面全体の色は、通常の注文一覧と大きく変えないほうが状態の違いを理解しやすくなります。0件は必ずしも異常や警告ではないため、赤を広い面に使う必要はありません。色ではなく「今月の返品済み注文：0件」という見出しと、選択中の条件を表示することを優先します。

文字と背景のコントラスト比は、隣り合う色の相対的な明るさの差を示す数値です。WCAG 2.2（WEBコンテンツを利用しやすくするための国際的な指針）のレベルAAでは、通常サイズの文字は原則4.5:1以上、条件を満たす大きな文字は3:1以上が必要です。淡い色で静かに見せる場合も、本文の色まで薄くしすぎないようにします。

注文一覧で0件を示す具体的な配色と操作

ページの背景を淡い青灰色■#F5F7FA、結果を表示するカードを白■#FFFFFF、見出しと本文を濃紺■#1E293Bにします。白いカード上の文字との比率は約14.63:1です。「条件に一致する注文はありません」という説明を少し控えめな青灰色■#475569にしても、白■#FFFFFFとの比率は約7.58:1を確保できます。さらに薄いグレー■#94A3B8では約2.56:1となり、小さな説明文には不十分です。

検索条件は「期間：今月／状態：返品済み」と文字で表示し、淡い青紫■#EEF2FFの小さな条件ラベルに濃い青紫■#3730A3を合わせます。両者の比率は約8.88:1です。ただしラベルの背景■#EEF2FFとカードの白■#FFFFFFは約1.12:1と近いため、色の塗り分けだけで選択状態を伝えず、条件名を残します。操作できる条件ラベルにする場合は、必要に応じて濃い輪郭も付けましょう。

次の操作には、深い青緑■#0F766Eの「絞り込みを解除して全件表示」ボタンと白■#FFFFFFの文字を使います。文字とボタンの比率は約5.47:1、ボタンと外側の淡い背景■#F5F7FAは約5.10:1です。別の操作として「検索条件を編集」を青■#1D4ED8の下線付きリンクにすると、白■#FFFFFFとの比率は約6.70:1です。初めて注文を登録する場面とは違うので、0件の理由が絞り込みなら「新規注文を作成」だけを主操作にしないようにします。

境界線・フォーカス・読み込み状態も見直す

カードの白■#FFFFFFとページの淡い背景■#F5F7FAとの差は約1.07:1しかありません。カードの区切りが操作や理解に必要なら、青灰色■#64748Bの輪郭を使います。この線はカードの白■#FFFFFFと約4.76:1、外側の背景■#F5F7FAと約4.43:1です。操作部品などの識別に必要な視覚情報は、WCAG 2.2では隣接色に対して原則3:1以上が必要です。

キーボード操作中の場所を示すフォーカス枠には紫■#7C3AEDを用いる例があります。白■#FFFFFFとの比率は約5.70:1、ページの淡い背景■#F5F7FAとは約5.31:1です。色に加えて枠の太さや位置で操作中だと分かるようにします。スマートフォンでも0件の理由、現在の条件、条件解除ボタンの順に読み取れるか確認しましょう。

HueRollではHEX（色を16進数で指定するカラーコード）を入力して色を選び、選択色と白・黒とのコントラストを確認できます。ただし、任意の2色の比較やAA・AAAの自動判定には対応していません。実際に組み合わせる色は別途計算し、読み込み中・取得失敗・検索結果0件それぞれで表示する文章と操作も確かめてください。