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

【ツール公開】Canvas 山口式16:9のスライド結合トラブルをツールで解決。素早く編集も可能!【Gemini/Google Workspace/生成AI】

📅 2025年10月22日 ⏱ 14:37
GeminiCanvasスライドWorkspace

GeminiのCanvasで作った16:9スライドを最後に結合するとデザインが崩れる問題を、Canvasで自作した「HTML結合・編集アプリ」で解決。何でも生成AIに任せず人が編集する選択肢を示す実践Tips。

山口式16:9で1枚ずつ作ったCanvasスライドを最後に結合させると、最近はAIが勝手にデザイン・配色・アイコンを変えてしまう事象が頻発。原因は処理量の重さ。抜本対策として「結合と編集だけはAIに任せず人がやる」発想で山口さんがCanvas上で自作したHTML結合・編集アプリを公開。HTMLコードを貼り付けるだけで順番入替・テキスト編集・色サイズ変更ができ、最終的に1個のHTMLとしてエクスポートできる。あわせて最近Canvasに追加された「選択して質問」機能(1枚だけ再生成や画像差し替えに有効)も紹介。「無理やり生成AIで完結させず、HTMLという素直な形式を活かして人が編集する」というメッセージ。

1 詳細トピック

今週のハイライト

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

  • Canvas 16:9スライドの結合で、最近は元データのデザイン・アイコン・配色が勝手に変わる事象が多発
  • 原因はAIの処理量負荷。ページ数が多いほど揺らぎが大きくなる
  • 山口さんがCanvasで1日で自作したHTML結合・編集アプリを無償公開(Googleサイト埋め込み)
  • HTMLコピー→貼付で順番入替・複数Geminiから良いスライドだけ厳選結合が可能
  • 編集機能はGoogleドキュメント類似UIで、文字編集・サイズ変更・色変更がHTMLを直接編集する形で可能
  • 結合後はHTMLエクスポート→GoogleサイトやGASでGoogleスライド化など二次活用ができる
  • Canvasに「選択して質問」機能(ヘルプミーライト相当)が追加、1枚だけ再生成や画像差し替えに有効
  • ブラウザ更新でデータが消えるため、必ずエクスポートまたはコピー保存が必要(自己責任公開)

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

1. Canvasスライド結合が「うまくいかない問題」とは+

山口式16:9で1枚ずつ作ったスライドを、最後にCanvasへ「これ結合して」と依頼すると、以前(8月3日撮影時点)は元のデザインそのまま結合できていたが、最近は勝手に内容が変わる事象が頻発している。

具体的には、表紙はあまり変わらないが2枚目以降のグラフ・アイコン・配色が変わってしまったり、16:9のアスペクト比が崩れたり、せっかく作り込んだデザインと違うものになる。視聴者からも多数コメントが寄せられている事象。

原因の見立てとしては、生成AIの処理量負荷。ページ数が多いほど揺らぎが大きくなり、10枚・12枚を一気に結合させようとすると崩れやすい。

  • 山口式16:9で1枚ずつ作ったスライドを最後に結合する場面で発生
  • 8月3日撮影時点では問題なかったが、最近は崩れるケースが急増
  • デザイン変更・アイコン変更・16:9崩れなど症状はさまざま
  • 原因はAIの処理量負荷で、ページ数が多いほど揺らぎが大きい
CanvasGeminiスライド
2. 抜本対策は「人が結合する」発想への切り替え+

無理やり生成AIで結合を成功させようとしても揺らぎは消えない。発想を変え、「結合と編集だけはAIに任せず人がやる」アプローチを採用する。

CanvasのアウトプットはHTML(一般的なホームページの形式)なので、HTMLを簡単に編集・結合できるアプリを用意すれば、生成AIに任せたときと同じデザインを崩さず1つにまとめられる。

何でも生成AIで完結させるのではなく、「生成AIが苦手な工程は人が編集する」という視点を提供するのが本動画の核となるメッセージ。

  • AIに無理やり結合させる不確定な対処はやめる
  • CanvasのアウトプットはHTMLなので人が編集しやすい
  • 「結合・編集は人」と切り分けることでデザインを崩さず再現可能
  • 生成AIで何でも完結させないという視点が重要
生成AIワークフローHTML
3. 山口さん自作のHTML結合アプリ(無料公開)+

山口さんがCanvas上で1日で自作した「HTML結合アプリ」を公開。Googleサイトに埋め込んでそのまま誰でも使える形で配布する。バグが残っている可能性があるため自己責任での利用を呼びかけ。

使い方は単純で、Canvasで作ったスライドからコード表示(またはコピー)でHTMLを取得し、アプリの「HTMLから追加」に貼り付けて追加ボタンを押すだけ。プレビューが順に表示され、いらないスライドの削除、ドラッグでの順番入替もできる。

さらに重要な使い方として、新規Geminiセッションで何度も作り直し、「良いスライドだけ厳選して結合する」運用が可能。無料Geminiユーザーが1日5枚ずつ生成して厳選結合するワークフローにも向く。

  • Canvasで1日で自作したシンプルな結合アプリ、Googleサイトに埋め込み無料公開
  • HTMLコピー→貼付→追加ボタンで結合、不要スライド削除や順番入替も可能
  • 新規Geminiで何度も生成 → 良いスライドだけ厳選結合という運用ができる
  • 無料Geminiの1日生成制限に対応した実践ワークフロー
  • バグ可能性あり、自己責任公開と明言
CanvasアプリHTML結合
4. 編集機能:HTMLを直接編集できるGoogleドキュメント風UI+

