AIエージェントにスライドを作ってもらう方法｜チャットとの違いと具体的な流れ

こんにちは、AIニュースアプリ Morning AI 開発者の矢野哲平です。この記事では、AIコーディングエージェントにスライドを作ってもらう方法について、かなり踏み込んで解説します。

AIでスライドを作りたいと考えている人、すでに作っていて「もっといい方法はないか」と探している人に向けた内容です。

AIでスライドを作る、3つの方法

AIを使ったスライド作成は、大きく3つのパターンに分けられます。

この記事で扱うのは3つ目、AIエージェントを使う方法です。

1つ目・2つ目の方法でもスライドは作れます。それでもあえて3つ目を取り上げるのは、AIエージェントに作らせた方が、よりリッチな見た目になり、精度の高いスライドが作れるからです。そして何より、AIチャットではできない実装ができます。

なお、AIエージェントとAIチャットの違いそのものについては別記事で整理しています。代表的なツールは Claude Code と Codex CLI の2つです。Codexは、OpenAIが提供するコーディングに特化したAIエージェントです。

AIチャットでは届かないところ

私はもともと、ChatGPTやGeminiのチャット画面でスライドを作っていました。ですが作っていくうちに、いくつも課題が出てきました。

• ページ送りにアニメーションを足したい
• デザインの幅をもっと広げたい
• こちらの要望どおりに作ってほしい

具体的に言えば、こういうことです。

• スライドの特定の単語の下に、赤い線がさっと引かれる演出
• ナレーションの音声に合わせて、自動でページが送られる実装

既存のチャット上でスライドを作る場合、こうしたことを実装するのは難しい。もっといい方法はないかと探していくうちに、AIエージェントを使ったスライド作成に行き着きました。

どのフォーマットで作ってもらうか

AIエージェントで作るといっても、いくつかアプローチがあります。

HTMLとCSSをそのままスライドに転用する

以前は、マークダウンをスライドに変換する方法も紹介しました。ですが現在は、HTMLをそのままスライドに転用する方法がやりやすいと感じています。

会社のホームページにアクセスすると、会社紹介のページがバーッと出てくる。あれはHTMLとCSSで構成されています。つまり、GoogleスライドやPowerPointのような見た目のスライドを、HTMLとCSSで作ることができるということです。

この考え方そのものは、AIにHTMLでスライドを作ってもらう方法で詳しく書いています。

SVGを足すと、デザイン性が一段上がる

そこからいろいろ実験をして分かってきたのが、より見た目をリッチにするなら SVG を使うといいということです。

SVGは画像フォーマットの一つですが、スライドで使う図形を描くのに使えます。円グラフ、棒グラフ、チャート。SVGを使うことで、こうした図形をアニメーション付きで実装できるようになります。

「HTML、CSS、SVGって何ですか」という人もいると思いますが、そこもAIエージェントを使えば解決します。必要なのは、こう指示するだけです。

HTML、CSS、そしてSVGを使って
「生成AIとは」というタイトルで
スライド資料を作成してください。

これだけで、必要なコードはAIが書いてくれます。人間の少ない指示だけでAIが必要なものを出力してくれる——これもAIエージェントを使うメリットです。

一度まとめると、マークダウンではなくHTML・CSS・JavaScript、そしてSVG。この組み合わせでデザイン性の高いスライドが作れます。HTML・CSS・JavaScriptだけでもアニメーションやグラフは実装できますが、実験した範囲ではSVGを使った方がデザイン性は上がります。

もう一つの選択肢、Canvas 2D

さらにもう一つおすすめしたいのが Canvas 2D です。

Canvas 2Dは、ざっくり言うとブラウザの中に用意された「お絵描き用の白いキャンバス」です。HTMLで四角いスペースを一枚置いて、そこにJavaScriptで線を引いたり、円を描いたり、文字を置いたりしていきます。

SVGとの違いを一言で言うと、こうなります。

• SVG — 図形を一つずつ部品として貼り付けていく「切り絵」
• Canvas 2D — 真っ白な画用紙に直接絵を描いていく

