全フレームを JavaScript で描くアニメーションの作り方（Claude Opus 5.5 のやり方）

Claude Opus 5.5 が出た週、ある種類のクリップが繰り返しシェアされていました。短いアニメーション作品に、Kevin Ngo さんの投稿のようなキャプションが添えられたものです。"Claude Opus 5.5 drew every frame of this animation in JavaScript"（「このアニメーションは、Claude Opus 5.5 が全フレームを JavaScript で描いた」）。画像ファイルも、ストック映像も、動画生成モデルも使っていません。canvas に 1 フレームずつ絵を描くプログラムがあり、音楽も同じページの中で合成されています。このガイドでは、こうした作品がどう作られているかを説明し、自分で作る方法を 2 つ紹介します。オープンソースのスキルを使って Claude Code で作る方法と、ターミナルを一切使わずに iArt の Animation モードで作る方法です。以下の作品はすべて、掲載しているプロンプトそのままで作りました。

"What actually happens in the 2 seconds after you tap your card at a checkout? 25-30s explainer for our fintech blog." これがプロンプトの全文です（プロンプトは制作時の英語原文のまま載せていますが、アプリはどの言語のプロンプトでも受け付けます）。図形もラベルも、画面上で進み続ける「タップからの実時間」の時計も、すべてコードで描かれています。ミュートを解除するとサウンドトラックが聞こえますが、これもコードで合成したものです。1 フレームずつ確認して見つけた欠点は 1 つだけで、10 秒あたりのカメラ移動中に、画面上端に赤い破片のようなものが一瞬紛れ込んでいます。

「全フレームを JavaScript で描く」とは実際どういうことか

この種の JavaScript アニメーションは、draw(ctx, t) という 1 つの関数でできています。時刻 t における画面全体を HTML canvas に描く関数です。フレーム間で状態を持たず、画像も一切読み込みません。各フレームが時刻だけで決まるので、ヘッドレスブラウザで 1 フレーム目、2 フレーム目、3 フレーム目…と順に飛んでキャプチャし、MP4 に書き出せます。1 フレームの描画にどれだけ時間がかかっても、フレーム単位で正確です。

こうした作品がスクリーンセーバーではなく手描きのように見えるのは、次の 3 つの工夫によるものです。

• シード付きの乱数。描画コードが Math.random() ではなく固定シードの乱数生成器を使うので、線は少し揺れ、塗りはインクで塗ったように見えます。揺れ方はレンダリングのたびに同じなので、フレームがちらつきません。
• コードで書く音楽。サウンドトラックは同じページの中で Web Audio API を使って書かれています。ドラム、ベース、パッド、そして動きごとに合成した効果音です。オフラインでレンダリングして動画にミックスするので、音声ファイルは必要ありません。
• 映像と音で 1 本のタイムライン。「ビートに乗っている」と感じる作品は、テンポ、ショットリスト、イベントの一覧（ドアが閉まる、数字が現れる、など）を 1 つのデータ構造にまとめ、描画コードと音楽コードの両方がそれを読んでいます。同じタイミングデータを共有しているから、音が動きにぴったり合うのです。

そのため、よく混同される 2 つのものとは別物です。

ステップ 1：スタイルではなく題材から始める

話題になった作品は見た目がそれぞれまったく違いますが、それこそが肝心な点です。6 つの題材で 14 本の作品を作って試したところ、見た目を何よりも左右したのは題材とプロンプトの言葉でした。スタイルのプリセットや参考画像を使うと、どれも同じような見た目に引き寄せられてしまいました。モデル自身にも好みの「作風」があり、指示からそれらしいヒントをすべて取り除いても、深い青の背景にアンバーのアクセントという配色が出てき続けました。

ですから、作品が何についてのものか、誰に向けたものか、どこで流すのかを伝えてください。特定の見た目にしたいなら、ムードボードを添付するより、普通の言葉で名前を挙げる（"in the style of a 1950s science textbook"、つまり「1950 年代の理科の教科書風に」）ほうがうまくいきます。こだわりがなければ何も言わず、青とアンバーになるものと思っておきましょう。

Why is the sky blue? A 20-second explainer in the style of a 1950s science textbook.

このプロンプトを iArt で試す →

1 文を入れたら、教科書のページが出てきました。番号付きの図、キャプション、ページ上部の柱、鉛筆のハッチングで描いた空。物理の説明も正確です（波長の短い青い光は、波長の長い赤い光のおよそ 6 倍散乱されます）。キャプションは 1 文字ずつタイプされるように表示されるので、一時停止するとたいてい文の途中までしか見えません。

ステップ 2：目的、長さ、画面の形を伝える

テストでいちばんうまくいったプロンプトは、短く、しかも目的がはっきりしたものでした。作品が答える問い、対象の視聴者、長さ、フォーマットです。ショットリストを自分で書く必要はありません。その計画はエージェントの最初の作業です（ステップ 3）。入れておくと役に立つのは次のような情報です。

