スクショから操作マニュアルを簡単にスライド化・動画化するアプリ爆誕！

Last updated at 2026-03-14Posted at 2026-03-14

はじめる前に

この記事で扱うタロショットというアプリで出来た動画は以下です。
https://www.youtube.com/watch?v=UoOWIeObmQU
このタロショットを使いたいと思われた方は、以下のXのリンクをリポストしてください。手動でＸ宛てに、Googleスライドのリンクをお送りします。
https://x.com/OptionTrader25/status/2032711266238869978?s=20

はじめに

社内マニュアルやSaaSの操作説明を、スクリーンショット＋文章で作る作業、とても辛くないでしょうか。

スクショを撮る
PowerPoint に貼る
1枚ずつ「ここをクリック」「次にここを」と文章を書く
枚数が増えるほど地獄

この「地獄」をなんとかしたくて、画像をAIに読ませて文章を出してもらい、それをスライドに流し込むところまで自動化した話を書きます。

作ったのは タロショット（Taroshot） という、Googleスライドに紐づけたApps Scriptアプリです。

スクショを入れたフォルダを指定してボタンを押すと、Gemini が各画像の「タイトル・手順・注意点・ナレーション原稿」を生成
その結果を JSON にし、Googleスライドのテンプレートにはめ込む
スライドのスピーカーノートにナレーションを入れておくので、Google Vids などでそのまま動画化できる

「スクショを入れたら、はいスライドの出来上がり → 動画も作れる」という流れを、ワンクリックで実現しています。

ただし、AIが空気を読んで全部やってくれる魔法ではありません。
スクショに、○に番号・□に説明のように「最低限の解説」を書き込んでから渡す運用にしています。
その前提を入れたうえで、何をしたか・どう動かしているかをまとめます。

この記事で伝えたいこと

スクショ＋手書きの「意味づけ」と、AIの「文章化」を分けると、現実的に運用できる
Googleスライドは JSONで中身を流し込める ので、テンプレ＋自動生成と相性が良い
スライドにナレーションを入れておけば、Google Vids で動画化が楽
技術的には Google Apps Script（GAS）＋ Gemini API ＋ Google Slides API の組み合わせで実現している

実際のフロー（Screenshots に沿った手順）

全体の流れは ① PowerPoint で注釈付きページを作る → ② 各ページをスクショする → ③ タロショットUI で画像アップロード・スライド生成 の3段階です。

① PowerPoint で「スクショに説明」を書き込む

PowerPoint を起動し、「新しいプレゼンテーション」をクリック。
スライドの不要な枠（タイトル・サブタイトル）を Delete で削除し、真っ白なスライドにする。
そのスライドを Ctrl+C → Ctrl+V で複製し、マニュアルの枚数分だけ真っ白なページを用意する。
マニュアルにしたい画面（操作手順のスクリーンショット）を撮り、パワポの各ページに貼り付ける。
挿入 → 図形 から ○（丸）に番号、□（四角）に説明 を書き、簡単に操作内容を書く。
パワポの中で一旦完成させ、ページの順番を確認する。

② 完成したパワポの各ページを、1枚ずつスクショして画像にする

エクスプローラーで、あらかじめ使うスクリーンショット用フォルダ（例：ピクチャ > スクリーンショット）を開き、中身を空にする（または別フォルダに退避）。後でまとめて選びやすくするため。
1ページ目から順に、完成したパワポの画面を Shift + Win + S でスニッピングツールを出し、範囲をドラッグしてスクショ。保存された画像をアップロードしてスライド作成に活用します。

③ GoogleスライドでタロショットUIを開き、画像を登録する

Googleスライドで、タロショット用のプレゼン（例：「タロショット-マニュアル(横)」）を開く。
メニュー 拡張機能 → タロショット → タロショットUIを開く をクリック。
1. システム情報設定で、Google AI Studio の API キーと、画像用・スライド用の Google ドライブフォルダ ID（2つ）を入力し「登録」。

1. 画像登録をクリック → 開いたダイアログで ピクチャ > スクリーンショット（または画像を入れたフォルダ）を開き、Ctrl+A で全選択 → 開く。アップロード完了と同時に、1.png, 2.png, … にリネームされます。

④ スライド生成 → スライド表示

2. スライド生成をクリック。しばらくすると「3. スライド表示をクリックしてください」と表示される。
3. スライド表示をクリックすると、新規タブで Google スライドが開く。

⑤ スライドをGoogle Vids で動画化

テンプレートに沿ったスライドが枚数分、自動で並んでいる
各スライドには「タイトル・手順・注意点・完了条件」が入っている
スピーカーノートにはナレーション原稿まで自動で入っている
すべて編集可能で、Google Vids で「ナレーションを挿入 → 再生 → 共有 → MP4でダウンロード」すれば動画まで一気通貫です。

背景：手作業の地獄と、中途半端な自動化

昔のやり方（地獄）

以前は、次のような完全手作業でした。

操作しながらスクリーンショットを撮る
PowerPoint に貼り、1枚ずつ「ここをクリック」「次に〜」と文章を書く
枚数が増えるほど、貼る・書くの繰り返しで心が折れる

「毎回これをやるのは無理」と感じていました。

試したこと①：画像をAIに読ませて文章だけもらう

スクショをAIに渡して「この画面の操作手順を書いて」と依頼
出てきた文章を PowerPoint にコピペ

結果
文章は出るが、貼り付け・レイアウト調整が手作業のまま。枚数が多いと結局つらい。

試したこと②：テキスト→音声を1枚ずつ作ってパワポに埋め込む

