AI Website Cloner Template徹底解説：1コマンドでサイトをNext.jsに丸ごと複製

「このサイトと同じものを作りたい。でもソースコードがない」——Webサイト制作で誰もが一度はぶつかるこの壁を、AIコーディングエージェントで突破するOSSが話題になっている。AI Website Cloner Template（JCodesMore/ai-website-cloner-template）は、URLを渡して /clone-website を実行するだけで、既存サイトをモダンなNext.jsコードへ逆生成するテンプレートリポジトリだ。

GitHub Starsは2万3,000超、ライセンスはMIT。TypeScriptで書かれ、Claude Code（Opus 4.7推奨）をはじめとする13種以上のAIコーディングエージェントで動作する。本記事では「①このOSSは結局何ができるのか／②何を解決するのか／③何を代替できるのか」という3つの問いに、公式READMEより一歩踏み込んで答えていく。

AI Website Cloner Templateとは何か：URLからNext.jsコードを逆生成するOSSテンプレート

まず「このOSSは結局何ができるのか」に答える。AI Website Cloner Templateは、任意のWebサイトを、クリーンでモダンなNext.jsコードベースへリバースエンジニアリングする再利用可能なテンプレートだ。READMEの言葉を借りれば「Point it at a URL, run /clone-website, and your AI agent will inspect the site, extract design tokens and assets, write component specs, and dispatch parallel builders to reconstruct every section（URLを指定して /clone-website を実行すると、AIエージェントがサイトを調査し、デザイントークンとアセットを抽出し、コンポーネント仕様を書き、並列ビルダーを起動して全セクションを再構築する）」というものだ。

ここで重要なのは、これが単なるHTMLのコピーツールではないという点だ。スクレイピングしてDOMをそのまま保存するのではなく、AIコーディングエージェントが対象サイトを「読み解いて」、React/Next.jsのコンポーネントとして書き直す。出力されるのは、あなたがそのまま編集・拡張できる本物のソースコードである。

・入力：クローンしたいサイトのURL（複数指定も可能）
・処理主体：Claude CodeなどのAIコーディングエージェント
・出力：Next.js 16 + shadcn/ui + Tailwind CSS v4 のプロジェクト一式
・ライセンス：MIT（テンプレート自体は自由に利用・改変可能）

つまりこのツールが代替するのは、「DevToolsを開いて値を1つずつ目視でコピーし、画像を手作業で保存し、CSSを書き写す」という、Webサイト模写の地道な手作業そのものだ。デザインの観察とコード化という、これまで人間のフロントエンドエンジニアが時間をかけて行ってきた工程を、AIエージェントへ丸ごと委ねる発想と言える。

なお、これは「テンプレートリポジトリ」である点に注意が必要だ。READMEでも繰り返し強調されているとおり、このリポジトリを直接cloneして使うのではなく、GitHubの Use this template ボタンで自分専用のコピーを作ってから使う設計になっている。生成したサイトの変更が、本家テンプレートに混ざらないようにするための作法だ。

/clone-websiteパイプラインの仕組み：5フェーズで並列ビルドする多段クローン

次に「何を解決するのか」を、内部の仕組みから理解しよう。/clone-website スキルは、READMEの「How It Works」に記載された5フェーズの多段パイプラインとして動作する。サイト複製を一発の魔法で済ませるのではなく、人間のフロントエンドチームが行う工程を段階的に再現している点が、このOSSの設計思想の核心だ。

各フェーズの役割は次のとおりだ。

・フェーズ1：偵察（Reconnaissance） — スクリーンショットの取得、デザイントークンの抽出、そしてスクロール・クリック・ホバー・レスポンシブといったインタラクションの走査を行う。静止画だけでなく、サイトの「動き」まで観察する
・フェーズ2：基盤構築（Foundation） — フォント・色・グローバルスタイルを更新し、サイト上の全アセット（画像・動画・SVG）をダウンロードする
・フェーズ3：コンポーネント仕様化（Component Specs） — docs/research/components/ に詳細な仕様ファイルを書き出す。ここには getComputedStyle() で取得した正確なCSS値、各状態（state）、挙動、コンテンツが含まれる
・フェーズ4：並列ビルド（Parallel Build） — git worktree内でビルダーエージェントを起動し、セクション/コンポーネントごとに1つずつ並列で実装する
・フェーズ5：統合とQA（Assembly & QA） — 各worktreeをマージしてページを結線し、原本に対するビジュアル差分（visual diff）を実行する

