Start Chatting Now
gemini-3 フロントエンドプロトタイピング UI デザイン AI

数分で SVG アニメーション作成：Gemini 3.1 チュートリアル

Gemini3 Team · 2026年8月14日 · 13 min read

MidassAI ChatでGemini 3を試す
数分で SVG アニメーション作成：Gemini 3.1 チュートリアル

なぜコードベースのアニメーションが GIF を再び凌駕するのか

Google の 2026 年に向けたコードネイティブなビジュアル推進は、デザイナーを排除するものではありません。それは、プロンプトから直接小さく、無限解像度のアセットを配信するためのものです。Gemini 3.1 クラスのモデルは、埋め込み CSS または SMIL アニメーションを含む有効な SVG マークアップを出力できます。結果はピクセルではなく数式であるため、1 つのファイルでモバイルアイコンからヒーローセクションまで再エクスポートなしでスケールします。

このチュートリアルでは、MidassAI Chat で 3 つの段階的なプロジェクトに取り組みます。Figma のタイムラインも、After Effects も、最終スニペットを貼り付けるまでローカル IDE も必要ありません。

こんな方におすすめ

  • マイクロインタラクションをプロトタイピングするフロントエンド開発者
  • ランディングページ用の軽量ローダーやアイコンを必要とするマーケター
  • インタラクティブな図解（物理、化学、プロセスフロー）を作成する教育者
  • 高速なサイト上で 2 MB の GIF ローダーにうんざりしている anyone
MidassAI ChatでGemini 3を試す

プロンプト送信前の 3 つの制約：ゴミ出力を防ぐために

必ず最初のメッセージにこれらを含めてください：

  1. 出力形式: 「<svg で始まり </svg> で終わる、生の SVG コードのみを返してください。マークダウンのフェンスは不要。」
  2. アニメーションエンジン: 「SVG 内の <style> ブロック内で CSS @keyframes を使用してください」（SMIL のみの埋め込みが必要な場合は「<animateTransform> を使用してください」）。
  3. ビューポート: 「viewBox=0 0 100 100」、width/height=100%、preserveAspectRatio=xMidYMid meet。」

#1 がないと、CMS エディターでマークダウンラッパーと格闘することになります。#2 がないと、モデルが矛盾するアニメーション API を選択することがあります。#3 がないと、モバイルでレスポンシブレイアウトが崩れます。

プロジェクト 1：3 ドットのローディングスピナー（初級）

MidassAI Chat を開き、以下のプロンプトを送信します：

Write a single self-contained SVG loading indicator: three circles in a row, staggered bounce animation, 1.2s loop, colors #4F46E5 / #6366F1 / #818CF8. Output only raw SVG. Include CSS keyframes inside the SVG. viewBox 0 0 120 40.

60 秒で検証：

  1. 出力を <body> 内の空の .html ファイルにコピーします。
  2. Chrome で開きます。アニメーションはスムーズにループするはずです。
  3. ファイルサイズを確認します。3 KB 未満を期待してください。

一般的な修正: 円が上部でクリップされる場合は、返信してください：「viewBox の高さを 20% 増やし、バウンド振幅を 15% 減らしてください。」

プロジェクト 2：インタラクティブなボタンホバー状態（中級）

目標：ホバー時にストローク色を変形させる SVG アイコン。純粋な CSS、JavaScript なし。

プロンプトテンプレート：

Create an SVG icon (24×24 logical size, scalable) of a chat bubble. On :hover via CSS inside the SVG, transition stroke from #64748B to #2563EB over 200ms ease-out. Include role="img" and <title>Chat</title>. Output raw SVG only.

サイトのアイコンスロットに貼り付けるか、HTML にインラインで埋め込みます。ホバーは CSS 駆動であるため、静的ページおよびほとんどの CMS HTML ブロックで機能します。

落とし穴: 一部のサニタイザーは <style> タグを削除します。CMS がスタイルを削除する場合は、フォローアップで Gemini に「アニメーションを各要素のインライン style 属性に移動してください」と依頼してください。

