Gemini 3.1 ProのSVG Generation活用術：テキスト指示で動くアニメーションを生成

Webサイトの表現力を高めるために「動画」を埋め込むと、ページの読み込み速度が低下する——。 多くのWeb担当者やエンジニアが抱えるこのジレンマに対し、2026年2月に登場したGemini 3.1 Proがひとつの解を提示しました。

それは、動画ファイル（MP4やGIF）を作るのではなく、「動くSVGコード」を生成するというアプローチです。

本記事では、デザインツールを開くことなく、テキスト指示（プロンプト）だけで高品質なWebアニメーション素材を作成する「Code-based animation」の手法を解説します。現場の制作フローを劇的に軽くする、新しい「Vibe Coding」の世界を体験してください。

導入

「ちょっとしたローディングアニメーションが欲しいだけなのに、After Effectsを開いて、書き出して、ファイルサイズを圧縮して……」 こうした作業に数時間を費やし、挙句の果てに「スマホで見ると画質が荒い」と指摘された経験はないでしょうか。現場は常に、クオリティと納期の板挟みで悲鳴を上げているはずです。

Gemini 3.1 Proの登場で、この状況は一変します。 最大の特徴は、ピクセル（画素）で絵を描くのではなく、構造を理解した上でコード（SVGとCSS/JavaScript）を書く点にあります。これにより、以下のことが可能になります。

1. 超軽量: 動画ファイルに比べて容量が圧倒的に軽い。
2. 劣化なし: ベクターデータのため、どんな画面サイズでもくっきり表示される。
3. 修正容易: 色や速度の変更は、コード内の数値を書き換えるだけ。

この記事を読み終える頃には、あなたは「動画を作ってください」と依頼する側から、「コードで生成しました」と即座に実装する側へとステップアップしているでしょう。

前提条件

本記事の手順を実践するためには、以下の環境が必要です。

• Google AI Studio または Gemini Advanced（Gemini 3.1 Proモデルが利用可能な環境）
• Webブラウザ（Chrome推奨）
• テキストエディタ（VS Codeなど、メモ帳でも可）

対象読者:

• FigmaやIllustratorなしで素材を作りたいWeb担当者
• リッチなUIを低コストで実装したいフロントエンドエンジニア
• 「Vibe Coding（雰囲気でコードを書く）」を体験したいすべての方

※2026年2月21日時点の情報に基づきます。Gemini 3.1 Proはプレビュー版として提供されている場合があるため、商用利用の際は必ず最新のGoogle Cloud利用規約（Pre-GA Terms）をご確認ください。

画像生成AIとは違う？「コードベース・アニメーション」のメリット

これまでの画像生成AI（Midjourneyや従来のGeminiなど）は、あくまで「一枚の絵（ラスタ画像）」を出力するものでした。動かすためには、そこから動画生成AI（SoraやVeoなど）を通す必要があり、出力されるのは重たい動画ファイルでした。

Gemini 3.1 Proのアプローチは根本的に異なります。

1. 「描画」ではなく「記述」する

AIは「円が回転する動画」を作るのではなく、「円を描画し、それを回転させるCSSコード」を記述します。 これにより、デザインの意図（Design Intent）がコードとして保持されます。「もう少しゆっくり回して」という修正も、再生成ではなく数値の調整で済みます。

2. Core Web Vitals（表示速度）への貢献

Webサイトの評価において、ページの読み込み速度は致命的に重要です。 数MBあるGIFアニメーションを、数KBのSVGコードに置き換えることができれば、ユーザー体験は劇的に向上します。特にモバイル環境での表示速度改善は、blogなどのメディア運営においても大きなメリットとなります。

3. 無限の解像度

SVG（Scalable Vector Graphics）は計算式で図形を描画するため、スマートフォンの小さな画面から、4Kの大型モニターまで、どこまで拡大しても線がぼやけることはありません。

Gemini 3.1 ProでSVGアニメーションを作るプロンプト例

では、実際にどのような指示を出せばよいのでしょうか。 Gemini 3.1 Proは推論能力が高いため、細かな座標指定よりも「どのような動きか」「どんな雰囲気か」を伝えるVibe Coding的なアプローチが有効です。

ケース1：ミニマルなローディングアイコン

Webアプリや管理画面で頻繁に使うローディング表示を作成します。

プロンプト例:

Generate a minimalist SVG loading animation using a thin circular line. The line should be a gradient from blue to transparent, rotating smoothly in an infinite loop. The style should be organic and modern. （細い円形の線を使用した、ミニマルなSVGローディングアニメーションを生成してください。線は青から透明へのグラデーションで、無限ループで滑らかに回転します。スタイルは有機的でモダンなものにしてください。）

ケース2：インタラクティブなホバーエフェクト

ユーザーのアクションに反応するアイコンを作成します。

プロンプト例:

Create an SVG icon of a "Mail Envelope". When the user hovers over the icon, the flap of the envelope should open smoothly using CSS animation. Keep the design flat and material style. （「メールの封筒」のSVGアイコンを作成してください。ユーザーがアイコンにホバーすると、CSSアニメーションを使って封筒のフラップが滑らかに開くようにしてください。デザインはフラットでマテリアルスタイルにしてください。）

