Claude Codeでモーションデザインを作るには？準備から動画の書き出しまで

作者がXで公開した「Bug Chase」は、小さな虫がキーボード上を動き回り、マスコットがガラス瓶で追いかけ、最後に仲直りする15.5秒の3D短編アニメーションです。

Bug Chaseの元動画をXで見る

作者の制作記録によれば、この映像はClaude Codeを使って構築されました。最初の指示から初稿を出力し、プレビューと修正指示を繰り返して動画を完成させています。

本記事では「Bug Chase」の制作記録と、Claude Desktopで独自に行った6秒の自社作例を通じて、Claude Codeで短いモーションを作り、動画として書き出すまでの具体的なアプローチを紐解きます。制作は以下の5つの工程で進めます。

1. 準備（ツールのセットアップ）
2. 初回の指示（動きと確認条件の定義）
3. プレビュー（出力された初稿の確認）
4. 修正（秒数と状態を言語化した調整）
5. MP4書き出し（連番画像からの動画変換）

Bug Chaseの動画で何が起きているか

作者の制作記録によると、この作品はClaude Code/Opus 5.5を活用して作られた精巧な作例です。

完成した動画を見ると、機械式キーボードのキーの隙間からひょっこりと現れた虫を、マスコットキャラクターがガラス瓶を手に追いかけます。キャラクターがキーの上を跳ねるたびに物理的な押下の沈み込みが起こり、すれ違いの攻防を経てEscキーの上でついに捕獲します。その後、虫が手を振り、最後はマスコットの頭にちょこんと乗って仲直りするまでの物語がテンポよく展開されます。

この映像に圧倒的な説得力を与えているのは、緻密なカメラワークと光、そして細やかなタイミングの設計です。床すれすれの低い位置から狙うマクロカメラが臨場感を生み、計算された照明や物体同士が近づく際の接触影が、ミニチュアの世界に確かな実在感をもたらしています。

さらに注目すべきは、一連の動きの中で一瞬だけ動きを止める「間」の効果的な使い方です。PDF冒頭では、特定の秒数が演技の見どころとして示されています。2.20秒でハッとする「二度見」に始まり、4.30秒での「ニアミス」、5.65秒でキーの端を踏み外しかける「よろめき」、8.40秒のそっと近づく「忍び足」、10.90秒での「捕獲」、そして13.50秒の「仲直り」といった具合です。

このように、画面内のどの対象物が、何秒の時点でどう動くのかを具体的に観察して言語化することは、AIにモーションの修正を依頼し、イメージ通りの動きを作り上げるための第一歩となります。では、作者はこの複雑なアニメーションを、Claudeを使ってどのように構築していったのでしょうか。

Claudeはモーションをどう作ったか

「Bug Chase」の緻密な映像は、テキストから直接映像を書き出すような一般的な動画生成モデルによって生み出されたものではありません。作者の制作記録によれば、Claude CodeでOpus 5.5をhigh設定で使用し、映像を構成するためのプログラミングコードを生成させることで制作されています。

具体的には、Webブラウザ上で3Dグラフィックスを描画するライブラリ「Three.js（バージョン0.160.0）」を用いて、すべての処理を1つのHTMLファイル内に記述しています。Three.jsの公式マニュアルでは、3Dシーン、カメラ、レンダラーを用意してカメラ視点から空間を描き出す基本手順が解説されていますが、本作もその仕組みを応用しています。なお、Web技術を用いたコードベースの動画制作については、以前私たちがHyperFramesの活用記事を公開していますが、本作はそうした特定の映像構築フレームワークを利用せず、Three.jsの機能を使って直接構築された個別作品の事例となります。

この映像のモーション制御において中核を担っているのが、指定した時刻の画面を描画する renderAt(t) という関数です。1920×1080ピクセル、60fpsで進行する全15.5秒の映像の中で、マスコットのポーズやキーの物理的な沈み込み、歩行の軌跡、さらには効果音のタイミングまで、あらゆる要素が経過時間 t を基準に同期して決定されるように設計されています。

