メインコンテンツへスキップ

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

Zhangcan Ding
Zhangcan Ding · Growth Marketing at iArt.ai · LinkedIn
更新日 2026年10月16日

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 秒あたりのカメラ移動中に、画面上端に赤い破片のようなものが一瞬紛れ込んでいます。

コードで描くアニメーションのプロンプトの書き方

1 文だけでも、いい作品はできます。作品が答える問い、対象の視聴者、長さ、フォーマットを書けば十分です。よりプロらしい作品にしたいなら、プロンプトを短いブリーフとして、次の順番で書きます。

[1〜2 文:どんな作品か、長さ、フォーマット。]

IDEA: 作品全体を支える、ひとつの題材や仕掛け。

0–2s: 画面に何があるか、何がどう動くか、正確な文言。
2–5s: …
(ビートごとに 1 行、最後まで)

LOOK: 背景と配色(カラーコード)、書体、質感、構図。
MOTION: どこを速くし、どこで止めるか、ショットから次のショットへどう受け渡すか。
SOUND: 音楽(テンポ、楽器、ムード)と、動きごとの効果音。ナレーションがなければ "No narration." と書く。

このガイドのプロンプトはこの形で書いています。最初の 1 文がその作品を作った文で、残りはその作品を 1 秒ごとに描写したものです。iArt の Animation モードで行ったブラインドの比較(AI モデルが両方の作品を、順番を入れ替えて見比べました)では、試した 6 本のうち 5 本でフルのブリーフが冒頭の 1 文だけのプロンプトに勝ち、残る 1 本は引き分けでした。作るものが多いぶん、時間がかかり、クレジットも多く使います。いちばん手早い書き方は、気に入った作品を 1 秒ごとに言葉にしてみることです。

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

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

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

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

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

コードで描くアニメーションキーフレームアニメーションAI 動画生成
ピクセルを作るものプログラムが全フレームを描くアニメーターがキーポーズを置き、間をソフトが補完する動画モデルがピクセルを予測する
素材なし。図形も文字も音もすべてコード絵、ベクター、映像素材なし。ただしソースもない
画面上の文字正確(打ち込んだ文字そのもの)正確崩れたり誤字が出たりする
1 か所だけ変える1 行直して再レンダリングキーのタイミングを手で調整し直す生成し直して祈る
同じものを 2 回レンダリング完全に同じ完全に同じ毎回違う

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

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

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

見た目をプロンプトの中で言葉で指定した 3 本の作品です。

Paper cut-out collage style, like a children's picture book made of construction paper. A little boy at his window can't sleep, so a small friendly cloud drifts down over the rooftops, borrows a bit of moonlight and glows like a nightlight until he dozes off. 20 seconds, square 1:1.

IDEA: One small smiling paper cloud is the hero: it drifts to the moon, soaks up its golden light, then floats down beside the boy's window. The film is the cloud turning from plain cream paper into a glowing nightlight.

0–3.3s: wide shot of a sleepy town at night: purple paper gabled houses, deep blue starry sky, a big textured full moon upper right. In a warm yellow attic dormer, a boy in blue leans out and looks up.
3.3–6.7s: cut to a medium close-up of the boy framed in the glowing dormer. He yawns wide, rubs one eye with his fist, then rests his chin on his folded hands on the sill.
6.7–10s: back to the wide sky. A fluffy cream paper cloud with a smiling face drifts in from the upper left and glides slowly across the stars toward the moon.
10–13.3s: close-up on the moon. The cloud eases up against its left edge and nuzzles it. Soft yellow light pulses between them, sparkles twinkle, and warm gold spreads through the cloud from inside. It blushes and smiles.
13.3–16.7s: medium-wide on the rooftop. The now golden, glowing cloud floats down on a slow eased arc and settles gently right beside the open dormer window.
16.7–20s: medium shot of the window and the glowing cloud. Tiny yellow star sparkles drift around them. The boy's eyes grow heavy and close with a contented smile as he dozes off. Hold in stillness to the end.

