空状態で教える(オンボーディング画面を作らない)

一言まとめ

主要操作が 1 つしかない小さなアプリでは、チュートリアル画面の代わりに空状態(0 件のホーム、0 件のタイムライン)が説明を担う。ダミーカードは本物と見分けがつかないので置かず、破線のゴーストカードで「空であること自体」を見せる。権限要求は文脈のある瞬間に、ローディング中も先に進める道を開けておく。

作成 · 更新 · #ux#empty-state#onboarding#permissions
目次 8 sections
  1. 01 オンボーディングを作らない
  2. 02 ダミーカードを置かない
  3. 03 説明は 1 か所に
  4. 04 ヒーローの位置を状態で変えない
  5. 05 権限要求は文脈のある瞬間に
  6. 06 ローディング中も手を止めさせない
  7. 07 関連
  8. 08 更新履歴

調査時点: 2026-08。ある PWA(画面 5 つ、主要操作は「+ を押して書く」だけ)の設計から。

オンボーディングを作らない#

説明のための画面を先に挟むと、毎回の起動で邪魔になるか、一度読んで二度と見られないかのどちらかになる。空状態は「まだ何もしていない人」だけが見る面なので、説明を置く場所として無駄が無い。

場面見せ方
記録 0 件のホームヒーロー(主ボタン)は通常時と同じ位置のまま、ラベルだけ「はじめての記録」に変える。空きスペースを説明に使う
項目 0 件のタイムライン破線のゴーストカード(--:--)+ 説明文。終了ボタンは不活性表示

一般公開する段になったら、その時点でオンボーディングを検討する。

ダミーカードを置かない#

空状態を賑やかす定番だが、本物の項目と見分けがつかず「消せないデータが入っている」と誤解される。破線のゴーストで空であること自体を見せる。

説明は 1 か所に#

「押す場所」の案内がゴーストカードの文言と FAB への矢印で二重になっていたら、矢印を文ごと消す。「押せば分かること」(時刻が自動で入る、など)を先回りして文字で説明しない。

ヒーローの位置を状態で変えない#

進行中の記録の有無でレイアウトが動くと、開くたびにボタンを探し直す。位置と重みを固定し、ラベルだけ変える。

権限要求は文脈のある瞬間に#

位置情報の許可は起動時に求めない。場所検索を開いた瞬間なら理由が自明で通りやすい。文脈のない許可要求は拒否されやすく、一度拒否されるとアプリ側から復帰できないので、設定画面に許可状態(許可済 / 未許可 / 拒否)と OS 設定への誘導文を置く。

ローディング中も手を止めさせない#

場所検索の候補を待つあいだ、スケルトン行を出しつつ「『○○』をそのまま場所にする」の自由テキスト採用ボタンは出したままにする。候補待ちで手が止まるのが一番損なので、先に進める道を常に開けておく。

関連#

更新履歴#

  • 2026-08-29: 初版(ローカル調査ノート)
  • 2026-10-17: Wiki へ移植、概念ページとして再構成

同じトピック — UI/UX