参考サイトのURLだけでWebサイトをクローン生成する方法｜Claude Codeで16サイト作って分かった実務手順

「このサイトみたいなデザインで作ってほしい」。Web制作の現場で一番よく聞く要望です。Claude Code（Anthropic社のAIコーディングツール）を使うと、参考サイトのURLを渡すだけで、そのデザインを再現したWebサイトを実際に生成できます。graciautoでは2026年6月からこの方法でサンプルサイトの量産に取り組み、1か月ほどで16本以上を実際に公開しました。

先に結論をまとめます。URLだけからのクローン生成を実務で成立させる正しいやり方は、次の4点です。

• 見た目からAIに推測させるのではなく、参考サイトの実際のHTMLとCSSをダウンロードして解析させる
• 生成物はサイトごとにフォルダを完全に分離し、共有ファイルへの書き込みを最初から禁止しておく
• 公開時はJavaScriptを使わない純粋な静的HTMLに書き出す
• 文章・画像・ロゴは必ず全差し替えし、参考にするのはレイアウト構造と配色の考え方まで

この4点を守れば、デザイナーがいなくても参考サイト水準の見た目のサイトを短時間で用意できます。逆にどれか1つでも省くと、表示トラブルや権利リスクにつながります。以下、実例と手順を順に解説します。

なぜURLだけで再現できるのか

ポイントは「AIに見た目を想像させない」ことです。参考サイトのスクリーンショットを見せて「こんな感じで」と指示する方法もありますが、それでは色やフォントサイズが微妙にずれた「それっぽい別物」になります。

正確に再現できたケースでは、参考サイトのHTML（約170KB）とテーマCSS（約58KB）をcurlコマンドで直接ダウンロードし、CSSを整形してからAIに解析させました。色コード、フォント名、余白のピクセル数、角丸の数値といったデザイントークンを実データから抽出するので、推測が入りません。

この方法で美容系専門店のWordPressサイトを再現したときは、全16セクションを組み上げてページ全体の高さが13,472ピクセル。原本は13,677ピクセルでしたから、ほぼピクセル単位で一致しています。ブラウザのコンソールエラーもゼロでした。

実装の細かい話を1つ添えると、日本のWebサイトはhtmlのフォントサイズを10px基準にする書き方（62.5%方式）が多く、CSS内のrem値は10倍するとピクセル数になります。この読み替えをAIに指示しておくと、数値の再現精度が上がります。

実例：1か月で16本のサンプルサイトを公開

graciautoでは、Webデザインのギャラリーサイトから参考サイトを263件リスト化してスプレッドシートの台帳にし、上から順にクローンしていく体制を作りました。1件ずつ「これを作って」と依頼するのではなく、台帳のステータス（未着手・クローン中・公開済など）を更新しながら消化していく方式です。

対象はノーコードツールのテンプレート、マーケティング会社のLP、商社のコーポレートサイト、美容系専門店のサイトなど多業種にわたります。生成したサイトはNext.jsで静的HTMLに書き出し、検証用のサブドメインにFTPでアップロードして実際に公開しました。1サイトあたりの公開データ量は、軽いもので1.6MB、多ページ構成でも22MB程度です。

なぜここまで量産するのか。目的は営業資産です。「作れます」と口で言うより、実際に動くデモURLを先に見せたほうが、商談の空気が明らかに変わります。デザインの引き出し（配色・レイアウトのパターン）が社内に蓄積されていく効果もあります。

クローン生成の手順（5ステップ）

1. 素材の取得

参考サイトのHTML・CSS・JavaScript・画像をcurlで直接ダウンロードします。このとき注意したいのが、CSSの中から相対パスで参照されている画像です。HTMLだけを対象に画像URLを抽出すると、CSS内のurl()記述にある背景画像などを取りこぼします。取得スクリプトはCSS内のurl()も絶対パス化して収集する設計にしておくと、あとから「画像が数枚足りない」という手戻りを防げます。

2. 解析

ダウンロードしたCSSは1行に圧縮されていることが多いので、閉じ括弧ごとに改行を入れて整形してから検索・解析します。ここで色・フォント・余白・装飾のデザイントークンを一覧化し、仕様書としてまとめておくと、生成段階での指示が明確になります。

3. 生成（フォルダ隔離が必須）

