HTMLスライド作成におけるGeminiとGoogle Antigravityの違いを徹底比較。画像配置のしやすさや用途別の選び方に加え、作成したスライドをGoogle VidsでAIナレーション付き動画に変換する2つの実践手順まで分かりやすく解説します。
GeminiとGoogle Antigravityの機能比較
HTMLスライドの作成や修正を行う際、ブラウザ上で手軽に使えるGemini(Canvas)と、ローカル環境で高度な開発ができるGoogle Antigravityのどちらを選ぶべきか迷います。
結論として、単一ファイルでのテキスト修正や即座のプレビュー確認にはGeminiが適しています。一方で、画像アセットの管理やGit連携、動画化を見据えた本格的なスライド制作にはGoogle Antigravityが有利です。
HTMLスライドを扱う際の主要な仕様と作業環境の違いは以下のとおりです。
| 比較項目 | Gemini (Canvas) | Google Antigravity (IDE) |
|---|---|---|
| 実行環境 | ブラウザ(インストール不要) | ローカル環境(デスクトップアプリ) |
| プレビュー機能 | Canvas画面で即時レンダリング | 内蔵ブラウザまたは外部ブラウザ実行 |
| 編集アプローチ | チャット指示およびインライン直接編集 | VS Code互換エディタ+自律エージェント |
| ファイル・Git管理 | 単一成果物の生成・コピー中心 | ローカルファイルシステム・Git完全連携 |
| 操作の手軽さ | 極めて高い(即座に作業開始可能) | ワークスペース設定や起動が必要 |
| 画像の埋め込み | Base64データまたはWeb上のURL | ローカル相対パス(<img src="...">) |
画像を配置するなら「Google Antigravity」が最適な理由
キャラクターイラストや操作画面のスクリーンショットをスライドに組み込む場合は、Google Antigravityの利用を推奨します。
コードの肥大化とトークン上限を回避できる
Gemini(Canvas)で画像を埋め込む場合、画像データを文字列化するBase64形式(データURI)を用いる必要があります。高解像度の画像を複数配置するとコード量が数万行に肥大化し、AIの出力トークン上限による生成中断や動作遅延を招きます。
Google Antigravityであれば <img src="./assets/image.png"> のように相対パスで記述できるため、HTMLコードを軽量に保てます。
アセットの管理と差し替えが容易
プロジェクトフォルダ内に assets/ や images/ ディレクトリを作成し、画像ファイルを配置するだけで参照可能です。画像のトリミングや修正を行った場合も、ローカルファイルを上書き保存するだけでスライド側に即時反映されます。
エージェントがファイル構造を自動認識する
Google Antigravityの自律エージェントは、ワークスペース内のディレクトリ構成を直接把握できます。
上記のような指示を出すだけで、適切なパス設定と配置コードの記述を自動で完了させることができます。
用途に応じたツールの選び方
目的に応じて最適な作業環境を選択してください。
Gemini(Canvas)が向いているケース
- スライドの文言や配色パターンを手軽に調整したい
- 編集した結果をその場でレンダリングして確認したい
- 単一のHTMLファイルで完結するシンプルな構成を作成したい
Google Antigravityが向いているケース
- スライドのコードをGitでバージョン管理したい
- CSSやJavaScript、画像を別ファイルに分割して保守性を高めたい
- スクリプトによる自動検証やブラウザテストを連携させたい
HTMLスライドをGoogle Vidsで動画化する2つの方法
Google VidsはHTMLファイルを直接インポートする機能に対応していません。そのため、HTMLスライドを動画化するには以下のいずれかの方法を用います。
| 項目 | 手順1: Googleスライド経由(推奨) | 手順2: 連番画像(PNG)直接配置 |
|---|---|---|
| 事前変換 | HTML ➜ 画像/PDF ➜ Googleスライド | HTML ➜ 連番PNG画像 |
| Vids側の連携 | スライドごとに自動でシーン分割・AI音声生成 | タイムラインへ手動配置・尺調整 |
| 最適な用途 | スライド動画を一括で自動生成したい場合 | シーンのタイミングを手動で細かく調整したい場合 |
手順1: Googleスライド経由で取り込む(推奨)
Google VidsのAIナレーション生成や自動シーン分割をフル活用できる標準的な手順です。
-
HTMLスライドを画像またはPDFとして書き出す Google Antigravityのターミナル環境を活用し、Playwright等を用いて各スライドを16:9(1920×1080)の画像またはPDF形式で一括保存します。
-
Googleスライドに配置する 新規のGoogleスライドを作成し、書き出したスライド画像を各ページに背景として配置します。
-
Google Vidsでインポートする Google Vidsの新規作成画面から「スライドを動画に変換」を選択し、先ほど作成したGoogleスライドを指定します。
手順2: 連番画像(PNG)として直接Google Vidsに配置する
各スライドの表示時間やアニメーションのタイミングを手動で細かくコントロールしたい場合の手順です。
-
HTMLスライドから連番PNG画像を書き出す 各スライドを1920×1080解像度のPNG画像として書き出します。
-
Google Vidsにメディアアップロードする Google Vidsの編集画面を開き、「メディア」メニューから画像を一括でアップロードします。
-
タイムラインにシーンを追加して配置する タイムライン上にシーンを作成し、各スライド画像を配置して表示秒数やナレーションを手動で調整します。
関連コンテンツ

を自動生成する手順-0-3-screenshot.png)
コメント