# Claude にアニメーションを作ってもらう｜GSAP・three.js の動くタイトルや 3D をことばで頼む

> VideoBuff では、動くタイトル、図解、グラフ、地図、ランキング、3D のロゴや立体の日本語の文字を、Claude にことばで頼んで作れます。動きは GSAP、3D は three.js で作ります。できたアニメーションは普通のクリップとしてタイムラインに載り、「もっとゆっくり」「色を青に」と頼めば後から直せます。作れるもの、頼み方のコツ、3D でできること、苦手なこと、仕組みを解説します。

_Last updated: 2026-10-11 · First published: 2026-10-11_

## 何が作れるか

頭の中のイメージを Claude に伝えると、Claude が GSAP（動き）や three.js（3D）でアニメーションを作ってタイムラインに置きます。After Effects のような専門の道具を覚えなくても、次のようなものが作れます。

- **動くタイトル** — 文字が 1 文字ずつ起き上がる、色の帯が画面を横切ってから見出しが出る、といったオープニング
- **3D のロゴと立体の文字** — ロゴが回りながら現れる、日本語の見出しが立体の文字で 1 文字ずつ飛んでくる
- **3D の場面** — 木の生えた島の上をカメラが回り込む、光る輪がネオンのように広がる
- **グラフと図解** — 棒グラフが伸びて数字が数え上がる、矢印や線が描かれていく
- **地図** — ピンが落ちて、旅のルートを飛行機がたどる
- **ランキング** — 順位が入れ替わり、上がった項目に印が付く
- **テロップ** — ニュース速報のような長い文が、箱の幅で折り返して行ごとに出てくる
- **数字とくじ** — 0 から 1,000,000 まで数え上がるカウンター、回って止まるルーレット

できたアニメーションは普通の動画クリップとしてタイムラインに載るので、手で切る、並べる、色を整える、つなぎ目を付けるといった編集はほかのクリップと同じようにできます。

下の作例は、どれも VideoBuff で Claude に頼んで作ったものです。それぞれの下に、頼み方の例を添えています。

