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, Figma, chrome-devtools, Cloudflareの8種を整理導入 |
0-0-4 | セキュリティ基盤 | .npmrc (min-release-age=2) でサプライチェーン攻撃対策 |
0-0-5 | ロードマップ作成・合意 | 全Phaseのタスク・担当・依存関係を整理 |
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 | ボタン・カード・リンク等のスタイルガイド |
0-2-5 | デザインプレビュー作成 | Designer | Figmaでデザインガイドを視覚化・検証 |
重要ポイント: デザインガイドがないと、ページごとに見た目がバラバラになる
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 | テーマ切替・フォーム状態 |
0-3-6 | セキュリティ要件定義 | Reviewer | OWASP Top 10ベース、 |
重要ポイント: 要件定義とデザインガイドを統合し、実装可能な技術仕様に落とし込む。セキュリティ要件も実装前に定義することで、実装後の手戻りを防ぐ
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 | メタデータ、フォント、 |
重要ポイント: context7 MCPで最新APIを確認しながら実装
Phase 2: ページ実装
# | タスク | 担当 | 内容 |
|---|---|---|---|
2-1 | トップページ | Frontend | Hero + 自己紹介 + FolioInk紹介 + CTA |
2-2 | About | Frontend | 詳細プロフィール・スキル |
2-3 | Projects | Frontend | 実績紹介 |
2-4 | Contact | Frontend | フォーム + Resend連携 |
2-5 | セキュリティ監査 | Reviewer | OWASP Top 10ベースの脆弱性検証 |
重要ポイント: 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 | セキュリティ監査 | Reviewer | Phase 3で追加したコードの |
3-5 | デプロイ | — | GitHub経由でVercelデプロイ・動作確認 |
まとめ:
個人的にClaude CodeでLPを作るのに一番大事なのは「コードを書く前の準備」だと思っています。
CLAUDE.md・スキル・MCP・セキュリティ・ログ連携——
Phase 0-0の基盤整備が、 その後の全Phaseの品質を決める要件定義・デザインガイド・コンテンツデータの3つが揃うと、
実装フェーズでAIが迷わなくなる「AIに丸投げ」ではなく「人間が設計し、AIが実行する」体制が、
結果的に最も速くて品質が高いのでは？
追記予定
各Phaseの実行結果・振り返りを実装後に追記予定。
（「ロードマップ通りにいったか？」「何が想定外だったか？」など）
カッコいいこと書いていますが、ロードマップ作成とこの記事作成も
ほぼ全てClaude Codeにやってもらっています。