ai-website-cloner-template AIツール

概要

ai-website-cloner-templateは、AIコーディングエージェント（AIが自律的にコードを書いてくれるプログラム）を活用して、任意のWebサイトをモダンな Next.js（Webサイト・Webアプリを作るためのフレームワーク）コードとして丸ごと再構築するためのオープンソーステンプレートです。GitHubの「Use this template」ボタンで自分のリポジトリ（コード保管場所）にコピーし、/clone-website <URL> というコマンドを一つ打つだけで、AIが対象サイトを自動解析してコードを生成します。

2026年時点でGitHubスター数27,000超を記録し、世界的に注目を集めています。もともとClaude Code専用として始まりましたが、現在は13種類以上のAIエージェントに対応済みで、Gemini CLI・Cursor・Windsurf・Amazon Q・Clineなど多様なツールからも利用できます。WordPressやWebflow・Squarespaceで作られた既存サイトを、保守しやすいモダンなコードに作り直す「プラットフォーム移行」用途にも公式に挙げられており、エンジニア以外の個人開発者が「デザインの参考サイトを自分のベースに変える」ような使い方にも向いています。

主な機能

• 1コマンドでWebサイトを丸ごと複製

/clone-website <URL> と入力するだけで、AIが対象サイトを自動偵察・コード化します。URLは複数同時指定も可能で、並列処理によって効率よく複数サイトをクローンできます。

• 外見だけでなく「動き」まで再現

スクロール・ホバー・クリックなどのインタラクション（操作に対する動き）も解析・再現します。静止画では正しく見えても操作すると「死んでいる」ようなクローンにならないよう、アニメーションや状態変化まで詳細に抽出します。

• 並列ビルドで高速生成

AIエージェントがセクションごとに専任の「ビルダーエージェント」（部品担当のAI）を分担派遣し、並行して各コンポーネント（ページの部品）を構築。最後に自動マージ（統合）してページを完成させます。

• 13種類以上のAIエージェントに対応

Claude Code（Opus 4.8推奨）を筆頭に、Gemini CLI・Cursor・Windsurf・Cline・Amazon Q・Continue・Aider・OpenCodeなど多数に対応。使い慣れたAIツールをそのまま使えます。

• 画像・動画・アイコンなどのアセットも自動取得

対象サイトの画像・動画・SVGアイコン・ファビコン（ブラウザタブの小さいアイコン）・OGP画像（SNSシェア時のサムネイル）を自動ダウンロードし、所定フォルダへ整理します。

• フォント・カラーなどのデザイントークンを精密抽出

「16pxっぽい」ではなく、ブラウザの実計算値（getComputedStyle）で正確な数値を取得。カラーコード・フォント・余白・アニメーションのイージング（動きの緩急）まで忠実に再現します。

• Dockerサポートと自動品質チェック

Docker（アプリをどのPCでも同じ環境で動かす仕組み）でのビルド・開発サーバー起動に対応。GitHub Actions（コードを保存するたびに自動でテストする仕組み）によるLint・型チェック・ビルドの自動検証も備えています。

料金プラン

テンプレート自体に課金要素は一切ありません。ただし、実際にWebサイトをクローンするためには、Claude CodeやGemini CLIなどのAIエージェントを別途契約・設定する必要があります。各AIエージェントの料金は公式サイトをご確認ください。

導入方法

① テンプレートをGitHubにコピーする

1. GitHubのリポジトリページ を開く
2. 「Use this template」ボタン → 「Create a new repository」をクリック
3. 新しいリポジトリ名を入力し「Create repository」をクリック

> ⚠️ 直接 git clone してはいけません。「Use this template」からコピーしてください。

② ローカルPC（自分のパソコン）にダウンロードして起動する

# リポジトリを手元にダウンロード
git clone https://github.com/あなたのユーザー名/あなたのリポジトリ名
cd あなたのリポジトリ名

# 必要なパッケージをインストール
npm install

# 開発サーバーを起動
npm run dev

③ AIエージェントでクローンを実行する（例：Claude Code）

/clone-website https://example.com

複数サイトを同時にクローンしたい場合：

/clone-website https://example.com https://another.com

④ Dockerを使う場合（任意）

# 本番用ビルド & 起動
docker compose up app --build

# 開発モードで起動（ポート3001）
docker compose up dev --build

⑤ 品質チェック

npm run check   # lint + 型チェック + ビルドをまとめて実行

こんな人におすすめ

• 「デザインは決まっているが、コードは書けない」個人開発者

参考にしたいサイトのURLを渡すだけで、AIがそのデザインをコードに変換してくれます。ゼロからデザインを考える必要がなく、スタート地点が一気に前倒しできます。

• WordPressやWebflowから卒業したい人

既存の自分のサイトをURLで指定すれば、管理しやすいNext.js製の現代的なコードに作り直せます。月額費用のかかるサービスからの脱出にも使えます。

• AIを使った開発を勉強したい人

「AIエージェントが実際にどうコードを書くか」を観察できる教材としても優れています。実際の動作を見ながらAI開発の流れを体感できます。

• ランディングページや社内ツールを素早く試作したい人

競合サイトや理想のUIを参考にして素早くプロトタイプ（試作品）を作りたい場面で、設計の出発点として活用できます。

よくある質問

Q. プログラミングの知識がゼロでも使えますか？ A. GitHubの操作とNode.jsのインストール、そして別途AIエージェント（Claude Codeなど）の契約・設定が必要です。コード自体はAIが自動生成しますが、環境構築の手順を調べながら進める最低限の根気は必要です。

Q. Claude Code以外のAIでも動きますか？ A. はい。現在13種類以上のAIコーディングエージェントに対応しています。Claude Code（Opus 4.8）が最も推奨されていますが、Gemini CLI・Cursor・Windsurfなど使い慣れたツールでも動作します。AGENTS.md をほとんどのエージェントが自動で読み込みます。

Q. クローンしたサイトを商用利用してもいいですか？ A. テンプレート本体のライセンス（MIT）は商用利用を許可していますが、クローン対象サイトの著作権や利用規約は別問題です。他者のサイトをクローンする際は、対象サイトの利用規約・著作権法を必ずご自身で確認してください。

Q. Windowsでも動きますか？ A. 動作します。Windows環境でのCRLF（改行コードの違い）問題は過去のリリースで修正済みで、スクリプトが正常に動作するよう対応されています。