はじめに
インプルの岩崎です。
今日はAIでスライド作成させるなら、HTMLが最強って話です。最強でした。
AIが作るスライド
最近、他社さんのお話しを聞く機会があって、Geminiでスライド作りました！という話を聞きました。非常にクオリティーが高く、内容がよくまとまっていたんですね。完成度が高く感動しました。
試しに1枚作ってみましたが、こんな感じでHTMLでうまく作ってくるんです。
そこでふと、これ、自分で作れないかな・・・と思ったわけです。
調べてみると、HTMLとCSSで作れば、デザインも良く完成度も高そうなスライドが作れそうなことがわかりました。スライド1枚を、HTMLで作って文言を入力し、CSSでデザインを整えてしまうというものです。
ちなみに、前回はSVGで編集可能なデザインデータを作ることもしました。今回のスライドは、IllustratorやFigmaで編集することがないので、SVGにする必要はありませんが、似たような内容の記事ですので、よければご覧ください！
今回は、とりあえずスライドをAIで作れる最低限の形を目指して、作ってみました。
作ってみよう！
ファイル構成
今回は最小ファイル構成として、スライドの雛形になるHTMLファイル、スライドをつくるPythonファイル、LLMのAPIキーを格納しておく.envファイルがあればできそうなことがわかりました。
template.html ← テンプレートスライド（HTML＋CSS構造）
main.py ← GPTに問い合わせて内容を生成し、テンプレに埋め込むPythonスクリプト
.env ← OpenAI APIキーを格納template.html
このファイルには、スライドのデザインを入れていきます。
今回は最小限のAIスライド制作プログラムということで、汎用的なスライドデザインを1つだけ設定します。今回は会社の資料でも使いそうな汎用的なデザインにしてみました。
{{ slide.title }} や {{ slide.body }} には、LLMで考えさせたテキストを流し込むようにします。つまり、テキストの配置もこれで柔軟にできますね。（逆を言えば、スライドごとにテキストの位置をたくさん変えるとなると、苦手かも知れませんが・・・）
CSSを完全に理解していれば、とても自由に配置もデザインも作ることができますね。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Slide Deck</title>
<style>
body {
margin: 0;
font-family: 'Helvetica Neue', sans-serif;
background-color: #f5f7fa;
}
.slide {
width: 1280px;
height: 720px;
margin: 40px auto;
background: white;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 40px 60px;
box-sizing: border-box;
}
.slide h1 {
font-size: 2.4rem;
color: #333;
margin-bottom: 1.2rem;
}
.slide p {
font-size: 1.1rem;
line-height: 1.6;
color: #555;
flex-grow: 1;
}
footer {
background-color: #0074D9;
color: white;
padding: 10px 20px;
border-radius: 0 0 16px 16px;
font-size: 0.9rem;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
</head>
<body>
{% for slide in slides %}
<div class="slide">
<div>
<h1>{{ slide.title }}</h1>
<p>{{ slide.body }}</p>
</div>
<footer>
<span>© 2025 Onion Project</span>
<span>Slide {{ loop.index }}</span>
</footer>
</div>
{% endfor %}
</body>
</html>ちなみに、今回のAIスライド制作プログラムでは、ここが今回の要になります。スライドの用途に応じてデザインを使い分けたいときは、ここにいくつか登録しておくことで、使うことができそうです。
まずは最低限のプログラムを目指しますので、今後拡張性があれば作っていきたいと思います。
main.py
ここでは、LLMとHTMLに流し込む処理を作っていきます。
LLMへプロンプトを受け渡し、スライドの内容を考えてもらい、考えた内容をjson形式で書き出してHTMLを完成させていきます。早速、作ってみましょう！
今回渡すプロンプトは、特に思いつかなかったので、たまねぎについてのスライドを作ってもらうことにしました。適当にLLMでスライドを生成するためのプロンプトを考えてもらいます。
プロンプトは改行を入れてしまうと、CLI上でうまく読み込まれなくなるので、ここでは1行で全て書いてしまいます。
テーマは「国産たまねぎを使った新しい価値提案」です。スライドは6枚構成で、1枚目がタイトル、2枚目が市場背景、3枚目が特徴、4枚目が差別化、5枚目がターゲット、6枚目がまとめ。トーンはビジネスプレゼン風で簡潔に。LLMは、今回はGPT-4o-miniを使います。
プロンプトを受け取り、内容を生成させてからHTMLのスライドへ仕上げていきます。
import os
from openai import OpenAI
from jinja2 import Template # テンプレ埋め込み用（pip install jinja2）
from dotenv import load_dotenv # pip install python-dotenv
# APIキー読み込み
load_dotenv()
client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
# --- 1 プロンプトを受け取る ---
prompt = input("スライドのテーマや構成を指示してください：\n")
# --- 2 GPTにスライド内容を生成させる ---
response = client.chat.completions.create(
model="gpt-4o-mini",
messages=[
{"role": "system", "content": "あなたはスライド構成のプロです。"},
{"role": "user", "content": f"""
次の指示に基づいてHTMLスライド用のコンテンツを生成してください。
出力はJSON形式で、各スライドに title と body を含めてください。
指示：{prompt}
"""}
]
)
# --- 3 GPTの出力を解析 ---
import json
raw_output = response.choices[0].message.content.strip()
try:
# GPTの返したコードブロック（```json ... ```）を除去
if raw_output.startswith("```"):
raw_output = raw_output.strip("`").replace("json", "").strip()
data = json.loads(raw_output)
# 「slides」キーで包まれている場合の対応
if isinstance(data, dict) and "slides" in data:
slides = data["slides"]
else:
slides = data
except json.JSONDecodeError:
print("⚠️ JSONの読み取りに失敗しました。出力内容を確認します：")
print(raw_output)
exit()
# --- 4 HTMLテンプレートを読み込み ---
with open("template.html", "r", encoding="utf-8") as f:
html_template = f.read()
template = Template(html_template)
rendered_html = template.render(slides=slides)
# --- 5 テンプレートにスライドを挿入 ---
template = Template(html_template)
rendered_html = template.render(slides=slides)
# --- 6 出力ファイル保存 ---
with open("output.html", "w", encoding="utf-8") as f:
f.write(rendered_html)
print("✅ output.html を生成しました！")これを実行することで、output.htmlが出力され、先ほどのテンプレートに当てはめられたスライドが完成できるはずです。
実行してみよう
それでは実行してみます。
CLI上では特に面白味はありませんが、問題なく実行されoutput.htmlができたよ、と教えてくれました。
(venv) pc-name slide-AI % python main.py
スライドのテーマや構成を指示してください：
テーマは「国産たまねぎを使った新しい価値提案」です。スライドは6枚構成で、1枚目がタイトル、2枚目が市場背景、3枚目が特徴、4枚目が差別化、5枚目がターゲット、6枚目がまとめ。トーンはビジネスプレゼン風で簡潔に。
✅ output.html を生成しました！すると、ちゃんとテンプレートに従って表示されました。素晴らしい！
余白が多めなのは気になるところですが、AIでスライドを作らせるプログラムの可能性を感じる結果となりました。
ちなみに、スライドはスクロールによって次のスライドへ行くことができます。
Geminiのスライドを見たときは、この切り替えもアニメーションが入ったりしていたので、今後の拡張性としてそのあたりができるようになるといいですね。
ページ番号などもしっかりと振られていて、いい感じにできていました！
HTML最強
HTMLのバランスの良さ
スライド作成というと、パワーポイントの拡張子であるpptx形式で書き出したくなると思いますが、デザイン性やテキストの内容を深めるのであれば、試作したようなHTMLが実は最強そうです。
バイナリ構造が複雑なパワーポイントは、AIが直接理解をするのが難しいので、HTMLが実はバランスがちょうど良いのです。
CSSがあることでのデザイン性
また、CSSがあることでデザイン性にも集中することができます。もちろん、内容もある程度人間が考える必要がありますが、AIが情報をうまくまとめてくれるのであまり負荷を書けなくて良いのです。
人間の美的センスを大切にしながら、スライドを作成できるのも、HTML + CSSというwebの構造があるからです。
今回使用したJinja2のようなテンプレートエンジンを使えば、スライド構造をテンプレート化して再利用できます。こうすることで、AIが出すのは単なるJSONデータ（構造情報）だけでOKで、HTML側は見た目を変えずに何度でも再生成できます。
フォーマット変換の柔軟性
また、HTMLをベースにしておくことでのメリットもたくさんあります。作ったスライドは下記のように、用途に応じて変換することも可能です。
- PDF（ブラウザの印刷機能や
reportlab） - PPTX（python-pptxなどで変換）
- Canva / Figma（HTML to SVG経由で読み込み）
- Web公開スライド（そのままホスティング）
つまりHTMLは「どの方向にも展開できる中間言語」ですので、AIでHTMLスライド生成→必要な形に変換、というフローが作りやすいのです。
おわりに
いかがだったでしょうか？
Geminiのスライドには及びませんが、今後拡張していくことでそこまで目指せそうなAIスライド制作のプログラムができました。
今回のポイントはHTMLで、これをどれだけ使いこなすことができるかが、鍵になってきそうです。AIの作るものを自由にグラフィカルに表現するには、やはりHTMLが最強ですね。今後も極めたいと思います！
今回のプログラムはGitHubにもありますので、皆さんもHTMLを極めて、よいAIスライドライフをお過ごしください。
記事の中でも何個か拡張できそうな機能があったので、今後の課題として取り組んでみたいと思います！
ご覧いただき、ありがとうございました。