最終的な出力工程では、この関数を使って全フレームを縦横2倍の解像度で描き出し、動画変換ツールのffmpegを使ってH.264形式に符号化することで、滑らかな一本の動画ファイルとして完成させています。

映像を構成するすべての要素が「時間とコード」の数式によって成り立っているからこそ、初稿の動きを見た後に「何秒の時点で、画面内のどの対象物をどう直すか」をピンポイントで言語化することが、Claudeへ的確に修正を伝えるための前提となります。

Claude Codeを始める前に何を準備するか

コードを使ってモーションを構築していくにあたり、まずはローカル環境でAIと対話しながらファイルを自動編集できるClaude Codeのセットアップを行います。

Claude Codeの公式クイックスタートによると、利用にはPro、Max、Team、Enterpriseプランのいずれか、またはConsoleアカウント、対応クラウド環境のいずれかが必要です。条件を満たしている場合、macOS、Linux、Windows（WSL環境）のターミナルで以下のコマンドを実行してインストールします。

curl -fsSL https://claude.ai/install.sh | bash

インストール後、新しいターミナルウィンドウを開きclaude --versionと入力してバージョン情報が表示されれば導入完了です。

また、後段で連番画像をMP4形式の動画へ書き出すためにFFmpegを使用します。ターミナルでffmpeg -versionを実行して状態を確認し、未導入の場合はFFmpegの公式ダウンロードページからご自身のOSに合わせてインストールしておいてください。

ツールの準備が整ったら、モーション制作専用のディレクトリを作成して作業を始めます。ターミナルで以下の連続コマンドを実行し、新しいフォルダからClaude Codeを起動しましょう。

mkdir motion-demo
cd motion-demo
claude

初回起動時は、ターミナル上の案内に従ってWebブラウザでアカウント認証を行います。認証が完了すると、そのままターミナル上で対話を開始できるようになります。なお、Claudeが実際にファイルを作成・変更する際には、事前にユーザーへ許可を求める確認が入る場合があります。

「Bug Chase」の原作者は、制作時にOpus 5.5を選択して推論の度合いを高く設定していました。公式のモデル設定ガイドに従ってこの環境を再現したい場合は、Claude Code（バージョン2.1.280以降）のプロンプト内で/model claude-opus-5-5と/effort highを入力して切り替えます。

ただし、これらの特定モデルや設定は本チュートリアルを進める上での必須条件ではありません。後段で紹介する6秒の自社作例は、無料版のClaude Desktopアプリ（Sonnet 5.5モデル）環境で制作したものですが、初稿を出力してプレビューし、指示を重ねて動画を作り上げていく基本的なプロセスは同様に応用できます。自身の環境に合わせて準備ができたら、さっそく最初の指示を出していきましょう。

最初の指示で動きと確認条件をどう決めるか

前述した「何秒の時点で、何をどう直すか」というピンポイントの修正を可能にするためには、最初の段階で時間軸に沿った明確な設計図をClaudeに渡しておく必要があります。

「Bug Chase」の作者の制作記録によれば、初回にClaudeへ送信されたプロンプトは280語にまとめられており、「BRAND」「FORMAT」「LOOK」「BEATS」「CAMERA」「CHECKS」という6つのブロックで構成されていました。

「BRAND」ブロックでは20×13ピクセルのマスコット、虫、キーボード、ガラス瓶といった登場要素と色、そして結末を定義しています。「FORMAT」では、1920×1080ピクセル・60fpsの全15.5秒の映像を、Three.js（0.160.0）を用いた1つのHTMLファイルとして出力し、renderAt(t)で描画するよう技術要件を指定しました。「LOOK」にはマクロの夜景などの表現がまとめられ、「CAMERA」では追跡やすれ違い時の急旋回といった視点の動きが指示されています。

映像の進行を直接コントロールするのが「BEATS」ブロックです。ここでは「0秒の静止状態」から始まり、「1.2秒での虫の登場」「4.35秒のすれ違い」「9.45秒の瓶の叩きつけ」など、時刻ごとの出来事と具体的な動作が時系列で列挙されています。

