ux-empty-states

空状態スキル

このスキルの動作（最初にお読みください）

これは生成型のスキルです。デフォルトの失敗モードはデッドスクリーンです。「タスクが見つかりません」——ユーザーが最も新しく、最も混乱し、最も行き詰まっているまさにその瞬間に現れる、空白の行き止まりです。すべての空状態は、実は製品の中でも最もてこの効く画面のひとつです。それはオンボーディング（初回利用）、安心（クリア済み）、またはリカバリー（結果なし／404）です。逆の失敗も存在します——テキスト、イラスト、3つの CTA で埋め尽くされ、もはや落ち着きのない「空」画面です。このスキルは次のことをゲートします。

1. なぜその画面が空なのかを特定する — 原因がパターンを決めます。
2. 常に当てはまる核心を適用する — 説明＋導線、決して責めず、落ち着きを保つ。
3. 装飾の判断（イラスト、CTA、ユーモア）をトレードオフとともに表面化する。

その後、検証のために ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit、ux-microcopy-audit に引き継ぎます。

---

ステップ 0 — なぜその画面が空なのかを特定する

原因がパターンを決めます。

• 初回利用 — ユーザーはまだ何も作成していません。これはオンボーディングの最後の一歩です。ここに何があるのかを説明し、最初のアクションを手間なく行えるようにします（「最初のタスクを追加」）。
• クリア済み／完了 — ユーザー自身が空にしたものです（受信トレイゼロ、完了リスト）。トーンはポジティブな強化へと移ります。「すべて対応済みです！」＋プレッシャーの低い次の一歩。
• 結果なし — 検索／フィルターが空の結果を返した場合。これは本当の意味で「空」ではありません——リカバリーの瞬間です。スペルの確認、検索のヒント、人気のカテゴリ、最近の検索（ux-search の行き止まりを作らないルールに合わせます）。
• エラー／404 — 何かが欠けているか壊れています。専門用語や責任追及なしで、平易に説明し、安全な場所（ホームページ、人気のコンテンツ）へ戻します。

さらに、プラットフォームとブランドのボイスも特定します——これらがイラストのスタイルやユーモアが安全かどうかを規定します。

---

常に適用する核心（ほぼすべてのケースで正しい）

説明＋導線 — すべての空状態が持つ2つの役割

• なぜ空なのかを、具体的に言う。 ❌「タスクが見つかりません」 ✅「すべて対応済みです！新しいタスクを追加して、生産性を保ちましょう。」明確さと励まし、決して単なる否定ではありません。
• 常に次の一歩を提示する。 基本的な情報提供型の空状態でさえ、何をすべきかをほのめかします（「受信トレイは空です。新しいメッセージを作成することから始めましょう」）。前に進む道のない空状態は欠陥です。
• アクション型の空状態はメッセージと CTA を対にする： ボタンが文を続けます——「カートは空です。今すぐ買い物を始めましょう！」→［今すぐ購入］。副次的な経路（ドキュメント、例）はコピー内のリンクとして置くことができます。
• 決してユーザーを責めない — 特に結果なしや 404 ページでは。システムは何が起きたかを説明し、責任ではなく道筋を提示します。

実際にユーザーを動かす CTA

• 具体的でアクション指向のラベル：「最初のタスクを追加」「機能を探す」——文脈なく浮かぶ「OK」や「始める」ではありません。
• 主要なアクションは1つ。 2つが正当化される場合（テンプレートかカスタムか）、推奨される経路が視覚的に主要となり、代替は明確に副次的です——決して対等な2つのボタンにはしません。

雑然より落ち着きを

• 空の画面は看板ではありません。 簡潔なマイクロコピー＋最小限のビジュアル。すべての要素がユーザーの主要な目標へと促します。特に初回のダッシュボードでは、ヒントやツアー、バナーを一度に絨毯爆撃するのではなく、導くことが大切です。

---

文脈依存の判断（表面化させ、自動適用しない）

