概要
https://developers.gnavi.co.jp/entry/adventcalendar-251218-2/
詳細内容
## 【アドベントカレンダー2025】Gemini 3 Canvas × HTMLテンプレート活用術：GASを書かずに実用レベルのスライドを出力する
https://developers.gnavi.co.jp/entry/adventcalendar-251218-2/
ぐるなびのエンジニアが、Gemini 3 CanvasとHTMLテンプレートを組み合わせることで、Google Apps Script (GAS) なしで高精度なスライド資料を自動生成する手法を解説します。
**Content Type**: Tutorial & Guide
**Language**: ja
**Scores**: Signal:5/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 91/100 | **Annex Potential**: 88/100 | **Overall**: 88/100
**Topics**: [[Gemini 3 Canvas, Google スライド自動化, HTMLテンプレート, プロンプトエンジニアリング, 業務効率化]]
ぐるなびの江口氏が、Gemini 3のCanvas機能を活用して、社内テンプレートに沿った実用レベルのスライド資料をGoogle Apps Script (GAS) なしで自動生成する画期的なアプローチを共有しています。従来、AIによるスライド作成ではデザインの崩れが課題となり、GASを用いたテキストの流し込みが必要でしたが、GASのメンテナンスコストが無視できませんでした。
Gemini 3の登場により状況は一変しました。Canvas機能がHTML/CSSをレンダリングできるようになったため、これを「スライドのようなHTML」として出力させることで、GASを使わずとも、そのまま資料として利用可能なアウトプットが得られるようになったのです。著者は、この目標を達成するために以下の2段階アプローチを提案しています。
1. **画像分析によるテンプレートのHTML化**: まず、既存のGoogleスライドテンプレート（表紙、中扉、本文）の画像をGeminiに読み込ませ、「ピクセル単位で再現するHTML/CSS」に変換させます。このHTML作成時には、Googleスライドへの変換精度を高めるための重要な制約があります。具体的には、`<h1>`などの見出しタグを使用せず、`<div>`や`<p>`タグにインラインスタイルで文字装飾を施し、レイアウトには``ではなくFlexboxを使用することが推奨されています。これは、スライド変換時にタグの意味解釈による表示バグやレイアウト崩れを防ぐためです。
2. **英語プロンプトによる「厳密」指示**: Geminiが「気を利かせておしゃれなスライド」を作成してしまうのを防ぐため、プロンプトを全て英語で記述し、「Strictly（厳密に）」というキーワードを強調します。プロンプトは、Geminiの役割（Persona）、出力フォーマット（Format）、背景（Context）、具体的なタスク（Task）を明確に定義し、HTMLテンプレートへの厳密な準拠を指示することで、意図通りのスライド生成を確実にします。
この手法により、社内テンプレートのデザインを90点以上の精度で再現したスライドを、GASのメンテナンスから解放されつつ生成できるようになったと著者は強調します。ただし、テキストの折り返しや画像の挿入には、エクスポート後に手動での微調整が必要であるという現実的な課題も正直に述べています。Gemini 3の高い推論能力が、英語の厳密な指示によって情報を的確にテンプレートに流し込むことを可能にし、プロンプトの工夫だけで業務効率化が大きく進んだという筆者の考察は、生成AIを実用的な開発ワークフローに統合する上で非常に具体的な示唆を与えています。<table></table></p></div></h1>