さらにプロンプトの最後に「CHECKS」ブロックを設け、品質の確認条件を明文化しています。主役が指定のオレンジ色に見えること、物体同士が不自然に貫通しないこと、そして「各ビートの周辺5フレームを確認すること」が記載されていました。このCHECKSは作者が出力に求めた確認条件です。

短いモーションを作るための入力例

この原作者の構造は、私たちが短いモーションを作る際にも非常に参考になります。ここでは、私たちがClaude Desktopで実際に制作した「6秒のロゴモーション」の入力内容を基に、読者の皆さんがClaude Codeなどに依頼する際、そのまま応用できるプロンプトの構成例を紹介します。

外部ライブラリを使わず、ブラウザ標準のCanvas 2Dを使うシンプルな構成の例です。以下のテキストをClaude Codeへの最初の指示として活用してみてください。

ブラウザで動く6秒のロゴモーションを、`index.html`という単一のHTMLファイルとして作成し保存してください。外部通信・画像・ライブラリ・WebフォントなしでCanvas 2Dだけを使ってください。

【演出】
・960×540、30fps、6秒ループ。
・白地に、青緑#167D8Dの円が左から中央へ跳び、着地でつぶれ、丸へ戻ったあと、右側にDeskRexという文字が現れます。文字は読みやすい黒。円と文字は重ねないでください。落ち着いた動きにしてください。
・0〜1.5秒で円が移動
・1.5〜2秒で着地と反動
・2〜2.5秒で文字が現れる
・2.5〜5.5秒は読める状態を保つ
・5.5〜6秒で最初の状態へ戻す

【実装】
・window.renderAt(t) が正確な秒数の静止画を描く構造にし、自動再生はこの関数を呼びます。
・Math.random、CSS transitionは使いません。
・再生停止ボタンと時刻スライダーを置き、?t=2.0のようなURLではその時刻で停止します。

このように、動きのタイミング（演出における秒数の指定）と守るべき条件（renderAt(t)の使用や時刻指定機能）の土台を固めて初稿を出力させることが重要です。原作者も私たちも、この明確な設計図を最初に渡したからこそ、次の工程で細かなプレビューと修正指示を繰り返し、最終的な完成形へと作品を磨き上げることができました。

初稿をどうプレビューして修正するか

前節のような設計図を元にClaude Codeがindex.htmlを生成したら、まずは出力された初稿をブラウザでプレビューします。このとき、HTMLファイルを直接ダブルクリックして開くのではなく、ローカルサーバーを立ち上げるのが基本です。外部ライブラリを使わないCanvas 2Dのシンプルな構成ならそのまま開けることもありますが、Three.jsの公式ドキュメントでも説明されている通り、ローカルファイルの直接閲覧はブラウザのセキュリティ制限によって一部機能が動かない原因になります。Node.jsをインストールした環境であれば、別のターミナルを開き、制作ディレクトリでnpx serve .を実行し、表示されたlocalhostのURLから開いてください。

ブラウザでプレビューを開いたら、前節のプロンプトで実装させた「再生停止ボタン」や「時刻スライダー」を活用します。修正したい箇所を見つけたら、?t=1.50のようにURLパラメータを利用して特定の時刻でピタリと画面を止め、「何秒の時点で」「画面の何がどうなっているか」を詳細に観察し、修正指示の言葉に変換していきます。

Bug Chaseの作者も、生成された出力物から時刻と状態を細かく記録し、6回の追加指示を行うことで作品を磨き上げました。作者の制作記録を見ると、その具体的なプロセスがよく分かります。

最初の修正は、出力された24枚の静止画を確認した後に行われました。具体的には、0.5〜2.6秒の場面で虫が遠くに見えるためカメラを寄せる、3.9秒、5.6秒、10.6秒以降で主役が画面から見切れてしまうためカメラを引くといった構図の修正です。また、6.6〜9.3秒では主役が泥色に見えたため中立色の補助光を追加しました。加えて、忍び足のシーンでTabキーが大きすぎるためカメラを上げる、瓶の屈折線とモニター台が重なるのを避けるためにガラスと背景を調整する、そして12.6秒で虫が瓶を貫通してしまう問題を解消するため、瓶を上げて軌道を変えるといった多岐にわたる指示が出されています。

