empty-state

空白領域を、ユーザーに使い方を伝え、状況を理解してもらい、次のステップへ進める有意義なプロダクト体験に変える空状態を設計または改善します。

このスキルは、データがゼロの状態やコンテンツがない画面に特化しています。より広範なアクティベーション戦略、価値を実感する瞬間、初回利用時の教育、ツアー、導入計画には onboard を使用してください。

必須の準備

frontend-design を読み、そのコンテキスト収集プロトコルに従ってください。利用可能なコンテキストを再利用し、重大な不足がある場合にのみ質問してください。さらに、この画面でユーザーに届けるべき価値も確認してください。

---

空状態を評価する

どのような不在状態なのかを把握してください。

1. 状態の種類：

   • 初回利用／コンテンツがまだ作成されていない
   • 検索やフィルターで結果が見つからない
   • 以前のコンテンツが削除された
   • 権限／アクセス制限
   • 既存の画面内でコンテンツの読み込み中にエラーが発生した
   • 401、403、404、429、500、503 など、ルートレベルまたはページ全体のエラー

2. ユーザーの疑問：

   • この領域は何のためのものですか？
   • なぜ気にかける必要がありますか？
   • 次に何をすればよいですか？

3. 不要な UI の確認：

   • タブ、フィルター、サイドバー、並べ替えコントロール、空のツールバーなどが、まだ何の役にも立たないのに表示されていませんか？

これらのいずれかがコードベースから明らかでない場合は、推測できない点をユーザーに直接確認してください。

重要：空状態は、機能に対するユーザーの第一印象になることがよくあります。フォールバックではなく、実際の画面として扱ってください。

空状態を計画する

主な空状態の種類、ページ全体に表示するエラーのバリエーション、CTA のルール、不要な UI を減らすための指針について、empty-state patterns を参照してください。

次の構成を軸に状態を設計してください。

• この領域の用途
• 役立つ理由
• 主な CTA
• 任意のテンプレート／例
• 今は非表示にする不要な UI

より良い空状態を作る

初回利用時の状態

• ここに何が表示されるのかを説明する
• 価値を明確に伝える
• 最も分かりやすい開始アクションを提示する
• スターターテンプレートやサンプルデータを使うショートカットを検討する

結果が見つからない状態

• 現在の検索条件やフィルターでは何も見つからなかったことを説明する
• フィルターの解除や検索範囲の拡大など、結果を得るための操作を提示する
• 何が起きたのかをユーザーが理解できるだけの情報を残す

コンテンツ削除後の状態

• 初回利用時よりも控えめなトーンにする
• 作成を再開するための簡単な方法を提示する
• 必要に応じて取り消しや復元を追加する

権限の状態

• アクセス制限について明確に説明する
• 誰がアクセスを許可できるのか、または必要なロールを伝える
• 可能であれば、アクセスをリクエストする方法を提示する

エラー状態

• 何に失敗したのかを平易な言葉で伝える
• エラーの種類に合わせた復旧方法を提示する。一時的なエラーなら再試行、セッション切れならサインイン、403 ならアクセスのリクエスト、404 ならホーム／検索、サービス全般の問題ならステータス確認／サポートへ誘導する
• 必要に応じて、サポート／ヘルプへの経路を追加する

不要な UI を減らす

• コンテンツがまだない段階で役に立たないタブ、フィルター、サイドバー、並べ替えコントロールは非表示にする
• メッセージと次のステップに集中できる画面にする

視覚的な工夫は慎重に使う

• イラストやアイコンは任意ですが、理解や注意喚起に役立つ場合は有効です
• 装飾よりも CTA を目立たせる必要があります

決してしてはいけないこと：

• 次のステップを示さずに「項目がありません」とだけ表示し、ユーザーを立ち止まらせる
• UI 全体では通常表示されているからという理由だけで、使えないコントロールを表示し続ける
• イラストをメッセージや CTA より目立たせる
• 初回利用、権限、エラーで同じトーンの空状態を使う
• より具体的な復旧方法があるのに、汎用的なエラーページを使う

空状態の品質を確認する

• 明確さ：ここに何が表示されるのか説明されていますか？
• 価値の伝達：なぜユーザーにとって重要なのか説明されていますか？
• 次のステップ：CTA は分かりやすいですか？
• 不要な UI の整理：使えない UI は取り除かれていますか？
• 適切なトーン：状態に合ったトーンになっていますか？（初回利用／結果なし／権限／エラー）

覚えておいてください。優れた空状態は、アプリが伝えることを失った状態ではなく、役立つプロダクトデザインだと感じられるものです。