レッスン06

Gemini Canvasとツールを活用したLP作成フロー

このレッスンでは、Gemini Canvasで生成したLPのベースデザインに対し、本ツールを適用して品質を最大限に高める、プロフェッショナルな制作フローを学びます。AIによるデザイン生成から、ツールによる品質チェックと整形、そしてWordPressへの全自動投稿まで、一連の実践的スキルを習得しましょう。

1. LPに掲載する原稿を準備する

最初に、LPに掲載したいテキストコンテンツ（原稿）を準備します。この原稿をテキストファイル（.txt）として保存するか、すぐにコピー＆ペーストできるようにしておきます。

2. Gemini CanvasでLPのベースを生成・修正する

次に、準備した原稿と専用プロンプトを使い、GeminiにLPのベースとなるウェブページを生成させ、プレビューを見ながら満足のいくデザインになるまで修正を繰り返します。

  1. Geminiで「新しいチャット」を開始し、「Canvas」ボタンをクリックします。
  2. 表示されたCanvasの画面に、ツールに同梱されているz_リソース/canvas_prompts/Canvas用_資料ベースLP作成.txtの中身をすべて貼り付けます。
    ※このプロンプトには、後工程でのトラブルを未然に防ぐための、様々な技術的指示が組み込まれています。また、z_リソース/canvas_prompts/LP_Samples/フォルダには業種別のサンプルプロンプトも格納されていますので、参考にしてください。
  3. プロンプトの下に、ステップ1で準備したLP原稿のテキストを全て貼り付け（またはテキストファイルを添付し）、送信します。
  4. LPが生成されたら、プレビュー画面でPC・スマホ表示を確認し、「ボタンの色を変えて」「ここの余白を広くして」のように、具体的な指示で修正を繰り返します。

3. 【新・推奨】ページビルダーを使った一括生成フロー

本ツールには、LPや固定ページの作成に特化した「ページビルダー」機能が搭載されています。これにより、これまで複数のステップに分かれていた作業を、GUI上で完結させることができます。

  1. GUIの「ページビルダー」タブを開きます。
  2. 「1. 投稿設定」セクションで、投稿先のサイト、ページタイプ（LP）、タイトルやスラッグ（AIにおまかせも可）、投稿ステータスを設定します。
  3. 「2. コンテンツ・デザイン設定」セクションで、原稿となるテキストソースと、使用するデザインテンプレートを選択します。デザインテンプレートは、「LP用サンプル」ボタンからz_リソース/canvas_prompts/LP_Samples内のプロンプトを読み込むことができます。
  4. 画面上部の「ページを生成して投稿する」ボタンをクリックします。
  5. ツールがAIによるHTML生成からWordPressへの投稿までを全自動で行います。完了後、WordPressの管理画面で下書きとして保存されたページを確認してください。

4. 【従来フロー】ツール用の入力ファイルを準備する

Canvas上で満足のいくデザインが完成したら、そのコードをツールに入力するための「素材」として保存します。この工程は、レッスン02で学んだChrome拡張機能を使うことで大幅に自動化されます。

  1. ツールのローカルサーバーを起動：
    ツール本体の_run_gui.bat（または_run_gui.sh）を実行して、GUIコントローラーを起動しておきます。これにより、Chrome拡張機能からのデータを受信する準備が整います。
  2. design.html の自動保存：
    Geminiプレビュー右上の「共有」ボタンから「ツールに送信」をクリックします。成功のアラートが表示されれば、design.htmlがツールのinputフォルダに自動で保存されます。
  3. design.css の自動生成：
    次に、GUIの「メイン実行」タブから【C】LPコンテンツ生成ボタンをクリックします。ツールはまず、保存されたdesign.htmlを内部的に解析し、必要なCSS情報を抽出してinput/design.cssとして自動で生成します。これにより、手動でのCSSコピー＆ペースト作業は完全に不要になります。