LOOK: midnight indigo sky #1E2243 and #262B54, plum and slate-purple rooftops #3C335C and #4D476D, warm lamp yellow windows #FED466 and #F6AD3C, creamy moon #F8E7A2 and #EED37A, cloud cream #F4EEDC turning golden. Everything is cut from textured construction paper: fibre grain, stippled roofs and sky, torn deckled edges. The glowing window anchors the centre; moon and cloud live in the upper third.

MOTION: slow, low-energy, lullaby pace. The cloud drifts smoothly with soft eased stops at the moon and at the window, with a gentle squash and stretch as it floats. The boy moves like a paper puppet: stepped blinks, swapped mouth shapes for the yawn, a simple arm rub.

SOUND: a slow, gentle lullaby on fingerpicked nylon-string guitar and warm acoustic bass with soft celesta and glockenspiel accents. Magical chimes and a soft sparkle sweep when the cloud touches the moon and fills with light, faint twinkles as it descends. The music never stops. No narration.
プロンプト全文を見る ▾閉じる ▴

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

切り絵コラージュの見た目は Kevin Ngo さんのクリップで広まったもので、物語は私たちのオリジナルです。

Black-and-white ink woodcut style, rough carved lines on off-white paper. A girl folds a paper boat and sets it into the rain gutter; as it drifts through the city at night, every window it passes lights up and someone folds another boat. Short hand-lettered captions. 25 seconds, 16:9.

IDEA: One paper boat drifting left to right along the gutter is the spark. Every window it passes snaps on, and the light spreads like a chain reaction until the whole city glows and the gutter is full of boats.

Captions: lowercase hand-lettered white text in a black banner at the bottom, one per shot.

0–2.6s: a dark, hatched, rain-soaked skyline inks in on off-white paper, a small girl sitting on her front steps, rain lines jittering. Caption: "a dark, wet city".
2.6–5.1s: close-up of her mittened hands folding a cream sheet: triangle hat, brim, pop open into a boat. Caption: "she folded one boat".
5.1–7.6s: the girl with pigtails reaches down from the stoop, sets the boat on the gutter stream and lets go; it drifts right, bobbing. Caption: "and let it go".
7.6–12.6s: track right with the boat past dark facades. A ground-floor window bursts on with cream light and pointed rays, a silhouette inside; neighbours pop on; from an upper window someone drops another boat. Caption: "one window woke".
12.6–15.1s: wider street. Windows pop on in a ripple along the whole block; several boats now float together. Caption: "then the next street".
15.1–20.1s: the opening skyline again; light spreads across tenements and far towers until hundreds of windows glow. Caption: "then the whole city".
20.1–22.6s: low tracking shot along the curb: dozens of boats in a tight convoy, silhouettes watching from lit windows. Caption: "boats, and more boats".
22.6–25s: her building, every window lit; the girl sits in the central arched window holding a folded paper bird. Caption: "it started with one." Hold.

LOOK: strictly two tones like a linocut print: off-white paper #F3EFE6, carbon black #161412 for buildings, figures and banners, bright cream #FFFDF8 for window light and boats. Rough carved lines, heavy crosshatching, spiky ray bursts around lit windows. Flat side-on framing, water line low.

MOTION: animated on twos, hand-printed feel. Folds and windows snap on instantly with a short ray burst; boats drift smoothly with a gentle bob. Hard cuts; the only camera move is a slow pan along the water. The light spreads faster and faster.

SOUND: reflective fingerpicked acoustic guitar around 75–80 BPM, melancholy turning hopeful, over continuous rain hiss. Paper creases on each fold, a soft water dip, a warm switch click and small chime per window, clicks multiplying as the city lights up, a last chord ringing into the rain. No narration.
プロンプト全文を見る ▾閉じる ▴

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

@shfred0 さんの墨のアニメーションに着想を得ています。

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

