【えんぷてぃすてーと】
エンプティステート とは？
💡 「何もない」画面こそ、ユーザーを迷わせないデザインの腕の見せどころ
📌 このページのポイント
- データが存在しないときに表示される画面やコンポーネントのデザイン
- 「何もありません」だけでなく、次のアクション（データ追加など）への導線を示すのが良い設計
- 初回利用・検索結果なし・エラー後など、複数のシーンごとに適切なメッセージを用意する
ひよこ エンプティステートって、何も表示するものがない画面のこと？
ペンギン先生 そうだよ。たとえばメールアプリで受信ボックスが空のとき、真っ白だと「壊れてる？」って不安になるよね。そこに「受信メールはありません」とイラストを表示するのがエンプティステートの設計だよ
ひよこ 「データがありません」って書くだけじゃダメなの？
ペンギン先生 ダメではないけど、もったいないよ。「最初のプロジェクトを作成しましょう！」みたいにCTAボタンを置くと、ユーザーが次に何をすればいいか分かるんだ。エンプティステートはユーザーの行動を促すチャンスなんだよ
ひよこ どんな種類があるの？
ペンギン先生 大きく3つあるよ。「初回起動時（まだデータがない）」「検索結果0件」「エラーやフィルタで該当なし」。それぞれ適切なメッセージとアクションが違うから、全部同じデザインにしないのがポイントだね
ひよこ 有名なエンプティステートの例ってある？
まとめ：ざっくりこれだけ覚えればOK！
「エンプティステート」って出てきたら「データが空の状態の画面デザイン」と思えればだいたいOK！
📖 おまけ：英語の意味
「Empty State」 ＝ 空の状態
💬 UI/UXデザインの用語で、コンテンツが「空っぽ（empty）」の「状態（state）」をどう見せるかという考え方だよ