§02
オンボーディング
Onboarding
- Patterns
- 9
- Demos
- 9
§02-03
チェックリスト / クエスト
初期設定の残り項目を一覧にして進捗を示す。
利用開始に必要な設定を順番に案内し、完了度を見せて次の行動を促す。登録直後の離脱を減らし、主要機能に早く到達させたいときに使う。
実装のポイント進捗は完了数から導出して二重管理しない。完了状態はサーバー側のイベントで自動チェックし、手動トグルにはロールバック可能な楽観更新を使う。
- 状態管理
§02-04
アカウント完成度ゲージ
アカウント設定の完了率を円グラフで示す。
登録直後の利用者に未設定の項目を示し、残りの作業を促す。プロフィールや初期設定を途中で止める人が多いときに効く。
実装のポイント完成度は項目の完了数から算出し、残り項目への直接リンクを並べて次の行動を示す。円グラフは role=「progressbar」で値を読み上げさせる。
- CSS のみ
§02-05
サンプルデータ / デモモード
サンプルデータを入れて初期状態を触れるようにする。
空の状態では価値が伝わらないツールで、実際の見え方を試せる。データ投入前に機能を評価したい利用者に効く。
実装のポイントサンプルデータは本番データと明確に区別できるバッジを付け、ワンクリックで一括削除できるようにする。実データ作成時に自動で消すかも決めておく。
- 状態管理
§02-06
空状態（イラスト付）
一覧が 0 件のときに理由と次の操作を示す。
データがまだ無い画面で、何も表示しない代わりに状況と最初の一歩を示す。初回利用の離脱を防ぎ、機能の使い方を自然に伝える。
実装のポイント空である理由と次の 1 アクションを 1 つだけ示す。初回の空と検索 0 件の空では文言と導線を分ける。
- CSS のみ
§02-07
ヒント tooltip / コーチマーク
画面上の要素に吹き出しで使い方を示す。
新機能や見つけにくい操作をその場で知らせられる。初回訪問やアップデート直後に、長い説明を読ませずに要点だけ伝えたいときに使う。
実装のポイント対象要素に吹き出しを固定するには Floating UI などで位置を計算し、画面端で反転させる。既読は保存して二度と出さない。
- 状態管理
§02-08
起動 splash / リニューアル予告
起動時に新機能や変更点をまとめて知らせる。
更新後に何が変わったかを利用者に伝える。見た目が大きく変わる改修や、気づかれにくい新機能を周知したいときに向く。
実装のポイント最後に見たバージョンを保存し、それ以降の項目だけに NEW を付ける。起動時のモーダルは重要な変更に限り、他はバッジ付きの一覧に回す。
- 永続化
§02-09
招待入力 / 紹介者コード
招待コードや紹介者コードを入力して登録する。
紹介経由の登録を識別し、紹介者と被紹介者の双方に特典を結び付ける。クローズドベータや紹介施策で使う。
実装のポイントコードは大文字化と空白除去で正規化してからサーバーで検証し、無効時はフィールド下にエラーを出す。URL パラメータから自動入力すると取りこぼしが減る。
- フォーム