続く2回目（12枚の静止画の確認後）の修正では、冒頭で主役が切れるためさらにカメラを引き、12.7秒でまだ虫と瓶が重なっていたため軌道を再修正しました。3回目は全長のラフ映像と高品質な6フレームを確認し、3.2〜4.0秒の場面で主役が薄い板のように見えてしまうのを防ぐため、オブジェクトを回転させています。また、虫とEscキーが画面端で切れる問題や、モニターのベゼルが画面上部に被る問題に対しても、視点変更やオブジェクトの移動で対処しました。

後半は色味やディテールの作り込みです。4回目の修正では、色測定の確認から主役の色が指定したオレンジ色（D97757）よりも明るく見えたため、素材のベース色を調整しました。同時に、7.6秒と8.8秒で主役の頭が切れる箇所に対して視点を引いています。5回目には、デスクに落ちるモニター光の白い筋が強すぎたため、質感を柔らかくするよう指示しました。そして初回フルレンダーのコンタクトシートと連続フレームを確認した最後の6回目に、12.1秒の地点でハートが瓶で半分隠れてしまう問題や、虫が主役の頭の近くで瓶に接触しすぎる問題を解消し、映像を完成に導いています。

このプロセスから学べるのは、Claudeでモーションデザインを修正する際の「プレビューと伝え方の基本」です。「12.6秒に（時刻）」「虫が瓶を貫通するので（画面の問題）」「軌道を変える（修正内容）」のように、時間・状態・解決策の3点を言語化することが重要になります。漠然と「全体を調整して」と指示するのではなく、スライダーや時刻パラメータで画面を止め、対象物の具体的な状態を文字に落とし込むことで、Claudeからイメージ通りの結果を引き出しやすくなります。

6秒の自社作例で着地をどう直したか

前節ではBug Chaseの制作プロセスを見ましたが、時刻と対象の状態を指定するという修正手法は、身近で単純な2Dアニメーションの制作にも応用できます。ここでは、DeskRexがClaude Desktop FreeのSonnet 5.5・中設定で制作した6秒間のロゴモーションを例に、実際の修正の流れを追ってみましょう。

演出：960×540、30fps、6秒ループ。白地に、青緑#167D8Dの円が左から中央へ跳び、着地でつぶれ、丸へ戻ったあと、右側にDeskRexという文字が現れます。文字は読みやすい黒。0〜1.5秒で円が移動、1.5〜2秒で着地と反動、2〜2.5秒で文字が現れ、2.5〜5.5秒は読める状態を保ち、5.5〜6秒で最初の状態へ戻します。円と文字は重ねないでください。落ち着いた動きにしてください。

この作例は、円が跳ねて着地した後に文字が現れるCanvas 2Dのアニメーションです。Claudeに初稿を出力させた後、プレビュー画面を使って1.49秒と1.50秒のタイミングで再生を止めて見比べました。すると、1.50秒で着地した瞬間に、円が急に横長に潰れてしまう不自然な動きが目視で確認できました。保存されたコードを確認しても、1.50秒の時点で縦のスケールが急激に0.72へと縮小されていました。

この問題を直すため、Claudeへの修正依頼では具体的な数値と時刻をセットにして伝えました。単に「着地を滑らかにして」と頼むのではなく、「着地のつぶれを1.50秒で急に始めず、1.50秒の時点では縦横等倍、1.60秒で最大のつぶれになり、2.00秒で元の等倍に戻るようにする」と、経過時間ごとの変形量を明確に指定したのです。

修正版が出力された後、再びプレビューを1.50秒、1.60秒、2.00秒で止めて確認しました。指示通り、1.50秒時点での縦スケールは1.0に修正されており、着地の衝撃で徐々に円が潰れ、そこから跳ね返るように元の形へ戻り、1.50秒で突然つぶれる箇所は解消されていました。

Bug ChaseはOpus 5.5・high設定の3D短編で、当社作例はSonnet 5.5・中設定の2D短編です。モーションデザインの修正におけるアプローチの根本は共通しています。生成されたプレビューを一時停止して「何秒のときに」「画面の何がどうなっているか」を観察し、その時刻と直したい状態を言葉にして伝えること。この手順を身につけることで、Claudeに対して的確な指示が出せるようになり、修正版の同じ時刻を再確認できます。

