← 一覧へ戻る NI-WORK チャンネル

Canvas生成をGoogleスライド変換出力し編集可能に!Gemini→Canvas→GASでスライド出力 自在に資料作成【生成AI/Google Workspace/グーグル】

📅 2025年8月20日 ⏱ 17:31
GeminiCanvasスライドWorkspaceGAS

GeminiのCanvasで作った美しいスライドを、GASを使ってGoogleスライドへ一発出力。HTMLのままでは編集しづらい問題を「画像なし・文字とレイアウト優先」のプロンプトで突破し、編集可能な状態にする実用ワザ。

Canvasで作ったスライド風ビジュアルはHTMLのままだと一文字直すのも一苦労。本動画では、Geminiに「このHTMLスライドをGoogleスライドに出力するGASを作って」と依頼し、生成されたGASをスライドの拡張機能(Apps Script)に貼り付けて実行するだけで、編集可能なGoogleスライドとして書き出す手順を解説。プロンプトに「画像などは不要」と入れるのが成功のカギ。エラーが出てもスクショをGeminiに見せれば直してくれる。約20分で10枚規模の編集可能スライドが完成し、文字の微修正はパワポ・スライドの慣れた操作感で仕上げられる。

1 詳細トピック

今週のハイライト

キャッチアップすべき重要ポイント

  • Canvasで作ったHTMLスライドをGoogleスライドに編集可能な形でエクスポートする実用フロー
  • Geminiへの依頼プロンプトは「このHTMLスライドをGoogleスライドに出力するGASを作って」
  • 成功のキモは「画像・アイコンは不要、文字とレイアウト優先で再現」と明記すること
  • GASは1行も書かずに済む。Googleスライド→拡張機能→Apps Scriptに貼り付けて実行するだけ
  • 初回実行時はGoogleアカウント認証(自分のアカウントで続行)が必要
  • エラーが出てもGeminiにエラー画面のスクショを渡せばコードを修正してくれる
  • 完成後はCtrl+Aで全選択して位置・サイズを微調整、画像部分はスクショ貼り付けで対応
  • 10枚規模のスライドが指示出しから約20分で編集可能形式になる時短効果

▼ 各トピックをクリックすると詳細が展開します

1. なぜGAS経由でGoogleスライドに出力するのか+

前回紹介したCanvasで作ったビジュアルは、見た目こそ美しいが中身はHTML。文章を一文字直すにもGeminiに指示するかコードを直接いじる必要があり、編集体験が良くない。

一方、ビジネス現場では「Googleスライドやパワポでサッと直したい」というニーズが大きい。FigmaやGensparkなど外部ツールにエクスポートする方法もあるが、データが複数サービスに分散してしまうデメリットがある。

本動画ではGoogle Workspace内で完結させるため、GASを介してCanvasのスライド内容をGoogleスライドに流し込むアプローチを採用。完璧な再現ではなく「楽に編集可能形式にする」ことを目的とする。

  • Canvasの正体はHTMLなので編集しづらい
  • Figma/Gensparkはデータ分散のデメリット
  • Googleドライブで完結させる目的でGAS経由を選択
  • 期待値は「完璧」ではなく「楽に」
CanvasGASGoogle Workspace
2. GeminiにGASを作らせるプロンプト+

前回作ったCanvasスライドを開いた状態で、Geminiに対し「このHTMLスライドをGoogleスライドに出力したいため、そのGASを作ってください」と依頼。さらに重要なのは「画像などは不要で、フォントの大きさや色味はそのまま再現してください」と付け加えること。

この一文を入れないと、GeminiがCanvas内の画像までスライドに無理やり貼ろうとしてGAS実行時にエラーが頻発する。「画像はいらない、レイアウトと文字だけ」と明示することでGASが安定動作する。

プロンプトを送るとGeminiが右側にGASコードを生成し、その下に「Googleスライドを開く→拡張機能→Apps Script→貼り付け→保存→実行」という手順までセットで提示してくれる。

  • 依頼文:「HTMLスライドをGoogleスライドに出力するGASを作って」
  • 必須追加:「画像などは不要、フォント・色味は再現」
  • 画像を含めようとするとGASがエラーで止まる
  • GeminiはGASコードと操作手順をセットで返してくれる
GeminiプロンプトGAS
3. GASは初心者でも怖くない(Apps Script基礎)+

GASとはGoogle Apps Scriptの略で、Googleの各アプリ同士をつなぐ簡易プログラムのこと。以前はエンジニアでないと書けなかったが、今はGeminiに依頼すれば一発で生成してくれるため、非エンジニアでも扱えるようになった。

本動画でも丹羽氏・山口氏は一切コードを書かず、Geminiが生成したGASをコピー&ペーストするだけで完結している。「GASと聞くとアレルギーが出る」という人でも安心して試せる内容。

生成されたGASの中身は理解する必要がなく、「スライド9、スライド10…」のようにCanvas内容を順番にGoogleスライドに変換していくコードになっている。

  • GAS=Google Apps Script、アプリ同士をつなぐ簡易プログラム
  • Geminiが書いてくれるので非エンジニアでもOK
  • 本動画ではコード1行も手書きしていない
  • GASの中身は理解不要、貼り付けて動かすだけ
