clone-website

ウェブサイトを正確に複製する

ワンクリック複製ツールが返すのは、そっくりなページです。見た目は似ていますが、作成過程で一致しているかどうかが確認されることはありません。このスキルで作成する成果物は異なります。値の出典をたどることができ、まだ何が間違っているかを示す差分もあります。

ルールはひとつです。ページに値が記載されているなら、それを読み取ります。記載されていない場合に限り、自分で決めます。 この方法で再構築すれば、差分がなくなった時点で完了です。見た目がだいたい合っているかどうかで判断するのではなく、差分がないことを確認できるためです。

再構築の手順で対象が Figma、Penpot、コードベースのどれかが関係するだけです。それ以外の作業はすべて同じです。

キャプチャする前に決める

• デザインの対象幅は2つです。モバイルは390、デスクトップは1440です。実際のデバイスでは異なる比率で同じページを開くため、これらはデザイン時に合わせる幅であり、実際に表示される幅ではありません。
• ライトモードとダークモードの設定に従うサイトは、異なる2つのページを表示します。両方をキャプチャするか、どちらを複製したかを明記してください。
• IP、ロケール、同意状態、A/Bテストの分岐は、アクセスする前にサイトに反映されます。そのため、キャプチャするのはある訪問者から見た状態であり、ページそのものではありません。価格や文言を信頼する前に、別の場所からも確認してください。

1. レンダリングされたページをキャプチャする

実際のブラウザーを操作し、全ページのスクリーンショットを両方の幅で撮影し、レンダリングされた DOM、各セクションの計算済みスタイル、ページがリクエストしたアセット URL を同時に取得します。クライアント側でレンダリングされるページでは、これだけが情報を含むキャプチャです。

仕様となるのはレンダリング後の状態であり、サーバーから送信されたファイルではありません。

2. 生のソースも取得する

マークアップにはテキストがそのまま含まれ、スクリーンショットを介さずにすべてのアセット URL を確認できます。

wget -r -l 3 -k -p -E -nc https://example.com/page

ホストをまたぐ取得は意図的に除外しています。CDN のアセットは取得せず、URL はマークアップ内で確認して、手順4で直接ダウンロードします。wget は JavaScript を実行しないため、最初ではなく2番目のキャプチャとして使います。

3. デザインの値を測定する

画像ではなく、実際のページからトークンを読み取ります。文字サイズの尺度、カラーパレット、間隔はすでに宣言されています。抽出には [[extract-design]] を使います。--design-md を指定すると、そのまま再構築の手順に渡せる概要が得られます。

4. キャプチャからコンテンツと画像を取得する

DOM から見出し、本文、数値、リスト、リンク、フッターを解析し、参照されているすべてのアセットをダウンロードします。文字列を手入力したり、ソースに記載された値を推測したりしないでください。手入力しなければ、ずれも発生しません。

5. セクションごとに構築する

ヘッダー、ヒーロー、特徴の行、テーブル、メディア、お客様の声、FAQ、フッターと、セクションを1つずつ構築します。オートレイアウトまたは実際のレイアウトコンテナーを使い、座標を固定する方法は使いません。各セクションのスクリーンショットを撮り、次に進む前に比較します。最後に一度だけ評価される再構築は、ひどい評価になりがちです。

6. 1つではなく3つの観点で比較する

確認項目	質問
視覚	各幅で同じように見えますか？
構造	絶対位置ではなく、適切なコンテナーで構築されていますか？
意味	文言、リンク、数値、バリエーションはソースに記載されたものと一致していますか？

3つ目は見落とされがちですが、最も重要です。見た目が完璧な複製でも、データが間違っていることがあり、実行したすべてのスクリーンショット比較をすり抜けてしまいます。

トークン単位の検証は無料でできます。元のページを抽出し、再構築したページを抽出して、2つのトークンセットを比較します。差分は、感覚ではなくリストとして、残りの作業を示してくれます。

7. キャプチャでは見えなかった問題を修正する

エラーの中には、劣化ではなく構造を見落としたことによるものがあります。どれもエラーには見えません。

• 実際の画像が CSS の背景に指定されているため、ヒーローに誤った画像を使っている。
• カルーセルや動画の項目の順序が間違っている。
• バリエーションによって値が異なる2つのカードを、同じものから複製している。

解決できなかったことは、推測せずに報告してください。

8. フォント：代替フォントで始め、最後に差し替える

ライセンスされたファウンドリのフォントは、通常、自動化された環境では読み込めません。また、見た目が似ているだけのフォントを使うのも適切ではありません。確認しようとしているすべての改行位置が変わってしまうためです。まずはメトリクス互換の代替フォントを使い、最後に検索と置換で本物のフォントに差し替えます。

9. 再実行ではなく、対象を絞ったプロンプトで修正する

残っているエラーはすべて局所的なので、指示も局所的にする必要があります。セクションを指定し、何が誤っているのか、正しい値は何かを伝えます。カードひとつを直すために再構築全体をやり直すと、また1時間かかるうえ、別の場所に新たなエラーが生じます。

値ではなく判断が必要な修正では、そのセクションだけを2、3パターン作成し、どれが正しいかを尋ねます。さらに、なぜそれが正しいのかも尋ねてください。その説明を次のセクションに適用すれば、推測に頼らずに済みます。

10. 足場はすべて取り除く

インポートしたものを削除し、ステージング用アセットも削除します。残すのは2つのフレームと名前付きレイヤー、そしてベクター形式のアイコンです。絶対位置指定の要素をひとつだけ残すようなことはしません。インポートしたものがファイルに残っているなら、そのファイルはまだドラフトです。

これは何のためか

ページの再現は、調査のために行います。解体調査、再設計の基準、移行時の参考資料、自分のサイトとの回帰チェックなどがその例です。最後の用途は最も見過ごされています。本番環境が依然としてデザインシステムに沿っているかを知る最速の方法は、デザインシステムを抽出して比較することです。

他者のレイアウト、コピー、ブランドを自分のものとして公開するのは、別の行為です。パイプラインが速いからといって、それが正当化されるわけではありません。robots.txt と利用規約を尊重してください。

関連項目

• [[extract-design]] — 計測の手順と検証工程
• [[generate-ui-from-brand]] — コピーではなく、ブランドに沿った新しい UI を作る場合
• [[authentic-product-representation]] — 再構築したコンテンツの正確さを保つ方法