Step 01ログイン画面
URL: /login
「Googleでログイン」ボタンが見える画面
[ Screenshot placeholder — あとで差し替え ]
狙い: 「誰でも1クリックで始められる」
Step 02組織名入力
URL: /onboarding
組織名を入力している状態（例: Plangers Demo Inc.）
[ Screenshot placeholder ]
狙い: 「3ステップで開始」
Step 03GitHub App連携
① Brainforce側「GitHub Appをインストール」ボタン画面
② GitHub側のInstallation確認画面（最小権限リストが見える）
[ Screenshot placeholder (2枚) ]
狙い: 「コード資産はお客様のGitHubに、最小権限で」
Step 04Welcomeページ（guide）
「Brainforceでできること」ブロックが見える画面
[ Screenshot placeholder ]
狙い: 「5ステップで戦略→リリースまで」
Step 05プロダクト作成
URL: /dashboard?create=true
テンプレート選択 or 既存リポ取り込み画面
[ Screenshot placeholder ]
狙い: 「プロダクトを作る」のハードルが低い
Step 06戦略壁打ち（チャット）
URL: /projects/{id}/strategy
① AIとのチャット画面（数ターンやり取りした後）
② 「strategy.md を生成」ボタンと、生成結果のMarkdownプレビュー
[ Screenshot placeholder (2枚) ]
狙い: 「対話で戦略が構造化される」
Step 07機能提案
「戦略から機能を提案」ボタンを押下 → 提案された機能カード一覧（「新規」バッジ付き）
[ Screenshot placeholder ]
狙い: 「AIが何を作るべきか提案してくれる」
Step 08機能仕様（spec生成）
URL: /projects/{id}/features
機能詳細画面で spec.md が生成されている状態
[ Screenshot placeholder ]
狙い: 「仕様書まで自動生成」
Step 09開発GO → Actions実行中
① 複数機能を選択 → 「N機能を開発」ボタン（残クレジット表示つき）
② 開発中バナー「Claude Codeが実装中…」 + Actions URL
[ Screenshot placeholder (2枚) ]
狙い: 「1クリックでAIが実装を開始」「コスト透明性」
Step 10STG反映済み
featureカードに「STGに反映済み」バッジ + STG URLリンク
[ Screenshot placeholder ]
狙い: 「確認できる形で完成」
Step 11STG動作確認
STG URLを新タブで開き、生成されたアプリが動いている画面
[ Screenshot placeholder ]
狙い: 「ただのコードではなく、動くプロダクトになる」
Step 12本番リリース
① 「本番リリース（N機能）」ボタン
② 確認ダイアログ
③ 「本番に反映済み」緑バッジ + 本番URLリンク
[ Screenshot placeholder (3枚) ]
狙い: 「stagingで確認→本番も1クリック」
Step 13残クレジット・使用量
URL: /settings/usage
残クレジット、消費履歴（戦略生成/機能開発実行 など）
[ Screenshot placeholder ]
狙い: 「コスト連動で料金予測可能」
Step 14プラン設定
URL: /settings/plan
Free/Starter/Proのカード、現在のプラン表示
[ Screenshot placeholder ]
狙い: 「ワンプライス+追加チャージのシンプル料金」