Playte 画面遷移図

Web App Screen Flow Diagram — 2026-02-22

メイン画面
アクション画面
外部リンク
認証関連
→ 遷移方向

1. 認証フロー

🏠
ランディングページ
/（未ログイン時）
アプリ紹介、特徴説明、ログインボタン
ログイン画面
→
🔑
ログイン
/login
Googleアカウントでログイン
ダッシュボード
→
📊
ダッシュボード
/（ログイン時）
統計、クイックアクション、最近のレシピ、リンク集
レシピ一覧
チャンネル管理
買い物リスト
レシピ追加（4種）

2. レシピ閲覧フロー

📚
レシピ一覧
/recipes
検索、フィルター（料理・シェフ・難易度・時間・ソース・コレクション）、ソート
レシピ詳細
レシピ追加
→
🍽️
レシピ詳細
/recipe?id={id}
材料、手順、YouTubeプレーヤー、お気に入り、買い物リスト追加
調理モード
買い物リスト追加
→
👨‍🍳
調理モード
/cook?id={id}
フルスクリーン、ステップバイステップ、YouTube連携、キーボード操作

3. レシピ追加フロー

追加方法の選択 → 各生成画面

➕
追加方法を選ぶ
/add
4つの追加方法から選択
🎬
YouTube動画から
/add/youtube
YouTube URLを入力 → 字幕解析 → AI生成レシピ作成
レシピ詳細（生成後）
📷
写真から
/add/photo
写真アップロード（最大4枚）+ メモ → AI解析 → 生成レシピ作成
レシピ詳細（生成後）
🔗
URLから
/add/url
レシピサイトのURL → HTMLスクレイピング → AI生成レシピ作成
レシピ詳細（生成後）
✍️
手入力
/add/manual
フォームで材料・手順・メタ情報を直接入力
レシピ詳細（保存後）

4. チャンネル・動画フロー

📺
チャンネル管理
/channels
登録チャンネル一覧、追加・削除
チャンネル詳細
→
🎥
チャンネル詳細
/channel?id={id}
動画/ショートのタブ切替、動画カード一覧
動画詳細
→
▶️
動画詳細
/video?id={id}
サムネイル、タイトル、再生回数、概要、YouTube外部リンク
生成レシピを作成
生成レシピを見る
YouTubeで見る（外部）

5. クッキングフロー（複数レシピ同時調理）

📋
フロー一覧
/flows
複数レシピを組み合わせた調理プラン一覧、作成・削除
フロー詳細
→
🔀
フロー詳細
/flow?id={id}
マルチレーン表示、フェーズフィルター、進捗チェック

6. その他の画面

🛒
買い物リスト
/shopping
材料をカテゴリ別にグループ化。チェック・削除・クリア。レシピ詳細から追加可能。
⚙️
設定
/settings
アカウント情報、AI同意トグル、バージョン、利用規約、アカウント削除

全体構成図

                          ┌──────────────────────────────────┐
                          │        ヘッダーナビゲーション        │
                          │  レシピ | チャンネル | 買い物 | 設定  │
                          └──────┬───────┬───────┬───────┬───┘
                                 │       │       │       │
                                 ▼       │       │       │
┌───────────┐           ┌────────────┐   │       │       │
│  ログイン   │──────────→│ ダッシュボード │   │       │       │
│  /login   │           │     /      │   │       │       │
└───────────┘           └─┬──┬──┬──┬─┘   │       │       │
                          │  │  │  │     │       │       │
              ┌───────────┘  │  │  └─────┼───────┼───────┼─── → /settings
              │              │  │        │       │       │
              ▼              │  │        ▼       │       │
      ┌────────────┐         │  │  ┌──────────┐  │       │
      │ レシピ一覧  │         │  │  │チャンネル │  │       │
      │  /recipes  │         │  │  │/channels │  │       │
      └──────┬─────┘         │  │  └────┬─────┘  │       │
             │               │  │       │        │       │
             ▼               │  │       ▼        │       │
      ┌────────────┐         │  │  ┌──────────┐  │       │
      │ レシピ詳細  │         │  │  │チャンネル │  │       │
      │/recipe?id= │         │  │  │  詳細    │  │       │
      └──┬───┬─────┘         │  │  └────┬─────┘  │       │
         │   │               │  │       │        │       │
         │   ▼               │  │       ▼        ▼       ▼
         │ ┌──────────┐      │  │  ┌──────────┐ ┌──────┐┌──────┐
         │ │ 調理モード │      │  │  │ 動画詳細 │ │買い物││ 設定 │
         │ │/cook?id= │      │  │  │/video?id=│ │リスト││      │
         │ └──────────┘      │  │  └──────────┘ └──────┘└──────┘
         │                   │  │
         │    ┌──────────────┘  │
         │    │                 │
         │    ▼                 │
         │ ┌────────────┐      │
         │ │ 追加方法選択 │      │
         │ │   /add     │      │
         │ └─┬──┬──┬──┬─┘      │
         │   │  │  │  │        │
         │   ▼  ▼  ▼  ▼        │
         │  YouTube/Photo      │
         │  /URL/Manual        │
         │   │  │  │  │        │
         │   └──┴──┴──┘        │
         │        │             │
         │        ▼             │
         │  ┌────────────┐     │
         └──│ レシピ詳細   │     │
            │ （生成後）   │     │
            └────────────┘     │
                               │
              ┌────────────────┘
              ▼
        ┌──────────┐    ┌──────────┐
        │フロー一覧 │───→│フロー詳細  │
        │ /flows   │    │/flow?id= │
        └──────────┘    └──────────┘
Generated for Playte Project — 2026-02-22