時短
スライドのPDFがあるなら
Google AI Studio でBuildから記事中のプロンプトを貼り付けてアプリを作ります。
アプリが出来たらPDFファイルをアップロードすれば、画像の差し替えが可能になります。
実作業1分で終了です。
目的
「AIでスライド作成」。もう10000000回こすられているネタですが、今回調べた結果をアウトプットします。
実際の作業時間は10分〜30分程度です。（これをなにもしらないゼロから調べながらやると２－３時間かかります）
今回は、Googleの最新AIツールをフル活用して、**「思考・構築・修正」**の最強パイプラインを構築します。
NotebookLMは文字は上手く書けても画像のほうがイマイチなのでGoogle AI Studioから画像の差し替えアプリを作るのがこの記事の本命です。
※NotebookLMを使ったスライド生成の解説は星の数ほどあるのでそちらを見たほうが無難かと思います。
必要なもの
- Google AI Pro: 初月30日間無料で試せます。これに加入することで、Gemini 最新モデルが利用可能になります。
ワークフローの概要
- Gemini (Thinking Mode): プレゼンのシナリオと構成を深く練る。
- NotebookLM: 資料を読み込ませ、スライドの「土台（PDF）」を一発生成する。
- Google AI Studio: 生成されたスライドの画像が気に入らない場合に備え、専用の「画像差し替えアプリ」をAIに作らせて修正する。
手順 1: Gemini (Thinking Mode) でシナリオ構築
まずはスライドの中身です。いきなりスライドを作るのではなく、Gemini 3.0 Proを使って、論理構成を固めます。指示はスライドを作成しますと書きましょう。
これらは壁打ちと言われるものです。
「思考プロセス（Thinking）」が表示されるモデルを使うのがポイントです。
プロンプト例:
今から「[テーマを入力]」についてのプレゼン資料を作ります。
聴衆は[ターゲット層]です。
説得力のあるストーリーラインと、各スライドで語るべき要点を、Thinking Processを使って深く検討し、構成案を出してください。
ここで出力されたテキスト構成案をコピーしておきます（またはテキストファイルとして保存します）。
手順 2: NotebookLM でスライドの土台を作成
巷で「スライドでの土台作りが最強」と評判の NotebookLM を使います。
NotebookLMは本来、ソースに基づいて回答するツールですが、最近のアップデート（またはStudio機能）を活用して視覚的なスライドを出力させます。
1. ソースのアップロード
NotebookLMに新しいノートブックを作成し、以下のいずれかをアップロードします。
- 手順1で作った構成案のテキストファイル
- スライドの元ネタとなるPDFやドキュメント
- 関連するWebサイトのURL
2. スライドの生成
画面上の指示、または「Studioパネル（画面右側）」から**「スライド」**を選択します。（※UIは更新される可能性があります。「スライド資料」ボタンや、チャットでの指示を使用します）
細かい指示をしたいときは、設定や鉛筆アイコンから以下のパラメータを意識して指示を出します。
スライドの種類を選択:
- 詳細なスライド: 全文と詳細を含む包括的なスライド。配布資料や報告書向け。
- プレゼンターのスライド: 要点とビジュアル重視。営業プレゼンや登壇向け。
レイアウトと用途:
| レイアウト | アスペクト比 | 適した用途 |
|---|---|---|
| 横向き | 16:9 相当 | PC閲覧、プロジェクター投影 |
| 縦向き | 9:16 相当 | スマホ閲覧、TikTok/Reels/Stories |
| 正方形 | 1:1 | Instagram、LinkedInなどのSNSフィード |
カスタムプロンプトの活用
ここが重要です。単に「スライドにして」と言うだけでは味気ないものになります。デザインの方向性を指定しましょう。
プロンプト例（スタイル指定）:
- グラレコ風にカラー漫画でスライドを作成して。
- 日本の少年漫画風。コミカルな感じで。
- AI プロンプトに "rough paper texture" を追加して、漫画コア imageで作成してください。
- ビジネス用のプロフェッショナルなデザインにしてください（ミニマル、青基調）。
生成:
ボタンを押すとスライドが生成されます。完成したら PDFファイル としてダウンロードします。
手順 3: Google AI Studio で「画像差し替えアプリ」を作成
ダウンロードしたPDFを見てみましょう。
「内容は良いけど、生成された挿絵がちょっと変...」「会社のロゴに入替えたい」ということはよくあります。
PDF編集ソフトを使うのも手ですが、ここはエンジニアらしく、Google AI Studio で「自分専用の修正ツール」を爆速で作って解決します。
1. Google AI Studio にアクセス
Google AI Studio を開きます。
左サイドバーのBuildを選びます。
プロンプトを入力します。👇️このプロンプトを新しいチャットに貼り付けるだけで、同じ機能を再現できます。
※自分なりにカスタマイズしてお使いください。
AIへの統合開発指示書プロンプト
# アプリケーション開発要件定義書：AIスライド・エディター
あなたはエキスパートなフロントエンドエンジニアです。以下の要件に基づき、「PDFスライド変換・AI画像編集アプリケーション」を構築してください。
## プロジェクト概要
ユーザーがPDFをアップロードすると、各ページを画像として展開し、Geminiの画像生成機能を使ってスライド画像を自由に差し替え・編集できるツールを作成します。既存のプレゼン資料のビジュアルをAIで刷新するために使用します。
## UIレイアウト (3カラム構成)
画面を左・中央・右の3つのエリアに分割します。
1. **左サイドバー (スライド一覧)**
* PDFから変換された全ページをサムネイルリストとして縦に表示。
* クリックで編集対象のページを選択。
2. **中央エリア (プレビュー)**
* 現在選択中のスライドを大きく表示。
3. **右サイドバー (操作パネル)**
* プロンプト入力、設定、生成ボタン、生成結果の選択エリア。
## 詳細機能要件
### A. PDFアップロードと初期化
* アプリ起動時またはヘッダーのボタンからPDFファイルをアップロード可能にする。
* `pdfjs-dist`を使用し、PDFの全ページを画像データ（Data URL）に変換してステートに保持する。
### B. プロンプト管理（2層構造）
画像生成の指示には以下の2つの入力欄を用意し、内部で結合してAPIに送信する。
1. **固定プロンプト (Global Settings):**
* 全スライドに共通して適用させたい設定（例：「アニメ風のキャラクター」「統一された色調」など）。
* 一度入力すれば他のページに移動しても維持される。
2. **編集プロンプト (Page Specific):**
* 現在選択中のスライドに対して具体的に指示する内容（例：「背景を森に変更」「グラフを強調」）。
### C. 生成設定と実行
* **枚数選択:**
* 一度に生成する画像の枚数を「1枚 / 2枚 / 3枚 / 4枚」から選択できるボタン群を用意する（デフォルトは4枚）。
* **モデル選択:**
* 「画質優先 (Pro)」と「速度優先 (Flash)」などのモデル切り替えプルダウンを用意する。
* 各モデルの横には目安となる制限（例：Proは1日50枚まで等）を表示する。
* **生成実行:**
* Gemini APIを使用し、指定された枚数分を並列またはバッチで生成する。
### D. 生成結果の適用
* 生成された画像（最大4枚）を右パネルの下部にグリッド表示する。
* 気に入った画像をクリックすると、**現在選択中のスライド画像がその生成画像に差し替わる**（左のサムネイルも更新される）。
### E. ダウンロード機能
* 「全スライドをダウンロード」ボタンを用意。
* ファイル名はページ順がわかるように連番を振る（例: `slide-01.png`, `slide-02.png`...）。
## 実装上の注意点
* UIは日本語で作成すること。
アプリが完成したら、PDFファイル形式のスライドを読み込み、画像編集をします。
作成したアプリを使うときは、
Google AI Studio ホーム画面の左サイドバーのBuildをえらび、それからYour appを選びます。
警告
生成画像は自動保存はされませんので、ブラウザをリロードや再起動させると生成した画像は消えます。
必ず保存ボタンを押して手動で保存してください。
必要ならプロンプトから機能を追加して自分なりにカスタマイズしてください。
まとめ
これで、「AIに考えさせ(Gemini)」「AIに骨子を作らせ(NotebookLM)」「AIにツールを作らせて修正する(AI Studio)」という、完全なAIネイティブなワークフローが完成しました。
最初は設定に少し手間取るかもしれませんが、一度このフロー（特に画像差し替えアプリ）を作ってしまえば、2回目からは爆速で資料作成が終わります。
ぜひ、Google AI Proの無料期間中にこの「全能感」を試してみてください。
参考
【超簡単】Google AI Studioで画像編集アプリを爆速で作ろう！【楽しいです】 - YouTube