レッスン02

入力ファイルの準備（ハイブリッド記事編）

INDEX

• 1. Deep Researchで記事原稿を作成する
• 2. Geminiでインタラクティブ部を生成する
• 3. 拡張機能でdesign.htmlを保存し、ツールでdesign.cssを自動生成する

方法A：Deep Researchのチャットを継続して生成する（デザイン重視型）

Deep Researchの結果が出たチャットをそのまま使い、ウェブページを生成する方法です。AIがリサーチの文脈を完全に保持しているため、より独創的でリッチなデザインが提案される可能性があります。

• メリット：AIが元の文脈を保持しているため、より独創的でリッチなデザインが提案される可能性があります。
• デメリット：後工程でデザインの意図しない挙動が発生するリスクがやや高い。

1. Deep Researchが完了したチャット画面で、右上にある「作成」ボタンをクリックします。
2. 表示されたメニューから「ウェブページ」を選択します。
3. Geminiがリサーチ内容を元に、自動でウェブページを生成します。デザインに満足したら、ステップ3に進みます。

方法B：新しいチャットのCanvasで生成する（安定性重視型・本講座推奨）

一度エクスポートした原稿を使い、「新しいチャット」でウェブページを生成する方法です。本講座では、後工程でのトラブルを未然に防ぎ、安定した品質のコードを得やすいため、こちらの方法を推奨します。

• メリット：後工程でのトラブルを未然に防ぎ、安定した品質のコードを得やすい。
• デメリット：AIが元のリサーチ文脈を直接参照できないため、デザインの独創性がやや劣る場合がある。

1. Geminiで「新しいチャット」を開始します。
2. プロンプト入力欄の下にある「Canvas」ボタンをクリックします。
3. 表示されたCanvasの画面に、ツールに同梱されているz_リソース/canvas_prompts/Canvas用_資料ベースLP作成.txtの中身をすべて貼り付けます。このプロンプトには、後工程でのトラブルを未然に防ぐための、様々な技術的指示が組み込まれています。
4. プロンプトの下に、先ほどGoogleドキュメントで開いたレポートのテキストを全てコピー＆ペーストします。（または、ダウンロードしたmdファイルを添付します）
5. プロンプトを送信し、ウェブページの生成を開始します。デザインに満足したら、ステップ3に進みます。

1. ツール本体の_run_gui.bat（または_run_gui.sh）を実行して、ローカルサーバーを起動しておきます。
2. Geminiのプレビュー画面右上にある「共有」ボタンをクリックします。
3. 表示されたメニューから「ツールに送信」をクリックします。成功のアラートが表示されれば、input/design.htmlが自動で保存されます。
4. 次に、ツールのGUIを開き、「メイン実行」タブにある【1】インタラクティブ・デザイン部の生成（またはLPの場合は【8】）ボタンをクリックします。
5. ツールが起動すると、まず最初にヘッドレスブラウザがinput/design.htmlを内部的に読み込み、動的に生成されたCSS情報を抽出して、input/design.cssとして自動で保存します。その後、後続の処理が実行されます。