Gemini 3.1 ProでアニメーションSVGキャラクターを生成する方法｜プロンプト設計から実装まで

AIに「コードを書いて」と頼むのは、もう珍しくありません。しかし「アニメーション付きのキャラクターイラストをコードで描いて」と頼んで、ちゃんと動くものが返ってくる——これは2026年になって初めて現実的になった技術です。

Google Gemini 3.1 Proは、テキストプロンプトからWebにそのまま埋め込めるアニメーションSVGを直接生成できます。ピクセル画像ではなく、XMLベースのベクターコードとして出力されるため、どんな画面サイズでもくっきり表示され、ファイルサイズは数KBで済みます。

当社ラクタノでは、この能力を活用してAIロールプレイング研修のデモページに表示されるお客様キャラクターをGemini 3.1 Proで生成しました。まばたき、口パク、呼吸、髪揺れ——すべてがSVGとCSSだけで動いています。

この記事では、その実装方法をプロンプト設計から技術的な仕組みまで詳しく解説します。

なぜSVGなのか

Webでキャラクターアニメーションを実現する方法はいくつかあります。それぞれの特徴を比較してみましょう。

SVG + CSSの利点は明確です。

• ファイルサイズが極小: 当社のキャラクターSVGは約8KB。GIFの1/100以下
• 追加ライブラリ不要: ブラウザのネイティブ機能だけで動く
• プログラム制御が容易: JavaScriptからDOM操作でリアルタイムに状態を変更できる
• どの画面でもくっきり: Retinaディスプレイでも4Kモニターでもベクターなので劣化しない

そして2026年の最大のメリット——AIが直接生成できる。デザイナーに依頼せず、プロンプト一つで完成です。

Gemini 3.1 Proの SVG生成能力

何が変わったのか

Gemini 3 Proの時点でもSVG生成は可能でしたが、複雑な図形ではパーツが混ざったり、アニメーションが壊れたりする問題がありました。

Gemini 3.1 Proでは、Googleの開発チームが「構造的に正しいSVGコード」の生成能力を大幅に改善。以下のような進化が確認されています。

物理的な分離の理解

ペリカンが自転車に乗るSVGのテストで、Gemini 3.0では脚と車輪が融合してしまっていたものが、3.1では正しく分離され、ペダルを漕ぐ脚と回転する車輪が独立して動くようになった。

— Google AI Developers Blog

CSSアニメーションの精度

@keyframesの設計が論理的になり、タイミング関数やディレイの指定が人間のコーディングに近い品質で出力されます。will-changeヒントなどGPUアクセラレーションへの配慮も自動で含めてくれます。

複雑な構造の維持

10以上のパーツを持つSVGでも、グループ（タグ）の入れ子構造やID命名が一貫しており、後からJavaScriptで操作しやすい構造が保たれます。

実例：ロールプレイデモのキャラクター

完成品

当社のAIロールプレイング研修ページにアクセスすると、「今すぐ体験してみる」セクションにアニメーションするキャラクターが表示されます。

このキャラクターには以下の機能が実装されています。

1. まばたき（CSS自動アニメーション）

3〜5秒間隔で自然に瞬きします。目のグループ全体にscaleY(0.1)を一瞬適用するCSSキーフレームで実現しています。

@keyframes blink {
  0%, 45%, 49%, 100% { transform: scaleY(1); }
  47% { transform: scaleY(0.1); }
}

アニメーション時間を4.2秒にすることで、規則的すぎない自然なリズムを作っています。

2. 呼吸（CSS自動アニメーション）

キャラクター全体が微妙に上下動します。振幅はわずか2px、周期は3.5秒。意識して見ないとわからないレベルですが、これがあると「生きている感覚」が出ます。

@keyframes breathe {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(2px); }
}

3. 髪揺れ（CSS自動アニメーション）

前髪と後ろ髪にそれぞれ異なるアニメーションが設定されています。

• 前髪（#hair-front）: 微妙な回転（rotate(1.5deg)）で揺れる。周期5秒
• 後ろ髪（#hair-back）: 横方向の微動（translateX(1.5px)）。周期5.5秒

周期をずらすことで、単調にならない自然な動きが生まれます。

4. 口パク（JavaScript動的制御）

AIが話している時に、音声レベルに連動して口の形が変わります。SVGには3つの口の状態が定義されています。

JavaScriptで各パーツのdisplayプロパティを切り替えることで実現しています。CSSアニメーションでは対応できないリアルタイムな変化です。

5. 表情変化（JavaScript動的制御）

AIの応答内容に応じて、目の表情が3パターンに切り替わります。

口パクと同様、displayプロパティの切り替えで実装しています。

設計のポイント：「固定アニメ」と「動的アニメ」の分離

SVG内CSS: まばたき・呼吸・髪揺れ → SVGが自律的に動く（JSが壊れても動作する）

>

JavaScript制御: 口パク・表情変化 → アプリの状態に連動してリアルタイム変化

この設計により、SVGファイル単体でも「生きている」キャラクターとして機能し、JavaScriptが接続されるとさらに表情豊かになるという段階的な拡張が実現しています。