連番画像からMP4をどう書き出すか

HTMLとCanvasで作ったアニメーションは、そのままでは動画ファイルとして利用できません。ここでは動画を得るために、HTMLの描画結果を一度PNGの連番画像として保存し、その後FFmpegを使ってMP4ファイルに結合するという二段階の工程を踏みます。HTMLファイルをFFmpegへ直接渡して動画化することはできないため、この手順が必要になります。

まず第一段階として、Claude Codeに連番画像の保存処理を作らせます。前節で触れた6秒（30fps）・960×540の作例を動画化する場合、総フレーム数は180枚（0〜179）になります。Claude Codeには次のように依頼してください。

「renderAt(n/30)をn=0..179で呼び、960×540の各画面をframes/0000.pngから0179.pngに保存する処理を作成して実行方法を教えて」

Canvas画面からPNGを生成する具体的な手段は、Node.jsのヘッドレス描画を使うのか、ブラウザ上で保存処理を走らせるのかなど、生成された制作環境によって異なります。そのため、具体的な実行方法はClaude Codeに提案させ、その指示に従って処理を実行してください。処理が終わったら、指定のフォルダ（frames/）に同寸法のPNGファイルが180枚出力されたか、ファイル数と画像寸法を確認します。

第二段階として、連番画像を動画に結合します。動画変換にはFFmpegを利用します（インストールされていない場合は公式ダウンロードページから入手してください）。ターミナル等で以下のコマンドを実行します。

ffmpeg -framerate 30 -start_number 0 -i frames/%04d.png -frames:v 180 -c:v libx264 -pix_fmt yuv420p motion.mp4

FFmpeg公式の連番画像入力でも説明されるように、このコマンドの%04d.pngは、0000.pngから始まる4桁の連番ファイル名のパターンを指しており、入力画像と対応しています。フレームレートや開始番号を指定して、順番通りにMP4へと書き出します。

当社でも、手元に実存する修正後の連番画像180枚（revised-frames/%04d.png）に対して上記と同条件の変換コマンドを実行し、再生時間6.000秒、30fps、960×540のH.264（yuv420p）形式のMP4動画が正常に生成されることを確認しています。

この手順を踏むことで、Claude Codeとブラウザ上で調整を重ねたモーションデザインを、一つのMP4動画として書き出すことができます。

よくある質問

Q1.「Bug Chase」と自社の6秒作例は、同じClaudeの環境やモデルを使っていますか？

それぞれ異なる環境とモデルを使用しています。作者による「Bug Chase」は、Proなどの対象プランや対応クラウド環境で利用できるターミナル向けのClaude Codeを用い、Opus 5.5・high設定で作られた15.5秒の3D映像です。一方、DeskRexの自社作例は、無料版のClaude DesktopアプリにてSonnet 5.5・中設定を用いた6秒間の2D映像です。これらは環境やモデルの性能比較を目的としたものではなく、生成された初稿をプレビューで一時停止して「何秒の時点で対象がどうなっているか」を観察し、言葉にして修正を伝えるという共通の制作アプローチを解説するために併記しています。

Q2.生成されたモーションは、どのように動画ファイルとして書き出していますか？

原作者と本記事の作例では、異なる動画出力の方式をとっています。「Bug Chase」の作者は、生成されたコードの描画結果（raw frames）を直接FFmpegへパイプして動画へと出力する仕組みを構築していました。一方DeskRexの作例では、Claude Desktopのプレビュー機能で動きを一時停止しながら確認・修正したのち、保存したHTMLの未改変Canvasコードを別環境で描画して、一度連番のPNG画像として保存しています。その上で、FFmpegを用いてPNG連番から無音のMP4ファイルへと変換しました。本記事では、出力状況を確認しやすい連番画像を経由する後者の方法を紹介しています。

冨田到

市場調査やデスクリサーチの生成AIエージェントを作っています 仲間探し中 / Founder of AI Desk Research Agent @deskrex , https://deskrex.ai

www.deskrex.ai/