判断	適用する場合	避ける／適応させる場合	デフォルトの推奨
イラスト	状態を伝え（天気データがないときの雲の後ろの太陽）、ブランドの個性に合致する	ノイズを加えたり理解を遅らせる装飾。一貫性のないスタイル	関連性があり、ブランドに沿い、メッセージに従属する
ユーモア／個性	遊び心が合うブランド。フラストレーションが低い瞬間（完了状態）	深刻な製品のエラー／404 の文脈。タスクの途中でブロックされているユーザー	温かみは常に。ジョークはフラストレーションが低い場面のみ
セカンダリ CTA	真に代替となる経路（テンプレート対カスタム）	ブロック解除を目的とした画面での選択麻痺	プライマリを1つ。セカンダリは視覚的に従属させる
教育コンテンツ（ドキュメントリンク、デモ）	最初のアクションに文脈が必要な複雑な製品	マニュアルが不要なシンプルなアクション	ボタンで競合させず、コピー内にリンクを置く
サンプル／デモデータ	説明するよりも価値を示す方が優れるダッシュボード	偽のデータが本物と誤認される可能性がある場合	プレビューとして明確にラベル付けされたサンプルコンテンツ
404 のナビゲーション補助	ホームページ＋人気コンテンツへのリンク。検索ボックス	素っ気ない「ページが見つかりません」	イラスト＋平易な説明＋2つ以上の進む先

---

結果を検証する（オーケストレーション）

ハンドオフは、各レンズをインストール可能なスキルの name で指定します。そのスキルがインストールされている場合のみ呼び出してください。インストールされていない場合、このスキル自身のコアがすでにこれらのルールを備えているため、ブロックせずにそのまま進めてください。

生成または改訂した後、完了と宣言するのではなく、結果を監査レンズに引き渡してください。これらは候補のレンズであり、姿勢は docs/orchestration-policy.md で設定されるか、全体を ux-design-review 経由でルーティングします。ここでは、**heuristics と microcopy が Tier A（自動実行）、accessibility と aesthetics が Tier B（オファー）**です。既存のデザインシステムがある場合、aesthetics は抑制され、accessibility は使用法に絞られます。ユーザーが特定の目的でこのスキルを呼び出した場合は、その範囲を尊重してください。

• ux-heuristics-audit (Tier A) — システム状態の可視性（なぜ空なのか？）、エラー回復の品質、状態タイプごとのユーザー期待との一致。
• ux-accessibility-audit (Tier B — オファー。デザインシステムがある場合は絞る) — イラストの代替テキスト、CTA のコントラストとターゲットサイズ、メッセージの可読性。
• ux-aesthetics-audit (Tier B — オファー。デザインシステムがある場合は抑制) — 落ち着きと雑然さのバランス、製品のビジュアル言語とのイラストの一貫性。
• ux-microcopy-audit (Tier A) — このスキルはコピーにかかっています。説明の具体性、CTA のラベル、トーン（励まし、決して責めない）。

監査で矛盾が表面化した場合（例：ブランドは大きなイラストを望むが、素早い理解を優先したい）、主要なタスクに向けて解決してください。ユーザーは何かをしようとしてこの画面にたどり着いたのですから、それを実行できるようにするのです。

---

よくある do／don't パターン

❌ Don't	✅ Do
「データがありません。」だけで他に何もない	なぜ空なのか＋次に何をすべきかを、毎回示す
一般的な「タスクが見つかりません」	「すべて完了しています！新しいタスクを追加して生産性を維持しましょう」
進む先のない空のカート	「カートは空です。今すぐ買い物を始めましょう！」＋[今すぐ購入]
結果なしで責める表現（「不正なクエリを入力しました」）	スペルヒント、検索候補、人気カテゴリ
専門用語だらけの 404	平易な言葉＋イラスト＋進む先へのリンク
初回起動画面に3つの同等な CTA	プライマリアクションを1つ。代替は従属させる
空のダッシュボードにチュートリアルの壁	最小限のコピー＋明確な最初の一歩（＋役立つならラベル付きサンプルデータ）
どこにでもランダムに可愛いイラスト	意味を担う、関連性がありブランドに沿ったビジュアル
確認せずに出荷	heuristics ＋ accessibility ＋ aesthetics ＋ microcopy に引き渡す

---

出典のレッスン（Uxcel）

• 役立つ空の状態をデザインする方法