--- type: feature title: "レビューできるストアフロントを作るAI Webサイトクローン" description: "AI Webサイトクローンで、使用を許可された公開URLを、所有できるストアフロントファイル、ルート、レスポンシブプレビューに変換し、公開前に確認できます。" category: ai-websites h1: "所有できるストアフロントコードを生成するAI Webサイトクローン" keyword: "ai website cloning" legacyKind: structured --- Runner AIのAI Webサイトクローンは、使用を許可された公開URLからページの見えるデザインと構造を取得し、その参照情報をプロジェクト内のストアフロントファイルに変換します。スクリーンショットや実装から切り離されたプロトタイプで終わらず、動作するルートを構築し、ローカルにアセットを集め、公開前に確認できるレスポンシブプレビューと変更ファイルを提示します。 ## Runner AIでAI Webサイトクローンを行う仕組み 最初に公開URLを渡し、再現するページを指定します。Runnerの「Webサイトをクローン」スキルは、ページ全体のスクリーンショット、ページ構造、コンテンツ、画像URL、フォント、色、余白、推定されるブランド上の役割を取得します。抽出した情報が食い違う場合は、スクリーンショットを見た目の基準とします。複数の公開ページを指定した場合、Runnerは同一オリジンのリンクを調べて対応するストアフロントルートを作成できます。範囲が曖昧な場合は、編集を始める前に作業範囲を絞るよう求めます。 取得した内容は実装の背景情報として使われ、すべてを無条件にコピーするための指示にはなりません。Runnerはページのセクションを計画し、許可された画像をホットリンクせずプロジェクト内にダウンロードして、サンドボックスのワークスペースでストアフロントコードを作成または更新します。成果物は単なるデザインファイルではなく、プレビューでアクセスできるページです。ルート、ソースの変更、レイアウト、レスポンシブ表示をまとめて確認し、元の参照情報とプロジェクトの背景を残したまま、範囲を絞って修正を依頼できます。 ## 公開URLは許可ではなく根拠として扱う Webサイトのクローンには明確な権利の境界があります。自身が所有するサイト、チームが管理するページ、または再現する許可を得た参照先を使用してください。Runnerの製品ガイドラインでは、ログインページ、フィッシング目的、法律、倫理、プライバシーなどの機微な問題を含むサイトを対象外としています。公開ページを閲覧できることは、商標、コピー、写真、コード、顧客情報、独自性のある制作物を再利用する許可にはなりません。 参照元はデザイン方針の根拠として扱い、そのうえで自社のストアフロントに必要なものを決めます。購入者の目的達成に役立つレイアウトの考え方を残し、借用した内容を確認済みの商品情報とブランド情報に置き換え、使用権を持つアセットだけを利用してください。より広い構成変更を行う場合は、[ECサイトリニューアル](/ja/ecommerce-website-redesign) で、現在のストアの根拠を新しいページ体系につなげる方法を説明しています。Runnerは範囲を限定した変更を実装できますが、権利、商品についての表現、アクセシビリティ、プライバシー、公開承認には引き続きチームが責任を負います。 ## 取得したデザインから所有できるストアフロントルートへ 一般的なクローンツールは、書き出したHTML、Figmaの画面、またはプロトタイプを最終成果物とすることがあります。Runner AIはストアフロントのプロジェクト自体で作業します。取得処理で見た目の役割とページセクションを特定した後、Runnerは関連する許可済みアセットをダウンロードし、コンポーネントとルートを構築して、依頼した範囲のナビゲーションを接続します。そのため、商品情報、コレクション導線、行動喚起、モバイルでの動作を、今後も更新していく同じコードベースで確認でき、実際のECワークフローに活用できます。 実装には、明確な商品情報が必要です。参照URLだけでは、カタログの正しい内容、価格、在庫ルール、配送の約束、チェックアウトの管理主体、分析要件、顧客向けポリシーは分かりません。これらの事実を明示し、不足しているものをRunnerに指摘させてください。[ノーコードWebサイトビルダー](/ja/no-code-website-builder) では隣接する指示からコードを作るワークフローを説明し、[ECサイトテンプレート](/ja/ecommerce-website-templates) では自社のカタログを中心にした再利用可能な構造を扱っています。AI Webサイトクローンが異なるのは、空の要件や汎用テンプレートではなく、使用を許可された特定のURLを最初の根拠にする点です。 ## 公開前に見た目のずれを確認する Runnerは構築したページを取得済みのスクリーンショットと照合し、余白、色の役割、境界線、影、タイポグラフィ、ホバー状態など、見える細部を確認します。レスポンシブプレビューを開き、モバイルとデスクトップの幅で情報の階層を比較してください。続いて変更ファイルとルートの動作を確認し、見た目だけは自然なページの裏に、壊れたナビゲーション、不足した状態、アクセシビリティを満たさない操作要素、ストアデータと矛盾する内容が隠れていないか調べます。 最初の成果物はレビュー可能な提案として扱います。ページ全体をやり直すのではなく、特定のセクション、コンポーネント、ブレークポイント、アセットを対象に正確な修正を依頼してください。公開前には、リンク、フォーム、検索、カートへの引き継ぎ、チェックアウトの管理主体を含む実際の商品導線をテストします。アニメーションや非公開のバックエンド動作は公開URLから完全には復元できないため、要件を別途説明し、個別に検証してください。ストアフロントコードとプレビューが許可された要件に合ってから、公開を明示的に決定します。 ## AI Webサイトクローンのよくある質問 ### Runner AIでWebサイトのデザインをクローンするには何が必要ですか？ 使用を許可された公開URLと、対象にするページの正確な範囲を指定してください。ストア用ページの場合は、カタログ情報、ブランドルール、必要なルート、望ましい購入者の行動も追加します。非公開の体験を参考にする必要がある場合は、認証情報やログインページではなく、承認済みのスクリーンショットを提供してください。範囲を明確にすると、Runnerは適切な参照情報を取得し、許可されたアセットを集め、意図したストアフロントルートを構築できます。 ### Runner AIはURLからWebサイトのバックエンドもコピーしますか？ いいえ。公開URLから分かるのは、見える構造、コンテンツ、スタイル、アセットです。非公開データベース、安全なサービス、ビジネスルール、認証後の動作は分かりません。Runnerは参照情報を使ってストアフロントコードを作成し、有効なプロジェクト情報に基づいて指定された機能を実装できます。カタログ、チェックアウト、連携、プライバシー、セキュリティ、運用要件は別途提供し、検証する必要があります。 ### Runnerが構築した後も、クローンしたストアフロントを編集できますか？ はい。成果物はストアフロントのファイルとルートとしてプロジェクトのワークスペースに保存され、確認用の動作するプレビューも用意されます。コピー、情報の階層、コンポーネント、レスポンシブレイアウト、操作について範囲を絞って変更を依頼し、更新されたファイルと表示結果を確認できます。平坦なスクリーンショットだけを受け取る場合と異なり、実装は後の作業や技術レビューにも利用できます。 ### AIでWebサイトをクローンすることは合法ですか？ 合法性と再利用できる範囲は、所有権、ライセンス、契約、商標、著作権、プライバシー、対象コンテンツによって異なります。自身が所有するか、再現の許可を得た参照先とアセットだけを使い、参照元サイトの主張は自社向けに確認済みの事実へ置き換えてください。Runnerのクローンガイドラインでは、ログインページ、フィッシング、機微または疑わしい用途を拒否していますが、状況に応じた適切な法的助言を得る責任はチームにあります。 ## 許可された参照情報をレビュー可能なストアフロントへ 使用を許可された公開URL、対象ページ、確認済みのカタログとブランド情報、成果物が支えるべき購入者の行動を用意してください。Runner AIは、所有できるストアフロントファイル、アクセス可能なルート、レスポンシブプレビューを返し、公開を決める前にチームで確認できるようにします。 [Runner AIでWebサイトのクローンを始める](https://www.runnerai.com/ja/auth/login?prompt=%E4%BD%BF%E7%94%A8%E3%82%92%E8%A8%B1%E5%8F%AF%E3%81%95%E3%82%8C%E3%81%9F%E5%85%AC%E9%96%8BURL%E3%80%81%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B%E3%83%9A%E3%83%BC%E3%82%B8%E3%80%81%E7%A2%BA%E8%AA%8D%E6%B8%88%E3%81%BF%E3%81%AE%E3%82%AB%E3%82%BF%E3%83%AD%E3%82%B0%E3%81%A8%E3%83%96%E3%83%A9%E3%83%B3%E3%83%89%E6%83%85%E5%A0%B1%E3%80%81%E5%AE%9F%E7%8F%BE%E3%81%97%E3%81%9F%E3%81%84%E8%B3%BC%E5%85%A5%E8%80%85%E3%81%AE%E8%A1%8C%E5%8B%95%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%80%81%E7%A7%81%E3%81%8C%E6%89%80%E6%9C%89%E3%81%99%E3%82%8B%E3%82%B9%E3%83%88%E3%82%A2%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A8%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E5%8F%AF%E8%83%BD%E3%81%AA%E3%83%AB%E3%83%BC%E3%83%88%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82%E5%A4%89%E6%9B%B4%E3%81%95%E3%82%8C%E3%81%9F%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A8%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%82%92%E7%A4%BA%E3%81%97%E3%80%81%E5%85%AC%E9%96%8B%E5%89%8D%E3%81%AB%E8%A6%8B%E3%81%9F%E7%9B%AE%E3%81%AE%E3%81%9A%E3%82%8C%E3%80%81%E4%B8%8D%E8%B6%B3%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E6%83%85%E5%A0%B1%E3%80%81%E3%83%AB%E3%83%BC%E3%83%88%E3%81%AE%E5%8B%95%E4%BD%9C%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82) ## 関連機能 - [ECサイトリニューアルを確認する](/ja/ecommerce-website-redesign) - [ノーコードWebサイトビルダーで構築する](/ja/no-code-website-builder) - [Runner AIの全機能を見る](/ja)