Category · 空状態
空状態のデザイン例とAIプロンプト
受信箱が空、検索結果0件、まだプロジェクトがないなど、データがない状態のUIのAIプロンプト集。次に何をすればよいかを明確に伝えるデザイン。
空状態について
まだ何も起きていない画面のUI。放置されがちですが、初回利用者が最初に出会う画面です。良い空状態は、いま何が無いのか、次に何をすればよいのか、使うとどう便利になるのかの3点を一画面で伝えます。何も表示されない画面は、壊れた画面と区別が付きません。まずこれは正常な状態だと伝え、それから次の一歩を示すこと。CTAは必ず1つに絞ります。心細い状態の人に選択肢を3つ並べると、かえって動けなくなります。
よく使われる場面
- 受信箱・タスクリストが空のとき
- 検索結果0件・フィルター結果なし
- 初回ログイン直後のオンボーディング画面
- エラー後の状態リセット
- データがまだない管理画面のダッシュボード
成功のポイント
- イラストは1点だけ・派手すぎない
- コピーは20-30字で次の一手を提示
- CTAは1つに絞る（複数並べると迷う）
- 絵文字で温度感を補完するのも有効
- 404ページとは別の文脈として設計する
