---
title: "Claude Codeで設計から本番公開まで3時間｜イシュー駆動＋TDD＋Cloudflare Pagesの実践記録"
excerpt: "Claude Codeで「プランニング → イシュー作成 → TDD実装 → PR作成・マージ → デプロイ → DNS設定」の全工程を1日で実行しました。Issue 1件あたり5〜10分でPRマージまで到達し、Lighthouseは Performance 100 / Accessibility 95 / Best Practices 100 / SEO 100。security-auditorエージェントがMXレコード不足とDMARC未設定を事前検出した経緯もまとめています。"
author: "AI活編集部"
author_username: ai-katsu-editorial
published_at: 2026-04-05T00:00:00+00:00
verified_at: 2026-04-05T00:00:00+00:00
models: ["Claude Code"]
tools: ["Astro", "Cloudflare", "GitHub"]
tasks: ["開発・エンジニアリング", "ツール検証"]
canonical_url: https://ai-katsu.jp/articles/claude-code-hp-development
---
# Claude Codeで設計から本番公開まで3時間｜イシュー駆動＋TDD＋Cloudflare Pagesの実践記録

AIコーディングツールの評価は、コードが書けるかどうかで止まりがちです。しかし実務で効くのは、**設計からデプロイまでを止まらずに通せるか**です。

この検証では、Claude Codeで「プランニング → イシュー作成 → TDD実装 → PR作成・マージ → デプロイ → DNS設定」の全工程を実行しました。**プランニング開始から本番公開まで約3時間、Lighthouseは Performance 100 / Accessibility 95 / Best Practices 100 / SEO 100** という結果です。

## この検証の概要

| 項目 | 内容 |
| --- | --- |
| 検証日 | 2026年4月5日（1日で完結） |
| 使用ツール | Claude Code（Claude Opus 4.6・1Mコンテキスト）／GitHub CLI（gh）／Cloudflare Pages（Free） |
| 技術スタック | Astro 6 + React Islands + TailwindCSS 4 / TypeScript 5.x / Zod / @astrojs/cloudflare / Vitest |
| 検証対象 | Claude Codeを活用したHP制作〜公開の一気通貫ワークフロー |
| 全体所要時間 | **約3時間**（プランニング開始〜本番公開） |
| 判定 | **即座に導入推奨**（★5/5） |

## 結論：Issue 1件あたり5〜10分でPRマージまで到達

最も効いたのはイシュー駆動開発のサイクルです。

**gh issue create / gh pr create / gh pr merge を連続実行し、Issue作成 → 実装 → PR → マージの1サイクルが5〜10分で完了。5件のIssueを約30分で全て処理しました。**

ここでの要点は、コード生成が速いことではありません。**GitHubの操作までツール側で完結するため、作業の切れ目が発生しない**という点です。

通常の開発では、実装が終わるたびにブラウザでGitHubを開き、PRを作り、マージし、ローカルに戻る——という往復が入ります。この切り替えが1日に何度も積み重なります。gh CLI連携があると、この往復が消えます。

## 実績タイム

| 工程 | 所要時間 |
| --- | --- |
| リポジトリ作成〜初期コミット | 約15分 |
| Issue 5件（型拡張／ページ新設／ナビ／リンク／アナリティクス）の実装完了 | **約30分** |
| Cloudflareアダプタ切替〜カスタムドメイン設定完了 | 約60分 |
| **全体（プランニング開始〜本番公開）** | **約3時間** |

手動で行えば2〜3日はかかる作業量です。**削減効果は手動開発比で約60〜70%と試算しています。**

## プランモード：設計を先に確定させる

実装前にプランファイルを作成し、方針をすり合わせる工程です。

この検証では、AskUserQuestionで**3つの選択肢（カテゴリ構成・ページ構成・サービス名表現）を同時に提示**し、方針を決めました。あわせて**Webサーチエージェントで市場相場を自動調査し、料金プランの根拠を提供**しています。

**プランモードは「設計 → 確認 → 実装」の流れを強制するため、手戻りが少なくなります。**AIに実装させるとき、方針が固まらないまま書き始めると、後から大きく直すことになります。

## TDD：テスト先行を厳密に回す

