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

**投稿者:** Taishi | X自動化ハッカー (@taishiyade)

**投稿日時:** 2026-02-27

**カテゴリ:** 🔧 AI活用/プロンプト

**有益度:** ⭐⭐⭐⭐ (ブックマーク1,062件, いいね692件)

**元URL:** https://x.com/taishiyade/status/2027519446613422475

---

概要

Gemini 3.1 ProでLPのSVGアニメーションを高クオリティで生成するためのプロンプトテクニック。

問題

「アニメーションを作って」のような曖昧なプロンプト → ゴミが出てくる

解決策: 具体的な動き指示

❌ 悪い例

「ショッピングカートのアニメーションを作って」

✅ 良い例（具体的な物理的描写）

"A shopping cart rolls in from the left with slight wheel 
wobble, stops center with a gentle bounce, then a product 
drops in with elastic deformation"

ポイント

1. **動きの起点と終点を明示** — "from the left", "stops center"

2. **物理的なニュアンスを加える** — "slight wheel wobble", "gentle bounce"

3. **連続アクションを記述** — 複数の動作を順番に説明

4. **変形/物理効果を指定** — "elastic deformation"

まとめ

SVGアニメーションは「何をするか」だけでなく、**「どう動くか」の物理的な質感**まで記述することで品質が大幅に向上する。