そのため、図形の数が多いスライドや、図形や数字が動くアニメーションのような表現は、Canvas 2Dの方が得意です。

HTML・CSS・SVGで図形を置くようなスライドを作ると、図形が重複して表示されたり、図形に文字がかかってしまう状態が起きます。こうしたデザインの崩れは、Canvas 2Dを採用すると明らかに少なくなります。完全にゼロにはなりませんが、SVGに比べると差は歴然です。

もちろん、これも自分でコードを書く必要はありません。

Canvas2Dを使って、
このようなグラフを作成してください。
アニメーション付きで。

こう指示するだけで、AIエージェントが実装してくれます。

AI自身に評価させて、直させる

デザインの崩れについては、AIエージェントならAIチャットにはできない直し方ができます。

スライドを作らせた後に、AIエージェントに自律的にそのページを評価させて、崩れている箇所があれば自分で修正させる。つまり、AIによる自己改善のフィードバックです。

流れを比べると違いが分かりやすいと思います。

AIチャットでは「気づく役」がいつまでも人間の側に残りますが、AIエージェントはそこまで引き受けてくれます。

そして、この自己改善のフィードバックを挟んだ方が、一発出しでスライドを出すよりも必ず結果は良くなります。

これは実際に実験しました。HTML・CSS・SVG・Canvas 2D、それぞれのアプローチで「一発出し」と「作らせた後にフィードバックを行わせたもの」を比べたところ、明らかにフィードバックを行った方が良い結果になりました。

作らせたスライドを、AIエージェント自身に評価させて改善させる。これはぜひ試してみてください。

精度を安定させる、2つの下準備

出力を安定させる方法を2つ紹介します。デザインテンプレートの設定と、テキストのトーンの統一です。

1. デザインテンプレートを設定する

スライドを作らせるときに、「こんな感じのデザインで作ってください」と事前にテンプレートを渡しておくという方法です。テンプレートはHTMLファイルとして用意しておきます。

AIが参照するデザインファイルがあることで、これから作るスライドのデザインを統一しやすくなります。たとえば、こういう使い分けができます。

• デザインA — 社内向け。少し遊び心のあるデザイン
• デザインB — 社外向け。しっかりしたデザイン

事前に用意しておけば、「今回のスライドはAのデザイン案でお願いします」の一言で切り替えられます。

では、そのテンプレート自体はどう作るか。これもAIエージェントに指示します。

このような用途でスライド資料を作りたいです。
テーマカラーはブルー。
フォントは○○を使ってください。
この内容でデザイン案を4つ出してください。

提示された案から一つ選んで、そこからさらに細部を作り込んでいく。これだけでデザインテンプレートが手に入ります。デザインが得意なAIモデルについてはこちらの比較記事も参考になると思います。

2. テキストのトーンを統一する

スライドには必ず文言があります。見出しの言い回し、本文の言い回し。こうしたトーンをAIが参照できる形で用意しておくと、AIがその内容に沿った言い回しをしてくれます。文体を揃える、と言えばいいでしょうか。

作り方はこうです。

1. これまで自分が手作業で作ってきたスライドをAIに渡す
2. 「このテキストから言い回しやトーンを抽出してください」と依頼する
3. 抽出したものを、スライド作成時に参照させる

これで、普段人間が作っているスライドの言葉の使い方を、AIが作るスライドで再現しやすくなります。

このアプローチは、スライド以外にも応用できます。たとえばメールです。いきなり「メールを作成してください」とお願いする前に、普段自分が書いているメールやレポートをAIに渡して言い回しとトーンを抽出してもらい、それを渡した上で書いてもらう。こうすると、AIっぽくない、自分が普段書いている自然な文章になります。

修正指示はどう出すか

AIエージェントが作ったスライドを、まったく修正なしでそのまま使えるかというと、毎回そういうわけではありません。修正指示の出し方にもいくつかアプローチがあります。