• 問いやストーリー：「ノイズキャンセリングヘッドホンは実際どうやって騒音を消しているのか」
• 長さとプラットフォーム：「TikTok 向けの縦型ショート解説、20 秒程度」。プラットフォームを伝えれば、アスペクト比も決まります。
• 誰に向けたものか：「2 歳の子ども向け」と「うちのフィンテックブログ向け」では、テンポも絵もまったく変わります。
• 正確な文言：チャンネル名やキャッチコピーなど、必ず表示したい言葉があれば。文字は打ち込まれるので、書いたとおりの綴りで出てきます。

How do noise-cancelling headphones actually cancel noise? Short vertical explainer for TikTok, ~20s.

このプロンプトを iArt で試す →

9:16、22 秒。3 つのステップと 1 つの注意点（"best on steady hums like engines & fans"、エンジンやファンのような一定の低い音にいちばん効く）、最後に "Hear it. Flip it. Play it. Quiet." で締めくくります。7〜10 秒あたりでイヤーカップに寄っていく場面は画面が窮屈で、一瞬ヘッドバンドが画面の半分を占めてしまいます。

ステップ 3：描画コードの前に、ビートグリッドとショットを計画する

ここが、動く図形のループと「作品」とを分けるステップです。描画コードを書く前に、エージェントは計画をデータとして書き出します。

1. ビートグリッド：テンポとセクション（イントロ、ビルド、ピーク、短い無音のブレイク、エンディング）。カットは小節の頭（ダウンビート）に置かれます。
2. ブロッキング付きのショットリスト：通常 10〜20 ショットで、それぞれにカメラ位置を持ち、1 つのつながった世界の中で展開します。下の「種が木になる」作品は、別々のスライドではなく、土と空からなる 1 つの世界をカメラが移動していきます。
3. 1 つのイベント一覧：描画コードと音楽の両方がこれを読みます。

オープンソースのサンプル作品 "I only asked you to fix one line"（「1 行直してって頼んだだけなのに」）では、この計画は 120 bpm、15 ショット、合成効果音およそ 20 個です。同期チェックの結果は 14 カット中 14 カットがビート上で、レイアウトチェックでも 300 枚のサンプルフレームで文字の重なりはゼロでした。

A 40-second film in two acts about how a seed becomes a tree: act one underground (the seed cracks, roots reach down), act two above ground (the shoot breaks through, seasons pass, a tree). Same character style in both acts, one continuous score.

このプロンプトを iArt で試す →

40 秒、2 幕構成、音楽は 1 曲通し。カメラは種を追って土の中を進み、地上に出て季節がひと巡りする 1 年を見せます。種の小さな顔は、最後の木になるまで幹に残されています。これはエージェントの演出上の判断で、植物学的に正しいわけではありません。

ステップ 4：監督の目でチェックし、言葉で直す

何千行もの描画コードを書くモデルは、コードを見ただけではわからない見た目のミスをします。キャラクターの上にキャプションが乗っている、4 秒間なにも動かない場面がある、シンバルの一撃にびくっとさせられる、といったものです。うまくいくワークフローは、レンダリングして実際に見ることです。

• コンタクトシート：0.5 秒ごとの静止画を 1 枚の画像に並べたもの。テンポ、構図、何も起きない「間」がひと目で確認できます（このページの各作品の下に書いた欠点も、この方法で見つけました）。
• 自動チェック：素材を読み込んでいないか、文字が文字やオブジェクトとぶつかっていないか、カットがビート上にあるか、音量が急に跳ね上がっていないか。
• そして、変えたい点を伝える：「スマホだとキャプションが小さすぎる」「第 2 幕をもっとゆっくりに」「オレンジを控えめに」。エージェントがコードを直して、もう一度レンダリングします。

テストで最初の出力によく見られた問題は、太く丸い輪郭線のせいで子どもっぽく見えるキャラクター、オブジェクトの上に描かれた文字、何も動かない長い時間、そして音楽の中で浮いた大きな一撃でした。一定のグルーヴの中なら同じ一撃も自然に聞こえますが、無音の直後だとびっくりさせてしまいます。

方法 1：オープンソースのスキルを使って Claude Code で作る

ターミナルに抵抗がなければ、ここまでの内容はすべて、iart-ai/javascript-animation-skills（MIT ライセンス）にある 2 つの無料のエージェントスキルにまとまっています。javascript-animation（描画ライブラリ、絵コンテのワークフロー、MP4 へのレンダリング、セルフチェック）と、soundtrack（テンポマップに乗せた Web Audio の音楽と同期チェック）です。

# 任意のコーディングエージェント（Claude Code、Cursor、Codex…）
npx skills add iart-ai/javascript-animation-skills

# または Claude Code のプラグインとして
/plugin marketplace add iart-ai/javascript-animation-skills
/plugin install javascript-animation-skills

必要なもの：Node 18 以上、playwright-core、ffmpeg、Chrome。API キーは不要です。あとは普通の言葉で頼むだけです。

