デザイナーのためのGemini 3.1 Pro：SVG作業への影響

Googleは常に新しいモデルをリリースしています。ほとんどの改善はインクリメンタル — 実際のモデルの動作を変えないベンチマーク上の数ポイント。Gemini 3.1 Proはそのようなインクリメンタルな更新ではありません。

SVGアニメーション作業に関して言えば、2.5 Proから3.1 Proへのジャンプは、AIモデル世代における最大の単一品質向上です。この記事では何が変わったかを分析し、実際のCSS差分を示し、アニメーションあたり追加の0.25クレジットがいつ価値があるかを判断するお手伝いをします。

まず数字から

同じ50のアニメーションプロンプトを両モデルに投入し、4つの基準で出力を評価しました。10点満点の生スコア：

全基準で25%の品質向上は相当なものです。しかし数字は物語の半分しか語りません。CSS出力で実際に何が変わったか見ていきましょう。

並べて比較：同じプロンプト、2つのモデル

プロンプト：「3つのアイコンが下からバウンスで現れ、150msずつずらす。タイトルはアイコンが終わった後に右からスライドイン。」

Gemini 2.5 Pro出力

@keyframes bounceIn {
  0% { transform: translateY(30px); opacity: 0; }
  60% { transform: translateY(-5px); }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideRight {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

#icon1 { animation: bounceIn 0.5s ease 0s both; }
#icon2 { animation: bounceIn 0.5s ease 0.15s both; }
#icon3 { animation: bounceIn 0.5s ease 0.3s both; }
#title { animation: slideRight 0.5s ease 0.8s both; }

動作します。アイコンがバウンスし、タイトルがスライド。しかしよく見ると：

• バウンスにオーバーシュートがない — -5pxまで行って戻るだけで、「バウンス」というより「ポップ」に感じる
• ジェネリックなeaseタイミング関数ばかり — カスタムベジエカーブなし
• タイトルは0.8sで開始、これは正しい（0.3sスタガー + 0.5s持続時間）が視覚的な呼吸空間がない
• will-changeパフォーマンスヒントなし

Gemini 3.1 Pro出力

@keyframes bounceUp {
  0% {
    transform: translateY(24px) scale(0.95);
    opacity: 0;
  }
  50% {
    transform: translateY(-6px) scale(1.02);
    opacity: 1;
  }
  70% {
    transform: translateY(2px) scale(0.99);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes slideFromRight {
  0% { transform: translateX(32px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

#icon1 {
  will-change: transform, opacity;
  animation: bounceUp 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0s both;
}
#icon2 {
  will-change: transform, opacity;
  animation: bounceUp 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}
#icon3 {
  will-change: transform, opacity;
  animation: bounceUp 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}
#title {
  will-change: transform, opacity;
  animation: slideFromRight 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both;
}

違いはコードからも明白です：

• 4キーフレームバウンス：オーバーシュート（50% -> 6px上昇 + scale 1.02）と微細な安定化（70% -> 2px下降 + scale 0.99）。バネ物理を持つ本物のバウンス感を生み出します。
• Scale + translateの組み合わせ：バウンスは単なる垂直移動ではなく、微妙にスケールし、1930年代からアニメーターが使ってきた「つぶれと伸び」効果を追加。
• カスタムcubic-bezierカーブ：(0.34, 1.56, 0.64, 1)はターゲットをオーバーシュートして安定するスプリングイージング。タイトルは異なるカーブを使用 — より滑らかで控えめ。
• will-changeヒント：ブラウザにGPUアクセラレーションを指示し、60fpsでより滑らかなアニメーションを実現。
• 改善されたタイトル遅延：0.8sではなく1.0s — 最後のアイコンの後に200msのギャップがあり、テキストが現れる前に視線が「着地」できる。Gemini 3.1が自動適用するプロのアニメーション原則。

「2.5 Proの出力は動く。3.1 Proの出力は呼吸する。」- VectoSolve

3.1が一貫して優れている3つの領域

1. マルチ要素コレオグラフィ

差が最も大きい領域です。両モデルに特定のタイミング関係で8+要素をオーケストレーションさせると、2.5 Proはミスを始めます — 遅延計算の誤り、順序を間違えた要素アニメーション、合わないスタガー計算。Gemini 3.1 Proはこれらのプロンプトを確実に処理します。

テスト：アイコン、ラベル、接続線、タイトルからなる15要素のインフォグラフィックSVG。プロンプトは3秒間の4段階リビールを記述。Gemini 3.1 Proは初回生成で正確なタイミングを出力。Gemini 2.5 Proは近づくのに3回の再生成が必要で、最終出力にまだ1つのタイミングエラーがありました。

2. 曖昧なプロンプトの解釈

すべてのユーザーが完璧なアニメーションプロンプトを書くわけではありません。「生き生きさせて」と言われたとき、Gemini 2.5 Proは通常ジェネリックなパルスやフェードループを追加していました。Gemini 3.1 Proはよりコンテキストに適切な選択をします — 有機的な形にはブリージングアニメーション、機械的要素には微妙な回転、装飾要素にはシマー。

SVG構造を読み取り、コンテンツに合ったアニメーションスタイルを選びます。歯車アイコンには回転。花には穏やかな揺れ。テキスト要素にはフェードイン。以前のモデルが一貫して行わなかったデザイン的に理にかなった選択です。

3. 人間的に感じるイージング

最も微細な改善ですが、プロダクション作業では最も重要と言えるでしょう。アニメーションの「感触」はイージングカーブから来ます — モーションの加速と減速。リニアイージングはロボット的です。良いイージングは自然です。

Gemini 3.1 Proは一貫して手作り感のあるアニメーションを生成します。適切な減衰を持つスプリング。滑らかに減速するエントランス。優雅に加速するイグジット。違いは常に意識的ではありません — 視聴者はなぜアニメーションが「より良く感じる」か言語化できないかもしれません — しかし知覚される品質への累積効果は重大です。

VectoSolveでの各ティアの使い分け

VectoSolveは3つのGeminiモデルを価格ティアとして提供しています。実用的な意思決定フレームワーク：

Eco（0.10クレジット — Gemini Flash）を選択：アニメーションが機能的で感情的でないとき。ローディングスピナー。ホバーエフェクト。シンプルなページロードフェードイン。品質は十分で、コストは無視できるレベルです。

Standard（0.25クレジット — Gemini 2.5 Pro）を選択：予算を深く考えずに良い結果が欲しいとき。5要素のSVG、適度なスタガーシーケンス、標準的なエントランスアニメーション。実際のアニメーションタスクの60%をうまく処理します。

Pro（0.50クレジット — Gemini 3.1 Pro）を選択：アニメーションが評価されるとき。クライアントプレゼンテーション。ポートフォリオ作品。ブランドアイデンティティアニメーション。ランディングページヒーロー。ベストセラーデザインのEtsyリスティング。「まあまあ」と「洗練」の違いが重要な場面 — Standardからわずか0.25クレジットの追加で、ほぼ常にそうです。

同じ改善がコンテンツ生成にも適用

VectoSolveのAIコンテンツジェネレーターもGeminiをテキスト出力に使用 — Etsyリスティング、ブログ記事、alt テキスト。改善された言語モデルは：

• AIクリシェフレーズが減少（「今日の急速に変化する世界で...」「あなたが...であれ」）
• より多様な文構造 — 人間が書いたように読める
• キーワード統合の改善 — 用語が文章中に自然に現れ、各文に強制されない
• デザイン特有の語彙 — AIが視覚要素をより正確に識別・命名

古いAIライティングツールを使ってジェネリックな品質に失望した方は、現世代を再検討する価値があります。特に¥15のEtsyリスティング生成は、ほとんどの販売者が編集なしでそのまま貼り付けるコンテンツを生成します。

まとめ

Gemini 3.1 Proはマージナルなアップグレードではありません。動くCSSとパフォーマンスするCSSの違いです。機能するアニメーションと魅了するアニメーションの違い。修正が必要なAI出力と納品可能なAI出力の違いです。

アニメーションあたり0.50クレジットで、Proティアはこれを読みながら飲んでいるコーヒーより安い。クライアントや一般に見られるSVGアニメーションなら、その価値は十分あります。

同じSVGで両ティアを試して、違いをご自身で確認 ->

出典・参考文献

• Google AI Blog — Geminiモデルの機能、ベンチマーク、デザインアプリケーションに関する公式発表と技術詳細
• MDN Web Docs — SVG — SVGアニメーション要素、CSSアニメーションプロパティ、SMIL仕様の包括的リファレンス
• web.dev Performance — will-change、GPUコンポジティング、アニメーションパフォーマンス最適化に関するGoogleのガイド
• CSS-Tricks — 実践SVGガイド — SVGアニメーション、CSSキーフレーム、モーションデザイン技法の実践チュートリアル
• State of AI Report — クリエイティブタスクにおけるAIモデル改善の年次ベンチマーク