このように、「ホバーしたとき（When the user hovers）」といった条件分岐さえも、Geminiは理解してCSSの :hover 擬似クラスやJavaScriptとして実装してくれます。

Webサイトやアプリ開発での実装フロー

ここでは、Google AI Studioを使用して、実際にWebサイトへ組み込むまでの手順を解説します。

手順1：Google AI Studioでモデルを選択

Google AI Studioにアクセスし、モデル選択プルダウンから「Gemini 3.1 Pro」を選択します。 ※画面右側の「Model」設定で確認してください。

手順2：プロンプトを入力して実行

チャット欄に先ほどのプロンプトを入力し、「Run」をクリックします。 数秒待つと、コードブロックの中にSVGコード（<svg>...</svg>）が生成されます。

手順3：プレビューと調整

Google AI Studioのプレビュー機能、または生成されたコードをコピーして、ローカルのHTMLファイルに貼り付けてブラウザで開きます。 動きが速すぎる場合は、「Make the animation slower（アニメーションを遅くして）」と追加で指示を出せば、即座にコードが修正されます。

手順4：実装（コピー＆ペースト）

完成したコードをコピーし、自社のWebサイトやappのコードベースに貼り付けます。 WordPressなどのCMSを利用している場合は、「カスタムHTML」ブロックに貼り付けるだけで動作します。

Vibe Coding体験

Gemini 3.1 Proを使うと、コーディングの体験が「文字を打つ作業」から「AIと対話して正解を探る作業」へと変化します。これを業界ではVibe Coding（バイブコーディング）と呼び始めています。

「なんとなく、もっと弾むような感じで（Make it more bouncy）」 「色はもっと落ち着いたトーンで（More muted colors）」

こうした抽象的な指示（Vibe）を、AIが物理演算や色彩理論に基づいて具体的なコード（イージング関数やカラーコード）に変換してくれる体験こそが、Gemini 3.1 Proの真骨頂です。 エンジニアではないデザイナーやマーケターでも、自分のイメージを直接「動く形」にできる。これは、チーム内のコミュニケーションコストを大幅に下げる可能性を秘めています。

よくある失敗と対処

AIによるコード生成は強力ですが、完璧ではありません。現場で遭遇しやすいトラブルと解決策をまとめました。

Q1. アニメーションが動かない、または途中で止まる A. 生成されたSVGコード内に <style> タグが含まれているか確認してください。また、CSSアニメーションのプロパティに infinite（無限ループ）が指定されているかチェックしましょう。指示に「Ensure the animation loops infinitely（アニメーションが無限にループするようにしてください）」と加えると確実です。

Q2. ブラウザによって表示が崩れる A. 最新のCSS機能を使っている場合があります。「Make it compatible with major browsers（主要ブラウザと互換性を持たせて）」と指示し、ベンダープレフィックス（-webkit- など）を付与させるか、標準的な実装に書き換えさせてください。

Q3. コードが長すぎて途切れる A. 複雑なイラストをSVG化しようとすると、パスデータが膨大になり出力が途切れることがあります。「Simplify the paths（パスを単純化して）」と指示してデータ量を落とすか、Google AI Studioの出力トークン上限設定を確認してください。

運用を安定させるには

Gemini 3.1 Proでの素材作成は手軽ですが、業務フローとして定着させるには「管理」が重要です。

生成したSVGコードは、必ずGitなどでバージョン管理するか、Notionなどのドキュメントツールに「プロンプト」とセットで保存しておきましょう。「あの時のあのアニメーション、どうやって作ったっけ？」という事態を防ぐためです。

また、クリエイティブな作業に時間を割くためには、それ以外の「調整業務」を極力減らすことも大切です。 例えば、Web制作のプロジェクトでは、デザイン確認や要件定義のミーティング調整が頻繁に発生します。こうした日程調整業務をintegration機能が豊富な日程調整ツールで自動化し、空いた時間を「Vibe Coding」によるクオリティアップに充てる。そうした全体最適の視点を持つことが、DXを成功させる鍵となります。

まとめ

Gemini 3.1 ProによるSVG生成は、単なる「画像作成」ではありません。それは、Webサイトのパフォーマンスを維持しながら、表現力を飛躍的に高める「実装革命」です。

1. 動画ではなくコードで作る: 軽量で劣化しない。
2. Vibeで指示する: 専門知識がなくても、直感的な言葉でアニメーションが作れる。
3. 対話で修正する: エンジニアに依頼する手間なく、自分で微調整が可能。

まずは、Google AI Studioを開き、「シンプルな円が脈打つようなアニメーション（A simple pulsing circle animation）」を作ってみることから始めてみてください。その軽快さと、意図が通じる快感に驚くはずです。

そして、浮いた時間でさらに新しいクリエイティブに挑戦したり、calendar管理を見直してチームの生産性を高めたりと、次のアクションへと繋げていきましょう。