AIウェブサイトクローナーテンプレート

1. プロジェクト概要

ai-website-cloner-template は、AIコーディングエージェントが対象のURLだけを基に、既存のWebサイトをクリーンでモダンなNext.jsアプリケーションとして再現できるようにする、オープンソースのGitHubテンプレートです。マークアップやスタイル、アセットを手作業でリバースエンジニアリングすることなく、サイトのUIを再構築するという課題を解決します。

2. 背景と位置付け

このプロジェクトは、「このWebサイトをクローンして」という作業を、数日かかる手動のリバースエンジニアリングタスクから、ガイド付きでほぼ自動化されたAIワークフローへと変えるために作られました。開発者がHTML/CSSを手作業でコピーしたり、フォントやアイコンを探し回ったり、ピクセル単位の差異を目視で確認したりする代わりに、このテンプレートは反復可能な5段階のパイプライン（偵察、基盤構築、コンポーネント仕様策定、並行ビルド、QA）を提供します。AIエージェントがこれを段階的に実行し、使い捨てのスクレイピング結果ではなく、構造化された型付きのNext.jsコードベースを生成します。

一般的なWebスクレイピングや「このページをダウンロード」系ツールと比較すると、このプロジェクトは静的HTMLを取得するだけではありません。AIエージェントを駆動して、デザイントークンの抽出（フォント、色、ブレークポイント）、アセットのダウンロード（画像、動画、SVGアイコン）、shadcn/uiとTailwind CSSを使ったTypeScriptでのコンポーネントレベルの再構築を実行し、最後に元サイトとのビジュアル差分で結果を検証します。また、エージェント非依存で、Claude Codeを第一級にサポートし、他にも十数種類のAIコーディングエージェント向けの設定を備えているため、特定ベンダーのツールに縛られることはありません。

3. 機能カテゴリ

🔍 偵察ツール — 3つの主要機能: 全ページスクリーンショット取得、デザイントークン抽出、インタラクション/状態マッピング。目的: コードを書く前に、ソースサイトの正確な全体像を把握します。
🏗️ 基盤セットアップ — フォントと色の設定、グローバルなTailwind/Next.js設定、大量アセット（画像、動画、SVG）の一括ダウンロードをカバー。目的: 後続のコンポーネントが依存するベースとなるプロジェクトの土台を確立します。
🧩 コンポーネント仕様策定 — 計算済みのCSS値、レスポンシブ状態、インタラクション動作を含む、コンポーネント単位のドキュメントを生成。目的: ビルドフェーズが実装すべき、曖昧さのない機械可読な仕様を提供します。
⚙️ 並行構築 — コンポーネントのビルドを分離されたgit worktreeに分散させ、UIの複数部分を並行して実装できるようにします。目的: 大規模で多コンポーネントなサイトの再構築を高速化します。
✅ 統合とQA — ビルド済みコンポーネントを統合し、元サイトとのビジュアル差分比較を実行。目的: クローン完了とみなす前に、レイアウト、スペーシング、スタイリングの回帰を検出します。

4. 主な特長

AIエージェント駆動パイプライン — 構造化された5段階プロセス（偵察→基盤→仕様→ビルド→QA）が、場当たり的な手動クローンを反復可能なワークフローに置き換えます。
マルチエージェント互換性 — Claude Code（推奨、Opusクラスのモデルと組み合わせ）、Codex CLI、Cursor、Windsurf、Gemini CLI、GitHub Copilot、Cline、Roo Code、Continue、Amazon Q、Augment Code、Kiro、OpenCodeで動作します。
モダンで型付きの出力 — 生のスクレイピングHTMLではなく、Next.js 16 + React 19 + TypeScript（strictモード）のコードベースを生成します。
デザインシステムの忠実性 — 実際のデザイントークン（フォント、色、ブレークポイント）をoklch色値でTailwind CSS v4に抽出し、shadcn/ui + Radixプリミティブ上にUIを構築します。
自動アセット処理 — 画像と動画をダウンロードし、SVGアイコンを自動抽出。不足しているデフォルトアイコンはLucide Reactで補完します。
ビジュアル差分検証 — QAフェーズで、完成したクローンを元サイトと比較して正確性を検証します。目視チェックに依存しません。

5. 役割別のユースケース

一般開発者 — 既存サイトのデザインを、ゼロからレイアウトを構築する代わりに、モダンで保守しやすいNext.jsバージョンとして迅速に立ち上げたい場合。
プロジェクトマネージャー / テクニカルリード — レガシーサイトを最新の技術スタック（Next.js、TypeScript、Tailwind）へ移行することを、より速く構造化された概念実証の道筋で評価したい場合。
学生 / 自学自習者 — エージェントに本番サイトを検査可能なコンポーネントに分解させることで、特定のレイアウト、アニメーション、レスポンシブ動作がどのように実装されているかを学習したい場合。

(DevOps/SRE、セキュリティエンジニアリング、データ/リサーチサイエンスのワークフローには直接適用できないため、これらは省略しています。)

6. はじめに

必要なものを見つける — READMEと、偵察フェーズ実行後に docs/research/ 配下に生成されるドキュメントを読み、抽出結果とコンポーネント仕様を理解してください。

インストール / 統合

# 1. GitHubで「Use this template」をクリックして自分のリポジトリを作成し、次に:
git clone https://github.com/YOUR-USERNAME/YOUR-REPO.git
cd YOUR-REPO
npm install

