Lesson 04：Gemini Canvas
直感的WebデザインとWordPress実装

「頭の中にあるデザインを形にするのに、HTMLやCSSの勉強から始める必要はない」
これがAI時代の新しい常識です。

このレッスンでは、Googleの「Gemini Canvas」機能と、本ツールの連携機能を使い、デザインからWordPressへの実装までを最短距離で完結させるフローを習得します。

1. 事前準備：連携機能の有効化

Geminiで作ったデザインをワンクリックでツールに取り込むための準備をします。

Chrome拡張機能のインストール

1. Chromeで chrome://extensions を開く。
2. 右上の「デベロッパーモード」をONにする。
3. 「パッケージ化されていない拡張機能を読み込む」を押し、Hybrid-Article-Generator/z_リソース/browser_extension フォルダを選択する。

WordPressプラグインの導入

テーマ（Cocoon等）のデザイン崩れを防ぐための専用プラグインです。

1. WordPress管理画面「プラグイン」→「新規追加」→「アップロード」。
2. Hybrid-Article-Generator/z_リソース/wordpress_plugin/Cocoon 内の gemini-canvas-integrator.zip をアップロードして有効化。

2. 実践：LP制作ワークフロー

• Canvasでデザインを生成

  Geminiで「新しいチャット」を開き、「Canvas」を選択します。
  ツール内の z_リソース/canvas_prompts/_プロンプト_Canvas用.txt の内容を貼り付け、その下にあなたのLP原稿（テキスト）を入力して送信します。

  プレビュー画面を見ながら、「ボタンを赤くして」「もっと余白を広げて」と指示を出し、デザインを完成させます。

• ツールへ送信

  1. ツールの _run_gui.bat を起動しておきます。
  2. Gemini画面右上の「共有」→「ツールに送信」をクリックします。
  これでHTMLデータが自動的にあなたのPCに取り込まれます。

• 整形・WordPress投稿

  ツールのGUI画面で、【C3】LP + WP投稿 ボタンを押します。

  何が起きているか？
  ツールがHTMLを解析し、CSSを抽出・整形し、SEO情報を生成した上で、WordPressの「Gemini LP」として全自動で下書き投稿まで完了させます。
• 画像の差し替え（一括処理）

  LP内のダミー画像を、本番画像（Lesson 03で作った画像など）に差し替えます。
  画像を input/image フォルダに入れ、GUIの「画像一括アップロード＆SEO設定」を実行すると、全画像がWPにアップロードされ、差し替え準備が整います。

これで「デザインの器」は完成しました。
次はこの器に流し込む「高品質なテキストコンテンツ」を、AIライターを使って量産していきます。