IDEA: One illustrated textbook page. Follow a sunbeam into the air: molecules knock the short blue waves off in every direction while red passes straight on, and that scattered blue reaches a boy's eye from all over the sky.

Throughout: header "CHAPTER 7 · LIGHT AND THE AIR", page "143", a title at the top, a "Fig." caption at the bottom, all typed on letter by letter.

0–3.8s: a boy in a blue cap in a field, a crosshatched red sun above. Title: "Why Is the Sky Blue?" Caption: "Fig. 7-1. On a clear day the whole sky looks blue. But sunlight itself looks white. Where does the blue come from?"
3.8–7.6s: push in to the sun; a white beam carries a long red wave and a short blue wave side by side. Labels pop in: "WHITE SUNLIGHT", "RED: LONG WAVES", "BLUE: SHORT WAVES". Title: "1. Sunlight is a mix of colors". Caption: "Fig. 7-2. White sunlight holds every color of the rainbow. Red light travels in long waves; blue light in short ones."
7.6–12.6s: along the beam among paired-circle molecules ("AIR MOLECULE"), the blue wave hits one and sprays out in rings: "BLUE BOUNCES OFF IN ALL DIRECTIONS". The red wave carries on: "RED PASSES STRAIGHT ON". Table top right, "LIGHT SCATTERED BY AIR": RED 1x, BLUE counting up to 6x. Title: "2. Air scatters the short waves". Caption: "Fig. 7-3. Tiny molecules of air knock short blue waves off in all directions, about six times more than long red ones."
12.6–16.4s: back to the field; dashed blue lines run from molecules all over the sky into the boy's eye ("YOUR EYE"). Title: "3. Blue arrives from every direction". Caption: "Fig. 7-4. Wherever you look, scattered blue light is coming toward your eye. So every part of the sky looks blue."
16.4–20s: full diagram holds. Title: "In Short". Caption becomes a bordered box: "The air scatters blue light out of sunlight, all across the sky. That is why the sky is blue." Hold.

LOOK: aged newsprint #EDE7D7, vermilion #D75D4E for sun and red wave, cornflower blue #4B78A4 for blue wave and sky lines, mustard ground #C4B17B, olive tree #8A7D58, faded charcoal #22201E lines and text. Lithograph print feel: fine horizontal ruling, crosshatch shading, a double-ruled diagram frame. Bold sans titles, plain sans captions, caps labels.

MOTION: calm classroom pace with holds for reading. Waves travel at steady speed; scatter rings expand smoothly, no bounce.

SOUND: warm, minimal electric piano chords around 80 BPM. Typewriter clacks on all typing, no whooshes, a resolving chord and one last key strike. No narration.
プロンプト全文を見る ▾閉じる ▴

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

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

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

始めるには、目的をはっきり書いた短いプロンプトで十分です。作品が答える問い、対象の視聴者、長さ、フォーマットです。ショットリストを自分で書く必要はありません。その計画はエージェントの最初の作業だからです(ステップ 3)。ただ、上のブリーフのように自分で書けば、思い描いている作品に近づきます。冒頭の文に入れておくと役に立つのは次のような情報です。

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

IDEA: One cutaway earcup on a listener's head is the whole diagram. Red noise wave in, mic hears it, chip flips it teal, speaker plays it, red plus teal add to a flat line. A bottom meter drops LOUD, MUFFLED, QUIET.

