オンボーディングフロー
ルール
- マルチステップウィザード：ステップを配列として定義 — 状態で
currentStepを追跡し、ステップ数付きのプログレスバーを表示 - 進捗インジケーター：上部にステップ番号またはプログレスバーを表示 — 完了、現在、今後のステップを表示 — 残りのステップ数を絶対に隠さない
- 進捗の永続化：完了したステップをデータベースに保存 — ユーザーは離脱して後から再開可能
- アクティベーションチェックリスト：主要なアクションを定義（例：「最初のプロジェクトを作成」、「チームメイトを招待」、「インテグレーションを接続」） — ダッシュボードに完了率を表示
- ウェルカムメールシーケンス：サインアップ直後、1日後、3日後、7日後に送信 — コンテンツは未完了のチェックリスト項目に一致
- スキップオプション：非クリティカルなステップをユーザーがスキップできるようにする — 「スキップ済み」としてマークし、「完了」としてはマークしない — 後で完了するよう促す
- データ収集：必要なものだけを尋ねる — 個人情報、ワークスペース設定、設定を別々のステップに分割
- 完了のお祝い：最終ステップで紙吹雪や成功アニメーションを表示 — メインの製品ビューにリダイレクト
ウィザードパターン
const ONBOARDING_STEPS = [
{ id: "profile", title: "あなたのプロフィール", required: true },
{ id: "workspace", title: "ワークスペースを作成", required: true },
{ id: "invite", title: "チームを招待", required: false },
{ id: "integrations", title: "ツールを接続", required: false },
] as const;
// データベースで追跡
interface OnboardingState {
userId: string;
currentStep: number;
completedSteps: string[];
skippedSteps: string[];
completedAt: Date | null;
}
アクティベーションチェックリストパターン
すべての項目が完了するか、ユーザーが閉じるまでダッシュボードに表示：
const ACTIVATION_ITEMS = [
{ key: "first_project", label: "最初のプロジェクトを作成", check: (user) => user.projectCount > 0 },
{ key: "invite_member", label: "チームメイトを招待", check: (user) => user.teamSize > 1 },
{ key: "first_deploy", label: "本番環境にデプロイ", check: (user) => user.deployCount > 0 },
];
避けるべきこと
- 最初から求めすぎない — ウィザードは最大3〜5ステップに抑え、残りは後回しにする
- 進捗の永続化がない — ページ更新で進捗を失うとユーザーは離脱する
- すべてのステップを強制しない — ユーザーがオプションのステップをスキップできるようにする
- アクティベーション追跡がない — オンボーディング完了率を測定する必要がある