このパイプラインが解決している最大の問題は、「AIが見た目を勝手に推測して、なんとなく似たものを作る」失敗だ。READMEは「Each builder agent receives the full component specification inline — exact getComputedStyle() values, interaction models, multi-state content, responsive breakpoints, and asset paths. No guessing.（各ビルダーエージェントは完全なコンポーネント仕様をインラインで受け取る——正確な getComputedStyle() の値、インタラクションモデル、複数状態のコンテンツ、レスポンシブのブレークポイント、アセットパス。推測はしない）」と明言している。

つまり、各ビルダーは「だいたいこんな感じ」ではなく、ピクセル単位の computed CSS値という事実を渡されてからコードを書く。これが、フリーハンドでサイトを模写させる単純なプロンプトとの決定的な差だ。下のシーケンス図で、人間の指示・オーケストレーターエージェント・並列ビルダーの間でやり取りされる情報を整理した。

sequenceDiagram participant U as 開発者 participant O as オーケストレーター
エージェント participant T as 対象サイト participant B as 並列ビルダー
（worktree×N） U->>O: /clone-website O->>T: スクショ・操作走査・トークン抽出 T-->>O: computed CSS値 / アセット O->>O: コンポーネント仕様を docs/research に記録 O->>B: 仕様をinlineで渡して並列起動 B-->>O: セクション単位のReactコンポーネント O->>O: worktreeを統合・ページ結線 O->>T: ビジュアル差分で原本と照合 O-->>U: Next.jsプロジェクト一式 </div> この多段フローのおかげで、巨大なランディングページのように複数セクションを持つサイトでも、セクションごとに分担して並列で組み上げられる。1つのビルダーが特定のセクションに失敗しても、影響範囲がそのworktreeに閉じるため、全体をやり直す必要がない。 ## クイックスタートと導入手順：Use this templateからクローン実行まで ここでは実際の導入手順を、READMEのQuick Startに沿って解説する。何ができるか（=サイト複製）を、最短で自分の手で試すための具体的なコマンドだ。前提として **Node.js 24以上** と、対応するAIコーディングエージェントが必要になる。

### ステップ1：テンプレートから自分のリポジトリを作る GitHubのプロジェクトページで **Use this template → Create a new repository** をクリックし、好きな名前で自分専用のリポジトリを作る。**本家リポジトリを直接cloneしてはいけない**——これはREADMEで「Important」として強調されている重要なルールだ。生成したサイトの変更が自分のアカウント側に留まり、テンプレート本体を汚さないための設計である。 ### ステップ2：自分のリポジトリを手元に取得する 作成したリポジトリを、お好みのコーディングツールで開く。ターミナルなら次のようになる。 ```bash git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git cd YOUR-NEW-REPOSITORY ``` ### ステップ3：依存関係をインストールする ```bash npm install ``` ### ステップ4：AIエージェントを起動する Claude Codeが推奨だ。ブラウザ連携を有効にして起動する。 ```bash claude --chrome ``` `--chrome` フラグは、エージェントが実際のブラウザを使って対象サイトを調査（スクリーンショット取得やインタラクション走査）するために重要だ。Claude以外のエージェントを使う場合は、リポジトリ内の `AGENTS.md` がプロジェクト指示書として機能する。多くのエージェントはこれを自動で読み込む。 ### ステップ5：クローンスキルを実行する エージェントが起動したら、複製したいサイトのURLを渡してスキルを実行する。 ```text /clone-website [ ...] ``` 複数URLを並べれば、複数ページを一度に対象にできる。あとはエージェントが前述の5フェーズパイプラインを回し、ベースとなるクローンを構築してくれる。完成後は、必要に応じて自由にカスタマイズすればよい。 開発・検証用のコマンドもひととおり用意されている。 ```bash npm run dev # 開発サーバーを起動 npm run build # 本番ビルド npm run lint # ESLintチェック npm run typecheck # TypeScriptの型チェック npm run check # lint + typecheck + build をまとめて実行 ``` Dockerを使う場合は、`docker compose up app --build` で本番相当の起動、`docker compose up dev --build` でポート3001の開発モード起動ができる。 ## 対応AIエージェントとClaude Code推奨の理由：13種から選べる柔軟性 「何を代替できるのか」をエージェントの観点から見ていく。AI Website Cloner Templateの強みのひとつは、**特定のAIコーディングツールに縛られない**ことだ。READMEのSupported Platformsには、主要なAIコーディングエージェントが幅広く並んでいる。