Make a 40-second hand-drawn explainer on why babies love black-and-white cards. Every frame in code.

出力は、ブラウザで開ける HTML ファイル 1 つと、レンダリング済みの MP4 です。

"I only asked you to fix one line"（「1 行直してって頼んだだけなのに」）：エージェントが 1 行のタイポ修正を、一晩で 1 つの街に膨らませてしまう話です。81 KB の HTML ファイル 1 つで、音符も効果音もすべて Web Audio で合成しています。

これらのスキルは Claude Opus 5.5 で開発・テストしました。Cursor や Codex などほかのエージェントにもインストールできますが、ほかのモデルとの組み合わせはまだ試していません。作品をまるごと描くには空間的な推論力と、モデルが自分のコンタクトシートを見直す力が強く求められるので、手元でいちばん強力な画像対応モデルを使ってください。

方法 2：iArt の Animation モードで、コードなしで作る

ターミナルの準備をしたくないなら、iArt が同じ手法を製品として提供しています。Create → Animation を開き、プロンプトを入力して、16:9、9:16、1:1 から選んで送信するだけです。中身は同じアプローチで、Claude Opus 5.5 で動くエージェントが絵コンテ、描画コード、音楽を書き、自分で静止画をチェックし、作品がブラウザで再生されます。自分でやる場合との違いは次のとおりです。

• 長い作品。長い作品にしたいときは「続けて」と頼めば、同じプロジェクトの中で、同じキャラクター、同じ見た目、同じ音楽のまま続きを追加します。
• 修正は文章で。変えたい点を返信すれば、コードを直して描き直します。
• 参考写真。写真を添付すると、エージェントがそれをもとにキャラクターを描きます。写真そのものは作品に出てきません。
• 書き出しと共有。公開リンクで共有するか、サウンドトラックをミックスした MP4 を書き出せます。エンコードはブラウザの中で行われます。
• コスト。登録時にもらえる 2 ドル分のクレジットで、30 秒程度までのアニメーションを作れます。MP4 の書き出しには有料プランが必要です。
• まだできないこと。Animation モードではまだナレーションを入れられず、サウンドトラックは音楽と効果音だけです。正確な画面上の文字とナレーションが必要なら、iArt の Motion モードもコードを書いてアニメーションを作り（canvas ではなく React と GSAP を使います）、AI ナレーションに対応しています（詳しくは AI 解説動画のページへ）。

"Opening sequence for my faceless YouTube bedtime-story channel 'Sleepy Lantern'. Cozy, 15 seconds, ends on the channel name." コードで描いたチャンネルのオープニングです。このスタイルは顔出しなしのチャンネルにもよく合います。

FAQ

Claude はアニメーションを作れますか？

はい。Claude Opus 5.5 は、短い作品の全フレームを HTML canvas に描く JavaScript を書けます。サウンドトラックも同じファイルの中で Web Audio API によって合成されます。そのコードを 1 フレームずつレンダリングして MP4 にします。Opus 5.5 のリリース後にシェアされていたような作品は、画像素材を使わずにこの方法で作られています。

コードが書けなくても大丈夫ですか？

大丈夫です。Claude Code では、普通の言葉で書いたプロンプトからエージェントがコードをすべて書きます。ただし、いくつかのツールをインストールする必要があります。iArt の Animation モードなら、ブラウザでプロンプトを入力するだけです。

どのモデルを使えばいいですか？

オープンソースのスキルも iArt の Animation モードも、Claude Opus 5.5 で開発・テストしています。ほかのモデルはテストしておらず、性能の低いモデルでは絵が粗くなると考えてください。モデルが自分の静止画を見直すので、画像を扱えるモデルである必要があります。

コードで描くアニメーションはどのくらいの長さにできますか？

スキルを使う場合は、頼んだだけの長さにできます。ただし長い作品ほど、計画とチェックに時間がかかります。iArt の Animation モードでは、長い作品は同じプロジェクトの中でパートごとに作ります。好きな長さになるまで「続けて」と頼んでください。

音楽はどこから来ていますか？

Web Audio API を使ってコードで書かれています。パーカッション、ベース、パッド、そして画面上の動きごとに合成した効果音で、すべてテンポマップに乗っているので、カットがビートに合います。オフラインでレンダリングして MP4 にミックスします。スキルでは、自分で用意した音楽ファイルを使うこともできます。

ナレーションは入れられますか？

iArt の Animation モードではまだできません。サウンドトラックは音楽と効果音です。今すぐナレーションが必要なら、React と GSAP のコードでアニメーションを作る iArt の Motion モードが AI ナレーションに対応しています。

作ってみましょう

このページのプロンプトから、作りたいものにいちばん近いものを選び、題材を変えて実行してみてください。オープンソースのスキルを入れた Claude Code でも、何もインストールせずに使える iArt の Animation モードでもかまいません。そして最初のテイクを監督の目で見て、変えたい点を伝えましょう。ほかの作品とそのプロンプトは JavaScript アニメーションメーカーのページで見られます。