# 2. AIコーディングエージェントを起動（Claude Codeの例、--chromeでブラウザアクセスを有効化）
claude --chrome

# 3. エージェントセッション内でクローンスキルを実行
/clone-website <target-url>

# 日常的なスクリプト
npm run dev     # 開発サーバーを起動
npm run build   # 本番ビルド
npm run check   # lint、型チェック、ビルドをまとめて実行

貢献する — リポジトリをフォークし、フィーチャーブランチで変更を加え、JCodesMore/ai-website-cloner-template に対してプルリクエストを開いてください。このプロジェクトはMITライセンスのオープンコントリビューションモデルに従います。

7. プロジェクト構造

src/
  app/              # Next.jsルート
  components/       # React/TypeScript UIコンポーネント
  hooks/, types/, utils/
public/
  images/, videos/  # ダウンロードしたサイトアセット
  seo/              # SEO関連アセット
docs/
  research/         # 偵察出力とコンポーネント仕様
.cline/ .kiro/ .roo/ # プラットフォーム固有のAIエージェント設定

主要項目: docs/research/ には、偵察フェーズと仕様フェーズで生成された成果物（スクリーンショット、デザイントークン、コンポーネント仕様）が格納され、後続のフェーズで使用されます。プラットフォーム固有のドットディレクトリ（.cline/、.kiro/、.roo/ など）により、コアプロジェクトを変更することなく、同じテンプレートを異なるAIコーディングエージェントで駆動できます。

8. 関連エコシステム

上流依存関係: Next.js 16、React 19、TypeScript、Tailwind CSS v4、shadcn/ui、Radix UIプリミティブ、Lucide Reactアイコン、Node.js 24+。
統合するAIコーディングエージェント: Claude Code、Codex CLI、Cursor、Windsurf、Gemini CLI、GitHub Copilot、Cline、Roo Code、Continue、Amazon Q、Augment Code、Kiro、OpenCode。
補完的な使い方: クローン完了後は、標準的なNext.jsデプロイプラットフォーム（例: Vercel）と自然に組み合わせて使用できます。

9. ライセンス

MITライセンス。

✅ 商用プロジェクトを含め、コードの使用、コピー、変更、マージ、公開、配布は自由です。
✅ このテンプレートを使用して、自身のレガシーサイトを移行したり、サイトの構築方法を学習したりできます。
❌ 欺瞞的な目的、なりすまし、または法律に違反する活動にこのツールを使用しないでください。プロジェクトのガイドラインで明示的に禁止されています。
ℹ️ MITはソフトウェアを「現状のまま」保証なしで提供します。再配布時には元のライセンスと著作権表示を保持してください。

10. よくある質問

Q: 使用するには有料のAIコーディングエージェントのサブスクリプションが必要ですか？
A: サポートされているAIコーディングエージェント（Claude Codeが推奨、Opusクラスのモデルと組み合わせ）へのアクセスが必要です。CursorやGemini CLIなど、他のサポート対象エージェントのほとんども、それぞれの料金体系で動作します。

Q: 完全なNext.js再構築ではなく、静的コピーだけが必要な場合は？
A: このテンプレートは、静的HTMLスナップショットではなく、構造化されたNext.js/TypeScriptコードベースを出力するように特別に設計されています。生のHTMLだけが必要な場合は、よりシンプルなスクレイピングツールの方が適しているかもしれません。

Q: このツールで任意のWebサイトをクローンすることは合法ですか？
A: クローンするものの合法性については、あなた自身に責任があります。このプロジェクトは欺瞞的またはなりすまし目的の使用を明示的に禁止しているため、自分が所有しているサイト、許可を得ているサイト、または個人的な学習目的で使用するサイトに限定してください。

Q: AIエージェントが抽出した内容を確認するにはどのディレクトリを見ればよいですか？
A: 偵察フェーズ実行後に docs/research/ を確認してください。後続のビルドフェーズで使用するデザイントークン、スクリーンショット、コンポーネント仕様が含まれています。

Q: Claude Code以外のエージェントを使用できますか？
A: はい。このテンプレートには、十数種類のエージェント（Codex CLI、Cursor、Windsurf、Gemini CLI、GitHub Copilotなど）向けの設定が同梱されています。ただし、Opusクラスのモデルを使用したClaude Codeが推奨の組み合わせです。

11. クイックリンク

リポジトリ: https://github.com/JCodesMore/ai-website-cloner-template
ライセンス: MIT（リポジトリの LICENSE ファイルを参照）
貢献: リポジトリのデフォルトブランチに対してプルリクエストを開く
コミュニティ/ディスカッション: リポジトリのGitHub Issues/Discussionsタブを使用

12. まとめ

ai-website-cloner-template は、Webサイトのクローンを、スクレイピングしたHTMLのダンプではなく、モダンで型付きのNext.jsコードベースを出力する、構造化されたAIエージェント駆動パイプラインに変えます。これは、レガシーサイトを最新のスタックに移行したい開発者やチーム、デプロイ済みサイトのソースを復元したい場合、本番レイアウトがどのように構築されているかを学習したい場合に最も価値があります。つまり、すべてのコンポーネントを手動でリバースエンジニアリングすることなく、忠実で保守可能な再構築を求めるすべての人にとって有用です。