| AIエージェント | ステータス | | --- | --- | | Claude Code | **Recommended（Opus 4.7）** | | Codex CLI | Supported | | OpenCode | Supported | | GitHub Copilot | Supported | | Cursor | Supported | | Windsurf | Supported | | Gemini CLI | Supported | | Cline | Supported | | Roo Code | Supported | | Continue | Supported | | Amazon Q | Supported | | Augment Code | Supported | | Aider | Supported | なぜClaude Codeが推奨なのか。READMEは「**Recommended: Claude Code with Opus 4.7 for best results**（最良の結果にはOpus 4.7搭載のClaude Codeを推奨）」と明記している。クローン処理は、ブラウザでのサイト調査、厳密なCSS値の抽出、git worktreeでの並列ビルドという複合的なエージェント操作を要求する。これらの一連のワークフローを安定して回せる点が、推奨される理由と考えられる。 ただし「Recommended」であって「Required」ではないのがポイントだ。**他のエージェントもすべて `AGENTS.md` という単一の指示書を共有する**仕組みになっており、エージェントを乗り換えても同じクローン手順を再利用できる。手作業の模写と比べたとき、AIエージェント駆動が代替するのは次のような工程だ。 ・DevToolsで computed style を1つずつ目視コピーする作業
・画像・動画・SVGアイコンを手動で1点ずつ保存する作業
・ホバーやレスポンシブといった「状態違い」の見落とし
・観察した内容をReact/Next.jsコンポーネントへ書き起こす作業 これらを、computed CSS値の厳密抽出・アセットの一括取得・複数状態の記録という形で、エージェントが肩代わりする。エンジニアは「観察と書き写し」から解放され、「カスタマイズと意思決定」に集中できるようになる。 ## ユースケースと使ってはいけないケース：正当な再構築と禁止事項 強力なツールだからこそ、**どこまで使ってよいか**を正しく理解しておく必要がある。READMEは「Use Cases」と「Not Intended For」を明確に分けて記載しており、ここを誤解すると法的・倫理的なトラブルにつながりかねない。

READMEが想定する正当なユースケースは次の3つだ。 ・**プラットフォーム移行** — 自分が所有するサイトを、WordPress / Webflow / Squarespace などからモダンなNext.jsコードベースへ作り直す
・**失われたソースコードの復元** — サイトは公開中だがリポジトリが消えた、開発者が去った、技術スタックが古い、といった状況で、モダンな形でコードを取り戻す
・**学習** — 本番サイトが特定のレイアウト・アニメーション・レスポンシブ挙動をどう実現しているかを、実コードを通じて分解・理解する 一方で、READMEは「Not Intended For」として以下を**明確に禁止**している。 ・**フィッシングやなりすまし** — 欺瞞目的・なりすまし・違法行為に使ってはならない
・**他者デザインの自作詐称** — ロゴ・ブランドアセット・オリジナルの文章は、その所有者に権利がある
・**ToS違反** — スクレイピングや複製を明示的に禁止しているサイトもある。必ず事前に確認すること ここで誤解しやすいのが、**MITライセンスの適用範囲**だ。MITが及ぶのは「このテンプレートのコード」であって、「あなたがクローンした他社サイトのデザインやブランド資産」ではない。クローン対象のロゴ・ブランド・コピーの権利は元の所有者に残り続ける。技術的に複製できることと、法的に複製してよいことは別問題である——この線引きを守って初めて、このツールは安全に使える。 ## 技術スタックとプロジェクト構造：出力されるモダンNext.jsの中身 最後に「何ができる」を、出力物の中身から具体的に押さえておこう。クローンの成果物は、放置されたレガシーコードではなく、**そのまま開発を続けられるモダンなNext.jsプロジェクト**だ。

