Gemini 3.1 Proの「動くSVG図解」がすごい｜作り方とプロンプト完全ガイド

わさびです。

「ペリカンが自転車に乗るSVGアニメーションをGeminiに頼んだら、前世代より劇的に良くなった」——そんな投稿がXで話題になった。

2026年2月20日にGoogleがリリースしたGemini 3.1 Pro、その目玉機能のひとつがテキストプロンプトから動くSVGを直接生成する能力だ。

ブログのヘッダー画像、LPのアニメーション、プレゼン資料の図解——そういったものが「日本語で指示するだけ」で作れる時代になっている。この記事では実際の作り方とプロンプト例を具体的に解説する。

SVGアニメーションとは何か

まず基礎を押さえておこう。

SVG（Scalable Vector Graphics）は、XML形式で記述するベクター画像のフォーマットだ。JPEGやPNGのように「ドット（ピクセル）の集まり」ではなく、「線と図形の数式的な定義」でできている。

通常の画像との違い：

• PNG/JPEG → 解像度固定。拡大するとぼける
• SVG → 解像度に依存しない。どんなサイズでも鮮明

そしてSVGには「アニメーション」を埋め込む仕組みがある。CSSの@keyframesやJavaScriptを使って、図形を動かしたり色を変えたりできる。最終的な出力は.svgファイル1個か、HTMLに埋め込まれたコードだ。

SVGアニメーションの5つのメリット

なぜ今SVGアニメーションが注目されているのか。

1. ファイルサイズが極小

同等の動きを表現したMP4やGIFと比較して、SVGは桁違いに軽い。数百行のコードで表現できるアニメーションが、動画ファイルなら数MBになる。Webページの読み込み速度に直結する。

2. どんな画面でも鮮明

ベクターなので4Kディスプレイでも、スマホの小さな画面でも、印刷しても鮮明。Retinaディスプレイに対応するために2倍画像を用意する必要がない。

3. CSSとJavaScriptで制御できる

SVGはWebページのDOMに直接埋め込める。つまり普通のHTML要素と同じように、CSSでスタイルを変えたり、JavaScriptでユーザーのクリックに反応させたりできる。

4. テキストデータなのでバージョン管理できる

画像はGitで差分管理しにくいが、SVGはテキスト（XML）なのでGitで管理できる。チームで制作するときも便利だ。

5. ループ再生が自然

animation-iteration-count: infiniteを指定するだけで永久ループする。GIFのようにファイルサイズが爆増しない。

Gemini 3.1 ProでSVGアニメーションを作る方法

使える環境

• Google AI Studio（aistudio.google.com）— 無料枠あり
• Gemini.google.com — Gemini Advanced（有料）
• Gemini API — 開発者向け

一番手軽なのはGoogle AI StudioかGemini.google.comだ。アカウント登録さえすれば今すぐ試せる。

基本的な使い方

プロンプトを入力してEnterを押すだけ。出力されたコードを.svgファイルとして保存するか、HTMLに<svg>...</svg>として貼り付ければ動く。

実際に使えるプロンプト例5選

プロンプト1：シンプルなローディングアニメーション

ミニマルなSVGローディングアニメーションを作ってください。
3つの円が左から右に順番にバウンスします。
色はティール（#00BCD4）、背景は濃いネイビー（#1a1a2e）。
ループ再生、高品質でプレミアムな雰囲気で。
単一のSVGファイルとして完結するコードを出力してください。

プロンプト2：フローチャート図解（アニメーション付き）

AIが記事を自動生成するフローを表すSVGアニメーションを作成してください。

フロー: RSS収集 → AI要約 → 記事生成 → WordPress投稿

各ステップを四角いボックスで表し、矢印でつなぐ。
アニメーション: 上から順番にフェードインしてスライドイン。
配色はグーグルブルー系（#4285F4）、フォントはゴシック体。
幅800px、高さ400px。

プロンプト3：インタラクティブな化学反応シミュレーション

SN2反応メカニズムのインタラクティブSVGシミュレーションを作成してください。

「反応開始」ボタンをクリックすると以下をアニメーションで表示:
- 求核試薬が背面から攻撃
- 脱離基が反対側から離脱
- 遷移状態での3つの水素結合の反転

SVGとCSS（SMILはオプション）で実装。
グループとIDを分離して管理しやすい構造にすること。

プロンプト4：ダッシュボード風の進捗アニメーション

サーキュラープログレスバーのSVGアニメーションを3つ並べて作ってください。

それぞれの設定:
- 「速度」: 75%、青
- 「品質」: 92%、緑
- 「コスト」: 61%、オレンジ

