【えんぷてぃすてーと】
エンプティステート とは？
最終更新:
💡 表示するものがない理由を伝え、次の操作を助ける
表示するデータやコンテンツがないときの、画面や領域の状態とその表示設計。初回利用、検索結果なし、削除後など、理由に合う説明で状況を伝える。次にできる操作がある場合には、その手掛かりも示す。
📌 このページのポイント
- 画面全体だけでなく、表やカードなどの空の領域にも使う
- 初回利用・検索結果なし・削除後など、状況に合う説明
- 操作を促すボタンやイラストは、必要に応じて使う
- 取得失敗や権限不足では、データが存在しないと決めつけない
ひよこ エンプティステートって、空の画面のこと？
ペンギン先生 表示するデータがない画面や領域と、その見せ方だよ。例えば空の受信箱に「受信メールはありません」と出す。何がここに表示されるのか、なぜ今は空なのかが分かると、利用者が状況を理解しやすいんだ。
ひよこ ボタンやイラストは必ず必要？
ペンギン先生 状況に応じて選ぶよ。最初のプロジェクトを作れるなら、新規作成への案内が役立つ。一方、対応すべき通知がないだけなら、説明だけで十分な場合もある。イラストも任意で、余白や意味に合うものを使おう。
ひよこ 種類は3つに決まっているの？
ペンギン先生 分類は設計によって変わるよ。初回利用、検索結果なし、操作完了、データを表示できない問題などがある。大切なのは数を覚えることより、その状況に合う理由と次の手掛かりを伝えることだね。
ひよこ 検索結果がないときはどうするの？
ペンギン先生 条件に一致する結果がないと伝え、検索語や絞り込み条件を変えられるなら案内するよ。データ自体がないのか、条件に合わないのかを区別しよう。図の文言やボタンは、説明用の例だよ。
ひよこ 取得に失敗したときも「データなし」でいい？
ペンギン先生 実際にはデータがあるのに表示できない場合があるよ。通信や権限などの問題なら、分かる範囲で理由と対処方法を伝える。削除後も、取り消せる機能がある場合にだけ「元に戻す」を案内するんだ。
まとめ：ざっくりこれだけ覚えればOK！
「エンプティステート」って出てきたら「表示するものがない理由を伝え、次の操作を助ける」と思えばだいたいOK！
📖 おまけ：英語の意味
「Empty State」 ＝ 空の状態
💬 emptyは「空」、stateは「状態」。表示するものがないときに、理由や次にできることを伝えるUIの考え方だよ。