Route B
Phase 3 : Deployment
B-05：安全な埋め込みとリード獲得
完成したツールを公開し、ビジネスに繋げる
おめでとうございます！これで診断ツールのコードは完成です。
最後のステップは、このツールをあなたのWebサイトに設置し、実際にユーザーが使えるようにすることです。
しかし、ここには大きな落とし穴があります。単純にコードを貼り付けただけでは、サイトのデザインと衝突して表示が崩れてしまうのです。このレッスンでは、その問題を解決し、確実にリードを獲得するための「プロの実装方法」を学びます。
1. なぜデザインが崩れるのか？
WordPressのテーマやPardotのLPテンプレートは、サイト全体の見た目を統一するための強力なCSSを持っています。ここに診断ツールのコードを直接貼り付けると、親のCSSが診断ツールのデザインを上書きしてしまい、レイアウト崩れが発生します。
⚠️ これはAIに指示した「Conflict Prevention」だけでは防ぎきれない、非常に厄介な問題です。
2. LP-Architect-Studioによる解決策
この問題を解決するため、司令塔である LP-Architect-Studio を使います。
このツールの 「Partial Embed (Wrapper)」 タブは、あなたの診断ツールを外部のCSSから完全に隔離する「保護カプセル（Iframe）」を生成する機能です。
安全な埋め込みコードの生成手順
LP-Architect-Studioを起動し、「Partial Embed (Wrapper)」タブを開きます。- 左側の「Input」エリアに、B-04で完成した診断ツールのHTMLコードを全て貼り付けます。
- 「⚡ 部分埋め込みコード生成 (Wrapper)」ボタンをクリックします。
- 右側の「Output」エリアに生成された、
<iframe ...>から始まるコードを「📋 クリップボードにコピー」します。 - WordPressの投稿画面で「カスタムHTML」ブロックを追加し、コピーしたコードを貼り付ければ完了です。
3. リード獲得フォームの連携
最後に、診断ツール内のメールアドレス入力フォームが、実際にデータを送信するように設定します。
これもAIへの指示だけで完了します。Pardotなど、お使いのツールの「フォームハンドラーURL」を事前に準備してください。