参照サイトをスクリーンショットで分析する

画面にはフランス語で書かれたあるコミュニティサイトが表示されています。配色は洗練されており、レイアウトのバランスが際立っています。作りたいウェブサイトの完成像が頭の中に浮かび、手が自然とキーボードに向かうのは当然の反応です。しかし、コードを一行でも書く前にやるべきことがあります。それは、参照サイトの構造を正確に把握することです。

Claude Code にウェブサイト作成を依頼する際、言葉で説明するのと視覚資料を提供するのでは、出来栄えに明確な差が生じます。「Apple のホームページのように作って」と伝えると、AI は学習データから Apple サイトの一般的な印象を抽出します。しかし、参照サイトのスクリーンショットを直接渡せば話は変わります。

色コード、余白の比率、ボタンの位置、タイポグラフィのサイズ関係など、視覚情報から具体的な要素を読み取ることができるからです。

実務における参照サイトの分析手順は以下の通りです。

まず、参照サイトの全ページスクリーンショットを確保します。ブラウザの全ページキャプチャ機能を使えば、スクロール下に隠れている領域も一枚の画像に収めることができます。このスクリーンショットは、Claude Code が「目標状態」を認識するための基準点となります。

次に、ブランドアセットを準備します。ロゴファイル、主要なカラーコード（プライマリ、セカンダリ、背景色、アクセントカラー）、使用するフォント名を整理しておきます。参照サイトのレイアウトは借用しつつ、ブランドアイデンティティは自らのものへと置き換える必要があるからです。

そして、Claude Code に対してプロンプトを作成します。「このスクリーンショットのレイアウトと構造を参考に、当社のブランドカラーとロゴを適用したウェブサイトを作成してください。テキストはすべて英語で、当コミュニティの文脈に合わせて作成してください」と依頼します。こうすると、Claude Code はフランス語元のサイトの構造に従いつつ、色、フォント、コンテンツを完全に新しいものに置き換えてくれます。

一つ注意すべき点があります。「参照サイト」を「複製」することと「参照」することは異なります。HTML ソースコードをそのまま持ち込むのではなく、デザインパターンやレイアウトの流れを学習資料として活用するのです。最終成果物には、自らのコンテンツ、自らのカラー、自らのメッセージが込められている必要があります。

スクリーンショットループ：構築→キャプチャ→比較→修正の反復戦略

最初の構築が完了し、私のコンピュータのホスト（localhost）にウェブサイトが表示されました。色は指定通りになり、ロゴも正しい位置にあります。しかし、ヒーローセクションの余白が参照サイトよりも広く、カードレイアウトの整列が微妙にずれています。この違いをどのように埋めればよいでしょうか？

ここで登場するのが「スクリーンショットループ」という戦略です。この戦略の核心は、AI が自身の成果物を視覚的に確認し、参照画像と比較した上で、差異を自ら修正する反復プロセスにあります。

その仕組みは以下の通りです。

Claude Code がウェブサイトのコードを記述します。その後、ローカルサーバーを起動し、自らスクリーンショットをキャプチャします。キャプチャした画像を参照スクリーンショットとセクションごとに比較し、不一致項目をリスト化してコードを修正します。再度スクリーンショットを撮影して比較し、このプロセスを最低 2 回繰り返した後にのみ、ユーザーに結果を表示します。

このループが強力な理由は、AI がコードのみを参照するのではなく、レンダリングされた視覚的な結果そのものを判断基準としているからです。CSS で「margin-top: 2rem」と記述しても、実際の画面でその余白がどのような印象を与えるかは、コードだけでは判断できません。スクリーンショットを通じて「この部分が参照サイトよりも約 20 ピクセル広い」という判断が可能になります。

しかし、スクリーンショットのループにも限界があります。動的な要素では問題が発生します。

背景アニメーションやスクロールベースのエフェクトのように、静止画として捉えることができない要素がある場合、スクリーンショットはその一部しか映さなかったり、空の画面を表示したりします。このとき Claude Code は「まだ正しく実装されていない」と誤判断し、すでに正常に動作しているコードを過剰に修正する悪循環に陥る可能性があります。

このような状況では、スクリーンショットのループを意図的に無効にすることが正解です。プロンプトで「これはアニメーション背景なので、スクリーンショットツールは使用せず、コードのみを作成してください。修正が必要であれば、私が直接確認した上でご連絡します」と明示します。AI に対して視覚的な自己検証の権限を一時的に返上する行為です。

逆に、静的なレイアウトが中心のランディングページでは、スクリーンショットのループを最大限に活用するのが良いでしょう。ループ回数を 3 回以上に設定すると、最初の結果と 3 回目の結果の間に目に見える品質の差が現れます。

21st.dev コンポーネントライブラリの活用

全体のレイアウトは満足できる状態ですが、ヒーローセクションのボタンが少し物足りなく感じられます。角丸の青いボタンが単独で置かれているだけです。このボタンを虹色の枠が流れるボタンに変更できれば、サイト全体の印象は大きく変わるでしょう。