0–2.4s: an annoyed listener faces a fan-like engine labelled "ENGINE HUM". A red sine wave travels into his ear; the bottom meter "NOISE AT YOUR EAR" fills red to "LOUD". Question card drops in at the top: "How do headphones erase noise?"
2.4–3.8s: over-ear headphones slide down onto his head and open into a cutaway: outer mic, chip, inner speaker. The cushion damps the wave; meter falls to "MUFFLED".
3.8–7.6s: punch in on the earcup. Card: "STEP 1 / A mic outside hears the noise". A pulsing ring marks the mic; a screen on the chip traces the red wave.
7.6–11.3s: card: "STEP 2 / A chip flips it upside down / every peak becomes a dip". The wave on the chip screen flips vertically and turns teal.
11.3–12.6s: card: "STEP 3 / The speaker plays the flipped wave". The speaker sends the teal wave into the ear alongside the red one. Equation: "NOISE" + "FLIPPED" = "YOU HEAR".
12.6–15.2s: card: "PEAK + DIP / They cancel out / the hum mostly disappears". Red and teal overlap and flatten into one grey line; meter shrinks to "QUIET" in green.
15.2–18.8s: slight pull back. Card: "THE CATCH / Best on steady hums like engines & fans / sudden sounds get through more".
18.8–22s: reframe on the now smiling listener. Four lines stamp on one by one: "Hear it." "Flip it." "Play it." "Quiet." Hold.

LOOK: warm off-white paper #F1EFE8 with fine grain. Charcoal #22252A headphones and outlines, warm grey #7F7C77 clothes and parts, coral red #D84337 for the noise wave and LOUD, teal #26B5A1 for the flipped wave, forest green #2D6A4F for QUIET. Minimal flat infographic: cutaway diagram, pill badges, thin line waves. Bold sans headlines, small tracked caps labels, text kept in the upper and lower thirds.

MOTION: clear cause-and-effect pace; each card holds one to two seconds to read, then swaps with a quick slide or dissolve. Props move fast with a snappy ease-out; waves scroll smoothly and continuously.

SOUND: warm fingerstyle acoustic guitar with soft piano and a light beat, around 90–100 BPM, under a steady low engine drone at the start. A click and muffled filter sweep as the headphones seal, blips on the mic, a rising synth whoosh on the flip, then the drone cuts out abruptly at the cancel. Soft woodblock pops on each final line, chords resolving. No narration.
プロンプト全文を見る ▾閉じる ▴

このプロンプトを 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.

IDEA: One little acorn with a face is the hero throughout, seen in a fixed side-on cross-section with soil below, sky above. It wakes, roots, sprouts, becomes an oak, lives through the seasons, and ends by dropping a new acorn, closing the loop.

0–4.5s: brown soil layers under rain; a tiny acorn sleeps underground above a pebble. A small grey badge appears top left: "Act I · Below". Drops seep down toward it.
4.5–9s: close-up: three drops land on its cap, its eyes pop open with a smile, the shell cracks and a pale first root pushes downward.
9–19.5s: wide again. The root drives down, curves around the pebble and branches into side roots. A green shoot pushes up through the soil, pausing just below the surface.
19.5–25s: the shoot breaks through. Badge changes to "Act II · Above". Two rounded first leaves unfold and spread; the seedling smiles up at the sky.
25–30s: the stem thickens into a trunk, the acorn's face still at its base. Branches grow and burst into round green leaf clusters with small pink blossom dots; a warm sun rises upper right.
30–33s: autumn. The sky warms; the canopy turns golden orange and leaves drift down to the ground.
33–36s: winter. Bare branches, snow falling, a white layer building on the soil. The face sleeps calmly.
36–40s: spring. The snow melts, green canopies pop back with blossoms, an acorn ripens on a branch, falls and lands on the soil with two small bounces.

LOOK: soil in deep chocolate #4A3322 and umber #5A3D28 with tan flecks #9C8471; sky parchment cream #EBE5D8; acorn golden ochre #D89849 with chestnut cap #8C5A28; stem green #88A878; foliage sage #94B097 and olive #5F8265, autumn orange #C8873E, blossom coral #E28A7A; sun amber #E2A35B. Flat shapes with light paper grain, simple line roots and branches, round canopies. Badge: small grey #7E858C rounded box, white text.

MOTION: calm, readable, with pauses between each stage of growth. Springy squash and stretch on the crack, leaf pops and landing; smooth easing on root and branch growth. Seasons change in place with colour shifts, falling leaves and snow.

