clone-website

Web サイトをクローンする

現在のアプリで、指定されたページを再現します。新しいデザインの方向性を加える前に、まずソースを再現してください。編集可能で動作するコードを納品してください。スクリーンショット、iframe、ダウンロードした本番用バンドルは参考資料であり、実装ではありません。

1. 作業内容を整理する

プロジェクトの指示、実際に使われているフレームワークやスクリプト、既存のルートを確認します。利用可能なブラウザーでソース URL を開きます。抽出に適していれば、直接 HTTP、アセットツール、API を優先して使用し、ブラウザーで外観と動作を確認します。

ソースからローカルへのルート対応表を簡潔に記録し、各ページが所有するファイルを明記します。アプリの規約に従ってください。このテンプレートでは、src/app/、src/components/sites/<site>/、public/sites/<site>/、docs/research/<site>/ を使用します。オリジン、ページ、ダウンロードにはそれぞれ異なる名前を付けてください。分かりやすい名前が重複する場合は、ポートまたは URL のハッシュを追加します。

• ルートの初回クローンでは、手つかずのテンプレートのホームページを置き換えてもかまいません。
• 同じオリジンに複数のページがある場合は、ソースのパス名を保持します。クエリやフラグメントの違いは通常、同じルートの状態を示すため、その状態を再現してください。
• 既存の作成済みルートやアセットは保持します。依頼されたものは更新し、依頼されていないルートとの衝突は、置き換える前に解決します。
• 既存のクローンにページを追加する場合は、既存ページで使われているスタイルを置き換えずに、レイアウトとグローバルスタイルを拡張します。
• オリジンが異なるサイトには、それぞれ別のアプリを使います。ただし、ユーザーが統合アプリを希望する場合は除きます。サイトを統合する場合は、ルートプレフィックスを分け、フォント、スタイル、レイアウトの適用範囲を分離します。
• フレームワークの構文と競合する URL のリテラルセグメント（_、@、角括弧、丸括弧）は、サポートされている方法でエスケープし、実際にリクエストされた URL を確認します。

既存のクローンは作業の出発点として活用できます。現在のソースと比較し、再利用したものを記録します。依頼されたすべての URL に対応先があり、ファイルの所有範囲が明確になったら完了です。

2. 構築前に観察する

デスクトップとモバイルの幅でページ全体を調べます。遅延読み込みのメディアを読み込み、固定表示のシーンを確認するため、上から下までスクロールします。その後、メニュー、タブ、アコーディオン、カルーセル、ホバー状態、主要リンクを操作します。スクロール、クリック、ホバー、時間のどれによって変化するかを区別してください。スクロール駆動のセクションをクリックで模倣するのは、別の製品です。

各観察結果は、あるルールの一つのサンプルとして扱います。一度の表示から推測するのではなく、宣言されている値（計算済みスタイル、CSS 変数、ライブラリの実行時オプション）を確認します。どの要素が変化を引き起こすのかを把握できるまで、ビューポートの幅（デザイン幅より広い場合も含む）、ビューポートの高さ、入力、状態を変えて確認します。訪問者が使う入力方法（ホイール、タッチ、キーボード、ポインター）でページを操作します。スクリプトによるスクロールでは、スムーズスクロールなど、そうした入力に関連付けられた動作が実行されません。

ビューポート、スクロール位置、操作状態をラベルに含めて、ソースのスクリーンショットを保存します。別状態のコンテンツやアセットも取得します。セクションの順序、タイポグラフィ、レイアウト寸法、アセットの対応関係、インタラクションを記した簡潔なページ概要を一つ作成します。個別に作業するビルダーの役に立つ場合に限り、セクションごとの概要を追加します。

抽出と状態の比較については、検査リファレンスを確認してください。Framer で生成されたページ、固定表示のシーン、リビールアニメーション、アニメーションメディアについては、Framer とモーションを確認してください。

