Category · 空状態

空状態のAIプロンプト集

受信箱が空、検索結果0件、まだプロジェクトがないなど、データがない状態のUIのAIプロンプト集。次に何をすればよいかを明確に伝えるデザイン。

Designs001 Section空状態 Keyword空状態

空状態について

空状態(Empty State)は「まだ何も起きていない」画面のUI。放置されがちですが、初回利用者の体験を決める重要なパートです。良い空状態は「現在何が無いのか」「次に何をすればよいのか」「使うとどう便利になるのか」の3点を一画面で伝えます。イラストや簡潔なコピーで親しみを作りつつ、明確な1つのCTAで次のアクションへ送る設計が求められます。

よく使われる場面

  • 受信箱・タスクリストが空のとき
  • 検索結果0件・フィルター結果なし
  • 初回ログイン直後のオンボーディング画面
  • エラー後の状態リセット
  • データがまだない管理画面のダッシュボード

成功のポイント

  • イラストは1点だけ・派手すぎない
  • コピーは20-30字で次の一手を提示
  • CTAは1つに絞る(複数並べると迷う)
  • 絵文字で温度感を補完するのも有効
  • 404ページとは別の文脈として設計する

このカテゴリのデザイン

他のカテゴリ