design-empty-states

スキル：空の状態のデザイン

目的

ユーザーを行き止まりに置き去りにせず、次へ進めるよう導く、有用で行動につながる空／ゼロ状態を作成します。

種類

生成＋評価

入力

• コンテキスト（通常ここに表示されるもの）
• ユーザーの状態（初回か、コンテンツを削除した後か）
• 利用可能なアクション（ユーザーができること）

出力

• 空の状態のデザイン仕様
• コピーの推奨事項
• 強調する主要アクション
• 合格／不合格の評価

実行する変換

空白の画面を、コンテキストや説明、明確な次のステップを示すオンボーディング／ガイダンスの機会へと変換します。

判断基準

合格（優れた空の状態）

• ここに何が表示されるかを説明する（期待値を設定する）
• コンテンツの追加方法を伝える（明確な指示）
• 明確な主要アクションボタンを用意する
• 適切なイラスト／アイコンを使う（汎用的なものではない）
• 親しみやすく、役立つトーンにする（「項目が見つかりません」ではない）
• 役に立たない UI を非表示にする（コンテンツがないと機能しないタブやフィルター）

不合格（不十分な空の状態）

• 画面が空白、または「データがありません」と表示するだけ
• 空の状態として技術的なエラーメッセージを表示する
• 次に何をすればよいか案内がない
• コンテキストと無関係な汎用イラスト
• アクションがなく、行き止まりになっている

空の状態の構成要素

1. イラスト／アイコン（任意ですが、あると便利です）

   • コンテンツの種類に関連している
   • 汎用的な「404」風のものではない
   • シンプルなアイコンやカスタムイラストでもかまいません

2. 見出し

   • 親しみやすく、説明的である
   • 「空」や「項目がありません」ではない
   • 例：「プロジェクトはまだありません」や「最初のキャンペーンを始めましょう」

3. 説明

   • この領域の用途を簡潔に説明する
   • コンテンツの追加方法を説明する
   • コンテンツを追加するメリットを説明する

4. 主要アクション

   • 明確な CTA ボタン
   • ユーザーを作成フローへ誘導する
   • 次のステップがひと目でわかる

5. 補足情報（任意）

   • 詳細情報へのリンク
   • 例／テンプレート
   • インポートオプション

空の状態の種類

種類	コンテキスト	対応方法
初回	新規ユーザーで、コンテンツがない	オンボーディング、説明、明確な CTA
ユーザーによる削除	ユーザーがすべて削除した	確認、取り消しオプション、再追加 CTA
検索結果なし	検索／フィルターの結果がない	フィルターを調整する、検索をクリアする、別の語句を試す
アクセス権なし	権限による制限	理由とアクセス権のリクエスト方法を説明する
エラー状態	読み込みに失敗した	再試行アクション、サポートへの問い合わせ先

よくある失敗パターン

失敗	説明	修正方法
虚無	何もない白い空間	コンテキスト、イラスト、CTA を追加する
空の状態としてのエラー	「404」や「Null」というメッセージ	エラー状態と空の状態を区別する
次に進む方法がない	メッセージはあるがアクションがない	必ず主要 CTA を用意する
汎用的なイラスト	無関係なかわいいキャラクター	関連するアイコンやコンテキストに合ったイラストを使う
否定的な表現	「友達がいません」	肯定的な表現にする：「人とつながりましょう」
情報が多すぎる	長い段落の文章	1～2 文と CTA にまとめる

前提条件

• ユーザーの目標を理解していること
• 作成フローを把握していること

依存関係

• design-button-hierarchy（明確な主要アクションが必要）
• apply-typography-scale（見出しと本文の階層が必要）

Refactoring UI の参考事項

• 「ユーザーを行き止まりに置き去りにしない」
• 「空の状態はチャンスです」
• 「期待値を設定する」

評価例

入力： ダッシュボードに小さな灰色の文字で「利用可能なデータがありません」と表示され、それ以外のコンテンツがない

評価： 不合格

• 否定的な表現
• ここに何が表示されるべきかの説明がない
• 実行できるアクションがない
• 視覚的な扱いが控えめすぎる

推奨事項：

• 見出し：「レポートはまだありません」
• 説明：「最初のレポートを作成して、指標の追跡を始めましょう」
• 主要ボタン：「レポートを作成」
• 任意：小さなイラストやアイコン
• 検討事項：テンプレート／プレビュー例