プロジェクト 3：トリガー付き教育シミュレーション（上級）

Gemini を使用してインタラクティブな図解を作成する化学や物理の教育者に触発され、1 ファイルのシミュレーションを構築します：

Generate a single-file interactive SVG illustrating a simple state machine: Idle → Loading → Success. Include a <button> inside <foreignObject> labeled "Run". On click, animate a progress arc from 0° to 360° over 2s, then show a green checkmark. Use CSS classes toggled via minimal inline JS inside <script> within SVG (CDATA wrapped). Output only the SVG document.

テストチェックリスト：

  • ボタンクリックはサイクルごとに正確に 1 回発火する
  • 2 回目のクリックでアニメーションがクリーンにリセットされる
  • 外部アセットやフォントなし

ターゲットプラットフォームで <foreignObject> が失敗する場合は、Gemini に「foreignObject ボタンを href='#run' および :target CSS 疑似クラス使用する <a> トリガーに置き換えてください」と依頼してください。

イテレーションループ：やり直しなしでプロのように洗練させる方法

各返信を使い捨てではなくバージョンとして扱います：

  1. 現在の SVG を貼り付けます。
  2. 1 つの視覚的な変更を説明します（「イージングを遅く」、「グラデーションなしのフラットデザイン」）。
  3. 依頼します：「完全な更新された SVG を返してください。viewBox とアクセシビリティタイトルを維持してください。」

Gemini 3 は、座標をアンカーする空間編集を得意とします（「中央のドットを (50,50) から (50,45) に移動」）。

SVG タスクにおける Gemini 3.1 と旧モデルの比較

旧モデルはしばしば：

  • 壊れた XML を出力する（パスが閉じていない）
  • HTML と SVG 名前空間を誤って混合する
  • フォールバックなしで廃止された SMIL でアニメーションする

Gemini 3.1 クラスの出力は、ローダーとアイコンタスクでモダンブラウザで最初の試行でレンダリングされることが通常です。それでも、埋め込みコンテキスト（WordPress、Notion、メールクライアントはスクリプトを積極的に削除します）で常に検証してください。

comparison-table {"headers":["Output type","File size vs GIF","Scales to 4K?","Editable?"],"rows":[["Animated GIF","Large (100KB–2MB)","No (pixel blur)","No"],["Gemini SVG + CSS","Often <10KB","Yes","Yes — text edit"]]}}

公開前の本番チェックリスト

  • 出力を W3C SVG validator または同等のものに通す
  • Safari + Chrome でテスト（CSS アニメーションタイミングがわずかに異なる）
  • CMS が <style> / <script> を削除しないことを確認
  • prefers-reduced-motion メディアクエリを追加。フォローアップで Gemini に生成を依頼
  • 組織のポリシーに従って AI 支援アセットの属性を表示

このワークフローを使わないべき場合

以下の場合は AI 生成 SVG アニメーションをスキップしてください：

  • ブランドガイドラインでロックされたデザインシステムコンポーネントが必要な場合
  • Figma に既に複雑なイージングカーブを持つ Lottie 統合が必要な場合
  • タゲット環境がメール（SVG サポートは不均一）

マーケティングサイト、ドキュメントポータル、内部ツールにとって、プロンプトから SVG へはアイデアから埋め込みまでの最速路径の 1 つです。

次のステップ

プロジェクト 1 を実際に実行し、スピナーをステージングページに貼り付けて、ブランドカラーでイテレーションします。MidassAI Chat はブラウザ内で Gemini 3 クラスのコード生成を提供します。AI Studio プロジェクトのセットアップは不要です。

summary-box {"title":"Tutorial recap","rows":[["Tool","MidassAI Chat + Gemini 3"],["Output","Self-contained animated SVG"],["Key prompt rule","Raw SVG only, CSS keyframes inside"],["Validate","Browser + file size under 10KB"]]}}

関連記事

MidassAI ChatでGemini 3を試す