Claude CodeでLPを作成する際のロードマップ
はじめに
自分がポートフォリオPRサイト（LP）をClaude Codeで作成するに当たり、
実際に作ったロードマップを紹介します。
自分と同じようにAIエージェントでWebサイトを作ろうとしている人の参考になればうれしいです。
（評判がよければ、その内有料記事にするかも？？）
技術スタック: Next.js (App Router) + TypeScript + Tailwind CSS v4 + shadcn/ui
開発環境: Claude Code (Opus) + 専用エージェントチーム（PM, Designer, Frontend, Growth, Reviewer）
デプロイ先: Vercel
ロードップ
Phase 0-0: プロジェクト基盤の整備
# | タスク | 内容 |
|---|---|---|
0-0-1 | CLAUDE.md整備 | AIの「役割」「規約」「エージェント選定ガイド」を定義。 これがないと毎回指示がブレる |
0-0-2 | スキル導入 | vercel-react-best-practices, frontend-design, accessibility-a11y, framer-motion-animator。 （インストール数・ソース信頼度で選定） |
0-0-3 | MCP確認 | Notion, GitHub, context7, Playwright, Vercel, Cloudflareの6種。Phaseごとの活用先を整理して導入 |
0-0-4 | セキュリティ基盤 | .npmrc (min-release-age=2) でサプライチェーン攻撃対策 |
0-0-5 | ロードマップ作成・合意 | 全Phaseのタスク・担当・依存関係を整理して、Claude Codeと合意 |
0-0-6 | 開発環境確認 |
|
0-0-7 | Vercel連携確認 | デプロイ先の設定確認 |
Phase 0-1: 要件定義の作成
# | タスク | 担当 | 内容 |
|---|---|---|---|
0-1-1 | ページ目的・CTA定義 | PM | 各ページの目的・ターゲット・CTAを定義 |
0-1-2 | セクション構成 | PM | ページごとのセクション構成・要素一覧 |
0-1-3 | ユーザーフロー | PM | 訪問→問い合わせ / プロダクト誘導の導線設計 |
「何を作るか」を明確にしないままAIに実装させると、手戻りが大きくなる。
Phase 0-2: デザインガイドの作成
# | タスク | 担当 | 内容 |
|---|---|---|---|
0-2-1 | カラーパレット | Designer | OKLch値、用途別ガイド |
0-2-2 | タイポグラフィ | Designer | 見出し・本文・キャプションのサイズ・ウェイト |
0-2-3 | スペーシング | Designer | レイアウトグリッド・余白ルール |
0-2-4 | コンポーネントスタイル | Designer | ボタン・カード・リンク等のスタイルガイド |
デザインガイドがないと、ページごとに見た目がバラバラになる。
Phase 0-3: 実装仕様書の作成
# | タスク | 担当 | 内容 |
|---|---|---|---|
0-3-1 | コンポーネント仕様 | Frontend | Props定義・ファイル配置 |
0-3-2 | API Route 仕様 | Frontend |
|
0-3-3 | フォームバリデーション | Frontend | Zodスキーマ |
0-3-4 | メタデータ仕様 | Growth | 各ページの title/description/OGP |
0-3-5 | 状態管理仕様 | Frontend | テーマ切替・フォーム状態 |
要件定義とデザインガイドを統合し、Frontendエージェントが迷わず実装できる技術仕様に落とし込む。
Phase 0-4: コンテンツデータ準備
# | タスク | 担当 | 内容 |
|---|---|---|---|
0-4-1 | 自己紹介文 | ユーザー | Hero用 + About用 |
0-4-2 | スキル一覧 | ユーザー | 技術スキル・経験 |
0-4-3 | プロジェクト情報 | ユーザー | FolioInk等の実績 |
0-4-4 | SNS・連絡先 | ユーザー | リンク情報 |
これは人が用意する部分。AIには作れない「自分の言葉」を用意する。
Phase 1: 基盤実装（型・データ・レイアウト）
# | タスク | 担当 | 内容 |
|---|---|---|---|
1-1 | 型定義 | Frontend | src/types/ に Project, Skill, NavItem 等 |
1-2 | 静的データ | Frontend | src/data/ にコンテンツデータをコード化 |
1-3 | 共通コンポーネント | Designer → Frontend | Header / Footer / Nav |
1-4 | ルートレイアウト | Frontend + Growth | メタデータ、フォント、テーマプロバイダー |
ここからFrontendエージェントが本格稼働。context7 MCPで最新APIを確認しながら実装。
Phase 2: ページ実装
# | タスク | 担当 | 内容 |
|---|---|---|---|
2-1 | トップページ | Frontend | Hero + 自己紹介 + FolioInk紹介 + CTA |
2-2 | About | Frontend | 詳細プロフィール・スキル |
2-3 | Projects | Frontend | 実績紹介 |
2-4 | Contact | Frontend | フォーム + Resend連携 |
Phase 0で要件・デザイン・データが揃っているので、実装はスムーズに進む（はず）。←AIが自分で()書きしましたw
Phase 3: 仕上げ
# | タスク | 担当 | 内容 |
|---|---|---|---|
3-1 | SEO・OGP | Growth | 各ページのmetadata、JSON-LD、OGP画像 |
3-2 | アニメーション | Frontend | framer-motion-animatorスキルを活用して控えめに |
3-3 | レビュー・a11y | Reviewer | コードレビュー + Playwrightで検証 |
3-4 | デプロイ | — | Vercelデプロイ・動作確認 |
まとめ:
個人的にClaude CodeでLPを作るのに一番大事なのは「コードを書く前の準備」だと思っています。
CLAUDE.md・スキル・MCP・セキュリティ・ログ連携——Phase 0-0の基盤整備が、
その後の全Phaseの品質を決める要件定義・デザインガイド・コンテンツデータの3つが揃うと、実装フェーズでAIが迷わなくなる
「AIに丸投げ」ではなく「人間が設計し、AIが実行する」体制が、結果的に最も速くて品質が高いのでは？
追記予定
各Phaseの実行結果・振り返りを実装後に追記予定。
（「ロードマップ通りにいったか？」「何が想定外だったか？」など）
カッコいいこと書いていますが、ロードマップ作成とこの記事作成もほぼClaude Codeにやってもらっています。