実装はテスト先行（Red → Green → Refactor）で進めました。1サイクルの実行フローは次のとおりです。

```
1. git checkout -b feat/service-data-model
2. テスト作成（tests/data/services.test.ts）→ Red確認
3. 型拡張 + データ定義 → Green確認
4. npx astro check → 型エラー0件
5. git add → git commit → git push
6. gh pr create → gh pr merge --squash
7. git checkout main → git pull
```

結果は**テスト13件全通過、型エラー0件**。**vitestのパスエイリアス設定やtsconfig.jsonのexclude修正など、テスト基盤の整備も自動で対応**しています。

## セキュリティ監査エージェントがDNS設定の不備を検出

この検証で最も価値があったのがここです。

**DNS設定時にsecurity-auditorエージェントが14項目の監査レポートを生成し、次の問題を検出しました。**

-   **MXレコード不足（5つ中1つしか検出されていなかった）** — CRITICAL
-   **DMARC未設定**（なりすまし対策なしの状態） — HIGH
-   SPFの重複リスク
-   HTMLエスケープ未実装の指摘 — MEDIUM

特にMXレコード不足は深刻です。**Cloudflareの自動DNSスキャンは、5つあるはずのGoogle WorkspaceのMXレコードを1つしか拾いませんでした。**気づかずにネームサーバーを切り替えていれば、メールが止まっていた可能性があります。

**自動スキャンを信用してはいけない**——これがこの検証で得られた最も実用的な教訓です。

## Google Workspaceを壊さずにCloudflareへ移す

DNS移行で守るべきものは、メールです。移行時に必要だったMXレコードは次の5つです。

| Type | Name | Content | Priority |
| --- | --- | --- | --- |
| MX | @ | ASPMX.L.GOOGLE.COM | 1 |
| MX | @ | ALT1.ASPMX.L.GOOGLE.COM | 5 |
| MX | @ | ALT2.ASPMX.L.GOOGLE.COM | 5 |
| MX | @ | ALT3.ASPMX.L.GOOGLE.COM | 10 |
| MX | @ | ALT4.ASPMX.L.GOOGLE.COM | 10 |

あわせてSPF（`v=spf1 include:_spf.google.com ~all`）とDKIM、そして自動スキャンでは検出されないDMARC（`v=DMARC1; p=quarantine; rua=mailto:...`）を手動で追加しました。

**DMARCは初期運用では p=none（監視のみ）で始め、問題なければ段階的に p=quarantine → p=reject へ強化するのが安全です。**

## 移行手順で押さえるべき順番

最も重要なのは順番です。

**ネームサーバーを切り替える前に、Cloudflare側のレコードを完璧にしておくこと。**切り替えた後にレコード不足が判明すると、その時点でメールが止まります。

ネームサーバー切り替え前の確認観点は次のとおりです。

1.  MXレコードが5つ全て揃っているか（表示が切れている場合はクリックしてフル値を確認）
2.  SPFレコードがルートドメインに1つだけか（複数あるとエラー）
3.  DKIMの値がGoogle Workspace管理画面と一致するか
4.  メール送信サービス側のDNSレコードが全て「Verified」か
5.  DMARCが追加されているか

## ハマったポイント

| エラー | 原因 | 対処法 |
| --- | --- | --- |
| `npm error EACCES: permission denied` | npmキャッシュにroot所有ファイルが混在 | `sudo chown -R $(whoami) ~/.npm` |
| `Cannot find name '__dirname'` | vitest.config.tsをastro checkが型チェック対象にする | tsconfig.jsonのexcludeに`vitest.config.ts`を追加 |
| `Cannot find module 'node:path'` | 同上 | `fileURLToPath(new URL("./src", import.meta.url))` を使う |
| Cloudflare Pages「ドメインは既に使われています」 | 既存のA/CNAMEレコードが残っている | DNS設定で既存レコードを削除してからAdd |
| PageSpeed Insights API 429 | レート制限 | Chrome DevToolsのLighthouseタブで手動計測 |

もうひとつ、Squarespace Domainsでのネームサーバー変更にも詰まりました。**変更画面に既存ネームサーバーの「削除ボタン」がなく、「カスタム ネームサーバーを使用」ボタンをクリックすると入力フォームに切り替わる仕様**です。直感的ではないため、事前に知っておくと迷いません。

