リスト・テーブル・フィード・検索結果などのコンテンツ領域が空である状態をユーザーに伝えるUIコンポーネント。「まだデータがない」「検索結果がない」「エラーでデータを取得できない」など、様々な原因で空になる状況をユーザーが次に何をすべきかを示しながら伝えることが設計の核心。
この記事を読むと、3種類のEmpty State（データなし・検索結果なし・エラー）の使い分け・「何もない」と表示するだけでは不十分な理由・イラスト/アイコン/テキスト/CTAの組み合わせ設計が自分でできるようになります。
1. UI例（Preview / Live）
この空状態は、デザインシステム GUNJO の EmptyState 実装です。状況（データなし / 検索結果なし / 権限なし …）を切り替えて確認できます（右上 Code で編集可）。
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
コンテンツ領域が空である状態を伝えるUIコンポーネント。単に「何もない」と表示するのではなく、なぜ空なのか・次に何をすべきかをユーザーに伝えることが目的。
Empty Stateの5種類：
| 種類 | 原因 | CTAの例 |
|---|---|---|
| 初回空（No Data） | ユーザーがまだデータを作成していない | 「作成する」ボタン |
| 検索結果なし | 検索キーワードに一致しない | 「フィルターをクリア」 |
| フィルター結果なし | フィルター条件に一致しない | 「フィルターをリセット」 |
| エラー | データ取得に失敗 | 「再試行」 |
| 権限なし | ユーザーが閲覧権限を持たない | 「管理者に依頼」 |
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- リスト・テーブル・フィードが空の時
- 検索・フィルターの結果が0件の時
- エラーでデータを表示できない時
- 権限がないコンテンツにアクセスした時
3.2 When NOT to use
- ページ全体のエラー（404・500）→ 専用のエラーページを使う
- フォームの空フィールド → インラインのプレースホルダーテキストを使う
3.3 代替UI（Alternatives）
- ページ全体のエラー → エラーページ（404 / 500）
- データ取得中 →
Loading/Skeleton - 部分的なエラー通知 →
Alert
4. 設計判断の核（Decision Principles）
Empty Stateの核は「空の原因の明示」と「次のアクションへの誘導」——「データがありません」だけでは、ユーザーは何をすべきか分からず手詰まりになる。
判断の優先順位：① 原因の明示（なぜ空か）→ ② CTAの提供（何をすべきか）→ ③ 視覚的な伝達（アイコン）→ ④ 種類別のデザイン差異
- 「初回空」と「検索結果なし」は見た目を変える：初回空のEmpty Stateには「作成する」の積極的なCTAを置き、検索結果なしには「フィルターをクリア」の修正的なCTAを置く。同じデザインにすると意図が伝わらない
- エラー系Empty Stateには「再試行」と「サポートへの連絡」を両方置く：ユーザーが自分で解決できる場合（ネットワーク一時エラー）と解決できない場合（権限エラー）で、取るべき行動が違う。両方提供することで詰まりを防ぐ
- アイコンは状況を象徴するものを選ぶ：空の受け皿・虫眼鏡・ロックアイコンなど、状況を直感的に表すアイコンを使う。同じアイコンを全種類に使うと空の原因が区別できない
5. 状態設計（States）
5.1 Empty Stateの構成要素（4点セット）
| 要素 | 必須 | 説明 |
|---|---|---|
| アイコン / イラスト | ✅ | 状況を視覚的に象徴 |
| タイトル（短い説明） | ✅ | 「なぜ空か」を1文で |
| 説明文 | — | タイトルの補足・次の行動のヒント |
| CTAボタン | — | 初回空・検索/フィルター空・エラーには必須 |
6. バリエーション設計（Variants）
種類によってアイコン・タイトル・CTA が変わる。
| バリアント | アイコン例 | タイトル | CTA |
|---|---|---|---|
| 初回空 | ドキュメントアイコン | 「まだ〇〇がありません」 | 「〇〇を作成」（Primary） |
| 検索結果なし | 虫眼鏡 | 「「〇〇」の結果はありません」 | 「検索をクリア」（Secondary） |
| フィルター空 | フィルターアイコン | 「条件に一致しません」 | 「リセット」（Secondary） |
| エラー | 警告三角 | 「読み込めませんでした」 | 「再試行」（Primary） + 「サポートへ」 |
| 権限なし | ロック | 「閲覧権限がありません」 | 「管理者に依頼」 |
禁止パターン：Empty State にCTAを置かない → ユーザーが手詰まりになる。エラー系には最低「再試行」ボタンを置く。
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- 全種類が同じEmpty State：初回空・検索結果なし・エラーが全部同じテキスト・同じデザインで、ユーザーが空の原因を理解できない
- CTAがない：「データがありません」だけ表示し、次にどうすればいいか伝えない
- Loading後にEmpty Stateが表示されない：データが0件の時に
nullをレンダリングして何も表示されず、エラーなのかローディング中なのか分からない
7.1 Bad（典型3つ）
- 検索結果なしに「データがありません」と表示して、「フィルターをクリア」ボタンもなく手詰まりになる
- 初回空に「まだデータがありません」だけ表示して、「作成する」ボタンがなく次のアクションが不明
- エラー発生時に
nullをレンダリングして画面が空白になり、バグなのかローディング中なのか区別できない
7.2 Good（対になる3つ）
- 検索結果なしの Empty State に「『〇〇』の検索結果はありません」 + 「フィルターをクリア」ボタンを置き、ユーザーがすぐに修正できる
- 初回空にイラスト + 「まだ〇〇がありません」 + 「〇〇を作成」（Primary Button）を置き、最初の一歩を促す
- エラー状態を
isErrorフラグで管理し、isError && <ErrorEmptyState />でエラー専用のEmpty Stateをレンダリングする
7.3 How to fix（手順）
- 空になるケースをリストアップ（初回空・検索なし・フィルターなし・エラー・権限なし）
- 各ケースに対応するEmpty Stateコンポーネントを別々に設計する
- 各Empty Stateにアイコン + タイトル + 説明 + CTAの4点セットを揃える
- データフェッチの状態管理（
isLoading / isError / isEmpty）を整理し、それぞれの状態で適切なUIを表示する
7.4 GUNJO 実装で見る（Bad / Good）
同じ「空の状態」を、そっけない使い方と、GUNJO EmptyState で誘導する使い方で対比。
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
Screen Reader
<section aria-label="検索結果なし">
<img src="..." alt="" aria-hidden="true" />
<!-- アイコン/イラストは装飾扱いでaria-hidden -->
<h2>「React hooks」の検索結果はありません</h2>
<p>キーワードを変えるか、フィルターを解除してみてください。</p>
<button>フィルターをクリア</button>
</section>
アイコン・イラストは装飾扱い（aria-hidden="true"）にして、意味はテキストで伝える。
Focus
- CTAボタンはフォーカス可能でキーボードで操作できること
- データが空になった時、フォーカスをEmpty Stateの見出しに移す（任意だがユーザビリティが向上する）
10. 実装メモ（Implementation Notes）
- Empty Stateは多くの場合、データフェッチの状態管理と組み合わせる：
isLoading→Skeleton、isError→ エラーEmpty State、data.length === 0→ 通常Empty State、data.length > 0→ コンテンツ表示、の4分岐で実装する - shadcn/ui に Empty State のネイティブコンポーネントはないが、
Card+CardContentをベースに実装するのが一般的 - イラストを使う場合は SVG の undraw.co（MIT ライセンス）が多く使われる。アイコンだけで実装する場合は
lucide-reactのアイコンをサイズを大きくして使う（w-12 h-12程度）
11. 関連リンク
- 関連するUIデザイン原則: フィードバック (Feedback), 状態の可視化 (Visibility of System Status)
- 用語集（定義）: フィードバック (Feedback)
- 関連するUIコンポーネント（横）: Loading（ローディング）, Alert（アラート）, Spinner（スピナー）
12. まとめ
Empty Stateの設計で最重要なのは「空の原因の明示」と「次のアクションへの誘導」です。迷ったら 4. 設計判断の核 に戻り、「なぜ空かをタイトルに書いているか」「CTAボタンがあるか」「種類（初回空/検索なし/エラー）ごとに使い分けているか」の3点を確認してください。null を返すだけのEmpty Stateは設計の放棄です——ユーザーを手詰まりにさせない最後の砦として、必ず実装してください。
