オンボーディングフロー Onboarding flow

アプリ初回起動時のオンボーディング体験を定義します。スプラッシュ画面での起動時判定ロジック、 3ページ構成のオンボーディングスライド、および新規ユーザーをアカウント作成画面へ誘導するまでの 一連のフローを記載します。実装時のスプラッシュ・オンボーディング設計の一次情報源として参照してください。

Defines the onboarding experience when the app is launched for the first time. Covers the startup routing logic on the splash screen, the 3-page onboarding carousel, and the flow that guides new users to the account creation screen. Use this page as the primary reference when implementing the splash and onboarding screens.

1. 導入 1. Introduction

目的 Purpose

• アプリの中核価値（検索・絞り込み・履歴）を視覚的に伝え、新規ユーザーの初期エンゲージメントを高める
• Visually communicate the app's core value (search, filtering, history) to maximize first-time user engagement
• スプラッシュ起動時に既存セッション有無・オンボーディング完了フラグを確認し、最適な画面へ即時ルーティングする
• On splash, check for an existing session and onboarding-completion flag, then route instantly to the most appropriate screen
• 新規ユーザーをアカウント作成へ自然に誘導し、利用規約・プライバシーポリシーへの同意を取得する
• Guide new users naturally toward account creation and capture consent to Terms of Service and Privacy Policy

対象ユーザー Target users

2. 起動時判定ロジック 2. Startup routing logic

スプラッシュ画面（SplashScreen）はアプリ起動直後に表示され、 非同期で以下の順に判定を行います。判定完了後、適切な画面へ遷移します。 ローディング中はアニメーションロゴを表示します。

The SplashScreen is shown immediately after launch and performs the following checks asynchronously in order. Once the checks are complete the app routes to the appropriate screen. An animated logo is displayed while loading.

判定ステップ Decision steps

1. Supabase セッション確認：Supabase.auth.getSession() を呼び出す
2. Check Supabase session: call Supabase.auth.getSession()
3. 有効セッションが存在する場合：即座に /main へ遷移する
4. If a valid session exists: navigate immediately to /main
5. セッションなしの場合：SharedPreferences（Android）/ UserDefaults（iOS）の onboarding_completed フラグを確認する
6. If no session: check the onboarding_completed flag in SharedPreferences (Android) / UserDefaults (iOS)
7. フラグが true：/sign-in へ遷移する（既存ユーザーの再ログイン）
8. Flag is true: navigate to /sign-in (returning user re-login)
9. フラグが false または未設定：/onboarding へ遷移する（初回ユーザー）
10. Flag is false or unset: navigate to /onboarding (first-time user)

起動時判定フローチャート Startup routing flowchart

flowchart TD
  A([アプリ起動 / App launch]) --> B[SplashScreen 表示\nShow SplashScreen]
  B --> C[Supabase.auth.getSession]
  C --> D{セッション有効?\nValid session?}
  D -- Yes --> E[/main\nホーム画面]
  D -- No --> F{SharedPreferences\nonboarding_completed?}
  F -- true --> G[/sign-in\nサインイン画面]
  F -- false / 未設定 --> H[/onboarding\nオンボーディング]
  H --> I[3ページスライド表示\nShow 3-page carousel]
  I --> J[はじめる / Get started]
  J --> K[/create-account\nアカウント作成画面]
  G --> L{認証成功?\nAuth success?}
  L -- Yes --> E
  L -- No --> G

実装上の注意 Implementation notes

• getSession() はタイムアウト 3 秒を設定し、失敗時はセッションなし扱いにする
• Set a 3-second timeout on getSession(); treat failure as no-session
• オンボーディング完了フラグは「はじめる」ボタン押下時に書き込む（アカウント作成成否に依存しない）
• Write the onboarding-completion flag when the user taps "Get started" — independent of whether account creation succeeds
• スプラッシュ表示時間は最小 1.2 秒確保し、ロゴアニメーション完了前に遷移しない
• Guarantee a minimum splash display of 1.2 seconds; do not navigate before the logo animation completes

3. オンボーディング 3 ページ構成 3. Onboarding 3-page carousel

オンボーディングは全 3 ページのフルスクリーンスライドで構成されます。 各ページはイラスト・キャッチコピー・サブテキストで構成され、ドットインジケーターで現在位置を示します。

The onboarding consists of 3 full-screen slides. Each page has an illustration, headline, and supporting text. A dot indicator shows the current position.

4. ナビゲーション UI 4. Navigation UI

UI コンポーネント一覧 UI components

スワイプ操作 Swipe gesture

• 左スワイプ：次ページへ進む（最終ページでは無効）
• Swipe left: advance to next page (no-op on the last page)
• 右スワイプ：前ページへ戻る（最初のページでは無効）
• Swipe right: go back to previous page (no-op on the first page)

5.「はじめる」押下後の遷移 5. Transition after "Get started"

「はじめる」ボタン押下後、アカウント作成画面（/create-account）へ遷移します。 この画面では以下が必要です。

After "Get started" is tapped, the app navigates to the Create Account screen (/create-account). This screen requires the following.

• メールアドレス・パスワードによる新規登録フォーム
• Sign-up form with email address and password
• Google / Apple / Facebook によるソーシャルログインボタン
• Social sign-up buttons for Google, Apple, and Facebook
• 利用規約（Terms of Service ↗） および プライバシーポリシー（Privacy Policy ↗） のリンクを含む同意文言（「登録することで〜に同意したものとみなされます」）
• Consent copy linking to the Terms of Service ↗ and Privacy Policy ↗ ("By signing up, you agree to…")
• 既存ユーザー向けの「ログインする」リンク → /sign-in
• A "Sign in" link for existing users → /sign-in

6.「ログインする」押下時の遷移 6. Transition when "Sign in" is tapped

オンボーディングページ 3 の「ログインする」テキストリンク、 またはアカウント作成画面の「ログインする」リンクを押下した場合、 サインイン画面（/sign-in）へ遷移します。 サインイン成功後は /main へ進みます。

Tapping the "Sign in" link on onboarding page 3 or the Create Account screen navigates to the Sign-In screen (/sign-in). After a successful sign-in the app proceeds to /main.

7. シーケンス図：スプラッシュ → オンボーディング → アカウント作成 7. Sequence diagram: Splash → Onboarding → Create Account

sequenceDiagram
  participant U as ユーザー / User
  participant S as SplashScreen
  participant Sup as Supabase.auth
  participant SP as SharedPreferences
  participant Ob as Onboarding (3 pages)
  participant CA as CreateAccount

  U->>S: アプリ起動 / App launch
  S->>Sup: getSession()
  Sup-->>S: session = null
  S->>SP: get("onboarding_completed")
  SP-->>S: false (未設定 / unset)
  S->>Ob: navigate("/onboarding")

  Note over Ob: Page 1: Find parking in seconds
  U->>Ob: 次へ / Next
  Note over Ob: Page 2: Filter the perfect spot
  U->>Ob: 次へ / Next
  Note over Ob: Page 3: Save favorites & history
  U->>Ob: はじめる / Get started
  Ob->>SP: set("onboarding_completed", true)
  Ob->>CA: navigate("/create-account")

  Note over CA: 利用規約・プライバシーポリシーリンク表示
  U->>CA: メール登録 or ソーシャルログイン

8. 関連画面・リンク 8. Related screens & links