空の状態をどう見せる？Empty Stateの配色とWEBデザイン

Empty State（エンプティステート）は、まだ項目を作っていない初回利用時など、表示する内容がないときに見せる画面です。何もない空白だけを残すのではなく、「ここには何が表示されるのか」「次に何をすればよいか」を短く伝えると、利用者が止まりにくくなります。配色はエラーのように強く警告するより、通常画面になじむ背景と文字色を保ち、説明と次の操作だけを分かりやすく見せるのが基本です。

Empty Stateは「何もない」より「次にできること」を見せる

初回利用でまだデータを作っていない画面なら、「まだプロジェクトはありません」のように現在の状態を文章で示し、その下に「最初のプロジェクトを作成」のような次の操作を置きます。イラストやアイコンだけで意味を伝えるのではなく、見出しと説明文を中心にします。

Empty Stateに置くPrimaryカラー（主要な操作や強調に使う基準色）は、普段の画面と同じ役割を保つ方が自然です。空の画面だけ別の鮮やかな色へ切り替えるより、通常ページと同じ背景・本文色を使い、作成ボタンなど行動につながる部分だけを強調します。

オフホワイトとブルーで、説明と次の操作を整理する

ページ背景をオフホワイト ■#F8FAFC、見出しと本文をダークグレー ■#27313A にすると、コントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約12.65:1です。まず「何がないのか」「この場所で何ができるのか」を読みやすくします。

補足文にはミディアムグレー ■#5B6470 を使うと、オフホワイト ■#F8FAFC に対して約5.73:1です。説明を本文より少し弱く見せつつ、通常サイズの文字として必要なコントラストを確保できます。

中央に小さな案内面を置く場合は、背景をペールブルー ■#EAF2F8、アイコンや短い見出しをブルー ■#315D94 にすると約5.94:1です。「最初の項目を追加」の主要ボタンをブルー ■#315D94、文字を白 ■#FFFFFF にすると約6.72:1です。

色だけで空の理由を伝えず、状態に合わせて内容を変える

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上が基準です。また、操作に必要なアイコンやボタンの境界などの非テキスト情報は、隣接色との3:1以上が基準になります。色だけを情報伝達の唯一の手段にせず、「まだ項目がありません」「新しく作成できます」のように文章でも状態を示します。

初回利用で内容がない場合と、通信エラーで表示できない場合は意味が違います。後者を通常のEmpty Stateと同じ見た目にすると、利用者が「自分で作る必要がある」のか「読み込みに失敗した」のか判断しにくくなるため、原因と次の操作を分けて設計します。HueRollでは候補色を3桁または6桁のHEX（Webで色を表す16進数コード）やカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、実際に隣接する文字・背景・ボタンの組み合わせは別途確認します。