サイトの見た目だけでNext.js化｜AIクローンOSS急上昇

AI TREND

JCodesMore：サイト複製OSS急上昇

任意のWebサイトをAIコーディング支援ツールで解析し、見た目を維持したままNext.js 16の最新構成へ作り直すテンプレート『ai-website-cloner-template』がGitHub Trendingで急上昇している。推奨モデルはAnthropicが2026年4月16日に発表したClaude Opus 4.7。

3 の要点を3分で

任意のWebサイトを解析し最新のNext.js 16コードへ作り直すテンプレートai-website-cloner-templateが、GitHub Trendingで1日+827スター、総18,397スターのペースで急上昇している。URLを指定して専用コマンドを実行すると、デザインや画像を抽出し画面の各部品を並行して再構築する。出力先はNext.js 16・React 19・TypeScript・Tailwind CSS v4という現行構成だ。

推奨モデルはAnthropicが2026年4月16日に発表したClaude Opus 4.7。同モデルはコーディング・エージェント動作・画像認識（ビジョン）の能力が前バージョンOpus 4.6から改善されたと公式に説明されており、この能力向上が設計図なしの「画面からの再現」を実用域に押し上げた。Claude CodeのほかCursor・Codex・Gemini CLI・Amazon Qなど複数の支援ツールに対応する。

ソースコードを失ったサイトや、WordPressなど旧基盤からの移行に効く一方、テンプレートはなりすまし・他者デザインの無断流用・利用規約違反のスクレイピング利用を明確に禁止しており、合法的な用途に限定される。

サイトの見た目だけでNext.js化｜AIクローンOSS急上昇の本文内説明図 — 図解: AIエージェント - 任意のWebサイトをAIコーディング支援ツールで解析し見た目

押さえるポイント

この変化で何が要点か。図解と出典つきで一目で。

URLを1つ指定するだけでデザイン・画像を抽出し部品ごとに並行再構築
出力は Next.js 16・React 19・TypeScript・Tailwind CSS v4 の最新構成
推奨は画像認識が強化された Claude Opus 4.7、他にCursorやCodexにも対応

5W1Hでサクッと理解

構造化された事実を最初に。誰が何をいつどこでなぜどのように。

誰が: JCodesMore
何を: サイト複製OSS急上昇
いつ: 2026年6月24日
どこで: GitHub
なぜ: コード喪失や移行に有効
どのように: AI支援でNext.js化

背景

このテンプレートは、AIコーディング支援ツール（コードを自動で書くAIエージェント）を使い、対象サイトを逆解析して整理されたコードに変換する仕組みを提供する。背景には2026年4月16日にAnthropicが発表した新モデル「Claude Opus 4.7」がある。同モデルはコーディング、エージェント動作、画像認識（ビジョン）の能力が前バージョンのOpus 4.6から大きく改善されたと公式に説明されている。この能力向上が、サイトの見た目を正確に読み取って再構築するこの種のツールを実用域に押し上げた。テンプレートはClaude Code以外にもCodex、Cursor、Gemini CLI、Amazon Qなど多数の支援ツールに対応する。

なぜ今注目なのか

サイトのソースコードを失った場合や、WordPressなど旧来の基盤から最新構成へ移行したい場合に、見た目を維持したままコード化できる点が実務に効く。AIモデルの画像認識とコーディング能力が、設計図なしの「画面からの再現」を現実的にした転換点といえる。一方でテンプレートは、なりすましや他者デザインの無断流用、利用規約違反のスクレイピングへの利用を明確に禁じており、合法的な用途に限定される。

URL一つでサイトをNext.js化するOSSが急上昇

GitHub Trendingで1日あたり+827スター、総18,397スターを集めているのが『ai-website-cloner-template』だ。READMEの説明は端的で、AIコーディング支援ツールを使い1コマンドで任意のサイトを複製する、というものになっている。

Clone any website with one command using AI coding agents
出典: ai-website-cloner-template

対象サイトのURLを指定して専用コマンドを実行すると、デザインや画像といったアセットを抽出し、画面の各部品を並行して再構築する。出力先はNext.js 16・React 19・TypeScript・Tailwind CSS v4という現行のフロントエンド構成だ。古いHTMLの寄せ集めではなく、いまから保守できるコードベースに落とす点が、単なる画面コピーと違う。

画像認識を強化したClaude Opus 4.7が実用域に押し上げた

このテンプレートが推奨するモデルは、Anthropicが2026年4月16日に発表したClaude Opus 4.7だ。同社はコーディング、エージェント動作、画像認識（ビジョン=画面や画像を読み取る能力）が前バージョンのOpus 4.6から改善されたと説明している。

Introducing Claude Opus 4.7
出典: Introducing Claude Opus 4.7 \ Anthropic

設計図なしで「見た目」からコードを起こす作業は、画面のレイアウトや配色を正確に読み取る画像認識と、それを破綻なくコードに変換する能力の両方を要する。この2つが同時に上がったことが、これまで再現精度の低かった「画面からの再構築」を現実的なものにした。テンプレートはClaude Code以外にも、Cursor、Codex、Gemini CLI、Amazon Qなど複数の支援ツールに対応しており、特定の1ツールに縛られずに使える。