ウェブサイトをクローンする
指定されたページを現在のアプリケーション内で再現します。新しいデザインの方向性を追加する前に、ソースを一致させてください。動作する編集可能なコードを提供します：スクリーンショット、iframe、ダウンロードしたプロダクションバンドルはあくまで参考であり、実装ではありません。
1. 作業を計画する
プロジェクトの指示、実際のフレームワーク/スクリプト、既存のルートを読み取ります。利用可能なブラウザでソースURLを開きます。実用的な場合は、直接HTTP、アセットツール、またはAPIを使用した抽出を優先し、ブラウザは外観と動作を確認するために使用します。
短いソースからローカルへのルートマップと、各ページが所有するファイルを記録します。アプリケーションの慣例に従います。このテンプレートでは、src/app/、src/components/sites/<site>/、public/sites/<site>/、docs/research/<site>/を使用します。オリジン、ページ、ダウンロードに明確な名前を付けます。読みやすい名前が衝突する場合は、ポートまたはURLハッシュを追加します。
- 最初のルートクローンは、手付かずのテンプレートホームページを置き換える場合があります。
- 1つのオリジンからの複数ページのソースパス名を保持します。クエリ/フラグメントのバリエーションは通常、同じルートの状態を表します。これらの状態を再現します。
- 既存の作成済みルート/アセットを保持します。要求された場合にのみそれらを更新し、要求されていないルートの衝突は、何かを置き換える前に解決します。
- 既存のクローンにページを追加する場合、既存のページで使用されているスタイルを置き換えずに、そのレイアウトとグローバルスタイルを拡張します。
- ユーザーが結合アプリを希望しない限り、異なるオリジンには別々のアプリを使用します。結合サイトには、明確なルートプレフィックスとスコープ指定されたフォント、スタイル、レイアウトが必要です。
- フレームワークの構文（
_、@、括弧、丸括弧）と競合するリテラルURLセグメントは、サポートされているメカニズムを使用してエスケープし、その後、実際の要求されたURLを確認します。
既存のクローンは有用な出発点です。それらを現在のソースと比較し、再利用した内容を記録します。要求されたすべてのURLに宛先があり、ファイルの所有権が明確になった時点で完了です。
2. 構築する前に観察する
デスクトップ幅とモバイル幅の両方でページ全体を検査します。上から下にスクロールして、遅延メディアをロードし、スティッキー/ピン留めされたシーンを表示します。次に、メニュー、タブ、アコーディオン、カルーセル、ホバー状態、主要なリンクを操作します。スクロール、クリック、ホバー、時間のどれによって変更が引き起こされているかを区別します。スクロール駆動セクションのクリック模倣は、異なる成果物です。
各観察をルールの1つのサンプルとして扱います。宣言された値（計算済みスタイル、CSS変数、ライブラリのライブオプション）を1つのレンダリングから推測するのではなく読み取り、ビューポート幅（デザインよりも広い幅を含む）、ビューポート高さ、入力、状態を変化させて、何が各変更を駆動しているかを把握します。訪問者が使用する入力（ホイール、タッチ、キーボード、ポインタ）でページを操作します。スクリプトによるスクロールは、スムーズスクロールなど、それらにアタッチされた動作をバイパスします。
ビューポート、スクロール位置、インタラクション状態でラベル付けされたソーススクリーンショットを保存します。代替状態のコンテンツ/アセットをキャプチャします。セクションの順序、タイポグラフィ、レイアウトの測定値、アセットマッピング、インタラクションなど、1つの簡潔なページブリーフを保持します。独立したビルダーに役立つ場合にのみ、セクションブリーフを追加します。
抽出と状態比較については、インスペクションリファレンスを参照してください。Framerで生成されたページ、スティッキーシーン、リビールアニメーション、またはアニメーションメディアについては、Framerとモーションを参照してください。
ソースの実際のテキストと、実際に読み込まれるファイル（フォント、画像、SVG、ビデオ）を使用します。別のプロバイダーやアイコンセットから同じ名前の代替品を使用すると、メトリクスや形状が異なります。重要なジオメトリ/計算済みスタイルを測定します。ビジュアルをHTMLとして再構築する前に、階層化された画像とメディア要素を検査します。ソースURLからローカルアセットパスへのマッピングを追跡し、コンテンツタイプ/寸法を確認します（.png URLがAVIFを返す場合があります）。
すべてのセクションと意味のある状態について、構築に十分な証拠が揃い、利用できない詳細が特定された時点で完了です。大量のDOMダンプは、ページを実際に見る代わりにはなりません。
3. 完全なファーストパスを構築する
最初にフォント、ページ幅、色、アセット、ルート、ページ全体の動作、共有コンポーネントを確立します。各共有コンポーネントを、観察されたすべての状態（ホバー、フォーカス、ブレークポイント）で構築し、ビルダーがそのまま再利用できるようにします。適切なコンポーネントを再利用します。レイアウト/シンプルなモーションにはCSSを優先し、ソースの動作に必要な場合はアニメーションライブラリを使用します。
実際のコンテンツで一貫性のあるセクションを構築します。共有ファイルに所有者ができた後、独立したページ/セクションを委任します。ビルダーにスクリーンショット、関連する測定値/状態メモ、アセットパス、宛先ファイル、具体的な完了ラインを提供します。正確なファイル参照を含む簡潔なブリーフで十分です。固定のエージェント数やコンポーネントごとの書類は必要ありません。
スコープ内のインタラクションを再現します。実際の外部送信先を保持します。それらのルートが含まれている場合は、リンクをローカルルートに書き換えます。スコープ外の送信先はソースを指すままにし、そのことを開示します。可視のコントロールは、約束された動作を実行しなければなりません。
統合されたスライスの後に、適切なプロジェクトチェックを実行します。要求されたすべてのセクション/ルートが実際のアセットでレンダリングされ、重要なコントロールが機能するようになった時点で、このパスは完了です。
4. 比較、修復、繰り返す
同じビューポート、スクロール位置、状態でソース/ローカルページを開きます。フォント、メディア、リビールアニメーションが落ち着くのを待ちます。ステップ2でルールが変更されていることが判明した場所すべてと、デザインよりも広いビューポートでページ全体を確認します。実際の入力でスクロールとポインタの動作を判断します。横に並べたモンタージュでずれを特定し、全サイズのセクションで詳細を確認します。
最初に最大の視覚的な違い（ジオメトリ、欠落セクション/レイヤー、タイポグラフィ/折り返し、アセットのトリミング、次にスペーシングとモーション）を修正します。影響を受けるビューを再確認します。初期状態、アクティブ状態、静止状態でアニメーション領域を比較します。関連する場合は逆スクロールも含めます。
実際のローカルワークフローを実行します：クローンされたルート間のナビゲーション、モバイルメニュー、タブ/アコーディオンの状態、カルーセルの境界、主要なアクション、メディアコントロール、観察されたスクロールリンクトランジション。ランタイムエラー、欠落アセット、水平方向のオーバーフローを確認します。ページを追加する場合、既存のルートがまだ機能することを確認します。これらの境界で、クラス名に関するアサーションではなく、いくつかのブラウザチェックを使用します。
プロジェクトのプロダクションチェックを実行します。完了には、成功したビルドとレンダリングされた比較の両方が必要です。残りの差異は、「ピクセルパーフェクト」と未確認の結果を呼ぶのではなく、正確に記述します。
成果物
プレビュー/実行手順、ソースからローカルへのルートマップ、代表的なデスクトップ/モバイル比較、実際に実行したチェック、残りの視覚的/機能的なギャップを返します。再利用可能なテンプレートを維持する場合、リファレンスクローンは別々のアプリに保持します。