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

何が作れるか

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

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

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

頼み方のコツ

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

頼み方の例

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

思いどおりにするコツ

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

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

3D でできること

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

• 立体の文字 — 日本語も含め、Google Fonts の書体を厚みのある文字にできます。1 文字ずつばらばらに動かすこともできます。Dela Gothic One のような太い書体ほど立体映えします
• 立体のロゴやアイコン — ロゴの形（SVG）から厚みのあるロゴを作り、回したり光らせたりできます
• カメラの動き — 場面の周りを回り込む、近づく、見下ろす
• 光と質感 — 影、霧、金属のような映り込み、明るい色がにじむように光る効果（ネオン）
• 地形や木などの繰り返し — 低いポリゴンの島、数百本の木、星や粒

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

3D でできないこと: 外から 3D モデル（glTF などのファイル）や写真の質感を読み込むことはできません。形はすべて Claude が組み立てるので、人や車のような写実的なものより、ロゴ、文字、図形、デフォルメした場面に向いています。

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

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

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

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

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

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

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

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

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

作るのは VideoBuff を開いているあなたのブラウザの中です。設計図もできた動画も、VideoBuff のサーバーには送られません。書体だけは Google Fonts から取り寄せます。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) は当然そのまま使えます。

使える three.js 機能

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

• text3d — 書体（日本語を含む Google Fonts）から厚みのある文字を作る。1 文字ずつに分けることもできる
• shape3d — SVG のパスから厚みのある形（ロゴ、アイコン）を作る
• 見た目の設定 — 背景の色やグラデーション、映り込み（environment）、影（shadows）、光のにじみ（bloom）、霧
• 同梱の部品 — SVGLoader、RoomEnvironment、RoundedBoxGeometry、mergeGeometries、ImprovedNoise（地形づくり）、InstancedMesh（たくさんの木や粒）

外から読み込むもの（テクスチャの URL、glTF / OBJ / FBX のモデル、HDR の環境）は使えません。乱数は作るたびに同じ結果になるよう固定しているので、同じ設計図からは同じ動画ができます。

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

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

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

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

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

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

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