はじめに
こんにちは、ぐるなびの江口です。
ついに登場したGemini 3、皆さんはもう試されましたか？
Google独自のTPUを活用した処理速度もさることながら、新機能のCanvasが非常に強力です。
今回は、このGemini 3とCanvasを使って、「社内テンプレートのデザインに限りなく近づけ、実用十分な"90点"を目指してスライド資料を完全自動生成する」という試みについて共有します。
これまでGoogle Apps Script (GAS) を書いて行っていた転記作業が、プロンプト一つで不要になった、というお話です。
この記事でわかること
- Gemini 3のGem + Canvasによるスライド作成の進化。
- 従来の「GAS転記」プロセスからの脱却。
- デザイン崩れを防ぐ「画像分析HTML化」と「英語プロンプト」のテクニック。
背景：これまでのスライド作成の悩み
以前まで、社内テンプレートに沿った資料作成をAIで効率化しようとすると、どうしても以下の工程が必要でした。
- Geminiに構成とテキストを考えてもらう。
- 出力されたテキストを、Google Apps Script (GAS) を使ってGoogleスライドの所定の位置に流し込む。
- Geminiに直接「このテンプレートでスライドを作って」と頼んでも、デザインが崩れたり、勝手なレイアウト変更が行われたりして、実用レベルにはならなかったためです。GASによる「流し込み」は確実ですが、スクリプトのメンテコストがかかるのが難点でした。
Gemini 3で起きたブレイクスルー
しかし、Gemini 3の登場で状況が変わりました。 Canvas機能を使うと、プレビューを見ながらHTML/CSSをレンダリングできます。これを利用し、「スライドのようなHTML」を出力させれば、GASを使わずとも、そのまま資料として使えるレベルのアウトプットが得られるようになったのです。 とはいえ、単純に「このスライドテンプレートを使って作成して」と指示するだけでは、やはりまだうまくいきません。そこで試行錯誤の末にたどり着いたのが、以下の2段階アプローチです。
手順1：画像分析によるテンプレートのHTML化
まず、GeminiにGoogleスライドの社内テンプレート（表紙、中扉、本文）の画像を読み込ませ、それを「ピクセル単位で再現するHTML/CSS」に変換させました。
- タイトルスライド用HTML
- セクションタイトル（中扉）用HTML
- メインコンテンツ（見出し＋本文）用HTML これらを「部品（Components）」として定義します。
【重要】HTMLテンプレート作成時の技術的制約
Googleスライドへの変換精度を高め、トラブルを防ぐために以下の点に注意してHTMLを作成させる必要があります。
<h1> 等の見出しタグは使用しない
Googleスライドへエクスポートした際、<h1> などのタグを使用していると、スライド側で「タイトル」や「見出し」として解釈されようとします。その結果、タグの意味上のテキストと実際の表示テキストが二重に出力されてしまい、同じ文言が2回表示されるバグの原因になります。 これを防ぐため、見出しであっても汎用的な <div> タグや <p>（段落）タグを使用し、フォントサイズや太さは style="font-size: 32px; font-weight: bold;" のようにインライン style 属性で直接指定します。
レイアウトはFlexboxを使用する
<table> タグを使用したレイアウトは、スライド変換時に崩れやすいため避けます。配置の制御には CSS Flexbox (display: flex;) を使用することで、意図通りのレイアウトを維持できます。
手順2：英語プロンプトによる「厳密」指示
ここが最大の肝です。 日本語で「このHTMLを使って」と指示しても、AIは気を利かせてオシャレなスライドを作成し始めます。今までのレイアウトのやり取りは何だったのか… また、日本語を内部で英語に変換しているという仕組みと聞いたので ブレをなくすため、プロンプトを全て英語にし、「Strictly（厳密に）」というキーワードを強調しました。 実際に使用し、成功したプロンプトがこちらです。
実際に使用したプロンプト（英語）
以下をGeminiのCanvasに入力します。テンプレート部分は、手順1で作成した社内独自のHTMLに置き換えています。 日本語をGeminiに英語変換してもらいました。
ここで指示に必要な4つの要素を定義・記述していきます。
- ペルソナ
- タスク
- コンテキスト
- フォーマット
まずGeminiの役目を定義してあげます。
主に指定したガイドラインを厳守して要求されたコンテンツをHTMLへ出力するよう指示します。
#persona You are an assistant that generates HTML documents and Google Slides presentations within the Canvas interface, according to specific style guidelines. Please strictly follow the guidelines below to configure and output the requested content as a single HTML file, which will then be used to export to Google Slides. Your output MUST prioritize and strictly adhere to the specific structures AND styles (e.g., inline styles, Tailwind CSS classes if present) defined within those template HTML blocks above all other instructions.
フォーマットについても定義します。
HTMLテンプレートの内容を厳守するよう指示します。
#format Common Definition: You must strictly adhere to the font, color, font size, background, and layout defined in each specific HTML template (e.g., Title Slide Template) in the #SLIDE_COMPONENT_TEMPLATES section. Slide Generation Rules: Title Slide: The first slide MUST be the Title slide. Generate this slide by analyzing the content and structure of the "Title Slide Template" defined in the #SLIDE_COMPONENT_TEMPLATES section. Section Title Slides: When creating a section title slide, generate it by analyzing the content and structure of the "Section Title Template" defined in the #SLIDE_COMPONENT_TEMPLATES section. Main Content Slides: When creating a main content slide (body text), generate it by analyzing the content and structure of the "Main Content Template" defined in the #SLIDE_COMPONENT_TEMPLATES section.
背景を説明します。
ここではなぜそうしたいのかを記述します。 たとえば『収集した情報をテンプレートで定義された構造の中に配置することです』などです。
#context
Here are the specific instructions:
You will receive a request from the user, such as "Create Google Slides about {Topic}".
You will analyze the user's request, gather the necessary information about the {Topic}, and divide the content into multiple slides (sections).
You will then generate the HTML for each slide based strictly on the templates in #SLIDE_COMPONENT_TEMPLATES.
Your task is to place the gathered information into the structures defined by the templates (e.g., replacing the inner text of the main title div or <div class="section-title">Section Title</div> with the actual content).
You MUST NOT arbitrarily use HTML tags unless they are part of the exact structure defined in the corresponding template (e.g., "Title Slide Template") in the #SLIDE_COMPONENT_TEMPLATES section.
Structure each slide section by applying the class names found in the templates, adding a sequential number (e.g., <div class="slide-container title-slide-01 ...">).
タスクを定義します。
ここではHTMLを作成するためのステップを指示します。
#Task: Generate the Complete HTML Output
Your sole task is to generate a single, complete HTML file based on the user's {Topic}. This file must be a valid HTML5 document that wraps all the slide components for correct previewing.
Step 1: Plan the Slide Deck.
Analyze the user's {Topic} and the requested number of slides.
Create a slide-by-slide plan. This plan MUST include:
Slide 1: Title (Uses "Title Slide Template")
Slide 2: Agenda (Uses "Main Content Template")
Slide 3: Section 1 (Uses "Section Title Template")
Slide 4: Content 1.1 (Uses "Main Content Template")
...
Final Slide: Conclusion/Summary
Step 2: Generate HTML for Each Slide.
You MUST iterate through your plan from Step 1.
Populate the template by replacing the placeholders with your generated content.
This process MUST result in a collection of multiple <div class="slide-container">...</div> blocks.
Step 3: Concatenate and Build Final HTML.
Take all the generated <div class="slide-container"> blocks and insert it into the placeholder within the #HTML_SKELETON template.
HTMLの記述でテンプレートを定義します。
#HTML_SKELETON (ここにHTMLの骨組みを記述) #SLIDE_COMPONENT_TEMPLATES (ここに画像分析で作成した、社内テンプレートのHTML部品を記述)
Googleスライドへのエクスポート手順
上記のプロンプトを実行すると、Canvas上にHTMLベースのスライドが生成されます。 この時点ではまだ「スライド風のHTML」ですが、最後に以下の言葉をGeminiに投げかけることで、Googleスライド化が完了します。
「このHTMLをスライドデッキプレビューへエクスポートしてください」
もしくは
「Googleスライドにエクスポートしたいのでスライドへエクスポートしてください」などエクスポート指示をしてください。
*1
この指示により、HTMLがGoogleスライドへエクスポート可能な形式（スライドデッキプレビュー）に変換されます。あとは画面の指示に従ってスライドエクスポートボタンを押し、Googleスライドにエクスポートすれば完成です。
*2
運用のポイント：エクスポート後の微調整
今回のアプローチは非常に強力ですが、完璧な「100点」を一発で出すものではありません。以下の点は手動での調整が必要です。
テキストの折り返しの修正
HTMLのレンダリング結果とGoogleスライドのテキストボックスの仕様には微細な違いがあるため、出力結果によってはフォントが意図しない箇所で折り返されることがあります。 これらはエクスポート後に、手動でテキストボックスの幅を調整したり、改行位置を直したりする必要があります。
画像の挿入
この手法ではレイアウトの構造化に特化しているため、具体的な画像（写真やイラスト）をHTML内に自動で生成して組み込むことはできません。 画像が必要な箇所については、Googleスライドへエクスポートした後に、Geminiの拡張機能などを使用してスライド毎に画像を入れたり、手持ちの画像を挿入したりする作業が必要です。
結果とまとめ
この手法により、社内テンプレートのデザイン（色、フォント、ロゴ配置）が90点以上の精度で再現されたスライドを一発で生成できるようになりました。
Gemini 3の高い推論能力により、英語の指示であっても「どの情報をどのテンプレートに流し込むべきか」を的確に判断してくれます。 GASのメンテから解放され、プロンプトの工夫だけでここまで業務効率化できるようになったのは、Gemini 3の大きな進化だと感じています。
皆さんもぜひ、自社のテンプレートを「h1タグなし・Flexbox構成」でHTML化して、Gemini 3に厳密な指示を出してみてください。