アニメーション: ページ読み込み時に0から各値まで2秒かけて増加。
数値もリアルタイムに変化表示。幅600px。

プロンプト5：キャラクターアニメーション

ペンギンがノートパソコンでコーディングしているSVGアニメーションを作ってください。

動作:
- 指がキーボードをタイプする動き（ループ）
- 画面に文字が流れる（コードが流れるエフェクト）
- 目が点滅する

かわいらしいデザイン、幅400px × 高さ400px。

実際のSVGコード例

シンプルなバウンスドットローダー

以下は3つの円がバウンスするローディングアニメーションのSVGコード例だ。ブログに貼り付けて動作確認できる。

<svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 120 40"width="120"height="40">
 <style>
   .dot{
     fill:#00BCD4;
     animation:bounce1.2sinfiniteease-in-out;
   }
   .dot:nth-child(2){animation-delay:0.2s;}
   .dot:nth-child(3){animation-delay:0.4s;}

   @keyframesbounce{
     0%,80%,100%{
       transform:translateY(0);
     }
     40%{
       transform:translateY(-20px);
     }
   }
 </style>
 <circleclass="dot"cx="20"cy="30"r="8"/>
 <circleclass="dot"cx="60"cy="30"r="8"/>
 <circleclass="dot"cx="100"cy="30"r="8"/>
</svg>

これをHTMLファイルに<div>の中に貼り付けるだけで動く。ファイルサイズはわずか数百バイトだ。

フェードインするフロー図

<svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 600 120"width="600"height="120"
    font-family="sans-serif">
 <style>
   .box{
     rx:8;ry:8;
     stroke:#4285F4;
     stroke-width:2;
     fill:#EEF4FF;
     animation:fadeSlide0.6sease-outboth;
   }
   .label{
     fill:#1a1a2e;
     font-size:13px;
     text-anchor:middle;
     dominant-baseline:middle;
     animation:fadeSlide0.6sease-outboth;
   }
   .arrow{
     stroke:#4285F4;
     stroke-width:2;
     fill:none;
     marker-end:url(#arrowhead);
     animation:fadeSlide0.6sease-outboth;
   }
   @keyframesfadeSlide{
     from{opacity:0;transform:translateY(-10px);}
     to  {opacity:1;transform:translateY(0);}
   }
   /*各要素を順番に表示*/
   .s1{animation-delay:0.0s;}
   .s2{animation-delay:0.4s;}
   .s3{animation-delay:0.8s;}
   .s4{animation-delay:1.2s;}
 </style>
 <defs>
   <markerid="arrowhead"markerWidth="10"markerHeight="7"
           refX="9"refY="3.5"orient="auto">
     <polygonpoints="0 0, 10 3.5, 0 7"fill="#4285F4"/>
   </marker>
 </defs>
 <!-- ボックス1 -->
 <rectclass="box s1"x="10" y="40"width="110"height="40"/>
 <textclass="label s1"x="65" y="60">RSS収集</text>
 <!-- 矢印1 -->
 <lineclass="arrow s1"x1="121"y1="60"x2="148"y2="60"/>
 <!-- ボックス2 -->
 <rectclass="box s2"x="150"y="40"width="110"height="40"/>
 <textclass="label s2"x="205"y="60">AI要約</text>
 <!-- 矢印2 -->
 <lineclass="arrow s2"x1="261"y1="60"x2="288"y2="60"/>
 <!-- ボックス3 -->
 <rectclass="box s3"x="290"y="40"width="110"height="40"/>
 <textclass="label s3"x="345"y="60">記事生成</text>
 <!-- 矢印3 -->
 <lineclass="arrow s3"x1="401"y1="60"x2="428"y2="60"/>
 <!-- ボックス4 -->
 <rectclass="box s4"x="430"y="40"width="130"height="40"/>
 <textclass="label s4"x="495"y="60">WordPress投稿</text>
</svg>

上記はAIコンテンツ生成のフローを順番にフェードインで表示するSVGだ。ブログの記事内に直接貼り付けられる。

活用できる場面

ブログ記事の図解

プロセスや仕組みの解説記事に動く図解を入れると、読者の理解が深まる。「クリックで動く」インタラクティブ要素は離脱率の低下にも効果的だ。

ランディングページのヒーロービジュアル

LPのファーストビューに動くアニメーションを入れる場合、従来は動画（MP4/WebM）か重いGIFを使っていた。SVGなら軽量でSEO（ページスピード）にも優しい。

プレゼンテーション資料

Google Slides、PowerPoint、Keynoteに直接埋め込める。プロセス図やアーキテクチャ図を動かすと、説明が格段にわかりやすくなる。

SNS素材

X（Twitter）はSVGを直接投稿できないが、ブラウザでSVGを開いてスクリーンショットやOBS録画でGIF/MP4に変換する使い方がある。Geminiが生成したSVGをベースに高品質なコンテンツを作れる。

教育コンテンツ

数学の関数グラフ、物理の運動シミュレーション、化学の反応メカニズム——複雑な概念をインタラクティブに説明できる。Duke大学のデジタルメディア研究室も、Gemini 3.1 ProでSN2反応シミュレーションを作成して教材として活用している。

Gemini 3.1 Pro vs Claude Artifacts：どちらを使うべきか

Claudeも「Artifacts」機能でSVGやインタラクティブなHTMLコンテンツを生成できる。公平に比較しておこう。

Gemini 3.1 Proの強み

• 推論性能が高い：ARC-AGI-2ベンチマークで77.1%を記録。複雑な構造のSVGでも論理的に組み立てる
• 大規模コンテキスト：1Mトークンのコンテキストウィンドウで、既存のコードベースや長い仕様書を丸ごと渡せる
• リアルタイムデータ連携：ISSの軌道データをリアルタイムで取得して可視化するような応用も可能
• Google AI StudioのUI：生成したSVGをその場でプレビューしながら修正を繰り返せる

Claude Artifactsの強み

• Artifacts UIの使いやすさ：生成されたコンテンツが右側にリアルタイムプレビューされ、コードと動作を並べて確認できる
• コード品質：Claude 3.7 SonnetはSVEのコードの正確性と可読性で評価が高い。エラーが少ない
• 対話的な修正：「もう少し丸くして」「色を青に」といった自然言語での修正が直感的
• ツール連携：Claude Codeと組み合わせてファイルシステムに直接書き出したり、既存プロジェクトに組み込んだりできる

どちらを選ぶか

結論として「競合ではなく、用途で使い分け」が正解だ。両方試して出力を比較するのが一番良い。

Tips・注意点

SVGはブラウザでそのまま開ける

生成されたコードをanimation.svgとして保存し、ブラウザで開くと即プレビューできる。VSCodeで編集しながら確認する方法も使いやすい。

属性のミスに注意

SVGは1文字のタイポでレンダリングが崩れる。Geminiが生成したコードをそのままコピーし、ブラウザの開発者ツール（F12）でエラーを確認する習慣をつけよう。

複雑すぎるアニメーションは分割依頼

「全部入り」のプロンプトを一度に出すと生成が安定しないことがある。まず「静止状態のSVGを作って」→「次にこのボックスにフェードインアニメーションを追加して」のように段階的に進める方が精度が上がる。

WordPressでの使い方

WordPressにSVGを埋め込む場合、セキュリティプラグインがブロックする場合がある。信頼できるSVGに限定してAllowed SVGsプラグインやwp_kses設定で許可する必要がある。

SMIL vs CSS Animation

SVGのアニメーション手法は主に2つある：

• CSS Animation：ブラウザ対応が広く、既存のCSSスキルが使える。推奨
• SMIL（Synchronized Multimedia Integration Language）：SVG独自のアニメーション記法。Chromeで一部非推奨になったため、プロンプトで「CSS animationを使って」と明示した方が安全

まとめ

Gemini 3.1 ProのSVGアニメーション生成は、2026年2月時点で「試してみる価値がある」レベルから「実際に使える」レベルに到達している。

特筆すべきは：

• Google AI Studioで無料から試せる
• テキストプロンプトだけでコピペ即使用のコードが出る
• Gemini 3 Proと比べて推論性能が2倍以上向上しており、複雑な構造のSVGでも崩れにくい

ブログの図解をGIFや静止画ではなくSVGに置き換えるだけで、ページ速度の改善と視覚的な訴求力の向上を同時に達成できる。Claude Artifactsと組み合わせながら、目的に合ったツールを使い分けていこう。

まずはGemini.google.comを開いて、「シンプルなローディングアニメーションSVGを作って」と入力してみてほしい。

Sources:
– Gemini 3.1 Pro Generates Animated SVGs for the Web
– Gemini 3 vs Gemini 3.1 Pro – SVG Animation (Simulation) – Duke Digital Media Community
– Gemini 3.1 Pro: A smarter model for your most complex tasks
– Gemini 3.1 Pro – Simon Willison
– Gemini 3.1: Features, Benchmarks, Hands-On Tests, and More | DataCamp
– Gemini 3.1 Pro for Designers: A Practical Guide