URLを渡すだけで、AIがWebサイトをNext.jsのモダンなコードベースに再構築する。AI Website Cloner Templateは、2026年3月の公開から急成長し、2026-08-14実測でGitHub Stars 31,932に達したプロジェクトだ。MITライセンス、開発者はJCodesMore氏。
- GitHub Stars: 31,932 / フォーク: 4,643（2026-08-14実測。MIT・最新 v0.4.0）
- テックスタック: Next.js 16（App Router）+ React 19 + Tailwind CSS v4 + shadcn/ui
- 対応AIエージェント: Claude Code（推奨）含む13種
- 処理方式: 5段階パイプライン（偵察→基盤→仕様→並列ビルド→QA）
この記事ではClaude Codeに特化して解説します。Claude Code全般は Claude Code完全ガイド2026：インストールから本番運用まで をご覧ください。
ツールの概要：単なるスクレイピングではない
AI Website Cloner Templateは、URLを指定するだけでWebサイトをNext.jsコードベースに変換するオープンソーステンプレート。単なるHTMLスクレイピングとは根本的に異なる。
対象サイトのDOM構造・デザイントークン・アセットをAIが自動解析し、セマンティックなHTMLとTailwind CSSによるモダンなコードを生成する。getComputedStyle()で実測値を取得する設計のため、推測ではなく正確なCSS値でコンポーネントを再構築する。スクロール・クリック・ホバー・レスポンシブの4種インタラクションも自動検証される。
Claude Codeベストプラクティスガイドで紹介されている自動モードとの併用が推奨されており、Opus 4.6で最高精度を発揮する。ただしContinueやCursorなど計13種のAIコーディングエージェントに対応しており、特定のツールに依存しない設計だ。
5段階パイプラインの仕組み
/clone-websiteスキルは5段階のパイプラインで構成される。
スクリーンショット取得
デザイントークン抽出
インタラクション検証"] B --> C["2. Foundation
フォント・色・グローバルCSS更新
全アセットのダウンロード"] C --> D["3. Component Specs
コンポーネント仕様ファイルを
docs/research/components/ に出力"] D --> E["4. Parallel Build
セクションごとに
git worktreeで独立構築"] E --> F["5. Assembly & QA
worktreeマージ
ビジュアルDiff検証"] F --> G["完成：Next.js コードベース"] style A fill:#4A90D9,color:#fff style G fill:#50C878,color:#fff
第1段階 Reconnaissance（偵察） — Chrome MCPを通じてサイトにアクセス。スクリーンショット取得に加え、スクロール・クリック・ホバー・レスポンシブの4種インタラクションを自動検証。デザイントークン（フォントファミリー・oklchカラー値・spacing値）をgetComputedStyle()で正確に抽出する。
第2段階 Foundation（基盤構築） — 抽出したデザイントークンでTailwind CSS v4の設定を更新。画像・動画・フォント・favicon・OG画像など全アセットをダウンロード。
第3段階 Component Specs（仕様生成） — 各コンポーネントの仕様ファイルをdocs/research/components/に出力。CSS計算値・状態遷移・レスポンシブブレークポイントを網羅。ビルダーエージェントはこの仕様を入力として受け取る。
第4段階 Parallel Build（並列構築） — セクションごとに独立したgit worktreeを作成し、複数のビルダーエージェントが同時に構築。各ビルダーは仕様をインラインで受け取るため、他のセクションとの依存関係がない。
第5段階 Assembly & QA（統合・品質検証） — 全worktreeをマージし、ページの配線を完了。オリジナルサイトとのビジュアルDiffを実行して品質を検証。
3つの主要ユースケース
プラットフォーム移行 — WordPress・Webflow・Squarespaceで運用中のサイトをNext.jsベースに移行する際、手作業でのHTML/CSS再構築が不要になる。AIがレイアウト・フォント・色・間隔を自動抽出し、Tailwind CSSのデザイントークンとして規格化する。
ソースコード喪失時の復元 — サイトは稼働中だがリポジトリが消失・開発者が離脱・レガシースタック。URLさえあればモダンなコードベースを再構築できる。
学習目的の構造分析 — プロダクションサイトのレイアウト・アニメーション・レスポンシブ実装を実コードで解体学習できる。design.mdの設計仕様書と組み合わせれば、AIにUI生成を指示する際の理解が深まる。
インストールと使い方
# リポジトリをクローン
git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone && npm install
# Claude Codeで起動（Chrome MCP連携を有効化）
claude --chrome
# クローン実行（複数URL同時指定も可）
/clone-website https://example.com
| 手順 | 内容 | 備考 |
|---|---|---|
| 1. クローン | リポジトリをgit cloneで取得 | 任意のディレクトリ名を指定可 |
| 2. 依存インストール | npm installで全パッケージ導入 | Node.js 24以上が必須 |
| 3. AIエージェント起動 | Claude Codeの場合はclaude --chrome |
Chrome MCP連携が有効化 |
| 4. クローン実行 | /clone-website <対象URL> |
複数URL同時指定も可 |
| 5. カスタマイズ | TARGET.mdで精度・スコープを指定 | URL指定のみでも全自動処理可能 |
Next.js 16（App Router・React 19・TypeScript strict）、shadcn/ui（Radix primitives + Tailwind CSS v4）、Lucide React（クローン時に抽出SVGに自動置換）。Docker対応あり。
他ツールとの比較
| 項目 | AI Website Cloner | httrack | SingleFile | WebCopy |
|---|---|---|---|---|
| 出力形式 | Next.js + Tailwind CSS | 静的HTML（そのまま複製） | 単一HTMLファイル | 静的HTML |
| AI構造解析 | あり（13種のエージェント対応） | なし | なし | なし |
| デザイントークン抽出 | あり（oklch値で規格化） | なし | なし | なし |
| レスポンシブ対応 | 自動（Tailwind v4） | 元サイト依存 | 元サイト依存 | 元サイト依存 |
| 並列ビルド | あり（git worktree） | なし | なし | なし |
| ビジュアルDiff QA | あり | なし | なし | なし |
| 用途 | コードベース移行・再構築 | オフラインコピー | ページ保存 | サイトバックアップ |
httrack・SingleFile・WebCopyはサイトの「保存」が目的。AI Website Clonerはサイトの「再構築」が目的——根本的にアプローチが異なる。既存サイトをモダンスタックに移行する用途ではこのツール一択だ。OpenHandsのようなAIコーディングエージェントと組み合わせれば、クローン後のカスタマイズ工程もさらに自動化できる。
制限事項・注意点
- 禁止用途が明確に定められている — フィッシング・詐称・法律違反目的は禁止。ロゴ・ブランドアセット・オリジナルコピーは元の所有者に帰属
- スクレイピング禁止サイトへの使用は利用者の責任 — 対象サイトの利用規約を事前に確認すること
- 生成コードのセキュリティチェックは必須 — 外部スクリプト依存や不要なライブラリが含まれる可能性あり。本番公開前に手動レビューを実施すべき
- Node.js 24以上が必須 — Next.js 16・React 19・TypeScript strict構成のため古い環境では動作しない
- Chrome MCPが必要 — 偵察フェーズでChrome MCPを通じてアクセスするため、Claude Code利用時は
--chromeフラグでの起動が前提
Browser Useのようなブラウザ自動化ツールと組み合わせれば、クローンしたサイトの動作確認テストも自動化できる。
関連記事: Claude Code完全ガイド2026：インストールから本番運用まで
実測データ（2026-08-14 時点）
| 項目 | 実測値 | 旧版の記載 |
|---|---|---|
| スター / fork | 31,932 / 4,643 | 11,500超 |
| 主要言語 / ライセンス | JavaScript / MIT | — |
| 最新リリース | v0.4.0（2026-08-10） | — |
| 直近push | 2026-08-13（活発） | — |
公開当時からスターが約2.8倍に伸びており、更新も継続している。テンプレート本体は MIT のため、生成物の扱いはライセンス上自由である——ただし次節のとおり、クローン元サイトの著作権はこれとはまったく別の問題である点に注意したい。
導入後、まず動作確認だけしたい場合は開発サーバーを起動して1件クローンしてみるのが早い。
# 依存関係を入れて開発サーバーを起動
npm install
npm run dev
# ブラウザで http://localhost:3000 を開き、クローン対象のURLを入力する
利用するAIエージェントは環境変数で切り替える。Claude Code 以外を使う場合は、対応するAPIキーを渡す。
# 例：Claude を使う場合（対応エージェントは AGENTS.md に定義されている）
export ANTHROPIC_API_KEY="sk-ant-..."
npm run dev
参照ソース
- GitHub: JCodesMore/ai-website-cloner-template — ソースコード・Issue（スター・ライセンス・リリースは2026-08-14にGitHub APIで取得）
- YouTubeデモ動画 — 実際のクローン処理デモ
- Discord コミュニティ — 質問・フィードバック
- Claude Code公式ドキュメント — 推奨エージェントの使い方