![赤・黄・青と背景の色が切り替わりながら「速く。」「軽く。」「ブラウザで。」が 1 語ずつ弾むように出て、最後に黒地に VideoBuff のロゴが出るタイトル](https://videobuff.app/guides/motion-graphics/example-kinetic.webp)
[動画](https://videobuff.app/guides/motion-graphics/example-kinetic.mp4)
_「『速く。軽く。ブラウザで。』を 1 語ずつ、背景の色を切り替えながら弾むように出して。最後は VideoBuff のロゴで」_

![暗い背景にぼけた光が浮かび、NEW ARRIVAL の文字が 1 文字ずつ起き上がり、グラデーションの「春の新作コレクション」と価格の札が出る新商品の告知](https://videobuff.app/guides/motion-graphics/example-launch.webp)
[動画](https://videobuff.app/guides/motion-graphics/example-launch.mp4)
_「新作の告知。NEW ARRIVAL を 1 文字ずつ立ち上げて、春の新作コレクションの文字と価格の札を出して」_

![紺の背景で、再生マークの立体のロゴが回りながら現れ、「動画を、もっと軽く。」が立体の文字で 1 文字ずつ飛んでくる](https://videobuff.app/guides/motion-graphics/example-logo3d.webp)
[動画](https://videobuff.app/guides/motion-graphics/example-logo3d.mp4)
_「再生ボタンのロゴを立体にして回しながら出して。『動画を、もっと軽く。』は立体の文字で 1 文字ずつ」_

![木の生えた低ポリゴンの島の上をカメラが回り込み、STAGE 1 のタイトルが出るゲーム風の 3D の場面](https://videobuff.app/guides/motion-graphics/example-island.webp)
[動画](https://videobuff.app/guides/motion-graphics/example-island.mp4)
_「ゲームのステージ紹介みたいに、木の生えた島の上をカメラが回り込む 3D の映像。STAGE 1 のタイトル付きで」_

![黄色いロボットのキャラクター（.glb の 3D モデル）が、丸い床の上で手を振ってから踊り出す](https://videobuff.app/guides/motion-graphics/example-robot.webp)
[動画](https://videobuff.app/guides/motion-graphics/example-robot.mp4)
_「Blender で作ったロボット（robot.glb）を置いて、手を振ってから踊らせて」_

![暗闇に光る輪がネオンのように広がり、NEON NIGHT の文字が光るオープニング](https://videobuff.app/guides/motion-graphics/example-neon.webp)
[動画](https://videobuff.app/guides/motion-graphics/example-neon.mp4)
_「光る輪がネオンみたいに広がって、NEON NIGHT と出るオープニングを」_

![「月間アクティブユーザー」の棒グラフ。1〜6 月の棒が順に伸びて数字が数え上がり、6 月だけオレンジで +41% の印が付く](https://videobuff.app/guides/motion-graphics/example-chart.webp)
[動画](https://videobuff.app/guides/motion-graphics/example-chart.mp4)
_「月間アクティブユーザーを 1〜6 月の棒グラフに。数字を数え上げて、6 月だけ色を変えて +41% の印を」_

![「3 泊 4 日、西へ。」の地図。飛行機が点線のルートをたどり、東京・京都・福岡にピンが落ちる](https://videobuff.app/guides/motion-graphics/example-map.webp)
[動画](https://videobuff.app/guides/motion-graphics/example-map.mp4)
_「3 泊 4 日の旅を地図で。東京から京都、福岡へ飛行機が点線をたどって、ピンが落ちる」_

![「今週の人気ランキング」。バーが伸びて順位が入れ替わり、2 位に上がった項目に +3 の印が付く](https://videobuff.app/guides/motion-graphics/example-ranking.webp)
[動画](https://videobuff.app/guides/motion-graphics/example-ranking.mp4)
_「今週の人気ランキングを。順位が入れ替わって、上がった項目に +3 の印を付けて」_

![「今日のおやつは？」のルーレットが回って止まり、「パフェに決定！」と紙吹雪が舞う](https://videobuff.app/guides/motion-graphics/example-roulette.webp)
[動画](https://videobuff.app/guides/motion-graphics/example-roulette.mp4)
_「今日のおやつを決めるルーレット。回って止まったら『パフェに決定！』と紙吹雪を」_

## 頼み方のコツ

ふだんのことばで頼めます。Claude は作る前に途中のコマを自分で見て、文字が切れていないか、重なっていないかを確かめてから仕上げます。

**頼み方の例**

- 「新商品の発表用に、ロゴが回って出てくる 3D のオープニングを 5 秒で。背景は紺のグラデーション」
- 「月ごとの売上を棒グラフで。最後の月だけ金色で目立たせて」
- 「東京 → 大阪 → 福岡のルートを地図で。各都市に名前のカードを付けて」
- 「ニュース速報風のテロップ。この文章が行ごとに下からせり上がるように」
- 「『動画を、もっと軽く。』を太い立体の文字で、1 文字ずつ飛んでくるように」

**思いどおりにするコツ**

- **何を伝える場面かを言う** — 「オープニング」「商品紹介の締め」「SNS の最初の 2 秒」など。長さと勢いの見当がつきます
- **色・書体・長さを言えるなら言う** — 「白と金」「太いゴシック」「4 秒」。言わなければ Claude が選びます
- **気になったら言い直す** — 「もっとゆっくり」「文字を大きく」「最後に 1 秒止めて」。一度で決めようとしなくて大丈夫です

「かっこよく」「映画っぽく」だけでも形にはなりますが、好みに合うかは当たり外れがあります。場面と色と長さを添えるほど、一度で近い形になります。

## 3D でできること

平面の図形ではできない動きは、three.js の 3D で作れます。

- **立体の文字** — 日本語も含め、Google Fonts の書体を厚みのある文字にできます。1 文字ずつばらばらに動かすこともできます。Dela Gothic One のような太い書体ほど立体映えします
- **立体のロゴやアイコン** — ロゴの形（SVG）から厚みのあるロゴを作り、回したり光らせたりできます
- **カメラの動き** — 場面の周りを回り込む、近づく、見下ろす
- **光と質感** — 影、霧、金属のような映り込み、明るい色がにじむように光る効果（ネオン）
- **地形や木などの繰り返し** — 低いポリゴンの島、数百本の木、星や粒
- **手持ちの 3D モデル** — Blender などで作った .glb のファイルを渡せば、回したり寄ったり、モデルに入っている動き（歩く、手を振るなど）を決めた時間に再生したりできます。書き出し方や頼み方は、[Blender の 3D モデルを動画に入れる](/ja/guides/blender-3d-models)で詳しく説明しています

3D の上に、ふつうの文字やテロップを重ねることもできます。読ませたい文字は平面のまま、背景や主役を 3D にする組み合わせがおすすめです。

**3D の得意・不得意**: Claude が一から組み立てる形は、ロゴ、文字、図形、デフォルメした場面が得意です。人や車のような写実的なものは、手持ちの 3D モデル（.glb）を渡すのがおすすめです（[使える形式と書き出し方](/ja/guides/blender-3d-models)）。

![3D でできることの作例を 4 つ並べた図。立体の文字とロゴ、地形とたくさんの木と影のある島、光がにじむネオンの輪、手持ちの 3D モデルの黄色いロボット。それぞれの下に、使っている 3D の部品の名前が書いてある](https://videobuff.app/guides/motion-graphics/three-features-ja.webp)
_できることごとの作例。下の名前は、使っている 3D の部品_

## できあがったアニメーションを直す

作ったアニメーションは、Claude に「色を青に変えて」「数字を 12,800 に」「あと 2 秒長く」と頼めば作り直せます。別のチャットからでも頼めます。

VideoBuff は作ったときの元の設計図（HTML）を動画と一緒に保存しています。Claude はそれを読み出して直し、作り直したものに差し替えます。

- **差し替わるもの** — その素材を使っているクリップの中身すべて。途中で分割したクリップもまとめて新しい版になります
- **そのまま残るもの** — クリップの位置、切り取り、色の調整、トランジション
- **長さが変わったとき** — 最後まで使っていたクリップは新しい長さに合わせて伸び縮みします(後ろのクリップにぶつかる場合はその手前まで)
- **元に戻す** — 「元に戻す」1 回で前の版に戻ります

元のコードはブラウザの中に保存されます。ブラウザのデータを消すと元のコードも消え、そのアニメーションは新しく作り直すことになります。

![同じネオンのアニメーションを並べた比較。左は元の、ピンク・紫・青・緑の光の輪と暗い背景。右は「色を青に変えて」と頼んだあとで、光の輪も背景も青系になっていて、文字と動きはそのまま](https://videobuff.app/guides/motion-graphics/recolor-example-ja.webp)
_「色を青に変えて」と頼んで作り直した例。動きや文字はそのまま_

## 苦手なこと・できないこと

- **長さは 1 本 30 秒まで** — 長い場面は何本かに分けて並べます
- **映像の上には重ねられない** — 背景は透明にできないので、撮った映像の上にテロップのように載せる使い方はできません。映像の前後や間に入れる場面として使います
- **動画は中に入れられない** — 写真、ロゴ（SVG）、3D モデル（.glb）は、ファイルの場所を Claude に伝えれば使えますが、動画をアニメーションの中で再生することはできません。メディアの一覧に取り込んだ素材も、そのままは使えません（元のファイルの場所を伝えてください）
- **渡せるファイルの大きさ** — 写真・ロゴは 1 つ 50MB まで、3D モデルは 100MB まで、1 本のアニメーションに 16 ファイルまでです。大きな写真は使う大きさに自動で縮めますが、何枚も重ねると作るのに時間がかかります
- **中の文字を画面から直せない** — 文字や色を変えるときは Claude に頼みます。自分でインスペクターから直したい文字なら、下の「文字だけのタイトルとの使い分け」を参照してください
- **長く凝った作品は苦手** — 何十もの要素が絡む長いモーショングラフィックスは、プロの制作者の代わりにはなりません。短く、伝えたいことがはっきりした場面ほど得意です

## 仕組み：何をしているのか

Claude は、アニメーションの設計図を HTML で書きます。動きは GSAP（アニメーションのライブラリ）、3D は three.js で書きます。VideoBuff はそれを画面の外で再生し、1 コマずつ画像にして WebCodecs で MP4 にし、動画トラックに置きます。

作るのは VideoBuff を開いているあなたのブラウザの中です。設計図もできた動画も、渡した写真やモデルも、VideoBuff のサーバーには送られません。外に出るのは書体の取り寄せだけです。書体は Google Fonts から、使う文字だけを取り寄せるので、書体名とその文字が Google Fonts に送られます。立体の文字（3D）の書体は、立体にできる形で受け取るために VideoBuff のサーバーを経由して取り寄せます。GSAP は Webflow の標準ライセンス、three.js は MIT ライセンスのもとで同梱しています（「オープンソースライセンス」ページを参照）。

**作る前に確かめる（dryRun）**

Claude は本番の前に、MP4 にしない「下書き」で作ることができます（`options.dryRun: true`）。返ってくるのは、最初から最後まで均等に並べた 6 コマの画像と、警告です。警告は、スクリプトのエラー（script-error）、動かないタイムライン（no-animation / static-output）、画面からのはみ出し（text-overflow）、取り寄せられなかった書体（font-load）、3D が描かれていない・SVG に隠れている（three-not-drawn / three-hidden）などで、どれにも直し方が付きます。Claude は画像と警告を見て直してから本番で作るので、「作ってから文字が切れていたのに気付く」ことを避けられます。

## 使える GSAP 機能

composition iframe には以下の GSAP プラグインがプリ登録されています(別途 `registerPlugin` 不要):

- **DrawSVGPlugin** — SVG パスのストロークを順次描画(線が引かれていくアニメーション)
- **MorphSVGPlugin** — シェイプ間のスムーズなモーフィング
- **MotionPathPlugin** — 任意のパスに沿った要素の移動
- **TextPlugin** — テキスト内容を 1 文字ずつ書き換え(タイプライター効果)
- **ScrambleTextPlugin** — 文字をスクランブルしながら徐々に確定文字に収束
- **Physics2DPlugin / PhysicsPropsPlugin** — 重力 / 速度ベクトル / 摩擦による物理シミュレーション
- **CustomEase / CustomBounce / CustomWiggle** — 任意のイージングカーブ生成
- **EasePack** — 拡張イージングセット (rough, slowMo, expoScale 等)
- **SplitText** — HTML の文字を 1 文字・1 語ずつに分ける(文字が順に起き上がる演出など)
- **Flip** — 並び替えの前と後の位置の差を自動で補って動かす(ランキングの入れ替えなど)
- **InertiaPlugin** — 勢いよく動かして、だんだん止める(回したルーレットがマス目で止まるなど)

SVG の文字を 1 文字ずつに分ける `window.vbSplitText` と、HTML の段落をブラウザが折り返した位置で 1 行ずつに分ける `window.vbSplitLines`(日本語の改行のルールを崩さない)も使えます。

**HTML と CSS も使える**

SVG の中に `<foreignObject>` で HTML を置くと、CSS のレイアウト(flex / grid)、箱の幅に合わせた文字の自動の折り返し、グラデーションの文字、影、ぼかし、切り抜き、奥行きのある回転が使えます。長いテロップやカード、ランキング表のような「文字と箱」の多い画面は HTML、線を描く・形を変える・グラフのような図形は SVG、と組み合わせて作れます。

**同梱していないもの**

- **ScrollTrigger / ScrollSmoother / ScrollToPlugin / Observer / Draggable** — スクロールやマウスの操作で動かすためのもので、動画では同じ動きをタイムラインで書けばよい
- **GSDevTools / MotionPathHelper** — エディタ GUI 用 dev tool で、本番 render には出番なし

GSAP の core API (`gsap.to` / `gsap.from` / `gsap.fromTo` / `gsap.timeline` / `stagger` / 全標準 ease) は当然そのまま使えます。

![GSAP の機能と、それを使った作例を 6 つ並べた図。文字を 1 つずつ出す、棒グラフの線と数字の増加（DrawSVG）、地図の道筋に沿った動き（MotionPath）、文字が立体的に起き上がる（SplitText）、順位の入れ替え（Flip）、勢いをつけて止まるルーレット（Inertia・Physics2D）](https://videobuff.app/guides/motion-graphics/gsap-features-ja.webp)
_作例ごとに、使っている GSAP の機能を添えた_

## 使える three.js 機能

3D は `vbThree()` で始めます。VideoBuff が描き手（renderer）、カメラ、光を用意し、タイムラインの 1 コマごとに描くので、Claude は物を置いて GSAP で動かすだけです。

- **text3d** — 書体（日本語を含む Google Fonts）から厚みのある文字を作る。1 文字ずつに分けることもできる
- **shape3d** — SVG のパスや渡した SVG のロゴから厚みのある形（ロゴ、アイコン）を作る
- **model / play** — 渡した .glb の 3D モデルを置き、中の動きをタイムラインの時刻で再生する（Draco・Meshopt の圧縮にも対応）
- **texture** — 渡した写真を 3D の板などに貼る
- **見た目の設定** — 背景の色やグラデーション、映り込み（environment）、影（shadows）、光のにじみ（bloom）、霧
- **同梱の部品** — SVGLoader、RoomEnvironment、RoundedBoxGeometry、mergeGeometries、ImprovedNoise（地形づくり）、InstancedMesh（たくさんの木や粒）

写真やモデルは、ファイルの場所を Claude に伝えて渡します（VideoBuff の拡張機能が手元から直接エディタに届けるので、中身は会話を通りません）。それ以外に外から読み込むもの（テクスチャの URL、OBJ / FBX のモデル、HDR の環境）は使えません。乱数は作るたびに同じ結果になるよう固定しているので、同じ設計図からは同じ動画ができます。

## 文字だけのタイトルとの使い分け

「白い文字のタイトルを 1 秒でふわっと出す」くらいなら、アニメーションを作るより、ふつうの文字クリップにトランジションを付けるほうが速く、文字も自分でインスペクターから直せます。Claude にもそう頼めます（「文字クリップで」）。

**ふつうの文字クリップで足りるとき**

- 止まった文字に、フェード・ズーム・ぼかしなどを 1 つ付けたい
- 後から文字を自分で直したい
- 同じクリップに色の調整や音の効果も合わせたい

**アニメーションを作るとき**

- 文字や単語が 1 つずつ順に出てくる
- タイトル → 小見出し → 矢印 → アイコンのように、いくつもの要素が順に絡み合う
- 形が変わる、線が描かれる、道筋に沿って動く、数字が数え上がる
- 3D を使う

Claude に「タイトルのアニメーションを作って」とだけ頼むとアニメーションを作りがちです。簡単なもので自分でも直したいときは、「文字クリップで」と添えてください。