このの記事は、Ateam LifeDesign Advent Calendar 2025 16日目の記事になります。
デザインセンスに自信のないエンジニアによる、Geminiで「カッコいいスライド」を作ろうとした奮闘記です。
1. 結論（TL;DR）と成果物
今回たどり着いた「勝ちパターン」は次のとおりです。
-
Gemini × HTML出力：
PowerPointなどのGUIツールは使わない。我々の共通言語である「HTML/CSS」としてGeminiに出力させる -
1枚ずつ生成（マイクロステップ）：
一気にスライド全部作っては失敗の元。1スライドごとに「生成→プレビュー→修正」を繰り返すアプローチによりクオリティを担保する -
最後はPuppeteerでPDF化：
HTMLをブラウザレンダリングのままPDF化して、デザイン崩れを防ぐ
※ 2つの資料に関しては、登壇者に変わって資料を作りました。そのため名前は伏せていいます。
成果物
2. 「カッコいい資料」が作りたい
きっかけは、社内LTへの登壇でした。
普段の私は、デフォルトのテーマに箇条書きを並べただけの、簡素なスライドを作成しています。しかし今回のLTは少し気合を入れたい。端的にいうと 「ちょっと小洒落た登壇資料が作りたい」。
しかし、私にはデザインスキルがありません。センスもない。
そこで立てた作戦がこれです。
「今どきのAIエージェントなら、俺のセンスのなさをカバーして、勝手にいい感じにしてくれるんじゃないか。」
この楽観的な他力本願から、すべては始まりました。
3. パートナー選定を兼ねた骨子づくり
まずはスライドの構成（骨子）作りです。ここではClaude（Opus 4.5）とGemini 3.0 Proの両方に同じプロンプトを投げて比較実験を行いました。
- Claude：論理的で破綻がない。教科書どおりで優等生。
- Gemini：ちょっと表現がエモーショナルで、アイデアの広がり方が面白い。
自分の感覚にフィットしたGeminiの案を採用しました。ここで「Geminiを相棒（クリエイティブ担当）にする」と決めたことが、後の展開に大きく影響します。
4. いざ本番、そして散る
構成が決まったので、意気揚々とスライド生成に入りました。しかし、ここで最初の壁にぶち当たります。
試行1：Gemini Canvas（スライド生成機能）
Gemini Canvasでスライドを作ってみました。確かにスライドにはなります。しかし、漂う 「これじゃない感」。なんかデザインがイケてないのです。
試行2：NotebookLM
次に、資料を読み込ませてNotebookLMで解説資料を作ってみました。内容は完璧です。しかし、ここでも漂う 「これじゃない感」。
そして、最大の問題は、修正ができないことでした。
PDFや画像として出力されてしまうと、誤字一文字直すのにも生成し直しです。当然、挿絵やレイアウトの微調整などできるはずもありません。
5. 気づき（ブレイクスルー）
行き詰まった私は、ふと考えました。
「いきなり最終成果物を一気に作ろうとするのが良くないのでは。」
「中間成果物をHTML&CSSで出力させれば、デザインの質を担保しつつ、手直しも簡単にできるのではないか」
これがブレイクスルーでした。
Geminiに対して、「スライドを作って」ではなく、試しに次のように指示を変えました。
「この構成の内容を、1ページずつ、Tailwind CSSを使ったモダンで洗練されたHTML（16:9）として出力して。デザインはMaterial UI風にシンプルで」
出てきたコードをCanvasで開いた瞬間、ガッツポーズが出ました。
「これだ。めっちゃカッコいい。」
コードベースであれば、Geminiへの指示も正確にとおります。「背景をもう少しダークに」「h1のフォントサイズを3remに」といった指示が、CSSとして即座に反映される。
1ページずつ「生成 → レビュー → 修正指示」を繰り返し、スライドという名のHTMLファイルを量産していきます。
6. 新たな壁：配布どうする問題
HTMLで最高のスライドができました。アニメーションもCSSでヌルヌル動きます。
しかし、現実に引き戻される課題が発生します。
「で、この最高なHTMLをどうやって配布用・登壇用の資料にするの。」
- HTMLファイルを送る → 画像パスが切れるし、相手がブラウザで開く手間がかかる
- HTMLをGASに変換して、Googleスライドで実行 → 実行時エラーが多すぎて使い物にならない
- GeminiにPDF変換を依頼 → レイアウト崩壊した謎ファイルが生成される
ただ、ここに関しては社内LTということもあり、いったん「登壇時は自分のPCでHTMLをブラウザ表示すればいいや」と問題を先送りしました。
7. いったん、まとめ
この手法のメリデメです。
メリット・デメリット
メリット：
- デザインの質：それっぽいインフォグラフィックなデザインのスライドが作れる
- 柔軟性：CSS変数を1つ変えれば、全体のトーン＆マナーを一瞬で変更可能
- 指示の出しやすさ：CSSのクラス名やHTMLタグを指定することで、AIエージェントに正確に指示が出せる
デメリット：
- 時間がかかる：ページを1枚ずつ作る＝AIエージェントとのラリーが増えるので、一括生成と比べてどうしても時間がかかる
- 配布用資料の問題：HTMLファイルなのでローカル以外の取り扱いが面倒
8. 配布用資料をどうしたか
登壇はHTMLで乗り切れますが、結局、どうしてもきれいなPDFにしたかった私は、最後の手段に出ました。
「HTMLのレンダリング結果をそのままPDF化すればいい。そう、Puppeteerだ。」
しかし、自分でスクリプトを書くのは面倒です。そこで、もう一人の相棒・Claude Codeの出番です。
私：「Puppeteerを使って、全スライドを一括でPDF化するスクリプトを作成して。レンダリング待ち時間を考慮してね」
数秒後、完璧なPDFが生成されました。
ブラウザの見た目そのまま、1pxのズレもない美しいPDFです。
9. 結論
デザインツールを使わずとも、コードベースのアプローチでモダンなスライドは作れます。
「GeminiにHTMLでスライドを作らせる」。これが、デザイン苦手エンジニアが見つけた2025年の最適解でした。
ここまで長文にお付き合いいただき、ありがとうございました。
「すごい！真似してみよう！」と思ってくださった奇特なエンジニアの皆様。
最後に、今回の試行錯誤を経てたどり着いた 「真理」 をお伝えして締めくくりたいと思います。
そうです、 Genspark に課金したらこんな苦労をしなくてすみます。
正直、始める前から薄々感づいてはいました。
でも、エンジニアの意地が勝ってしまったのです。
現場からは以上です。
よい年末を。