21st.devは、ウェブサイトの個別コンポーネントを集めたライブラリです。ボタン、背景アニメーション、ナビゲーションバー、カードUI、トグルスイッチなど、多様な要素が事前にコード化されています。ユーザーは必要なコンポーネントを選択し、プロンプト形式でコピーしてClaude Codeに渡すだけです。

作業の流れは以下の通りです。

21st.devサイトにアクセスし、カテゴリを探索します。ボタン、背景、ヒーローセクション、シェーダー効果など、さまざまな分類があります。必要なコンポーネントを選択すると、そのコンポーネント用のプロンプトコードが生成されます。このコードをコピーします。

Claude Codeに戻り、プロンプトを構成します。「ヒーローテキストの後ろにこの背景要素を適用してください」と依頼し、コピーしたコードを貼り付けます。Claude Codeはコードの構造を把握し、既存プロジェクトの文脈に合わせて統合します。

この手法の利点は、サイト全体を一つの参照元から取得するのではなく、複数のソースから個別の要素を組み合わせて作成できる点にあります。ボタンはAサイトからインスピレーションを得て、背景には21st.devのウェーブアニメーションを採用し、カードのレイアウトはBサイトの構造を参考にするといった具合です。一つのサイトを丸ごと模倣するのではなく、多様な要素をキュレーションして独自の成果物を作り出すのです。

注意すべき点があります。21st.devから取得したコンポーネントの多くにはアニメーションが含まれています。前述のスクリーンショットループの制限で述べた通り、動的要素を追加する際はスクリーンショット比較を無効化するのが安全です。「これはアニメーション背景なのでスクリーンショットツールでの比較は避け、コードを直接記述した後に自分で確認する」という指示を併せて伝える必要があります。

そうしないと、Claude Codeが静止画からアニメーションの途中フレームのみを捉え、「実装が不完全である」と判断して過度な修正を繰り返す事態が発生します。

コンポーネントを適用した後は、必ず反復的な微調整が必要です。「背景のアニメーションがあまりに散漫だ。ヒーローテキストの背後に半透明の背景を敷いて可読性を高めろ。'Earn More'というテキストの色をオレンジから青に変更せよ」といった修正指示を一つずつ伝えながら洗練させていく過程が、完成度を決定します。

バイパス権限モードと自律構築の長所と短所

Claude Code がコード作成中に停止し、「このコマンドを実行してもよろしいですか」という承認要求が画面に表示されます。ファイル作成時、パッケージインストール時、サーバー起動時など、毎回ユーザーの許可を求めます。安全な設計ですが、ウェブサイト構築の過程でこの中断が数十回繰り返されると、作業フローが分断されてしまいます。

バイパス権限モードは、この中断を解消する設定です。VS Code の設定で「Claude Code」を検索し、「Allow Dangerously Skip Permissions」オプションを有効化すると、Claude Code は個別の承認なしにコマンドを連続して実行できます。

このモードの利点は明白です。スクリーンショットのループ全体が自動的に進行します。コード作成、サーバー起動、スクリーンショットのキャプチャ、比較、修正、再起動という 6 つのステップが、ユーザーの介入なしに連続して実行されます。タスクリストを作成して一つずつチェックし、完了した成果物のみをユーザーに提示します。

ただし、このモードの名前に「Dangerously」が付いているのには理由があります。Claude Code があらゆるコマンドを実行できるためです。ファイルの削除、システム設定の変更、外部ネットワークへのリクエストなどが、承認なしに発生する可能性があります。

実用的な観点からリスクを管理する方法は次の通りです。

バイパス権限モードで作業する際は、画面から完全に離れないことが原則です。横で別の作業をしながら、時々Claude Codeの進行状況を確認する程度で十分です。一晩中自律構築をさせて寝てしまうことは推奨されません。

より洗練された方法もあります。バイパス権限モードの代わりに、権限設定において安全なコマンドのみを許可リストに登録し、危険なコマンドを拒否リストに含めることです。例えば、ファイルの作成と読み取りは許可する一方、rm -rf などの削除コマンドはブロックします。

拒否リストに登録されたコマンドは許可リストよりも優先度が高いため、誤って危険な操作が実行されるのを防ぐことができます。この方式を用いれば、バイパス権限モードとほぼ同等の速度を得ながら、安全網を維持することが可能です。

ウェブサイトを初めて構築する段階では、機密データが含まれていないことが多いため、バイパス権限モードを使用しても実質的なリスクは大きくありません。しかし、プロジェクトにAPIキーやデータベース接続情報が含まれ始めたら、選択的権限設定へと移行するのが賢明です。

完成したウェブサイトは、私のコンピュータ上で滑らかに動作しています。色やレイアウトも気に入っており、アニメーションも自然です。しかし、この成果物を私のコンピュータ内に閉じ込めておくことはできません。他の人もアクセスできる場所に公開する必要があります。その過程で、コードの変更履歴を安全に管理するツールが必要となります。