MVP構築ガイド
事業計画書をもとに、マッチングサイトのMVPをAIで構築する
3つのマイルストーンで進めます
一気に作るのではなく、小さなゴールを3つ設定して段階的に進めます。M2（案件一覧）まで到達すれば成功です。
トップページ
サービス紹介のランディングページ
約10分
案件一覧ページ
サンプルデータ + フィルタリング機能
約10分
案件詳細 + 応募
詳細ページ + 応募モーダル
約10分
必須ルール：Plan Mode → 確認 → 実装の順番を必ず守る
MVP構築でも、いきなりコードを書かせてはいけません。必ず最初に Plan Mode で「何を作るか」「どんな画面構成にするか」を確認し、 納得してから実装に入ります。
MVP構築の3ステップ
STEP A
Plan Mode
設計案を提案させる
（コードは書かない）
STEP B
確認 & 修正
あなたが内容を確認
必要なら修正指示
STEP C
実装GO
OKを出してから
コードを書かせる
この3ステップは、各マイルストーン（M1/M2/M3）のすべてで適用します。 マイルストーンごとに Plan → 確認 → 実装を繰り返してください。
【Plan Mode】プロジェクト全体の設計をAIに提案させる
Plan Mode — まだコードは書かせません
「実装はまだしないで」と明記することで、 AIは設計案だけを出してくれます。ここで画面構成・機能を確認します。
いきなりコードを書くのではなく、まずAIに「どんな画面を作るか」を提案させます。設計→確認→実装の順番は、プロのエンジニアと同じ進め方です。
Step A: Claude Code にコピペ（Plan Mode — 設計案の提案）
docs/business-plan.md を読んで、このサービスのMVPサイトを作りたい。
技術スタック:
- Next.js（静的エクスポート）+ TypeScript + Tailwind CSS
- データベースは使わない（サンプルデータをTypeScriptの定数で持つ）
- GitHub Pages にデプロイする前提
以下を提案して。実装はまだしないで。
1. 画面一覧と各画面の概要
2. 各画面に含める要素（セクション、ボタン、データ項目）
3. ファイル構成（どのファイルに何を書くか）
4. データの型定義（どんなフィールドを持つか）注意
ここで必ず立ち止まってください。AIが提案した設計案を読んで、以下を確認しましょう：
- ・画面構成は適切か？（トップ、一覧、詳細で足りるか？）
- ・各画面に含める情報は正しいか？
- ・データの項目に過不足はないか？
- ・修正したい点があれば、この段階で伝える
設計案に納得したら → 実装GOを出す
Step B → C: 設計案OKなら → 実装開始を指示
この設計でOK。では実装を開始して。
Next.jsプロジェクトの初期化から。
日本語フォント（Noto Sans JP）、色は青系（信頼感のある色合い）で。POINT
Claude Code がファイルを作成する許可を求めてきたら「Yes」を押してください。 たくさんファイルが作られますが、すべて自動なので心配いりません。
マイルストーン 1：トップページ
サービスの顔となるランディングページを作ります
【Plan → 実装】トップページを作る
Plan Mode 適用: Step 0 で全体設計を確認済みなので、M1はそのまま実装に入ります。 もし設計と違う内容になったら「待って、設計と違う」と止めてください。
以下をClaude Codeにコピペしてください。 AIがトップページの全コードを自動生成します。
Claude Code にコピペ
トップページ（src/app/page.tsx）を作って。
■ ヒーローセクション
- キャッチコピー: 「大企業の知見を、スタートアップの成長力に。」
- サブコピー: 「StartPass Talent Bridge は、上場企業のプロフェッショナル人材とスタートアップをつなぐマッチングプラットフォームです」
- CTA: 「案件を探す」ボタン（/jobs へリンク）
■ 特徴セクション（3カラム）
1. 大企業×スタートアップ特化 — 「上場企業の経験豊富な人材が、スタートアップの成長を加速」
2. 低リスクの成約課金 — 「掲載無料。マッチングが成立するまで費用ゼロ」
3. StartPassネットワーク — 「経営者同士の信頼関係がベースの、質の高いマッチング」
■ 統計セクション
- 参画大企業: 15+ / 掲載案件数: 50+ / マッチング成立: 30+
（ダミーの数字でOK）
■ フッター
- © 2026 StartPass Talent Bridge. All rights reserved.
完成したら npm run dev でサーバーを起動して。確認方法
ブラウザで http://localhost:3000 を開いてください。トップページが表示されるはずです。
もうWebサイトが動いています！ ここが最初の感動ポイントです。
注意
エラーが出た場合は、エラーメッセージをそのままClaude Codeに貼りつけてください。 AIがエラーの原因を特定して自動で修正してくれます。
マイルストーン 2：案件一覧ページ
サンプルデータとフィルタリング機能を作ります
【Plan → 実装】案件データ + 一覧ページを作る
Plan Mode 確認: 指示の中にデータ項目・画面要素を明記しています。 これ自体が「設計書」の役割を果たします。AIの出力を確認して、想定と違えば修正指示を出してください。
次に、実際の案件データとそれを表示する一覧ページを作ります。 検索やフィルター機能も一緒に作ってもらいます。
Claude Code にコピペ
案件データの型定義・サンプルデータと、案件一覧ページをまとめて作って。
■ サンプルデータ 10件
大企業×スタートアップ連携らしい案件を10件作って。例:
- 大手製造業のDX推進アドバイザー → AI系スタートアップを支援
- メガバンク出身のCFO人材 → フィンテックスタートアップの資金調達支援
- 大手商社の海外事業経験者 → 越境ECスタートアップの海外展開支援
- IT大手のプロジェクトマネージャー → SaaSスタートアップの開発体制構築
など、リアルで魅力的な案件にして
■ 案件一覧ページ（src/app/jobs/page.tsx）
- ページタイトル: 「案件を探す」
- キーワード検索
- スキルタグでのフィルタリング（ボタン形式）
- 勤務形態フィルター（フルリモート / ハイブリッド）
- 案件カード（グリッド表示）
- フィルターはリアルタイム絞り込み確認方法
ブラウザで http://localhost:3000/jobs を開いてください。案件カードが並び、スキルタグをクリックするとフィルタリングされるはずです。
補足
ここまで来れば成功です！ トップページと案件一覧がある、動くWebサービスが出来上がっています。 時間に余裕があればM3（案件詳細）に進みましょう。
マイルストーン 3：案件詳細 + 応募機能
ボーナスステージ。ここまで来れたら素晴らしい！
【Plan → 実装】案件詳細 + 応募モーダルを作る
Claude Code にコピペ
案件詳細ページ（src/app/jobs/[id]/page.tsx）を作って。
■ レイアウト
- 企業名 / ポジション名 / 企業タイプ / 勤務形態 / 稼働時間
- 報酬（目立つように）
- 募集概要
- 必要スキル（タグ形式）
- 「この案件に応募する」ボタン
■ 応募ボタンの動作
- クリック → モーダルが開く
- モーダル内に応募フォーム（名前 / メール / 自己PR）
- 「応募する」ボタン → 「応募が完了しました！」のメッセージ表示
（実際にはメール送信しない。MVPなのでUIの動きだけでOK）
■ 静的エクスポート対応
- generateStaticParams でサンプルデータの全IDを返す確認方法
案件一覧から「詳細を見る」をクリック → 案件の詳細が表示される → 「この案件に応募する」ボタンを押す → 応募フォームが表示される → 名前を入力して「応募する」 → 完了メッセージが出る
インターネットに公開する
作ったサイトを全世界に公開します（Phase 5）
GitHubにアップロードする
まず、作ったコードをGitHub（コードの保存サービス）にアップロードします。
Claude Code にコピペ
このプロジェクトをGitHubにpublicリポジトリとしてpushして。
リポジトリ名は「startpass-talent-bridge」で。Claude Code が自動でGitの初期化、GitHubへのリポジトリ作成、アップロードを行います。
GitHub Pagesで公開する
次に、GitHub Pages（無料のWebサイト公開サービス）を使って、 インターネットに公開します。
Claude Code にコピペ
GitHub Pages にデプロイできるように設定して。
- next.config.ts に静的エクスポートの設定を追加
- GitHub Actions のワークフローを作成
- basePath をリポジトリ名に設定
設定したらcommit & pushして。公開URLの確認手順
- 1.
https://github.com/あなたのユーザー名/startpass-talent-bridgeを開く - 2. 上部の「Settings」タブをクリック
- 3. 左メニューの「Pages」をクリック
- 4. Source を「GitHub Actions」に変更
- 5. 1〜3分待つとデプロイが完了
- 6. 公開URL：
https://あなたのユーザー名.github.io/startpass-talent-bridge/
POINT
スマホでもアクセスできます！ 公開URLをスマホのブラウザに入力してみてください。 自分が作ったサイトがスマホでも見られます。
おめでとうございます！
2時間前は何もなかったのに、今はインターネットに公開された Webサービスを持っています。
✓事業計画書（docs/business-plan.md）
✓マッチングサイトMVP（動くWebアプリ）
✓インターネットに公開済み
エラーが出たときの対処法
基本ルール：エラーメッセージをそのままAIに貼る
Claude Code にエラーメッセージをコピペするだけで、AIが原因を特定して修正してくれます。 自分で解決しようとしなくてOKです。
画面が真っ白 / エラー画面が出る
ブラウザのエラーメッセージ（赤い文字）をClaude Codeに貼ってください。
npm run dev が動かない
「npm run dev を実行したらエラーが出た。直して」とClaude Codeに言ってください。
GitHub Pagesにデプロイできない
ローカル（http://localhost:3000）で動いていれば成果としては十分です。 デプロイは後日でもOK。