empty-state

空白領域を、ユーザーに学びと方向性を提供し、次のステップへと導く有意義なプロダクト体験に変えるため、空状態を設計または改善します。

このスキルは、データもコンテンツもない状態の画面に特化しています。より広範なアクティベーション戦略、価値を実感する瞬間、初回利用時のガイダンス、ツアー、利用促進の計画には onboard を使ってください。

必須の準備

ユーザーは /empty-state でこのワークフローを開始します。このスキルが有効になったら、$frontend-design を読み込んでください。デザイン原則、アンチパターン、コンテキスト収集プロトコルが含まれています。作業を進める前に、このプロトコルに従ってください。デザインのコンテキストがまだない場合は、必ず最初に $setup を読み込んでください。さらに、この画面でユーザーが得るべき価値も確認してください。

---

空状態を評価する

どのような種類の「何もない状態」なのかを把握します。

1. 状態の種類：

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

2. ユーザーが抱く疑問：

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

3. 機能していない UI の監査：

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

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

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

空状態を計画する

主な空状態の種類、ページ全体のエラーパターン、CTA のルール、UI の簡素化に関するガイダンスについては、空状態のパターンを参照してください。

次の構成を軸に状態を設計します。

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

より良い空状態を作る

初回利用時の状態

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

結果が見つからない状態

• 現在の検索クエリやフィルターでは何も見つからなかったことを説明する
• フィルターを解除したり、検索範囲を広げたりするなど、解決につながるアクションを提示する
• 何が起きたのかユーザーが理解できるだけのコンテキストを残す

コンテンツ削除後の状態

• 初回利用時より控えめなトーンにする
• 作成を再開するための簡単な方法を提示する
• 適切な場合は、取り消しや復元の方法を用意する

権限がない状態

• アクセス制限について分かりやすく説明する
• 誰にアクセスを許可してもらえばよいか、または必要なロールを伝える
• 可能であれば、アクセスをリクエストする方法を提示する

エラー状態

• 何が失敗したのかを簡潔に伝える
• エラーの種類に応じた復旧方法を提示する。一時的なエラーなら再試行、セッション切れならサインイン、403 ならアクセスをリクエスト、404 ならホームや検索への移動、サービス全般の障害ならステータス確認やサポートへの連絡を案内する
• 必要に応じて、サポートやヘルプへの導線を追加する

操作のない UI を減らす

• コンテンツがない段階では価値を提供しないタブ、フィルター、サイドバー、並べ替えコントロールを非表示にする
• メッセージと次のステップに画面の焦点を合わせる

適切に視覚的な要素を取り入れる

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

絶対に避けること：

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

空の状態の品質を確認する

• 明確さ：ここに何が表示されるのか説明されていますか？
• 価値の提示：ユーザーが気にかけるべき理由を説明していますか？
• 次のステップ：CTA はわかりやすいですか？
• UI の整理：操作できない UI は取り除かれていますか？
• 適切なトーン：初回利用／検索結果なし／権限／エラーの各状況に合った状態になっていますか？

最も優れた空の状態は、アプリが伝えることを思いつかなくなったような印象ではなく、役立つプロダクトデザインとして感じられることを忘れないでください。