複数サイトを量産する場合、生成物はサイト名由来のスラッグでフォルダを完全に分離します。ページ・コンポーネント・画像・型定義・調査資料まで、すべてスラッグ配下に置き、プロジェクト共有のファイル（トップページやグローバルCSSなど）への書き込みは禁止と、AIへの指示書に明記しておきます。この取り決めがないと、2本目のクローンが1本目を上書きする事故が起こりえます。ルール化してからは、複数サイトの並行生成でも上書きは起きていません。

4. 静的書き出し（JSを残さないのが安全）

公開はJavaScriptランタイムを完全に排除した純粋な静的HTMLにするのが安全です。理由は、Next.jsのApp Routerで静的書き出しをすると、ページ読み込み後にクライアント側のルーターがサーバーへデータを取りに行き、それが失敗すると「最初は表示されるのに、時間が経つとエラー画面になる」という症状が起こりうるからです。ページが白くなる・開いたり閉じたりが不安定になるといった症状は、サーバーではなくこのクライアント側JSが原因であることが多いのです。

メニュー開閉はCSSのチェックボックス、アコーディオンはHTML標準のdetailsタグで実装すれば、JSゼロでも操作性は保てます。書き出し後にHTMLからscriptタグを全削除する処理まで自動化しておくと確実です。

フォントにも落とし穴があります。日本語フォントをビルドに同梱する方式だと、文字数の多さからファイルが数百個・10MB超に膨らむことがあります。プリロード設定を切るか、Google FontsのCDN参照に切り替えるのが現実解で、実測では12MBが1.6MBまで下がりました。実写真を使う場合も、元データは1枚数MBあるのが普通なので、必ず圧縮してから配置します。実測で68MBの写真素材が7.1MBまで下がり、表示速度に直結しました。

5. 公開と検証

FTPアップロード後、HTTPステータス200が返るだけで正常と判断しないことが重要です。前述のとおり、読み込み後にJSが原因で崩れる症状はcurlでは検出できません。実際のブラウザで開き、時間を置いて再確認し、エラーが出た場合はエラー文言で配信ファイルを検索して発生源を特定します。

判断基準：やってよい参考と、やってはいけないコピー

技術的にできることと、やってよいことは別です。graciautoでは次の線引きで運用しています。

• レイアウト構造・配色の方向性・セクション構成の参考はOK
• 文章・写真・イラスト・ロゴの流用はNG。必ず全差し替え
• クローンしたサンプル集は検索エンジンに載せない（noindex）設定で、営業時に見せる用途に限定する

さらに注意が必要なのが、参考サイトと同業種のクライアント案件に使う場合です。色だけ変えたサイトは、同業他社から見れば「あのサイトの色違い」と一目で分かります。名古屋の美容サロンFCの公式サイトを制作したときは、参考サイトのセクション構成は活かしつつ、書体をゴシックから明朝へ、角丸パネルを直線基調へ、装飾モチーフも別系統へと、デザインの骨格ごと組み替えました。要素の順番は参考にしても、見た目のDNAは別物にする。これが同業種案件での安全ラインです。

つまずきやすいポイント

最後に、環境まわりで起こりがちなトラブルを挙げておきます。いずれも原因が分かれば数分で解決できますが、知らないと数時間を溶かすものです。

• 日本語を含むフォルダパスでビルドツールがクラッシュすることがある。ビルドエンジンを切り替えるオプションで回避できる
• iCloudなどのクラウド同期フォルダで開発すると、依存パッケージのファイルが同期の競合で壊れることがある。node_modulesを削除して再インストールすれば復旧する
• WordPressサイトの解析では、存在しないパスにアクセスするとトップページのHTMLが返ってくる挙動を逆手に取ると、マークアップの全量取得がしやすい

まとめ

参考サイトのURLだけからWebサイトをクローン生成することは、Claude Codeを使えば実務レベルで可能です。ただし成立条件は、実HTML/CSSの直接解析・フォルダ隔離・純静的書き出し・素材の全差し替えという4つの型を守ること。この型に沿えば、1か月で16本という量産も現実的な数字です。

デザイン参考の再現はAIに任せ、人間は「どのサイトを参考にするか」「どこまで変えるか」の判断に集中する。これがAI時代のWeb制作の分業だと考えています。店舗ビジネスのホームページ制作やリニューアルを検討している方は、まず「こんな見た目にしたい」という参考URLを1本決めるところから始めてみてください。