GAS非エンジニアApps Script
4. Googleスライド→Apps Script→実行の手順+

実際の操作手順は以下の通り。(1)新規Googleスライドを開く(アプリランチャーまたはドライブから)。(2)上部メニューの「拡張機能」から「Apps Script」を選択するとスクリプトエディタが立ち上がる。(3)初期サンプルコード(function myFunction…)を全部削除する。(4)Geminiが生成したGASコードを全選択コピーして貼り付ける。(5)フロッピーディスクアイコンで保存。(6)上部に表示される関数名「createSlide」が選ばれた状態で「実行」をクリック。

初回実行時はGoogleアカウントの認証画面が表示される。「自分のアカウントを選択→詳細→(プロジェクト名)に移動→続行」の流れで承認すれば、以降は認証不要で実行できる。実行は数秒〜十数秒で完了し、元のGoogleスライドに戻ると、Canvasのスライド内容が10枚分まとめて生成された状態になっている。

  • 拡張機能 → Apps Script でエディタを開く
  • 初期コードは全削除してからGAS貼り付け
  • フロッピーアイコンで保存、createSlideを選んで実行
  • 初回は認証ダイアログ(自分のアカウントで続行)
  • 実行は数秒〜十数秒で完了
GoogleスライドApps Script実行手順
5. 再現度チェックと微調整のコツ+

出力されたGoogleスライドは、フォントサイズや色味までかなり元のCanvasに寄せて再現されている。サイズが小さめに配置されている場合はCtrl+Aで全選択→端に寄せて拡大、というシンプルな操作で元レイアウトに近づけられる。

表紙の画像や中面のアイコンは再現されないが、必要な箇所だけCanvasのスクショを撮ってGoogleスライドに貼り付け、サイズを合わせれば見た目はほぼ同等になる。動画内では奇数ページ=元Canvasのスクショ、偶数ページ=GAS出力版で並べて比較しており、見栄えに大差ないことを確認できる。

編集可能なテキスト要素になっているので、文言の微修正は普段のGoogleスライド・パワポと同じ感覚で進められる。指示出しから約20分で10ページが完成、人が一から作れば30〜40分以上かかる作業を一気に短縮できる。

  • フォント・色味は元Canvasにかなり近い再現度
  • Ctrl+Aで全選択して位置・サイズを微調整
  • 画像・アイコンが必要な箇所はスクショを貼り付けて対応
  • 全文編集可能な状態、文言修正は普段通り
  • 10ページ規模が約20分で完成
Googleスライド微調整時短
6. エラー対処はGeminiにスクショを渡すだけ+

GASを実行するとエラーで止まることもある。GAS初心者だと「どう直せばいいか分からない」と詰まりがちだが、対処法はシンプル。エラー画面のスクリーンショットを撮り、Geminiに「このエラーが出ました」と画像付きで送ればコードを直してくれる。

Geminiはマルチモーダル(画像・動画も理解できる)AIなので、スクショや短い動画キャプチャでも状況を伝えられる。「コードを見せて修正してもらう」を繰り返せば、最終的に動くGASにたどり着ける。

この「エラー→スクショ→Gemini修正→再実行」のループは、GASに限らずプログラム関連の問題全般に有効。コードが書けなくてもAIを介して動かせる時代の象徴的なワークフロー。

  • エラー画面のスクショをGeminiに渡す
  • 「このエラーが出ました」と一言添えて再生成依頼
  • Geminiのマルチモーダル特性を活かす
  • コードが読めなくてもループで解決可能
  • GAS以外のコード問題にも応用できる手法
エラー対処Geminiマルチモーダル
7. このワザの使いどころ+

毎回の資料作成でこのフローを使うとオーバースペック気味なので、「ここぞという資料」「気合いを入れたい提案資料」など、見栄えとスピードを両立させたい場面に絞って使うのが現実的。

GASによる出力はあくまで「文字・レイアウトの土台」を運んでくれるもので、最後の仕上げ(画像配置、細かい文言調整)は人間が担う。これにより、AIの強みである「ゼロから一気に作る速さ」と、人間の強みである「最終調整の精度」を組み合わせられる。

続編ではより速く完璧に近い形で持ってくる方法も予告されている。現時点でもこのテクニックは「人類が30〜40分かかる作業を20分に圧縮する」十分なインパクトがあり、Google Workspaceユーザーには大きな武器になる。

  • 毎回ではなく「ここぞ」の資料で使う
  • AIで土台、人間で最終調整というハイブリッド
  • 30〜40分の作業を20分に短縮
  • 続編でさらに高速・高再現な方法も予告
  • Google Workspaceユーザーには強い武器
使いどころワークフロー資料作成

2 視聴者の学び

※本記事はAI自動要約による非公式まとめです。 YouTubeチャンネル「NI-WORK(@ni-work)」様の動画を、社内学習・社内共有を目的としてAIで自動要約したものです。 NI-WORK様による公式発信ではなく、要約に誤りや解釈違いを含む可能性があります。 正確な情報は必ず元動画をご視聴ください。