オンボーディング 仕様書

概要

新規ユーザー向けの初回セットアップフロー。ウェルカム画面から始まり、プロフィール設定、興味カテゴリの選択を経て完了する。

アクター

• ユーザー（一般ユーザー）

画面一覧

1. ウェルカム（welcome）

• 目的: サービス紹介とオンボーディング開始
• 要素:
  • アイコン（Sparkles）
  • タイトル「ようこそ！」
  • 説明テキスト
  • 「はじめる」ボタン → profile-setup へ遷移
  • 所要時間の目安表示（約1分）

2. プロフィール設定（profile-setup）

• 目的: ユーザーの基本情報を入力
• 要素:
  • ステップインジケーター（1/2）
  • アバター設定エリア（カメラアイコン付き）
  • 表示名入力（Input）
  • ユーザー名入力（Input、@プレフィックス形式）
  • 「戻る」ボタン → welcome へ遷移
  • 「次へ」ボタン → interest-select へ遷移

3. 興味カテゴリ選択（interest-select）

• 目的: ユーザーの興味を把握してパーソナライズに活用
• 要素:
  • ステップインジケーター（2/2）
  • 9カテゴリのグリッド表示（3列）
  • 選択状態のトグル（チェックマーク表示）
  • 選択数カウンター（3個以上必須）
  • 「戻る」ボタン → profile-setup へ遷移
  • 「次へ」ボタン → complete へ遷移（3個未満で無効化）

4. 完了（complete）

• 目的: セットアップ完了の確認
• 要素:
  • チェックアイコン（緑）
  • タイトル「セットアップ完了！」
  • 完了メッセージ
  • 「はじめる」ボタン → welcome へ遷移（デモ用ループ）

画面遷移

パターン軸