プロンプト設計のコツ

Gemini 3.1 Proで品質の高いアニメーションSVGキャラクターを生成するためのプロンプト設計のポイントを解説します。

1. SVG構造を明示的に指定する

AIに「いい感じに作って」と頼むのではなく、欲しいSVGの構造をテンプレートとして見せるのが最も効果的です。

効果的なプロンプトの例

>

SVG MUST use specific group IDs for programmatic control:

, , , , ,

このように、IDの命名規則と初期表示状態（display:none）まで指定すると、後からJavaScriptで操作しやすい構造が出力されます。

2. アニメーション仕様を具体的に書く

「まばたきアニメーションを付けて」では不十分です。タイミング、振幅、イージングまで指定しましょう。

具体的な指定の例

>

Blinking: Use scaleY(0.1) on the eye elements briefly (150ms) with a long pause between blinks. Animation-duration around 4s.

>

Breathing: Very subtle vertical oscillation (translateY 0 to 2px), duration ~3.5s, ease-in-out.

3. 技術的な制約を明示する

SVGアニメーションにはSMIL（SVGネイティブ）とCSS Keyframesの2つの方式がありますが、CSS Keyframesを指定すべきです。

制約の指定例

>

- Use CSS keyframes ONLY (no SMIL animations)

- All styles MUST be embedded in a single tag inside the SVG

- Use will-change hints for animated elements

- Total SVG should be under 15KB for web performance

SMIL はブラウザサポートに差があり、CSSの方が安定して動作します。will-changeはGPUアクセラレーションのヒントで、スムーズなアニメーションに効果的です。

4. 複数状態のパーツは「非表示で埋め込む」

口パクや表情変化など動的に切り替えるパーツは、すべての状態をSVGに含めておき、初期表示以外はdisplay:noneにするという設計が重要です。

これにより、JavaScriptからはdisplayプロパティの切り替えだけで状態変更ができ、新しいSVGパスを動的に生成する複雑さを回避できます。

5. パーツの重なり順を指定する

キャラクターイラストでは描画順序（重なり順）が重要です。SVGは記述順に後ろから前に描画されるため、以下のように指定します。

body → hair-back → head → eyebrows → eyes → mouth → hair-front

後ろ髪を先に、前髪を最後に描くことで、顔の周りに自然な髪の重なりが表現されます。

生成にかかった時間とコスト

参考までに、当社のキャラクターSVG生成の実績データです。

注目すべきは思考トークンが18,000以上使われている点です。Gemini 3.1 Proは、SVG出力前に内部で大量の推論を行い、パーツの座標計算やアニメーションタイミングの整合性を検証しています。この「考える力」が、品質の高いSVGを一発で生成できる理由です。

応用可能性

今回はロールプレイ研修のキャラクターを生成しましたが、同じ手法は以下のような用途にも応用できます。

Webサイトのマスコットキャラクター

企業サイトのマスコットを、デザイナーなしでアニメーション付きSVGとして制作。まばたきや手振りのアニメーションを入れれば、静止画とは比較にならない印象を与えられます。

チャットボットのアバター

テキストチャットのAIアシスタントに動くアバターを追加。応答中は口パクし、考え中は目線が動く——テキストだけのチャットより人間味が増します。

プレゼンテーション素材

スライドに埋め込むアニメーション図解。ローディングアニメーション、プロセスフロー、データビジュアライゼーションなど。

教育コンテンツ

eラーニングのナビゲーターキャラクター。受講者の進行状況に応じて表情が変わる仕掛けも、今回と同じ技術で実現できます。

まとめ

Gemini 3.1 Proは、「デザイナーなしでアニメーションキャラクターを作る」という、これまで非現実的だったことを可能にしました。

• プロンプト一つで、パーツ分割されたアニメーションSVGが生成される
• ファイルサイズ8KBで、追加ライブラリなしにWebに埋め込める
• CSSで自律的に動き、JavaScriptで動的制御もできる

当社のロールプレイデモで実際に動いているキャラクターは、この技術の一つの到達点です。ぜひサービスページで確認してみてください。

SVGキャラクターの制作やAIを活用したWebコンテンツ開発にご興味のある方は、お気軽にご相談ください。

関連記事

Gemini 3.1 Flash Live登場｜Googleの音声AIで「話せるAI」が現実に — デモを体験できます

Googleが2026年3月に公開した音声対話AI「Gemini 3.1 Flash Live」の全貌を解説。リアルタイム音声対話の仕組み、従来モデルとの違い、企業活用の可能性を詳しく紹介。当社のAIロールプレイング研修ページで実際に体験できるデモも公開中。

関連記事

【2026年最新】Google Gemini 3.1シリーズ完全ガイド｜Pro・Flash・画像生成の違いと企業活用法

Google Gemini 3.1シリーズのPro・Flash・Flash-Lite・画像生成モデルを徹底比較。料金・性能・企業導入事例まで、経営者が知るべきすべてを1記事にまとめました。