## AIに任せられない領域

この検証では、Claude Codeが直接扱えない領域も明確になりました。

-   **OS権限が絡む操作** — npmキャッシュの権限問題は `sudo` が必要で、手動介入が必要（セキュリティ的には正しい挙動）
-   **Cloudflare / ドメイン管理サービスのGUI操作** — 直接実行はできず、スクリーンショットベースの案内にとどまる

ただし後者については、**ステップバイステップの案内が正確で、スクリーンショットを共有しながら進められました。**「代わりに操作する」ことはできなくても、「正しく案内する」ことはできるという整理になります。

## 出力品質

| 項目 | 結果 |
| --- | --- |
| Lighthouse Performance | **100/100**（モバイル計測） |
| Lighthouse Accessibility | **95/100** |
| Lighthouse Best Practices | **100/100** |
| Lighthouse SEO | **100/100** |
| ビルド時間 | 約1.5秒（astro build） |
| テスト実行時間 | 約7秒（13テスト・vitest run） |

**Astro 6 + @astrojs/cloudflare の組み合わせでLighthouse全項目90点以上が容易に達成できる**ことも確認できました。ゼロJSをデフォルトとし、インタラクション部分のみReact Islandsにする設計です。

## ランニングコスト

| サービス | プラン | 月額 |
| --- | --- | --- |
| Cloudflare Pages | Free | 0円 |
| Cloudflare DNS | Free | 0円 |
| SSL証明書 | Cloudflare自動発行 | 0円 |
| GA4 + Microsoft Clarity | 無料 | 0円 |
| **合計（ホスティング部分）** |  | **0円** |

## よくある質問

### Claude Codeで開発のどこまでを任せられますか？

**プランニング、イシュー作成、TDD実装、PR作成・マージ、デプロイ設定までを一気通貫で実行できます。**OS権限が絡む操作と外部サービスのGUI操作は手動介入が必要ですが、後者は正確な手順案内が可能です。

### どのくらい速くなりますか？

**この検証では手動開発比で約60〜70%削減と試算しています。**手動なら2〜3日かかる作業量を約3時間で完了しました。Issue 1件あたりは5〜10分でTDD実装〜PRマージまで到達しています。

### DNS移行で最も注意すべき点は？

**ネームサーバーを切り替える前に、Cloudflare側のレコードを完璧にしておくことです。**特にMXレコードは自動スキャンが全て拾わないことがあるため、5つ全て手動で確認してください。切り替え後にレコード不足が判明するとメールが止まります。

### セキュリティ監査エージェントは何を見つけましたか？

**14項目の監査レポートを生成し、MXレコード不足（CRITICAL）、DMARC未設定（HIGH）、SPFの重複リスク、HTMLエスケープ未実装（MEDIUM）などを検出しました。**コードレビューだけでなくDNS設定の監査にも使えることが確認できました。

## まとめ

-   Claude Codeで**プランニング → Issue → TDD実装 → PR → デプロイ → DNS設定を約3時間で完了**（手動なら2〜3日相当）
-   **Issue 1件あたり5〜10分**でPRマージまで到達。5件を約30分で処理
-   **プランモードが「設計 → 確認 → 実装」を強制するため手戻りが少ない**
-   **security-auditorエージェントがMXレコード不足とDMARC未設定を事前検出。**Cloudflareの自動DNSスキャンは信用しない
-   成果物は**Lighthouse Performance 100 / Accessibility 95 / Best Practices 100 / SEO 100**、ホスティング費用0円
-   OS権限操作と外部サービスのGUI操作は**手動介入が必要**。ただし手順案内は正確

AI駆動開発の価値は、コードを書く速度より「工程をまたぐときに止まらないこと」にあります。イシュー管理やデプロイまで同じ場所で扱えると、その効果がはっきり出ます。

株式会社AI棒では、こうしたAI活用の検証を日々行い、企業の開発体制へのAI導入を支援しています。ご相談は[お問い合わせフォーム](/contact)から、継続的な伴走支援については[AI参謀](/ai-sanbo)をご覧ください。