結合だけでなく編集機能も搭載。編集ボタンを押すと、HTMLが画面内に展開され、Googleドキュメント類似のUIで文字編集・サイズ変更・色変更が可能。たとえばタイトル文字を選択して20pxに大きくしたり、赤色に変更したりできる。

これはHTMLを直接編集するアプリなので、生成AIに「ここの文字を変えて」と依頼するときに発生する「中身が勝手に変わるリスク」がない。山口さん曰くこの編集機能の実装には一番時間がかかったが、それでも1日程度で完成したとのこと。

結合・編集が完了したら、HTMLコピーまたはエクスポートで端末にダウンロードでき、1個のHTMLファイルとして1ページ目・2ページ目…が連結された形で保存される。

  • 編集ボタンでGoogleドキュメント類似UIに切り替え
  • 文字編集・フォントサイズ変更・色変更がHTMLを直接編集する形で可能
  • AIに頼まないため「勝手に内容が変わる」リスクがない
  • 完了後はHTMLコピー or エクスポートで1個のHTMLとして保存
Canvas編集HTML
5. 結合後のHTMLの二次活用(Googleサイト・Googleスライド化)+

エクスポートした1個のHTMLは、前回動画で紹介したGoogleサイトに貼り付けて公開できるほか、GASを使ってGoogleスライドへ変換することも可能。Googleスライドに変換すればさらにスライド単位で編集できるようになる。

つまり「Canvasで1枚ずつ高精度に生成 → 自作アプリで結合・編集 → HTMLエクスポート → Googleサイト or Googleスライドで二次活用」というワークフロー全体が成立する。Canvasがあえて出力をHTMLにしているのは、こうした柔軟な処理を可能にするGoogleの意図でもありそうだとコメント。

  • エクスポートHTMLは前回紹介のGoogleサイトに貼り付け公開可能
  • GASでGoogleスライドへ変換すれば従来通り編集できる
  • Canvasの出力がHTMLという素直な形式だから二次活用の柔軟性が高い
  • 「1枚生成→結合→二次活用」のワークフローが完成
GoogleサイトGASGoogleスライド
6. 結合アプリの注意点(データ非保持)+

結合アプリには重要な注意点があり、ブラウザを更新するとデータがすべて消える(データを保持していない)。これは複雑化を避けるため、あえてダウンロードのみに機能を絞った設計。

山口さん個人のバージョンではCanvasのデータベース機能を使ったデータ保持版もあるが、皆さんに配布するにあたっては機能を排除したとのこと。

対策としては、結合・編集が終わったら必ずエクスポート、もしくはHTMLをコピーしてGoogleドキュメントなどへバックアップ保存する運用が必要。原始的だが確実な方法。

  • ブラウザ更新でデータが全消去される(データ非保持設計)
  • 複雑化を避けるためあえてデータベース機能を排除
  • 対策:作業完了後に必ずエクスポートまたはHTMLコピーで保存
  • 山口さん個人版にはデータベース化バージョンも存在
注意点データ保存アプリ
7. Canvas新機能「選択して質問」(8月後半〜9月頭追加)+

最近Canvasに追加された「選択して質問」機能(右下、ヘルプミーライト相当)も補足紹介。スライドの一部を選択して質問・修正依頼ができる機能で、1枚だけを再生成する形で動作する。

メリットは、全体を再生成しないため処理が軽く、山口式16:9で1枚ずつ分割して作っておく運用と相性が良いこと。例えば「ここの画像だけテントメインに差し替えて」のような画像差し替え依頼に有効で、AIが画像を生成または検索して差し替えてくれる。

上部の「キャッチコピーを作成」のような自動生成ボタンも、Canvasが内容に応じて勝手にどこかに作ってくれる親切設計。ただし指定はしづらく、コントロール性は低い。

細かい文字修正はHTML編集アプリの方が中身を保てて安全だが、画像差し替えなど「再生成が必要な小修正」は新機能が向くという棲み分けの感覚を示している。

  • 8月後半〜9月頭にCanvasに追加された機能、右下「選択して質問」
  • 1枚だけ再生成するため処理が軽く、山口式16:9と相性が良い
  • 画像差し替え(例:テントメインに変更)のような用途で有効
  • 「キャッチコピー作成」など自動生成ボタンをCanvasが勝手に作る親切設計
  • 細かい文字修正はHTML編集アプリの方が安全、画像差し替えは新機能、と使い分け
Canvas新機能Gemini
8. 全体メッセージ:何でも生成AIで完結させない+

本動画の核となるメッセージは、Geminiは負荷をかけすぎると誤作動を起こしやすく、かつ人間が簡単に編集できる工程まで無理やりAIにさせるべきではない、という視点。一度立ち止まって「他のやり方はないか」を考えることが重要。

CanvasのアウトプットがHTMLという一般的で扱いやすい形式である以上、結合・編集を市販のHTML編集ソフトや自作の簡単なアプリで処理する選択肢を必ず検討すべき。Canvas自体でアプリを練習として作る経験も有意義。

10月時点の視聴者向けの結論として、「HTML編集はHTML編集ソフトや簡単なツールでパッと文字変更した方がいい」と明示している。

  • Geminiは負荷で誤作動しやすく、人が編集できる工程までAI任せにしない
  • Canvasのアウトプットは扱いやすいHTML形式、市販ソフトや自作アプリで処理可能
  • 立ち止まって「他のやり方はないか」を考える視点が大事
  • Canvasでアプリを作る練習自体も有意義
  • 結論:HTML編集はHTML編集ソフトで簡単に処理するのが現実的
生成AIワークフローTips

2 視聴者の学び

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