AIで生成したランディングページは、数分で90%ほど完成します。構成やタイポグラフィは整い、中心メッセージも承認済みです。問題は最後の仕上げにあります。見出しが抽象的だったり、価値を伝える段落を具体化したかったり、CTAを実際の行動へつなげたかったりします。
そこで起きるのがプロンプトによる全体再生成の罠です。「見出しをもっと説得力のあるものにして、CTAも変えて」と広く指示すると、モデルはHTML全体を作り直すことがあります。承認済みのスタイル、レスポンシブ用クラス、ブランドカラー、レイアウトの細部まで意図せず変わり、5分の修正が1時間の回帰チェックになります。
AIによる狙い撃ちのリファインでは、視覚的な変更許可範囲を先に決めます。変更してよい要素を選択し、期待する結果を説明し、未選択のDOMは編集コンテキストから外します。本稿では、RelayGridの顧客オンボーディング用ランディングページを例に手順を示します。
なぜ最後に全体再生成が失敗するのか
生成AIやvibe codingツールが局所的な変更のためにページ全体を書き換えると、次の問題が起こりがちです。
- スタイルとクラスのずれ: Tailwindユーティリティ、インラインCSS、コンテナ幅が変わり、レスポンシブやグリッドが崩れます。
- コンテンツの移動: フッターリンク、導入事例、補足文など、対象外のコピーが書き換えられたり消えたりします。
- レビュー負債: 見出し1つの確認ではなく、プロンプトごとにページ全体を検証する必要が生まれます。
解決策は範囲付きの許可です。指定したDOMノードだけを操作し、ドキュメントの残りを保護します。
選択する範囲と守る範囲の判断マトリクス
狙い撃ちのリファインは、すべての依頼を小さくすることではありません。選択範囲を目的に合わせることです。
| 目的 | 選択する要素 | 保護する要素 |
|---|---|---|
| 価値提案を明確にする | ヒーローの主見出しとサブ見出し | ナビゲーション、製品モックアップ、バッジ、背景 |
| コンバージョン行動を変える | メインCTAボタン | 補助ボタン、リンク、信頼要素 |
| セクションを翻訳・再設計する | セクション全体のコンテナ | 隣接セクション、グローバルヘッダー、フッター |
こうすると、各イテレーションの変更半径を明確に検証できます。
5段階で進める狙い撃ちリファインのワークフロー
RelayGridの例では、レイアウト、製品イラスト、ソーシャルプルーフを変えずに、B2B読者向けにヒーローを強化します。
ステージ1: 安定したHTMLベースラインを作る
新しいプロンプトから始めず、既存HTMLを使います。HtmlDragのAI Refinementでは、ファイルのアップロード、コードの貼り付け、URLの読み込みが可能です。独立したHTMLファイルなら、スタイルシート、クラス、DOM階層を再現可能な基準として保てます。
図1: 既存HTMLを読み込み、範囲を限定した変更の安定した基盤を作ります。
レンダリング後に構造を確認します。メッセージを支えていないテキストはどれか、すでに使えるビジュアルはどれかを見極めます。
図2: 構成と製品カードは機能しており、見出しとCTAだけを具体化します。
ステージ2: 変更対象を正確に分離する
「ヒーローを更新する」と書くのではなく、要素を1つずつ選びます。ここでは3つの番号付きマーカーを置きます。
- マーカー1: メイン見出しの
<h1>（「Customer onboarding, made simpler.」）。 - マーカー2: 説明用の段落。
- マーカー3: メインボタン（「See the platform」）。
製品ダッシュボード、上部バッジ、補助ボタン、顧客ロゴは意図的に未選択のままにします。
図3: 視覚マーカーがDOMノードと具体的な指示を結び付けます。
ステージ3: 指定と保護を同時に行うプロンプトを書く
実務向けのプロンプトは、明示的な変更と保護条項を組み合わせます。番号ごとに結果を指定し、未選択のコードは変更しないと明記します。
1. Replace the headline with: Turn every customer handoff into faster first value.
2. Replace the supporting paragraph with: Give your B2B onboarding team one shared plan for owners, milestones, and blockers—so customers reach first value with less chasing.
3. Change the primary CTA label to: Book an onboarding walkthrough. Change its background color to #153852. Keep its white text, current padding, rounded shape, and placement.
Guard Clause: Do not change any unmarked content, layout, product preview, navigation, customer proof, or other buttons.
図4: マーカーごとの文章・色変更と、未選択領域の固定を1つの依頼にまとめています。
結果が返ったら、確認するのは1点です。対象ノードは正しく変わり、保護した部分はそのままか、です。
図5: 保持された構造に新しいメッセージとCTAカラーが入りました。
ステージ4: さらに小さなマイクロパスへ分解する
大きなプロンプト1回で完璧にしようとしないでください。段階的な縮小イテレーションでは、後続の依頼ほど対象要素を減らします。
2回目は更新済みの段落だけを選び、サイズ、色、幅、位置を保ったまま短くします。
図6: 2回目のマイクロパスは、段落の要約だけに集中しています。
結果は「One shared onboarding plan for every owner, milestone, and blocker.」です。1要素に範囲を絞ることで、レイアウトへの副作用を抑えられます。
図7: マイクロパスで文章を簡潔にしながら、見出し、CTA、視覚階層は維持します。
ステージ5: セクション単位の変換と非同期キューを扱う
複数の子ノードを一緒に変更する必要があるときは、コンテナ全体を1つの意味単位としてマークします。見出し、説明、ボタンの整合性を保ったままAIに処理させるためです。
要素単位の選択はマイクロコピーに向いています。一方、翻訳やキャンペーン変更では、見出し・説明・ボタンを同時に変える必要があります。その場合は、セクションのコンテナ全体を意識的に選びます。
図8: セクション内の全要素を一体として適応させる場合は、全体選択が適しています。
複数ノードの変換は管理されたキューに入ることがあります。「Waiting for an available AI slot」は処理待ちを示すだけで、完了結果ではありません。最終レンダリングが見えるまで、翻訳済みだと判断しないでください。
図9: 待機中という状態は、処理が進行中であることを示すだけです。
ハイブリッドな橋渡し: AIプロンプトからビジュアルエディターへ
ピクセル単位の位置合わせや細かな調整は、自然言語だけでは予測しにくい領域です。「このボタンを4ピクセル下へ移動」のような指示は、エディター上で直接確認する方が安全です。
AIは意味の変換やコンテンツ整理に強い一方、ピクセル単位の調整は自然言語だけでは予測しにくいことがあります。
そこで、狙い撃ちリファインで内容を整え、最後の微調整をビジュアルエディターで行います。HtmlDragのOpen in Editorでは次の操作ができます。
- 要素・コンポーネントの挿入: コンテナ、バッジ、アイコン、カードを追加。
- テーブルの挿入・編集: 比較表や料金表をHTMLをすべて手書きせずに作成。
- 要素のロック: 承認済みセクションやブランド資産を保護。
- 削除とクリーンアップ: プレースホルダーや古いブロックを除去。
- リンクと遷移先の管理: UTM付きURL、アンカー、外部遷移先を追加。
- バージョン管理と書き出し: スナップショットを保存し、クリーンなHTMLを出力。
図10: ビジュアルエディターで直接編集、挿入、バージョン付き書き出しができます。
狙い撃ちHTMLリファイン用のプロンプトパターン
制御された変更を行うときは、以下の実績あるパターンでプロンプトを組み立て、各イテレーションの精度を高めます。
| 目的 | パターン |
|---|---|
| 価値提案 | Update only marked element [1]. Rewrite the heading to focus on [business value]. Keep typography and responsive sizing intact. Do not touch unmarked elements. |
| CTA変更 | Update only marked button [2]. Change the label to [new action]. Update the background to [hex color] while preserving radius, padding, and position. Guard adjacent links. |
| 文章を短くする | Update only marked paragraph [1]. Shorten it to under 15 words about [key benefit]. Maintain line-height, color, and alignment. Do not alter surrounding containers. |
送信前チェックリスト
- 基準を固定: 完全なHTMLと安定した依存関係を読み込む。
- 最小範囲を使う: 変えるDOMノードだけをマークする。
- 番号を対応付ける: 各要素に1つの指示を割り当てる。
- 保護条項を入れる: 未選択の内容とレイアウトを変更しないと明記する。
- 段階的に縮小: 後続の依頼ほど対象を小さくする。
- ビジュアルエディターへ移行: 表、リンク、決定的な細部はエディターで仕上げる。
- 書き出し前に比較: 未選択領域を基準ページと照合する。
よくある質問
HTMLページ全体を再生成すると、なぜスタイルが崩れるのですか?
大規模言語モデルはテキストをトークン単位で確率的に生成します。1行の文言を変えるために大量のHTMLを再出力させると、クラスの置き換え、レスポンシブ用ブレークポイントの欠落、DOMノードの並べ替えが起こり、見た目の回帰につながります。
狙い撃ちのリファインでTailwind CSSやインラインスタイルも編集できますか?
できます。選択したDOMの範囲に限定して処理するため、そのノードの既存クラスやインラインスタイルを読み取り、グローバルCSSには触れずに局所変更を適用します。
要素を文章で説明するより、視覚マーカーを使う利点は何ですか?
「見出しの下にある2番目のボタン」のような文章は曖昧になりがちです。視覚マーカーなら目的のDOM要素に直接結び付くため、AIが推測する必要がありません。
AIリファインからビジュアルエディターへ切り替えるタイミングは?
文章作成、メッセージ変更、トーン調整、構造化された書き換えにはAIを使います。要素の整列、表の書式、重要コンポーネントのロック、リンク挿入、クリーンなHTML書き出しにはビジュアルエディターを使います。
まとめ: 書き直すのではなく、狙って磨く
すでに機能しているAI生成ランディングページを、メッセージ変更のたびに作り直す必要はありません。HTMLを読み込み、対象ノードをマークし、境界を定義し、結果を確認してから次のパスを判断します。セクション全体を変えるときは、選択範囲を意図的に広げます。
こうすればリファインの結果を検証でき、最後の人間の判断はビジュアルエディターで守れます。HtmlDragなら、残りのコードを書き直さずに最後の仕上げを完了できます。