ソースで実際に使われているテキストとファイルを使用します。対象にはフォント、画像、SVG、動画が含まれます。他のプロバイダーやアイコンセットの同名の代替品は、寸法や形状が異なります。重要なジオメトリや計算済みスタイルを計測します。ビジュアルを HTML で再構築する前に、レイヤー画像やメディア要素を調べます。ソース URL からローカルアセットのパスへの対応を記録し、コンテンツタイプと寸法を確認します。.png の URL が AVIF を返す場合もあります。

構築に十分な証拠が、すべてのセクションと意味のある状態について揃い、確認できない情報が特定されるまで作業を続けます。大きな DOM ダンプだけでは、ページを実際に見る代わりにはなりません。

3. 最初の完成版を構築する

まず、フォント、ページ幅、色、アセット、ルート、ページ全体の動作、共有コンポーネントを確立します。共有コンポーネントは、確認できたすべての状態（ホバー、フォーカス、ブレークポイント）に対応させ、ビルダーがそのまま再利用できるようにします。適したコンポーネントは再利用してください。レイアウトや単純な動きには CSS を優先し、ソースの動作で必要な場合はアニメーションライブラリを使います。

実際のコンテンツを使って、まとまりのあるセクションを構築します。共有ファイルの担当者が決まったら、独立したページやセクションを委任してください。ビルダーにはスクリーンショット、関連する寸法や状態のメモ、アセットのパス、保存先ファイル、具体的な完了条件を伝えます。ファイルを正確に参照した簡潔な説明で十分です。エージェント数やコンポーネントごとの書類作成に決まりはありません。

対象範囲内のインタラクションを再現します。実際の外部リンク先は維持してください。対象に含まれるローカルルートがある場合はリンクをそのルートに書き換え、対象範囲外のリンクはソースを指す状態にして、その旨を明記します。表示される操作要素は、示されている動作を実行できるようにします。

統合した作業単位ごとに、適切なプロジェクトチェックを実行します。依頼されたすべてのセクションとルートが実際のアセットを使って表示され、重要な操作要素が動作したら、この工程を完了します。

4. 比較して修正し、繰り返す

ソースとローカルのページを同じビューポート、スクロール位置、状態で開きます。フォント、メディア、表示アニメーションが落ち着くまで待ちます。ステップ 2 で変化するルールが見つかった箇所はページ全体を確認し、デザイン幅より広いビューポートでも確認します。実際に操作して、スクロールやポインターの動作を評価します。横並びの比較画像でずれを見つけ、全サイズのセクションで詳細を確認します。

目立つ差異が大きいものから修正します。まず全体の形状、欠落したセクションやレイヤー、タイポグラフィや折り返し、アセットの切り抜きを修正し、その後に余白や動きを調整します。影響を受ける表示を再確認します。アニメーション領域は、必要に応じて逆方向へのスクロールも含め、初期状態、動作中、安定後の状態を比較します。

実際のローカルワークフローを操作します。複製したルート間の移動、モバイルメニュー、タブやアコーディオンの状態、カルーセルの端、主要な操作、メディアコントロール、確認したスクロール連動の遷移を試します。実行時エラー、読み込めないアセット、横方向のはみ出しを確認します。ページを追加する場合は、既存ルートが引き続き動作することも確認します。クラス名に関するアサーションではなく、こうした境界条件で少数のブラウザチェックを実行してください。

プロジェクトの本番用チェックを実行します。完了には、ビルドの成功とレンダリング結果の比較の両方が必要です。未確認の結果をピクセル単位で完全だと称するのではなく、残っている差異を具体的に示してください。

提出物

プレビューと実行の手順、ソースからローカルへのルート対応表、代表的なデスクトップとモバイルの比較、実際に実行したチェック、残っている視覚面や機能面の差異を提示してください。再利用可能なテンプレートを維持する場合は、参照用の複製を別々のアプリに分けてください。