Claude CodeでWebサイトをクローンする方法（2026）: 実際のパイプラインと失敗しやすい箇所
Claude CodeでWebサイトをクローンするための実践ガイド。実ブラウザでページを計測し、React/Tailwindの編集可能なコードに再構築する5段階のagentic pipeline、必要なセットアップ、無人実行で崩れやすいサイト、ホスト型clonerを選ぶべき場面を説明します。
Claude CodeでWebサイトをクローンすることは、スクリーンショットを作ることでも、ブラウザの「保存」を使うことでもありません。Live URLを実ブラウザで開き、computed CSS、breakpoint、assetを計測し、セクションごとにReact/Tailwindコードへ再構築するagentic pipelineです。
重要なのは、推測ではなく計測することです。だから出力は、見た目だけのコピーではなく、編集してブランドを差し替えられるコードになります。
要点
| 質問 | 答え |
|---|---|
| 何をする? | URLを計測し、React + Tailwindの編集可能なコードに再構築します。 |
| 必要なもの? | ブラウザアクセス付きClaude Code、十分なモデル、Node、clone promptまたはskill。 |
| 1コマンド? | skillがあれば/clone-website <url>に近い形。なければ段階的prompt。 |
| 何が得られる? | component、tokens、spacing、breakpoints。スクリーンショットではありません。 |
| 苦手なもの? | 重いanimation、WebGL、商用font、lazy-loaded/CDN assets。 |
| setupを省ける? | Clonesiteならホスト型で実行し、URL入力、無料preview、$2からcloneできます。 |
実際に何をしているのか
URLは画像より多くの情報を持っています。Claude Codeがブラウザでページを開くと、getComputedStyle()で実際のspacingやtypeを読み、responsive behaviorを観察し、画像、動画、icon、fontを確認できます。
その計測結果をsectionごとのspecに変換します。1つの大きなpromptでHTMLを書き直すのではなく、観測された値に基づいてcomponentを作るのがポイントです。
5段階は、reconnaissance、foundation、component specs、parallel build、assembly & visual QAです。QAはチェック項目ではなく、差分を直すloopです。
自分で動かす場合
Claude CodeにChromeまたはPlaywright MCPのブラウザアクセスを渡し、Node環境とclone promptまたはskillを用意します。オープンソースtemplateは、この流れをNext.js出力としてまとめていることが多いです。
Next.jsが欲しいならそれで問題ありません。ただしLPを素早く編集して公開したいだけなら、scaffoldが大きすぎることもあります。ClonesiteはReact/TailwindのVite SPAを返し、必要ならTanStack Startなどにも合わせられます。
失敗しやすい箇所
無人実行で崩れやすいのは次の領域です。
- scroll animation、GSAP、WebGL。
- 配布ライセンスのない商用font。
- lazy-loadedまたはCDN上のasset。
- server-rendered HTMLが少ないJavaScript-only page。
- loginが必要なpage。
- 大きなsiteでのtoken costとreview cost。
これらは、AIサイトクローンが無意味という話ではありません。人間のreviewを含むworkflowだということです。
自分でやるか、ホスト型を使うか
Claude Codeを自分で動かすと自由度は高いですが、setup、token cost、QA、壊れやすい箇所を自分で持つことになります。ホスト型clonerはその部分を引き受け、まず無料previewを返し、準備できたらsourceをダウンロードできます。
どちらでも守るべき原則は同じです。layoutは使い、brandは置き換え、ページが自分のものになってから公開する。その後はクローンをブランドに変えるデザイン判断を適用します。
FAQ
Claude CodeでWebサイトをクローンするとはどういう意味ですか?+
Claude Codeを公開URLに向け、実ブラウザでCSS、breakpoint、assetを計測し、ページをReactとTailwindの編集可能なコードとして再構築することです。スクリーンショットではなく、編集できるsourceが得られます。
Claude CodeはどんなWebサイトでもクローンできますか?+
ブラウザで開ける公開ページなら対象になります。シンプルなLPやマーケティングサイトは安定しやすく、重いアニメーション、WebGL、商用フォント、lazy-loaded assetは人間の確認が必要になりやすいです。
どのくらい時間がかかりますか?+
単一LPなら中規模のagent sessionです。複数セクションの大きなサイトは長時間ジョブになります。Clonesiteのホスト型cloneは通常1〜3時間で、まず無料previewが出ます。
コードが書けないと使えませんか?+
Claude Codeを自分で動かす場合は、ツール導入、ブラウザアクセス、spec確認、asset修正が必要です。ホスト型clonerなら同じpipelineをサービス側で実行します。
Claude CodeでWebサイトをクローンするのは合法ですか?+
結果をscaffoldとして扱うなら実務上の使い道があります。layout patternは一般的ですが、logo、商品名、copy、写真、商標表現は公開前に置き換える必要があります。
関連ガイド
2026年版 AIウェブサイトクローンツールの選び方とおすすめ比較最適なAIウェブサイトクローンツールは、入力と出力があなたの目的に合うものです。実在するレイアウトを再利用するならURLからコードへ、静止画のモックアップならスクリーンショットからコードへ、ゼロから作るならプロンプトからサイトへ。選ぶ前に、入力タイプ・編集可否・エクスポート品質で比較しましょう。
URLクローンとスクリーンショットからコードへ:出力で本当に変わることURLクローンは公開ページの本物の構造 — DOM、CSS、フォント、リンク、レスポンシブのbreakpoint — を読み取り、編集可能なコードとして再構築します。スクリーンショットからコードへはピクセルしか見えないため、レイアウトを推測し、フォントやリンク、レスポンシブを失います。その差は、出力の使いやすさに直接あらわれます。
APIでWebサイトをクローンする — AIエージェント向けClone APIClonesite Clone APIをRESTまたはホスト型MCPから使うための開発者向けガイド。APIキーまたはエージェント用OAuthで認証し、必要な場合だけWebhook署名シークレットを追加すれば、エージェントがpreflight、clone request作成、ステータス確認、React/Tailwindソースのダウンロードまで実行できます。