はじめに
インプルの岩崎です。
今日は前回から2回記事を投稿しているAIスライドの内容です。まだご覧になっていない方はぜひご覧ください！
内容をしっかり作りたい
これまでは、AIでスライドを作らせるために、HTMLでデザインを重視したスライドを作らせたり、HTMLのテンプレートを増やしてさまざまな配置に対応させたりしました。しかし、CLIからの入力にしか対応していないので、1ページごとの詳細なスライド設計はできませんでした。
せっかくスライドのテンプレートも充実しているのに、中身がしっかり作れないのは勿体無い・・・。
そこで目をつけたのが、JSONファイルです。
JSONファイルで内容を伝える
内容をしっかり熟成させるためには、LLMを使えばあっという間です。
しかし、いざLLMで内容をしっかりと考えても、スライド化するときにうまくデザインが整わない、思った通りのスライドにならない・・・。という課題を解決するのがこのAIスライドでした。
そこで、何かしらの形でデータを渡せればいいと考え、JSONに目をつけたのです。
Markdownだとダメ？
AIと聞くと、ついついMarkdownファイルを思い浮かべがちですが、今回はJSONを使います。これらのファイルには、次のような違いがあります。（GPT調べ）
| 項目 | Markdown | JSON |
|---|---|---|
| 構造の自由度 | 章立て中心でシンプル | 複雑なレイアウト（表・グラフ・要素指定）に対応 |
| データとの連携 | 手動で記述 | スクリプトやテンプレートで自動展開可能 |
| 再利用性 | テキスト中心で限定的 | 他形式（HTML/PDF/PPTX）への出力が容易 |
| 機械処理 | 困難（テキスト解析が必要） | 直接的にパース可能 |
| 編集体験 | 人間向け（書きやすい） | 機械＋人間の協働向け（構造が明確） |
つまりJSONは、「人が考えた内容を、機械が展開できる形で保存する」ためのフォーマットです。Aスライドと言っても、一度Pythonなどのプログラムを挟むので、LLMで考えた内容はJSON化しようということです。
JSONデータを使ったAIスライドを作ってみよう！
今回のAIスライドは、次のような構成でできています。
1. chatGPTなどのLLMでスライドの内容を練る
↓
2. プロンプトで生成内容をJSON化
↓
3. JSONファイルをプロジェクトにセット
↓
4. main.pyでHTMLファイル化chatGPTなどのLLMでスライドの内容を練る
今回はDevinについてのスライドを簡単にまとめてもらうことにしました。chatGPTでこのようにつらつらと内容を作ってもらいます。
プロンプトで生成内容をJSON化
JSONデータは下記のようなフォーマットにします。
{
"layout": "content",
"title": "世界における玉ねぎの課題",
"body": "近年、世界的に玉ねぎの需要が高まり、価格の変動や供給不足が課題となっています。"
}そのため、LLMでスライドの内容を練った後は、下記のプロンプトでJSON化してしまいましょう。
あなたはスライド構成をJSONデータに整形するアシスタントです。
このスライド構成を、指定のJSON形式に変換してください。
### 出力形式（必ずこの構造で出力すること）：
{
"slides": [
{
"layout": "title" または "intro" または "content" または "table",
"title": "スライドのタイトル",
"body": "本文（改行・箇条書きはMarkdown形式で）",
"headers": ["表のヘッダー1", "表のヘッダー2", ...], （※layoutがtableのときのみ）
"rows": [
["セル1", "セル2", ...],
["セル1", "セル2", ...]
], （※layoutがtableのときのみ）
"note": "補足説明（必要な場合のみ）",
"image_prompt": "画像生成の提案（必要な場合のみ）"
},
...
]
}
### 条件：
- JSON以外のテキストは一切出力しないでください。
- layout は内容に応じて自動で判断してください。
- 表紙 → "title"
- 自己紹介 → "intro"
- 通常の本文スライド → "content"
- 表を含むスライド → "table"
- テーブルを含むスライドでは、必ず以下の形式で出力してください：
- "headers": ["ヘッダー名1", "ヘッダー名2", ...]
- "rows": [["セル1", "セル2", ...], ["セル1", "セル2", ...]]
- 画像を入れた方が良い場合は、"image_prompt" フィールドを追加してください。
例: `"image_prompt": "玉ねぎ畑の写真風イラスト"`無事にJSONで出力されました！
JSONファイルをプロジェクトにセット
こちらが出力されたJSONデータです。
{
"slides": [
{
"layout": "title",
"title": "AIエージェント時代の到来：Devinが変えるソフトウェア開発",
"body": "外部パートナー向け講演\nDevinのエージェント性能の魅力を紹介"
},
{
"layout": "content",
"title": "AIが“指示を理解し、仕事を進める”時代へ",
"body": "- AIの進化の流れ：ChatGPT → Copilot → Devin\n- なぜAIエージェントが注目されているのか\n- Devin登場のインパクト",
"image_prompt": "AI進化の流れを示すタイムライン図（ChatGPTからDevinまで）"
},
{
"layout": "content",
"title": "Devinとは何か",
"body": "- Cognition社が開発した世界初の“ソフトウェアエンジニアAI”\n- エンドツーエンドでソフトウェア開発を遂行\n- GitHub操作、タスク管理、実行テストまで自動化"
},
{
"layout": "content",
"title": "Devinの特徴①：自律的なタスク遂行能力",
"body": "- Devinは“指示待ち”ではない\n- 指示を受けて自らタスクを分解し、実行計画を立案\n- コード生成→動作確認→修正→再実行まで一貫して実施",
"image_prompt": "Devinがコード修正タスクを自動で進める様子の画面キャプチャ風イラスト"
},
{
"layout": "content",
"title": "Devinの特徴②：開発エコシステムとの連携",
"body": "- GitHub、ターミナル、ブラウザを自由に操作\n- 外部API・ツールとの連携も可能\n- エンジニアが自然に受け入れられるワークフロー"
},
{
"layout": "content",
"title": "Devinの特徴③：学習と継続的改善",
"body": "- 成果物やレビューをもとにパフォーマンスを改善\n- チーム・プロジェクト固有の文脈を吸収\n- 「ただのツール」ではなく「同僚AI」として成長"
},
{
"layout": "table",
"title": "Devin活用ユースケース",
"headers": ["領域", "活用内容"],
"rows": [
["テスト自動化", "単体テストや統合テストを自動生成・実行"],
["バグ修正", "エラーログ解析から修正コード提案まで自動化"],
["ドキュメント生成", "コードコメントや仕様書を自動生成"],
["CI/CD補助", "パイプライン構築やリリースタスクを自動実行"]
],
"note": "※ 各事例はDevinの代表的な利用イメージです。"
},
{
"layout": "content",
"title": "Devin導入のメリット",
"body": "- 開発スピードと品質の向上\n- 人的リソースの最適化\n- コスト削減＋新しい価値創造"
},
{
"layout": "content",
"title": "AIエージェント導入の課題と展望",
"body": "- セキュリティ・品質保証・責任範囲の明確化が必要\n- Devinの今後の進化方向：チーム連携・拡張性の強化"
},
{
"layout": "content",
"title": "まとめ：Devinとともに次の開発スタンダードへ",
"body": "- Devinは“開発者の相棒”\n- 共に新しい開発文化を創る\n- 次のステップ：PoCや共同プロジェクトから始めましょう",
"image_prompt": "人間とAIが協力してコードを書く未来的なビジュアル"
}
]
}書き出されたJSONファイルは、コピペして、スライド生成AIのプロジェクトに組み込ませます。
main.pyでHTMLファイル化
セットされたAPIをファイルは次のプログラムで受け取ります。
よみこまれたJSONにスライドテンプレートのことなど、いろいろ書かれていますので、それをレイアウトフォルダから引っ張って来てくれるはずです。
# ====== JSON読み込み ======
if not SLIDES_JSON.exists():
raise FileNotFoundError(f"❌ スライドデータが見つかりません: {SLIDES_JSON}")
with open(SLIDES_JSON, "r", encoding="utf-8") as f:
slides = json.load(f).get("slides", [])
if not slides:
raise ValueError("❌ JSONにスライドデータがありません。")
# ====== HTML生成 ======
rendered_html = generate_html(slides)
OUTPUT_HTML.write_text(rendered_html, encoding="utf-8")
print(f"✅ HTML生成完了: {OUTPUT_HTML.resolve()}")また、今回は弊社のスライド風にデザインも少しかえてみました。さて、どのようになるでしょうか・・・。
生成されたスライドを見てみよう！
それでは、生成されたスライドを見てみましょう。いい感じに生成されていますね。素晴らしい！
テーブルのスライドなどもうまくできています。
さいごに
いかがだったでしょうか？
LLMで内容を熟成させることで、より中身のしっかりとしたスライドが制作できたと思います！
ご覧いただきありがとうございました。