はじめに
みなさんこんにちは。インプルの岩崎です。
今回はAIスライドの最終形、全てをLLMに任せて作ることはできないのか？という内容です。
AIに全てを任せられるのか？
今日は久しぶりにAIスライドの話題です。
これまでに過去3回、AIスライドに関する記事を作成してきました。
これまでのAIスライド
1回目は、AIにスライドを作らせるなら、HTMLが最強というお話。
AIに直接pptx書き出しなどでスライドを作らせるよりも、HTMLで構造化した方がデザインも構造もしっかり整うよね！という内容でした。
2回目は、テンプレートを増やすことでデザインパターンを増やしてみる試みをしました。
文字だけのスライドよりも、箇条書きや、タイトル、などなど、さまざまなデザインパターンを追加することで、柔軟なデザインでスライドを作れるようにしました。
3回目は、JSONファイルを活用して内容を充実させました。
このツールでは内容をしっかりと考えさせることはできないので、GPTで考えさせた内容をJSON化することで、内容もしっかりとしたスライド制作が可能になるというものでした。
AI（LLM）にスライドを全て任せられるのか？
さて、そんな中で今回やらせたいことはAI（LLM）に全てを任せることはできるのか？です。結論から言うと、可能だけど下準備がすごく大変、です。詳しくその理由を解説します。
そもそもこれを作るに至ったのは、Geminiがなかなかすごいスライドを作ってくれたから。
ですので、なんでそんなすごいのが作れるのか、おとなしくGeminiに聞いてみることにしました笑。
すると、Geminiの学習力や、HTML/CSSを使うことが大事だよ、という項目と一緒に、厳格なデザイン指示の厳守、というものもありました。つまり、ルール作りをしっかりすることです。Geminiが言うには、次の3つの視点が大事そうです。
- レイアウトに関するルール
- 配色やフォントに関するデザインのルール
- コンテンツやトーンを制御するルール
フレームワークとしての役割になる”ルール”
このルールをつくることで、AI（LLM）がスライドを生成するときに、構成力が上がります。
レイアウトに関するルールでは、スライドの構成する要素とその説明を記載することで、スライドレイアウトの全体像をルールとして指定します。また、スライドの枚数やサイズなど、スライドを構成する全般のルールを詳しく定めることができます。
配色やフォントに関するデザインのルールでは、文字通り、スライドに関しての全般的なデザインをルールとして指定します。フォントに関してやカラーについてのルールを指定することで、余計な色を使用しないようにすることができます。
コンテンツやトーンを制御するルールでは、スライドのテイストなどを指定し制御するルールを作っています。例えば、スライドは半分以降埋めるといったボリュームについての話や、何向けの資料だよという指定を入れることで内容を調整するルールを決めることができます。
真のAIスライドの構成
さて、上記のルールを組み込んだAIスライドは、下記のような最小構成で作ることができます。
AI_slide/
├── package.json # プロジェクト設定、依存関係（例: node-fetch, dotenv）
├── main.js # メイン実行ファイル (ユーザー入力、結果出力、コアサービスの呼び出し)
├── config/
│ └── rules.json # 【ルール定義】 構造、デザイン、トンマナの制約
└── core/
├── llm-generator.js # 【コアロジック】 プロンプト構築、API通信
└── templates.js # HTML/CSSテンプレートを文字列として保持（ファイル読み込みを省略するため）先ほどまで熱弁したルールは、jsonファイルとして渡します。これは、3回目のAIスライドの記事でも説明しましたが、プログラムへ組み込む際はjsonファイルの方が良いと言う判断からです。jsonファイルの構造は下記のような感じです。
{
"structuralRules": [
"【必須】各スライドは必ず以下の固定要素を含むこと:"・・・・
],
"designRules": [
"【デザイン統一】背景色は常に白（#ffffff）、アクセントカラーは・・・
],
"contentRules": [
"1枚目のスライドには表紙の・・・・"
]
}llm-generator.js でスライドをLLMに生成させるメインのロジックを担っています。ルールなどはここで読み込ませ、生成した内容を templates.js に挿入し、完成したHTMLを返すようになっています。
function buildSystemInstruction() {
const instruction = "あなたはIMPLスライド生成AIです。以下の厳格なルールを絶対的に遵守し、コンテンツのみを含むHTMLスニペットを生成してください。\n\n";
const allRules = [
"--- 構造的制約 (Structural Rules) ---",
...rules.structuralRules,
"--- デザイン制約 (Design Rules) ---",
...rules.designRules,
`基本CSSクラスの定義:\n${BASE_CSS}`, // CSSコード自体をプロンプトに含める
"--- コンテンツ/トンマナ制約 (Content Rules) ---",
...rules.contentRules
];
return instruction + allRules.join('\n- ');
}ちなみに、trmplates.js には、HTML/CSSをある程度記載し、もし使用するデザインがあった場合は、そのCSSのクラスを使用することで、デザインを制御しています。つまり、デザインの道具をたくさん用意しておくことで、強調文字や表のデザインは制御可能です。
const BASE_CSS = `<code>
/* ========== 基本設定 ========== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
・・・`
const BASE_HTML_TEMPLATE = `
<!DOCTYPE html>
<html>
・・・・
</html>
`;
export { BASE_CSS, BASE_HTML_TEMPLATE };生成されるスライドとルールの調整
さて、こうして生成されたスライドを見てみましょう。失敗例や追加したルールなども紹介します。
ちなみに、スライドデザインは弊社オフィシャルに合わせてみました。
1回目の生成（×：CSSが悪さした例）
最初の生成では、CSSを前回のスライドAIから使いまわした際に、切り替えのエフェクトが悪さをし、うまく生成できませんでした。これは、templates.js がよくないパターンなので、rules.json が悪いわけではありませんが、下記の一文を追加することで、ルールも固定してみました。
"【重要】テーマに応じて適切な数のスライドに分割する。"2回目の生成（×：1枚のスライドに詰め込む）
さて、続いての生成もうまくいきません。なんと、1ページのスライドの中に、何個もコンテンツが入っているので、スライドの中でスクロールできるようになってしまっています笑。なかなか簡単には作ってくれない難しさを感じますね笑。下記のようにルールを追加し、再度挑戦です。
"【重要】各スライドは16:9のビューポート内に完全に収まるべき。メインコンテンツエリア内でスクロールが生じないよう、テキスト量と余白のバランスを取ること。"3回目以降の生成（△~○：微調整は必要だがほぼ問題なし）
さて、3回目の生成にもなってくると、だいぶまともなものが出来上がってきました。paddingのせいでまだスクロールするスライドが出来上がったり、細かな調整は必要なものの、templates.js のcssを修正することで、だいぶまともになりました。
さいごに
いかがだったでしょうか？
ルールを設定することで、だいぶ柔軟にAIを扱うことができたのではないかと思います。このルールを活用すれば、スライド以外にも色々なツールでLLMを活用できそうですね。
ご覧いただき、ありがとうございました！