はじめに
みなさんこんにちは。インプルの岩崎です。
今回は前回のHTMLを使ったAIスライドの続きです。まだ初回をご覧になっていない方、ぜひご覧ください。
機能を拡張させる
さて、前回は、作りたいスライドの内容を入力すると、AIが文章を考え、それをHTMLに当てはめることで、デザイン性の高いスライド制作が可能になるという内容でした。
前回の内容ができることで、色々と機能が拡張できる！ということで、今回はさらにHTMLを駆使して、スライドの内容をより機能的にし、構成をしっかりとさせていきたいと思います。
今回の目的
さて、今回の目的は、スライドの構成をよりしっかりさせることです。
スライドには、目次や本文、表紙など、さまざまなスライドがありますよね。スライド作りの代表アプリでもある、パワーポイントにも、スライドの内容を選択して新しいスライドをつくれるようにできています。
今回は、この機能をこのAIスライドで作れないかなと考えているわけです。
拡張する機能
そこで今回は、入力された内容と選ばれたテイストから、スライドを作るプログラムを作ります。
具体的には、HTMLでデザインパターンやテキストの配置パターンを増やすことで、そのスライドに応じたデザインや配置をAIに選ばせてスライドを作成できるようにします。
これにより、今回の目的であるスライドの構成をしっかりできないかなと考えているわけです。早速やってみましょう！
今回の技術ポイント
今回のポイント（おさらい）
今回のAIスライド作成では（前回もそうですが）、パラメータ的な変数が一番のポイントになってきます。
たとえば、今回のAIスライドでユーザーの入力からプロンプトへ受け渡すときは、{theme} {slide_count} {tone} {text} というパラメータ的変数を使用しています。これらはそれぞれ、スライドのテーマ（内容）、枚数、テイスト、1スライドあたりの本文量を聞いています。
ここで聞かれたパラメータ的変数は、次のプロンプトで受け渡されて使用されています。
あなたはプレゼン資料を設計するAIです。
以下の条件で、スライド構成をJSON形式で出力してください。
---
テーマ: {theme}
スライド枚数: {slide_count}
テイスト（文体・語調）: {tone}
1スライドあたりの本文量: {text}
type は以下のいずれかを含めてください：
- "title"（表紙）
- "toc"（目次）
- "content"（本文）
- "summary"（まとめ）
~~~~~~~~~~また、プロンプトにはAIの出力フォーマットを次のように指定しており、、、
~~~~~~~~~~
出力フォーマット：
{{
"slides": [
{{"type": "title", "title": "スライドタイトル", "body": "本文"}},
...
]
}}
~~~~~~~~~~~これが、下記のような jinjaテンプレートに当てはめられ、スライドが完成するというわけです。
<body class="{{ theme }}">
{% for slide in slides %}
{% include slide.type + ".html" %}
{% endfor %}
</body>このように、ユーザーの入力をテンプレート的変数で受け渡しながら、うまくスライドを生成しているわけです。
スライドのテンプレートを増やす
上記のようなテンプレート的変数を使って、スライドのテンプレートを増やします。今回はここに1つのベースと4つのテンプレートを用意しました。
この仕組みは、HTMLテンプレートを「共通部分（骨格）」と「可変部分（デザイン差分）」に分ける構成になっています。
base.html（共通レイアウト）
├─ title.html ← 表紙スライド
├─ toc.html ← 目次スライド
├─ content.html ← 本文スライド
└─ summary.html ← まとめスライドbase.html
- 全体のHTML構造を定義（doctype, head, body など）
- CSSの共通スタイルを提供（背景・サイズ・フォントなど）
- 各スライドをループで呼び出し、
typeに応じてテンプレートを差し込む
{% for slide in slides %}
{% include slide.type + ".html" %}
{% endfor %}この1行が 「どのデザインスライドを使うか」を自動的に判断 してくれます。たとえば、AIが出力した "type": "title" なら title.html が、"type": "content" なら content.html が読み込まれるような仕組みです。
title/toc/content/summary.html
- 各スライドタイプの「レイアウト」や「装飾」を定義
- base.htmlの中に動的に差し込まれる“中身のパーツ”
| ファイル名 | 位置づけ | 内容例 | デザイン特徴 |
|---|---|---|---|
title.html | 表紙 | ブランド名・テーマ | 中央寄せ・大きなタイトル・背景グラデーション |
toc.html | 目次 | 全体構成 | 見出し＋リスト形式 |
content.html | 本文 | 各トピック詳細 | 左寄せ・余白多め・可読性重視 |
summary.html | まとめ | 結論・展望 | 落ち着いた背景・締めくくり向け配色 |
どのスライドを使うか自動的に判断された後は、それぞれのスライドデザインの方に当てはめられます。そして、その中のテンプレート的変数にAIが考えた文字が格納されるようになっています。
つくってみよう
それではこれらの技術を使ってAIスライド制作プログラムを作ってみましょう！
main.pyの処理
main.pyの処理は、CLIの入力を受けて動くようになっています。
入力された情報はAIのプロンプトへ格納され、GPTの処理によって jsonデータとして出力されます。出力されたデータはHTMLレンダリングで処理され、スライドへ文字が入力される形です。入力されたスライドは、htmlファイルとして出力される流れです。
# ==== CLI入力 ====
print("🧠 スライド自動生成システム：Phase 2")
theme = input("生成したいスライドの内容を入力してください：")
slide_count = input("スライド枚数をおおよそ指定してください（例：5枚程度, 10枚程度）：")
tone = input("テイストを選択してください（例：ビジネス / カジュアル / ナチュラル）：")
text = input("スライドの文章量を生成してください（100文字程度, 200文字程度,・・・）：")
# ==== GPTプロンプト ====
prompt = f"""
あなたはプレゼン資料を設計するAIです。
以下の条件で、スライド構成をJSON形式で出力してください。
---
テーマ: {theme}
スライド枚数: {slide_count}
テイスト（文体・語調）: {tone}
1スライドあたりの本文量: {text}文字程度
type は以下のいずれかを含めてください：
- "title"（表紙）
- "toc"（目次）
- "content"（本文）
- "summary"（まとめ）
出力フォーマット：
{{
"slides": [
{{"type": "title", "title": "スライドタイトル", "body": "本文"}},
...
]
}}
注意：
- 内容に対してスライド枚数が不自然に多い場合は、無理に枚数を合わせず、適切な構成に調整してください。
- 必ず有効なJSON形式で出力してください。
- 各スライドの本文は1スライドあたりの本文量に合わせて生成してください。
"""
# ==== GPT呼び出し ====
print("\n🤖 スライド構成を生成中...")
response = client.chat.completions.create(
model="gpt-4o-mini",
messages=[
{"role": "system", "content": "あなたは構成設計が得意な資料作成AIです。"},
{"role": "user", "content": prompt}
],
temperature=0.7
)
# ==== JSON解析 ====
try:
slides = json.loads(response.choices[0].message.content)["slides"]
except Exception as e:
print("⚠️ JSONの解析に失敗しました。出力内容を表示します：")
print(response.choices[0].message.content)
exit()
# ==== スライド数制限 ====
if len(slides) > 20:
print("⚠️ スライドが多すぎるため、20枚までに制限します。")
slides = slides[:20]
# ==== HTMLレンダリング ====
env = Environment(loader=FileSystemLoader("./templates"))
template = env.get_template("base.html")
rendered = template.render(slides=slides)
# ==== 出力 ====
output_path = "output.html"
with open(output_path, "w", encoding="utf-8") as f:
f.write(rendered)
print(f"\n✅ スライド生成が完了しました！ → {output_path}")base.html + title/toc/content/summary.html の中身
base.htmlでは、全てのスライドのベースになっており、全体のHTML構造を定義しながら、CSSの共通スタイルを提供しています。各スライドをループで呼び出し、type に応じてテンプレートを差し込むようになっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>AIスライド生成</title>
<style>
body {
font-family: "Helvetica Neue", Arial, sans-serif;
background: #f5f7fa;
color: #222;
margin: 0;
padding: 0;
}
.slide {
width: 1280px;
height: 720px;
margin: 40px auto;
background: white;
border-radius: 16px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
background: #007BFF;
color: white;
text-align: center;
font-size: 14px;
padding: 8px 0;
}
</style>
</head>
<body>
{% for slide in slides %}
{% include slide.type + ".html" %}
{% endfor %}
</body>
</html>このほかのhtmlファイルに関しては、詳細なデザインが記載されており、各スライドタイプの「レイアウト」や「装飾」を定義されています。base.htmlの中に動的に差し込まれる“中身のパーツ”になります。
実行してみよう
(venv) username filename % python3 main.py
🧠 スライド自動生成システム：Phase 2
生成したいスライドの内容を入力してください：玉ねぎについてのスライド
スライド枚数をおおよそ指定してください（例：5枚程度, 10枚程度）：10
テイストを選択してください（例：ビジネス / カジュアル / ナチュラル）：ビジネス
スライドの文章量を生成してください（100文字程度, 200文字程度,・・・）：300
🤖 スライド構成を生成中...
✅ スライド生成が完了しました！ → output.htmlCLI上ではこんな感じで動かして生成してみます。
玉ねぎについてのスライドを10枚程度でビジネスっぽく300文字で生成してもらいました。
このような形で、用途に応じてスライドのデザインがうまく変更されているようです！
おわりに
いかがだったでしょうか。
内容に応じて適したパターンのスライドデザインを採用することができました。
事務的なスライドであれば、パターンをいくつか作ることで「全てAIで生成する」ということはできそうです。今後、その辺りの実装もしてみようと思います。
今回のプログラムもGitHubに格納されていますので、いろいろなスライドを作って遊んでみてください！
ご覧いただき、ありがとうございました。