Geminiで「動く図解」を作る方法｜SVG生成の使い方とプロンプト実例

最近、X（旧Twitter）などでSVGアニメーションが話題なのはご存知でしょうか？

｢動く図解がすごい」「Geminiで作った」「コードを貼るだけで動いた」――。

X（旧Twitter）のタイムラインにも、こんな投稿が急増しました。 「クレイジー」「革命的」という声まで上がっているのですが、皆さまはもう試しましたか？

実は、これGeminiにテキストで指示するだけで作れてしまうんです。 CanvaもPowerPointも不要。「動く図解」「動くスライド」「動くアイコン」が、プロンプト1つでたった数分で完成します。しかも出力されたコードをWordPressなどに貼るだけで、そのままブログや記事に埋め込めてしまいます。

この記事では、Geminiを使った動く図解（SVG形式）の作り方を、初心者の方でもすぐ実践できるようにゼロから解説します。

※ そもそもGeminiを使ったことがない方は、こちらの記事をご参照ください→ Gemini初心者でもできる！Googleスライド作成のやり方

---

｢動く図解（SVG）」とは何か？画像生成AIとの違いも解説

まず「SVG」という言葉に馴染みのない方のために、ひとことで説明します。

SVG（エスブイジー）とは、数式で描かれたベクター形式の画像フォーマットのことです。JPEGやPNGのような「ドットの集まり」ではなく、「線と図形の定義」で成り立っているため、どんなサイズに拡大・縮小しても画質が劣化しません。 さらに、CSS（スタイルシート）やJavaScriptと組み合わせることで、「動く図解」「動くアニメーション」「インタラクティブなスライド」を1つのファイルで実現できます。

では、Geminiのようなテキスト生成AIが作るSVGは、MidjourneyやStable Diffusionのような「画像生成AI」と何が違うのか？

ここが面白いんです。
画像生成AIは「絵（ピクセル）」を出力しますが、GeminiはSVGの「コード」を書いてくれます。つまり、出力されたコードをそのまま貼り付けるだけで、ブログなどで使える動く図解が完成する、というわけです。 動画ファイルと比べてファイルサイズが圧倒的に軽く、SEO（ページスピード）にも優しい点がブロガーなどにとって大きなメリットです。

---

使えるモデルとアクセス方法を確認しよう

Geminiでは複数のモデルが提供されています。
SVG生成を目的とする場合、どのモデルを選ぶかで品質が大きく変わります。

モデル	SVG生成の特徴	アクセス方法
Gemini 3.1 Pro	最高品質・アニメーション対応・最新（パブリックプレビュー）	Geminiアプリ（有料プラン）
Gemini 3 Flash	高速・シンプルな図解向け・軽量	Geminiアプリ / API
Gemini 2.5 Pro	前世代・基本的な静的図解は十分	Geminiアプリ（Proプラン）

なお、Gemini 3.1 Proは現時点では「パブリックプレビュー」段階のため、仕様や制限が変更される可能性があります。 初めて試す場合は、Geminiアプリ（gemini.google.com）の有料プランからアクセスするのがおすすめです。

※ Gemini 3.1 Proのスペックや料金プランについて詳しく知りたい方はこちら→ Google「Gemini 3.1 Pro」発表──推論性能が前世代の2倍超に

---

実践：動く図解を2ステップで作ってみよう

では、実際に動く図解を作る手順を見ていきましょう。

STEP 1：Canvasモードを選んでからプロンプトを入力する

まずGeminiアプリ（gemini.google.com）でプロンプトを入力する前に、テキストボックス下部の「Canvas」ボタンをクリックします。Canvasモードをオンにしておくことで、SVGコードが生成されたあとすぐ画面上でプレビューを確認できます。Canvasを選ばずに入力してしまうと、コードがテキストとして出力されるだけでプレビューが見られないため、必ずこの手順を先に行いましょう。

プロンプトを書くときは、必ず「SVG形式で出力して」と明示することが重要です。 指定しないと、テキストや別の形式で出力されることがあります。また、アニメーションをずっと動かし続けたい場合は「ループ再生で」と明示するのがポイントです。指定しないと1回だけ動いて止まるフェードイン系のアニメーションになることがあります。