READMEのTech Stackに記載された構成は次のとおりだ。 ・**Next.js 16** — App Router、React 19、TypeScript strict
・**shadcn/ui** — Radixプリミティブ + Tailwind CSS v4
・**Tailwind CSS v4** — oklchカラースペースのデザイントークン
・**Lucide React** — デフォルトアイコン（クローン中に抽出したSVGへ順次置換される） プロジェクト構造もよく整理されている。主要なディレクトリの役割を表にまとめる。 | パス | 役割 | | --- | --- | | `src/app/` | Next.jsのルート | | `src/components/` | Reactコンポーネント | | `src/components/ui/` | shadcn/uiのプリミティブ | | `src/components/icons.tsx` | 抽出したSVGアイコン | | `public/images/` | 対象からダウンロードした画像 | | `public/videos/` | 対象からダウンロードした動画 | | `public/seo/` | favicon・OG画像 | | `docs/research/` | 抽出結果とコンポーネント仕様 | | `docs/design-references/` | スクリーンショット | | `AGENTS.md` | エージェント指示書（単一の真実源） | 注目したいのが **`AGENTS.md` を中心とした「単一の真実源（single source of truth）」設計**だ。READMEのUpdating for Other Platformsによれば、プロジェクト指示は `AGENTS.md` を編集して `bash scripts/sync-agent-rules.sh` を実行すれば、各プラットフォーム向けの設定ファイル（`CLAUDE.md` や `GEMINI.md` など）が自動再生成される。同様に、`/clone-website` スキル本体は `.claude/skills/clone-website/SKILL.md` を編集して `node scripts/sync-skills.mjs` を走らせれば、全プラットフォーム分が再生成される。 ```bash bash scripts/sync-agent-rules.sh # AGENTS.md → 各プラットフォーム設定を再生成 node scripts/sync-skills.mjs # SKILL.md → /clone-website を全対応エージェント向けに再生成 ``` この仕組みにより、「Claude用とGemini用で指示がズレる」といった保守の悩みが起きにくい。1か所を直せば全エージェントに反映されるため、テンプレート自体を自分の用途に合わせて育てていける。出力されたコードは `npm run check`（lint + typecheck + build）で品質をまとめて検証でき、Dockerでの起動にも対応している。 ## まとめ：AI Website Cloner Templateが切り拓く「サイト複製の自動化」 AI Website Cloner Templateは、「URLを渡して `/clone-website` を実行する」という最小の操作で、既存サイトをモダンなNext.jsコードへ逆生成するOSSテンプレートだ。本記事で扱った3つの問いを振り返ろう。 ・**①何ができるのか** — AIコーディングエージェントが対象サイトを調査し、デザイントークン・アセット・コンポーネントを抽出して、Next.js 16 + shadcn/ui + Tailwind v4のプロジェクトとして再構築する
・**②何を解決するのか** — 偵察→基盤構築→仕様化→並列ビルド→統合QAという5フェーズで、computed CSS値という「事実」をビルダーに渡し、AIが見た目を推測して失敗する問題を防ぐ
・**③何を代替できるのか** — DevToolsでの値の目視コピー、アセットの手動保存、状態違いの見落としといった、サイト模写の地道な手作業を丸ごと自動化する ただし最も重要なのは、READMEが繰り返し示すガードレールを守ることだ。**自社サイトの移行・失われたソースの復元・実装の学習**という正当な目的に使い、フィッシング・なりすまし・他者デザインの詐称・ToS違反には決して使わない。技術的な可能性と倫理的・法的な許容範囲を見極めてこそ、このツールはあなたのフロントエンド開発を加速させる強力な相棒になる。 ## よくある質問（FAQ） **Q1. AI Website Cloner Templateとは何ですか？** A. URLを渡して `/clone-website` を実行するだけで、既存サイトをモダンなNext.jsコードへ逆生成するOSSのテンプレートリポジトリです。Claude CodeなどのAIコーディングエージェントが対象サイトを調査し、デザイントークンやアセット、コンポーネントを抽出して再構築します。ライセンスはMITです。 **Q2. どのAIエージェントで使えますか？** A. Claude Code（Opus 4.7推奨）を筆頭に、Codex CLI・OpenCode・GitHub Copilot・Cursor・Windsurf・Gemini CLI・Cline・Roo Code・Continue・Amazon Q・Augment Code・Aiderに対応しています。`AGENTS.md` が共通の指示書になっており、多くのエージェントが自動で読み込みます。 **Q3. 導入に必要なものは？** A. Node.js 24以上と、対応するAIコーディングエージェントが必要です。GitHubの **Use this template** ボタンで自分のリポジトリを作り、`npm install` してからエージェントを起動し、`/clone-website ` を実行します。本家リポジトリを直接cloneしないのが作法です。 **Q4. 出力されるコードの技術スタックは？** A. Next.js 16（App Router・React 19・TypeScript strict）、shadcn/ui（Radix + Tailwind CSS v4）、Tailwind CSS v4のoklchデザイントークン、Lucide Reactアイコンです。Lucideのアイコンは、クローン中に抽出した実際のSVGへ順次置き換わります。 **Q5. どんな用途に向いていますか？** A. 自社で所有するサイトのプラットフォーム移行、ソースコードを失ったサイトの復元、本番サイトの実装を学習する目的に向いています。逆に、フィッシングやなりすまし、他者デザインの自作詐称、ToS違反のスクレイピングには使えません。 **Q6. Claude Codeが推奨される理由は？** A. READMEでClaude Code（Opus 4.7）がRecommendedと明記されています。ブラウザ連携（`claude --chrome`）でサイトを直接調査し、git worktreeでビルダーを並列実行する一連のパイプラインを最も安定して回せるためと考えられます。他エージェントも `AGENTS.md` を通じて利用できます。 ## 参照ソース ・[JCodesMore/ai-website-cloner-template（GitHub README）](https://github.com/JCodesMore/ai-website-cloner-template) — 本記事の機能・手順・技術スタックの一次情報源
・[Claude Code 公式ドキュメント](https://docs.anthropic.com/en/docs/claude-code) — 推奨エージェントであるClaude Codeのセットアップ・利用方法