はじめに
「過去の製品資料のPDFを渡したら、顧客向けの提案書スライドに自動で作り替えてくれたら便利だな」
そんな社内での思いつきから、週に1回1時間の時間をとって社内メンバーと一緒に、Claude（AWS Bedrock）とGoogle Slides APIを組み合わせた提案書自動生成アプリを作ってみました。
作ったものの概要
製品資料（PDF）とどんなスライドにしたいかを入力すると、AIが提案書のスライドを自動生成してGoogle Driveに保存してくれるWebアプリです。
一緒に作ったメンバーの記事です。
全体のフロー
画面
入力画面
ユーザーが入力するのは3つだけです。
- 製品資料：Google Driveに保存されているPDFファイルを選択
- テンプレート：スライドのデザインテンプレートを選択s
- プロンプト：顧客の情報や要望を入力
作成中
完了
10秒くらいで作れました。完了画面からGoogle Slidesが置かれているDriveのリンクを開けます。
作られたスライド
先に述べておきますが、弊社での実用化には到底届かないレベル（クオリティがかなり低い） です。
テンプレートが適用されていて、5枚のスライドというプロンプトの指示にもちゃんと従ってくれている一方、一部弊社のスライドのルールに則っていない（箇条書きの点が文字だったり、フォントが違ったりする）ことや、文字の大きさの調整が必要ですし、図形や画像も入っておらず、かなり見辛いです。
弊社社員が手で作ったスライド
本来なら以下のような感じで、文字の位置・大きさ、画像や枠を活用してもっと見せやすくさせたいところです。
Claudeでスライド内容を生成
AWS BedrockのConverse APIを使って、PDFファイルを直接Claudeに渡しています。
const command = new ConverseCommand({
modelId: "us.anthropic.claude-sonnet-4-20250514-v1:0",
messages: [
{
role: "user",
content: [
{
document: {
source: { bytes: pdfData },
name: "PDF",
format: "pdf",
},
},
{
text: `PDFの内容と次の要望をもとに、提案資料を作成してください...`,
},
],
},
],
inferenceConfig: { maxTokens: 3000, temperature: 0, topP: 0 },
});
PDFをテキスト抽出せずにそのまま渡せるのが便利ですね。temperature: 0にすることで、毎回安定したJSON形式で出力してくれます。
出力形式はこんな感じで指定しています。
[
{ "title": "タイトル（38字以内）", "content": "スライドの内容（9行以内）" },
{ "title": "...", "content": "..." }
]
Google Slides APIでスライド生成
Claudeから返ってきたJSONをもとに、Google Slides APIでプレゼンテーションを作成します。
- テンプレートファイルをコピー
-
batchUpdateでスライドを追加＆テキストを挿入 - Google Driveの指定フォルダに保存
技術スタック
- フロントエンド：React 19 + Vite 7 + MUI
- バックエンド：Hono（Node.js）
- AI：AWS Bedrock（Claude Sonnet 4）
- 外部API：Google Drive API、Google Slides API
苦労したところ
Google APIの認証
OAuth 2.0の設定が地味に面倒でした。サービスアカウントではなくユーザー認証が必要だったので、最初にトークンを取得する処理を別途用意しました。
Claudeの出力を安定させる
JSONで出力させたいのに、たまにjsonが付いてきたり、余計な説明文が入ったりすることがありました。プロンプトで「前後の文章は不要」「冒頭のjsonも含めないで」と明示的に指定することで解決しました。
最後に
最低限動くものは作れました。製品PDFを選んで顧客情報を入れると、それっぽい提案書スライドが出来上がります（課題は山積みですが、、、）。
ただ、正直なところ...
作り終わった頃にNotebookLMを見たら、すごいスライド生成機能が実装されてました。
さらに、Googleスライド自体にもGemini（AI）が統合されていて、サイドパネルから「○○についてのスライドを作って」と指示するだけでスライドが生成されます。
「あれ、これ自分で作る必要あった...？」という気持ちになりました。
現時点では、上記2つとも画像生成になるので手動での変更はできませんが、これもまた時が経てばできるようになると思われます。
これがAIの世界のスピード感なんですよね。何かを作り始めた時点では存在しなかった機能が、作り終わる頃には提供されて使われています。
自分で作ったからこそ学びはありましたが、「自分たちが作っているものは市場に出てきていないか定期的にチェックする」ことの大切さを改めて実感した次第です。
AIの進化、早すぎる。
appendix
今回用意した製品資料（AIで生成）
NCDC株式会社( ncdc.co.jp/ )のテックブログです。 主にエンジニアチームのメンバーが投稿します。 募集中のエンジニアのポジションや、採用している技術スタックの紹介などはこちら( github.com/ncdcdev/recruitment )をご覧ください！
Discussion