本文へ移動

§02-06Onboarding

空状態(イラスト付)

一覧が 0 件のときに理由と次の操作を示す。

データがまだ無い画面で、何も表示しない代わりに状況と最初の一歩を示す。初回利用の離脱を防ぎ、機能の使い方を自然に伝える。

実装のポイント

空である理由と次の 1 アクションを 1 つだけ示す。初回の空と検索 0 件の空では文言と導線を分ける。

特徴
  • CSS のみ
デモで使っているもの
  • shadcn/ui
  • lucide-react

このパターンが効く目的