LP特化型ページ作成フロー：最短6ステップで高クオリティLPを実装する

1. Google Chromeを開き、アドレスバーに chrome://extensions と入力して拡張機能管理ページを開きます。
2. ページの右上にある「デベロッパーモード」のスイッチをオンにします。
3. 「パッケージ化されていない拡張機能を読み込む」というボタンをクリックします。
4. ファイル選択ダイアログが表示されたら、ツールフォルダの中にあるz_リソース/browser_extensionフォルダを選択します。
5. 「Hybrid Article Tool Connector」が一覧に追加されれば、インストールは完了です。

1. WordPressの管理画面にログインし、左側のメニューから「プラグイン」→「新規プラグインを追加」をクリックします。
2. ページ上部にある「プラグインのアップロード」ボタンをクリックします。
3. 「ファイルを選択」ボタンをクリックし、ファイル選択ダイアログを開きます。
4. ツールフォルダ内の z_リソース/wordpress_plugin/ フォルダに進み、お使いのテーマに合ったフォルダ（例: Cocoon）の中にある gemini-canvas-integrator.zip ファイルを選択します。
5. 「今すぐインストール」ボタンをクリックします。
6. インストールが完了したら、「プラグインを有効化」ボタンをクリックします。
7. 有効化されると、管理画面の左側メニューに「Gemini LP」と「Gemini Article」が追加されます。

• 本番用のLP作成：ツールをダウンロードした一番上のフォルダにあるz_リソース/canvas_promptsフォルダ内のCanvas用_資料ベースLP作成.txt（資料からLPを作る）やCanvas用_品質向上.txt（既存のデザインを改善する）といったテンプレートをベースに、ご自身の要件に合わせてカスタマイズして使用します。
• インスピレーションを得るため：同フォルダ内のLP_Samplesフォルダに、様々な業種のLP生成プロンプトのサンプルが格納されています。これらはあくまでサンプルページを作成するためのものであり、本番用のLPを作成する際は、これらの内容を参考に、ご自身の要件に合わせたプロンプトを組み立ててください。

1. ツール本体の_run_gui.bat（または.sh）を実行し、GUIコントローラーを起動しておきます。
2. Geminiのプレビュー画面右上にある「共有」ボタンをクリックし、表示されたメニューから「ツールに送信」を選択します。
3. 成功のアラートが表示されれば、LPのHTMLデータが自動的にツールのinput/design.htmlファイルに保存されます。

• 方法A（一括生成）：GUIの「メイン実行」タブにある「LPコンテンツ生成」ボタンをクリックします。LP用のHTMLとSEO情報を一括生成します。
• 方法B（一括生成＋投稿）：同じく「メイン実行」タブの「LP + WP投稿」ボタンをクリックします。方法Aの全処理に加え、完成したLPをWordPressに自動で下書き投稿します。
• 方法C（HTML生成の手動実行）：GUIの「手動実行モード」タブにある「インタラクティブ部(LP) 生成用」ボタンをクリックします。この方法はHTMLを直接生成せず、AI Studioで使用するプロンプトファイル（output/manual_prompts/interactive_lp_prompt.txt）を生成します。

• 方法B（自動投稿）の場合：既にWordPressの「Gemini LP」一覧に下書きとして投稿されています。それを開くだけでOKです。
• 方法A・C（手動投稿）の場合：WordPress管理画面の「Gemini LP」→「新規LPを追加」を開きます。「カスタムHTML」ブロックを追加し、output/for_wordpress/output_interactive.txtをテキストエディタで開き、中のコードを全てコピーして貼り付けます。
• 投稿編集画面の右側パネルにある「テンプレート」から、「Gemini Canvas (ヘッダー/フッターなし)」または「Gemini Full (ヘッダー/フッターあり)」のいずれかを選択します。

1. LPで使用したい全ての画像を、ツールのinput/imageフォルダに配置します。
2. GUIの「外部連携・分析」タブから「画像一括アップロード＆SEO設定」ボタンをクリックします。
3. 文脈ソースとして「インタラクティブHTML」を選択し、実行します。
4. ツールがAIで各画像に最適なSEOファイル名や代替テキストを生成し、全画像をWordPressのメディアライブラリに自動でアップロード＆設定します。
5. Visual Studio Code (VSC) などの高機能なテキストエディタで、WordPressに投稿したカスタムHTMLブロック内のコード全体をコピー＆ペーストして開きます。

• アプローチ1：VSCの検索機能を使う（推奨）
  VSCでHTMLファイルを開き、検索機能（Windows: Ctrl+F, Mac: Cmd+F）を使って検索します。img src, src=, https://placehold.co, https:// といったキーワードで検索すると、画像を指定している<img>タグのsrc="..."部分を効率的に見つけられます。
• アプローチ2：周辺のテキストで探す
  ブラウザのプレビューで、差し替えたい画像の近くにある見出しや文章をコピーし、VSCでそのテキストを検索します。ヒットした箇所の近くに、対応する画像URLが見つかります。
• アプローチ3：GeminiにURLリストを事前生成させる
  CanvasでLPデザインを生成した後、チャットで「このLPで使用している画像のプレースホルダーURLをリストアップしてください」と指示します。生成されたURLリストを元に、置換作業を進めることができます。

1. WordPressのメディアライブラリで、差し替えたい画像の「ファイルのURLをクリップボードにコピー」をクリックします。
2. VSCで、置換したいダミー画像のURL（例: https://placehold.co/1920x1080/...）を一つ見つけてコピーします。
3. VSCの検索と置換機能（Windows: Ctrl+H, Mac: Cmd+Option+F）を開きます。
4. 上の「検索」フィールドに、コピーしたダミーURLを貼り付けます。
5. 下の「置換」フィールドに、WordPressからコピーした実際の画像URLを貼り付けます。
6. 「すべて置換」ボタン（置換フィールドの右側にあるアイコン）をクリックします。
7. 全ての画像についてこの手順を繰り返したら、修正後のHTMLコード全体をコピーし、WordPressのカスタムHTMLブロックに貼り付け直します。

複雑なレイアウト崩れは、以下の3つをセットでAIに渡すと解決が早いです。

1. ① 間違いのスクリーンショット（現状）
2. ② 間違いのHTMLコード（現状）
3. ③ 正解のスクリーンショット（理想の見た目）