「このサイトと同じものを作りたい。でもソースコードがない」——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より一歩踏み込んで答えていく。

公式デモ動画。対象サイトの調査からNext.jsコードの再構築までの流れが確認できる（出典: JCodesMore / YouTube）。
対象URLを渡すとAIエージェントが調査・抽出・再構築し、Next.js 16コードを出力する流れ図
AI Website Cloner Templateの全体像。URLを起点に、AIエージェントがNext.jsコードへ逆生成する。

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エージェントへ丸ごと委ねる発想と言える。

AI Website Cloner Templateで複製した結果と元サイトの比較スクリーンショット
公式リポジトリに収録された比較画像。クローン結果と原本を並べて確認できる（出典: 公式リポジトリ docs/design-references/comparison.png）。

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

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

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

偵察・基盤構築・コンポーネント仕様化・並列ビルド・統合QAの5フェーズパイプライン図
/clone-websiteの5フェーズ。各ビルダーに厳密な仕様がinlineで渡るため「推測ゼロ」で再構築できる。

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

・フェーズ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 ＜URL＞ 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プロジェクト一式

この多段フローのおかげで、巨大なランディングページのように複数セクションを持つサイトでも、セクションごとに分担して並列で組み上げられる。1つのビルダーが特定のセクションに失敗しても、影響範囲がそのworktreeに閉じるため、全体をやり直す必要がない。

クイックスタートと導入手順：Use this templateからクローン実行まで

ここでは実際の導入手順を、READMEのQuick Startに沿って解説する。何ができるか（=サイト複製）を、最短で自分の手で試すための具体的なコマンドだ。前提として Node.js 24以上 と、対応するAIコーディングエージェントが必要になる。

テンプレート複製・clone・npm install・エージェント起動・clone-website実行という導入6手順
導入の流れ。Use this templateで自分用リポジトリを作るのが最初の一歩。

ステップ1：テンプレートから自分のリポジトリを作る

GitHubのプロジェクトページで Use this template → Create a new repository をクリックし、好きな名前で自分専用のリポジトリを作る。本家リポジトリを直接cloneしてはいけない——これはREADMEで「Important」として強調されている重要なルールだ。生成したサイトの変更が自分のアカウント側に留まり、テンプレート本体を汚さないための設計である。

ステップ2：自分のリポジトリを手元に取得する

作成したリポジトリを、お好みのコーディングツールで開く。ターミナルなら次のようになる。

git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git
cd YOUR-NEW-REPOSITORY

ステップ3：依存関係をインストールする

npm install

ステップ4：AIエージェントを起動する

Claude Codeが推奨だ。ブラウザ連携を有効にして起動する。

claude --chrome

--chrome フラグは、エージェントが実際のブラウザを使って対象サイトを調査（スクリーンショット取得やインタラクション走査）するために重要だ。Claude以外のエージェントを使う場合は、リポジトリ内の AGENTS.md がプロジェクト指示書として機能する。多くのエージェントはこれを自動で読み込む。

ステップ5：クローンスキルを実行する

エージェントが起動したら、複製したいサイトのURLを渡してスキルを実行する。

/clone-website <target-url1> [<target-url2> ...]

複数URLを並べれば、複数ページを一度に対象にできる。あとはエージェントが前述の5フェーズパイプラインを回し、ベースとなるクローンを構築してくれる。完成後は、必要に応じて自由にカスタマイズすればよい。

開発・検証用のコマンドもひととおり用意されている。

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エージェントによる抽出を比較した図。computed CSS値の厳密抽出やアセット一括取得が利点
手作業の模写とAIエージェント駆動の違い。エージェントは13種から選べる。
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」を明確に分けて記載しており、ここを誤解すると法的・倫理的なトラブルにつながりかねない。

自社サイト移行・ソース復元・学習が許可、なりすまし・デザイン詐称・ToS違反は禁止というガードレール図
正当な再構築には使え、悪用は明確に禁止。MITライセンスでもデザインの権利は元の所有者に残る。

READMEが想定する正当なユースケースは次の3つだ。

・プラットフォーム移行 — 自分が所有するサイトを、WordPress / Webflow / Squarespace などからモダンなNext.jsコードベースへ作り直す
・失われたソースコードの復元 — サイトは公開中だがリポジトリが消えた、開発者が去った、技術スタックが古い、といった状況で、モダンな形でコードを取り戻す
・学習 — 本番サイトが特定のレイアウト・アニメーション・レスポンシブ挙動をどう実現しているかを、実コードを通じて分解・理解する

一方で、READMEは「Not Intended For」として以下を明確に禁止している。

・フィッシングやなりすまし — 欺瞞目的・なりすまし・違法行為に使ってはならない
・他者デザインの自作詐称 — ロゴ・ブランドアセット・オリジナルの文章は、その所有者に権利がある
・ToS違反 — スクレイピングや複製を明示的に禁止しているサイトもある。必ず事前に確認すること

ここで誤解しやすいのが、MITライセンスの適用範囲だ。MITが及ぶのは「このテンプレートのコード」であって、「あなたがクローンした他社サイトのデザインやブランド資産」ではない。クローン対象のロゴ・ブランド・コピーの権利は元の所有者に残り続ける。技術的に複製できることと、法的に複製してよいことは別問題である——この線引きを守って初めて、このツールは安全に使える。

技術スタックとプロジェクト構造：出力されるモダンNext.jsの中身

最後に「何ができる」を、出力物の中身から具体的に押さえておこう。クローンの成果物は、放置されたレガシーコードではなく、そのまま開発を続けられるモダンなNext.jsプロジェクトだ。

Next.js 16・shadcn/ui・Tailwind v4・public・docs/research・AGENTS.mdというプロジェクト構造のチップ図
出力されるプロジェクトの技術スタックと主要ディレクトリ。AGENTS.mdが全エージェント共通の規約になる。

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 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違反には決して使わない。技術的な可能性と倫理的・法的な許容範囲を見極めてこそ、このツールはあなたのフロントエンド開発を加速させる強力な相棒になる。

参照ソース

・JCodesMore/ai-website-cloner-template（GitHub README） — 本記事の機能・手順・技術スタックの一次情報源
・Claude Code 公式ドキュメント — 推奨エージェントであるClaude Codeのセットアップ・利用方法