5. 【従来フロー】ツールで品質チェックとSEO情報生成を行う

ここからが本フローの核心です。準備した入力ファイルを元に、ツールを実行してLPの品質を最大限に高めます。

  1. ツールフォルダ内の「_run_gui.bat」（macOSの場合はターミナルで「./_run_gui.sh」）を実行してGUIコントローラーを起動します。
  2. 「メイン実行」タブにある「一括実行」セクションから、【C】LPコンテンツ生成 ボタンをクリックします。
  3. ツールが自動的に「(LP用)インタラクティブ部生成」→「個別品質レポート生成」→「テキスト純度チェック」→「SEO情報生成」の一連の処理を実行します。
  4. 処理が完了すると、outputフォルダにoutput_interactive.txt、quality_report.txt、seo_info.yamlなどが生成されます。

6. 【従来フロー】品質レポートを元に最終修正を行う

生成されたoutput/reports_and_seo/quality_report.txtを開き、AIからの指摘事項を確認します。「問題あり」と指摘された箇所があれば、AIとの対話を通じて修正します。具体的な修正方法はレッスン03やレッスン05のトラブルシューティングを参考にしてください。

7. 【従来フロー】WordPressへの反映方法

方法A：手動で反映する

全てのチェックと修正が完了したら、最終成果物をWordPressに反映します。この際、ツールに同梱されているLP化用テンプレートを活用することで、ページを簡単に全幅表示にできます。手作業でのID書き換えはミスが起きやすいため、テキストエディタの一括置換機能を使うのが確実です。

  1. ページのIDを確認する：
    WordPressでLPを掲載したい固定ページ（または投稿ページ）の編集画面を開き、URLや右側パネルからページのID番号を確認します。
  2. テンプレートコードのIDを一括置換する：
    Visual Studio Code (VSC)などのテキストエディタで、ツールフォルダ内のz_リソースフォルダから、目的に合ったテンプレートファイル（例：template_固定ページLP化テンプレート.txt）を開きます。
    エディタの置換機能（Ctrl + H）を使い、ファイル内にある全ての「XXXX」を、先ほど確認したページのID番号に一括で置換します。
  3. ID置換済みのCSSを貼り付ける：
    WordPressの編集画面に戻り、ページの一番上に「カスタムHTML」ブロックを追加します。そこへ、IDの置換が完了したテンプレートのコード全体をコピー＆ペーストします。
  4. LP本体のHTMLを貼り付ける：
    続けて、その下にもう一つ「カスタムHTML」ブロックを追加し、output/for_wordpress/output_interactive.txtの中身を全て貼り付けます。
  5. SEO情報を設定する：
    output/reports_and_seo/seo_info.yamlを参考に、ページのタイトルやパーマリンクなどを設定します。
  6. 最終確認と公開：
    最後に、ページをプレビューで確認し、表示に問題がなければ公開して完了です！

方法B：全自動で反映する（推奨）

レッスン01でWordPressとの連携設定が完了している場合は、LPの生成からWordPressへの固定ページとしての投稿までを、ワンクリックで完了できます。

  1. 全自動一括実行：GUIコントローラー（_run_gui.bat、macOSの場合は./_run_gui.sh）を起動し、「メイン実行」タブの一括実行セクションから【C3】LP + WP投稿ボタンをクリックします。
  2. ツールがHTML生成からSEO情報生成までの一連の処理を自動で行った後、コマンドプロンプト上でデプロイツールが起動します。
  3. サイトと投稿内容の選択：画面の指示に従い、投稿先のサイト、使用するタイトル、スラッグを選択します。
  4. 最終確認と公開：WordPressの管理画面で、自動生成された下書き固定ページを開きます。内容を最終確認し、問題がなければ「公開」ボタンをクリックして完了です！

お疲れ様でした！このフローにより、Gemini Canvasのデザイン性と、ツールの品質保証機能を両立させた、プロフェッショナルなLP制作が可能になります。