また、「business slide compatible SVG」と付け加えると、ビジネス資料向けの配色・レイアウトに自動で調整してくれます[1]。

STEP 2：コードをコピーして保存する

CanvasモードでSVGを生成した場合、Canvas画面の上部にあるの「コード」タブからコードを取得できます。Canvasを使わなかった場合は、出力された<svg>...</svg>をすべてコピーできます。メモ帳（Mac ならテキストエディタ）に貼り付け、ファイル名を「○○.svg」として保存します。このとき文字コードをUTF-8に指定することを忘れずに。

あとは、ご自身のサイトやブログに貼り付けてみましょう。

実際に作ってみた：プロンプト＆SVGサンプル3選

ここからは、実際にGeminiに入力したプロンプトと、生成されたSVGをそのまま掲載します。 コピペするだけで皆さまも同じものが作れますので、ぜひ試してみてください。

① GeminiとChatGPTの比較図

使ったプロンプト：

GeminiとChatGPTのSVG生成能力を比較する図をSVG形式で出力して。
4つの比較項目（SVG生成品質・アニメーション対応・WordPress連携・無料利用）を縦に並べたテーブル形式で。
ビジネス資料向けのシンプルなデザインで、以下のアニメーションをループ再生で入れて。
- 各行が左右から勢いよくスライドインして登場する（左カラムは左から、右カラムは右から）
- 登場後は各行が交互にパルス（軽くスケールアップ→戻る）を繰り返す
- 行と行の登場は0.15秒ずつずらしてウェーブ状に見せる
- イージングはease-out-backで少しバウンドする感じに

生成されたSVG：

---

② AIで記事を作る4ステップ フロー図（アニメーション付き）

使ったプロンプト：

AIで記事を作る4ステップのフロー図をSVGアニメーションで作って。
RSS収集→AI要約→記事生成→WordPress投稿の流れで、横並びのカード型デザイン、Googleカラー系で。
以下のアニメーションをループ再生で入れて。
- 各カードが下から勢いよくスライドアップして順番に登場（0.25秒ずつずらす）
- カード間をつなぐ矢印が登場後にビームのように右へ伸びる
- 全カード登場後、ハイライトが左から右へ流れる光沢エフェクトをループ

生成されたSVG：

---

③ ローディングアニメーション

使ったプロンプト：

3つの円が順番にバウンスするSVGローディングアニメーションを作って。
ティール色（#00BCD4）、背景は濃いネイビー（#1a1a2e）、ループ再生で。
以下の動きを入れて。
- バウンスは高さをダイナミックに（通常の2倍以上跳ね上がる）
- 円が最高点でわずかにスクワッシュ＆ストレッチする（縦に伸びる）
- 着地時に軽く潰れてから跳ね返る
- 円の影がバウンスに合わせて地面で拡縮する

生成されたSVG：

---

まとめ

今回の内容を振り返ると、以下の3点がポイントです。

• Gemini 3.1 Proを使えば、「動く図解」「動くスライド」「ローディングアニメーション」がプロンプト1つで作れる
• Geminiアプリの有料プランでGemini 3.1 Proにアクセスでき、まず試したい場合はGoogle AI StudioでGemini 2.5 Proを無料で確認できる

｢SVGって難しそう」と思っていた方も、実際に試してみると拍子抜けするほど簡単です。 まずは今回紹介した3つのプロンプトをそのままコピーして、1つ作ってみることをおすすめします。

---

---

最終更新日：2026年3月1日

※免責事項 本記事の情報は執筆時点のものです。AI技術は急速に進歩しているため、最新情報については各サービスの公式サイトをご確認ください。

Citations:
[1] Gemini 3.1 Pro: Announcing our latest Gemini AI model（Google公式ブログ）
[2] Google AI Studio（Gemini利用環境）
[3] Gemini 3.1 Pro — The Register（第三者メディア解説）
[4] Gemini 3.1 Pro Model Card（Google DeepMind）
[5] How to Animate SVGs with Gemini AI（VectoSolve Blog）