SOUND: one unbroken, unhurried fingerstyle acoustic guitar score, thinning in winter, lifting for spring. Drip pings underground, a crisp shell crack, soft pops on eye-open and when the shoot breaks through, birdsong above ground, woody rustles, an autumn breeze, quiet winter wind, a spring chime, and a hollow thud as the new acorn lands. No narration.
プロンプト全文を見る ▾閉じる ▴

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

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

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

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

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

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

方法 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 で動くエージェントが絵コンテと、作品そのものをコードとして(組版した文字、SVG、データに、このページの作品のような手描きの表現には canvas レイヤーを重ねて)書き、音楽も書き、自分で静止画をチェックし、作品がブラウザで再生されます。自分でやる場合との違いは次のとおりです。

  • 長い作品。欲しい長さを伝えてください。長い作品ほど生成に時間がかかり、コストも上がります。
  • 修正は文章で。変えたい点を返信すれば、コードを直して描き直します。
  • 手持ちの画像。スクリーンショット、ロゴ、製品写真を添付すると、そのまま作品に登場します。人物の写真や好きなテイストの画像を添付すると、描くキャラクターやスタイルの参考になります。どちらの使い方かを伝えてください。サイトの URL を渡すこともできます。
  • 書き出しと共有。公開リンクで共有するか、サウンドトラックをミックスした MP4 を書き出せます。レンダリングはクラウドで行われます(Pro は 1080p、Ultra は 4K)。テロップなどのオーバーレイは透過 WebM で書き出されます。
  • コスト。20〜30 秒の作品は約 0.60〜1.00 ドルで、生成には 4〜5 分ほどかかります。登録時にもらえる 2 ドル分のクレジットで 2〜3 本作れます。MP4 の書き出しには有料プランが必要です。
  • ナレーション。メッセージ欄で声を選ぶと作品にナレーションが入り、映像が言葉に合わせて動きます。声を選ばなければ、サウンドトラックは音楽と効果音です。

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

Claude Code + スキルiArt Animation
準備Node、Playwright、ffmpeg、Chrome、エージェントのサブスクリプションブラウザ
モデル使っているエージェントのモデル(Opus 5.5 でテスト済み)Claude Opus 5.5
出力手元のマシンに HTML ファイル 1 つ + MP4エディター内のプロジェクト、共有リンク、MP4 または透過 WebM の書き出し(有料)
長さ指定しただけ頼んだだけの長さ。長い作品ほどコストが上がる
修正エージェントに頼むか HTML を直接編集チャットで頼む
コストスキルは無料。モデルの利用料は自己負担使った分だけクレジット消費(最初に 2 ドル分無料)

FAQ

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

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

プロンプトはどれくらいの長さにすればいいですか?

いい作品を作るなら 1〜2 文で十分です。どんな作品か、長さ、フォーマット、見せ場になる瞬間を書きます。よりプロらしい作品にしたいなら、300〜450 語ほどの短いブリーフを加えます。作品全体を支えるひとつのアイデア、画面に出す正確な文言を含む 1 秒ごとのショット、ルック、モーション、動きごとの効果音です。ブリーフを使うと、作るのに時間がかかり、クレジットも多く使います。

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

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

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

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

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

スキルを使う場合は、頼んだだけの長さにできます。ただし長い作品ほど、計画とチェックに時間がかかります。iArt の Animation モードでは、欲しい長さを伝えてください。長い作品ほど生成に時間がかかり、コストも上がります。

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

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

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

はい。iArt の Animation モードでメッセージ欄から声を選ぶと、エージェントがセリフを書いて収録し、映像をそれに合わせます。声を選ばなければ、サウンドトラックは音楽と効果音です。

作ってみましょう

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

プロ品質のモーショングラフィックスを作成しませんか?

AIであなたのアイデアをプロフェッショナルなアニメーションに