空状態 (Empty State)

アプリを初めて開いた。画面が真っ白だった——これはユーザーが最も困惑する瞬間のひとつです。「何をすればいいのか」「壊れているのか」「自分が何か間違えたのか」。何もない画面は、ユーザーに何も伝えません。

よくある失敗パターンは「データがありません」とだけ表示することです。タスク管理アプリを初めて開いて「タスクがありません」と表示されても、ユーザーは次に何をすればいいかわかりません。通知一覧を開いて「通知はありません」と表示されても、それが正常なのか異常なのかすら判断できません。

空状態が設計されていないUIは、ユーザーを「何もない部屋に放り込まれた状態」に置きます。それは初回離脱率の上昇と、サービスの価値が伝わらないまま終わるという最悪の結果につながります。

1. 原則の定義

空状態（Empty State）とは、コンテンツが存在しない状態（初回利用・検索0件・データ削除後・エラー後）において、ユーザーが「なぜ空なのか」を理解し、「次に何をすべきか」を明確に示すことで、離脱を防ぎ次のアクションへ誘導する設計原則。

本質は「空の瞬間を、ユーザーへの最初の会話として設計すること」です。空状態はネガティブな状態ではなく、ユーザーにサービスの価値を伝え、最初のアクションを促す絶好の機会です。Twitterの初回タイムラインが「フォローしている人がいません」ではなく「おすすめのアカウントをフォローしましょう」と表示するのは、この原則の実践です。

2. いつ使うか（適用場面）

特に重要になるケース

• 初回利用時（First-time Empty State）: ユーザーがサービスを初めて使う瞬間。最も重要な空状態。サービスの価値を伝え、最初のアクションを促す。
• 検索・フィルター結果が0件の時: ユーザーが能動的に探した結果が空。原因の説明と代替案の提示が必要。
• データを削除・完了した後: タスク完了・受信トレイゼロ・カート空など。達成感を与えつつ次のアクションを示す。
• エラー・接続失敗時: ネットワークエラーやデータ取得失敗。原因と復旧方法を示す。

トレードオフが起きる場面

• 空状態の過剰演出: イラストやアニメーションを凝りすぎると、ページが重くなったり、ブランドトーンと合わなくなったりする。シンプルさとの兼ね合いが必要。
• サンプルデータの使用: 空状態の代わりにサンプルデータを表示する手法は、サービスの価値を伝えやすいが、ユーザーが「これは自分のデータか？」と混乱することがある。明確なラベリングが必要。

3. なぜ重要か（設計判断の核）

空状態は「何もない画面」ではなく、「ユーザーへの最初の招待状」である。

設計判断の基準

• 「この空状態を見たユーザーは、30秒以内に次のアクションを取れるか？」→ 取れなければ、明確なCTA（行動喚起）ボタンを追加する。
• 「なぜ空なのかが伝わっているか？」→ 伝わっていなければ、状況の説明文を追加する。

優先順位の考え方

• 1. 状況の説明（最優先）: なぜ空なのかを一言で伝える（「まだタスクがありません」「検索結果が見つかりませんでした」）。
• 2. 次のアクションの提示: 「タスクを追加する」「フィルターを解除する」など、具体的なCTAを1つ提示する。
• 3. 価値の伝達（初回のみ）: 初回利用時は、サービスが何をするものかを簡潔に伝える。

例外条件

• 「受信トレイゼロ」「完了タスクなし」など、空であることがポジティブな意味を持つ場合は、達成感を演出する（「すべて完了！」「受信トレイがきれいです」）。

4. 具体の設計ルール（チェックリスト）

最低ライン（Must - これ守らないと危険）

これがないと、ユーザーは空の画面で立ち往生します。

なぜ空なのかが伝わるか: 「データがありません」ではなく、「まだ〇〇がありません」「〇〇が見つかりませんでした」のように、状況に応じた説明文があるか？
次のアクションが示されているか: 空状態から脱出するための具体的なCTAボタンまたはリンクが1つ以上あるか？「〇〇を追加する」「フィルターを解除する」「再試行する」など。
エラーと「正常な空」が区別されているか: ネットワークエラーによる空と、データが本当に存在しない空は、見た目と説明文で明確に区別されているか？

理想ライン（Better - できると強い/プロの品質）

「わかる」を超えて「次に進みたくなる」状態です。

初回利用時にサービスの価値が伝わるか: 初めてのユーザーに対して、空状態がサービスの使い方や価値を伝えるオンボーディングとして機能しているか？
空状態のトーンが文脈に合っているか: 達成感のある空（受信トレイゼロ）は前向きなトーンで、エラーによる空は落ち着いたトーンで、それぞれ適切な感情を演出しているか？
サンプルや例示でイメージが伝わるか: 「こんな風に使えます」という具体的なサンプル表示やスクリーンショットで、ユーザーが完成形をイメージできるか？

5. UI例

同じ「空のタスクリスト」でも、空状態の設計でユーザーの次の行動は大きく変わります。

改善プロセス

1. 空状態のパターンを洗い出す: サービス内の「空になりうる画面」をすべてリストアップする。初回利用・検索0件・削除後・エラー後の4パターンが基本。
2. 各パターンに説明文とCTAを追加する: 「なぜ空か」の説明文と「次のアクション」のCTAボタンをセットで設計する。CTAは1つに絞る（複数あると迷う）。
3. 初回利用の空状態を特別扱いする: 初回利用時の空状態は、オンボーディングとして設計する。サービスの価値を伝え、最初のアクションを促すコピーとビジュアルを用意する。

6. 関連リンク

• 関連リファレンス（理論）: メンタルモデル
• 用語集（定義）: オンボーディング, ファインダビリティ
• 関連するUI原則（横）: 検索とフィルタ (Search & Filter), オンボーディング (Onboarding), マイクロコピー (Microcopy)

7. まとめ

今日から直せる一手 担当しているサービスで、データが何もない状態を意図的に作ってみてください（新規アカウントを作る、全データを削除するなど）。表示される画面に「次に何をすればいいか」が書いてありますか？書いていなければ、今日中に説明文と「最初の〇〇を追加する」ボタンを追加してください。

チームに共有するなら一言 「空の画面は、ユーザーへの最初の挨拶だ。無言で迎えるな。」