AIに文章を書かせる
Google AI Studio の「テキスト→音声」で、1枚ずつ音声ファイルを生成
それを PowerPoint の各スライドに埋め込む

結果
「自動化」はできたが、1枚ごとにファイルを作り、貼り、設定するのがめちゃくちゃ面倒。
しかも ITに不慣れな人にこの手順を教えるのは現実的でないと感じ、挫折しそうになりました。

壁：AIに「全部」任せられない

もう一つ気づいたのは、AIがこちらの意図を完璧に読んでくれるわけではないということです。

「このボタンを押す」と言いたいのに、別の要素を説明される
画面のどこが重要か、AIには分からない

そこで、スクショの段階で人間が「ここが大事」「この操作」とラベリングする運用にしました。
○に番号・□に説明のように最低限の解説を書き込んだ画像を渡すと、AIはそれを読み取って、文章の整理・構成・ナレーションに集中してくれます。

転機：Googleスライド × JSON × ナレーション

次の2つを思い出しました。

Googleスライドは、JSONでスライドの中身を流し込める
→ テンプレートを1枚用意し、データだけ差し替えれば、枚数分のスライドが作れる。
スライドのスピーカーノートにナレーションを入れておけば、Google Vids で動画化できる
→ スライドができれば、動画も「流し」で作れる。

つまり、

Gemini：画像（＋注釈）から「タイトル・手順・注意点・ナレーション」を生成
JSON：その結果をテンプレート用の形にまとめる
Googleスライド：JSONをはめ込んでスライドを一括生成
スピーカーノート：ナレーションを入れておき、Vidsで動画化

という一気通貫を、1本のアプリでやろう、という発想です。

作ったもの：タロショット（Taroshot）の全体像

役割分担

役割	担当
スクショを撮る	人間
○に番号・□に説明で「どこが大事か」を書き込む	人間
タイトル・手順・注意点・ナレーションの文章化	Gemini（AI）
JSONの生成・スライドへの反映	アプリ（GAS）
動画化	Google Vids など（スライドのナレーションを利用）

「人間が現場の文脈をスクショに載せる → AIが文章とナレーションを仕上げる」 という分業にしています。

技術構成

Google Apps Script（GAS）：Googleスライドに「拡張機能」として追加
Gemini API：画像＋プロンプトで、各スライド用のテキストとナレーションを生成
Google Slides API：テンプレートをコピーし、JSONの内容をプレースホルダーに流し込み、画像を配置
Google Drive：画像フォルダ・出力フォルダの指定に利用

UIは HTMLダイアログ（モーダル）で、次の操作ができます。

システム情報設定：Gemini API Key、画像用フォルダID、スライド用フォルダID を登録
画像登録：ブラウザから画像をアップロード（指定フォルダに保存、1.png, 2.png, … にリネーム）
スライド生成：GeminiでナレーションJSON生成 → スライド作成（ボタン1つ）
スライド表示：作成したスライドのURLを新規タブで開く

実装のポイント（開発者向け）

1. Gemini への渡し方

画像は Base64 で inlineData として送る。
プロンプトで 「1番目に添付した画像＝1.png＝slideNo:1」 と明示し、添付順と slideNo を一致させる。
レスポンスは JSON（responseMimeType: "application/json"）で受け、slides 配列をそのまま利用。

2. スライド生成（SlidesHelper）

テンプレートの {{SLIDE_NO}} を含む1枚（本文用レイアウト） を検出し、それだけ残して他は削除。
その1枚を複製し、毎回 末尾に移動 して、順序を 1, 2, 3, … に保つ。
各スライドでは slideNo で紐付け：findSlideByNo_(merged.slides, targetSlideNo) で「i 枚目＝slideNo i」のデータを取得し、プレースホルダー置換・画像挿入・スピーカーノート設定を行う。
画像は IMAGE_FOLDER_ID のフォルダから 1.png, 2.png, … を読み、固定位置・倍率で挿入。テンプレに元からある装飾画像（ヘッダーアイコン等）は、挿入領域外なら削除せず残す。

3. スクリプトプロパティ

GEMINI_API_KEY：Gemini API キー（Google AI Studio で取得）
IMAGE_FOLDER_ID：画像を置く Drive フォルダの ID
OUTPUT_FOLDER_ID：スライド保存先フォルダの ID

注意点・運用のコツ

スクショには事前に「意味」を書いておく
何も書かない画像だけだと、AIが意図を外しやすいです。
○に番号・□に説明で「ここが大事」「この操作」と書いておくと、ナレーションと手順がずれにくくなります。
画像ファイル名
アプリは 1.png, 2.png, … を想定しています。
画像登録でまとめてアップロードすると、自動で 1.png, 2.png, … にリネームされます。
テンプレート
プレースホルダー（{{SLIDE_NO}}, {{TITLE}}, {{PURPOSE}} など）を埋めた「本文用」スライドを1枚用意し、それを複製して枚数を増やしています。
1枚目に表紙を追加していても、{{SLIDE_NO}} を含むスライドを自動検出して使用します。

まとめ

完全手作業のマニュアル作成はつらいので、画像をAIに読ませて文章化 → スライドに流し込むところまで自動化した。
AI任せだけでなく、スクショに○・□で「最低限の意味づけ」をしてから渡すことで、意図が伝わりやすく、現実的に運用できる。
Googleスライド × JSON × ナレーション の組み合わせで、「スクショ → スライド → 動画」を一気通貫で実現している。
技術的には GAS ＋ Gemini API ＋ Google Slides API で、「画像登録 → スライド生成 → スライド表示」 のUIにまとめた。

「面倒なところはAIに任せて、人は"何を伝えたいか"に集中する」を実現する一例として、参考になれば幸いです。