1つ目は、口頭で指示する方法。 「1ページ目のスライド、ここをこう修正してください」と伝えるだけ。いちばん簡単です。

2つ目は、画面上で編集できる環境を用意する方法。 GoogleスライドやCanvaのように、ブラウザの画面上で要素をクリックするとテキストを編集できる、といったものを用意します。これもAIエージェントを使えば簡単に実装できます。

3つ目は、スライドを一つの画像として捉えて、そこに修正指示を人間が書き込む方法。 書き込んだ画像をまとめてAIエージェントに渡して、一括で処理してもらいます。

1枚ずつ指示していくと時間がかかるので、修正指示を画像にペタペタ貼っていって、20枚くらい貯まったら「この修正指示を全部お願いします」と渡す。最近はこのやり方に落ち着いています。

昼食で離席するとき、寝る前。人間がパソコンから離れている時間は意外とあります。そのタイミングでAIエージェントに一括で修正作業をお願いしておいて、後から人間がチェックする、という流れです。

ナレーション音声とアニメーションを連動させる

AIエージェントを使ったスライド作成ならではのアプローチとして、ナレーションの音声とスライドのアニメーションを連動させて、一本の動画を作ることもできます。

テキストの特定の単語に線が引かれる、話している内容に合わせてグラフが表示される。そういった動きを、音声にぴったり合わせられます。

具体的な流れはこうです。

1. Whisper（OpenAIの文字起こしモデル）で、タイムスタンプ付きの文字起こしを作る
2. その文字起こしの内容と、スライドのアニメーションを連携させる

「その言葉を口にした秒」に演出を発火させる、という作り方です。こうしたことは、ChatGPTやGeminiのAIチャットでは実装できません。

自分の声をベースにしたAI音声

さらに発展形として、スライドの台本を用意しておいて、自分の声を真似したAI音声でナレーションをつけることもできます。

スライドにナレーションをつける作業は、けっこう大変です。

• 言い間違いがあれば直す必要がある
• 収録時の背景の雑音が入っていないか確認する必要がある
• 収録して、音声を整えて、動画に当てはめる

テキストからAI音声のナレーションを起こせば、この収録作業も音声の編集作業も一切不要になります。テキストから音声を作る技術で、テキスト・トゥ・スピーチ、略してTTSと呼ばれます。

ここで使える声にはいくつか種類があります。Gemini Notebook でAIポッドキャストを作ったときの、あの男女の音声。ChatGPTの音声モードで会話するときの、あの声。そして、Gemini 3.1 Flash TTS のような音声生成モデルも出てきています。

こうした声とは別に、自分の声をベースにしたAI音声を作ることもできます。私は Qwen のTTSモデルを使って、自分の声をベースにしたAI音声を試してみました。

以前に比べれば、人間の声をベースにAI音声を作る精度はかなり上がっています。ただ、私が試した範囲では、本番で使うのはまだ難しいかなと感じる部分もありました。このあたりは深掘りできていないので、リサーチ不足もあると思います。

とはいえ、こうしたAI音声がもっとうまく作れるようになれば、スライドの台本から「その人がナレーションしている動画」をそのまま作れるようになります。こうした発展の余地があるのも、AIエージェントを使ったスライド作成ならではだと思います。

まとめ

1. AIチャットで作るより、AIエージェントを使った方が精度が高く、できることの幅も広がります。 ページ送りのアニメーションや音声との連動など、チャットでは難しい実装ができます。
2. 参照となるデザインとテキストの言い回し・トーンを事前に渡しておくと、成果物は安定します。 デザインテンプレートはHTMLファイルで、トーンは過去の自分の資料から抽出して用意します。
3. AIエージェントに自己改善のフィードバックをさせた方が、出力は安定します。 AI自身にスライドを視覚的に評価させて、誤っている部分があれば修正させる。この処理ができるのもAIエージェントならではです。

まずはHTML・CSS・SVGで一枚作らせて、そのあと「自分で評価して直してください」と一言足すところから。それだけでも出来上がりがはっきり変わるので、ぜひ試してみてください。