canvasアニメーションの作例7本：全フレームを JavaScript で描いた作品を、プロンプトと計測結果つきで
Claude Opus 5.5 の登場以来、"every frame drawn in JavaScript"（全フレームを JavaScript で描いた）は 1 つのジャンルになりました。プログラムが HTML canvas に 1 フレームずつ絵を描き、音楽も同じページの中で合成される短い作品のことです。この記事では、そうやって作った canvasアニメーションの作例を、iArt の Animation モードとオープンソースのスキルの両方から集めました。それぞれに、実際に使ったプロンプトと、直したい点を添えています。最後には、私たちの作品と X で広まった作品 4 本に同じ計測スクリプトをかけた結果を表にまとめたので、両者が実際にどう違うのかを確かめられます。
ミュートを解除するとサウンドトラックが聞こえます。これもコードです。このページのプロンプトは制作時の英語原文のまま載せていますが、アプリはどの言語のプロンプトでも受け付けます。
これらの作例に共通すること
以下の作品はすべて、Claude Opus 5.5 で動くエージェントが 1 文のプロンプトから作ったもので、画像・映像・音声のファイルは一切使っていません。エージェントはまずビートグリッドとショットリストを計画し、次に描画コードと音楽を書き、仕上げる前に自分でコンタクトシートを確認しました。その後、人の手による編集はしていません。各作品の説明に欠点を書いているのはそのためで、欠点こそが最初のテイクに実際に含まれているものだからです。作り方は全フレームを JavaScript で描くアニメーションの作り方でステップごとに、用語そのものは用語集の JavaScript アニメーションで説明しています。
1. ChatGPT は次の単語をどう選ぶのか（9:16 の解説動画）
How does ChatGPT actually pick the next word? A 25-second vertical explainer for TikTok, no jargon.
見どころ。冒頭に載せた作品です。エージェントは「次の単語を選ぶ」ことを、扇形の大きさがそのまま確率になっているルーレットに置き換えました。このルーレットが説明のすべてで、読む、確率を出す、回す、付け足す、そして次の単語のためにまた同じループを回します。画面上部にはステップの進行表示が出続けるので、今どこにいるのかを見失いません。画面の確率には「架空の例の数字」と明記されており、速く繰り返す場面の 1 回では 2 番目に確率の高い単語が選ばれ、いつもいちばん上が選ばれるわけではないことを示しています。
直したい点。全編で「単語」と言っていますが、ChatGPT が実際に選んでいるのは単語の断片です。専門用語を避けるために、エージェントはその点を省きました。また最初の 7 秒ほどは、画面の下 3 分の 1 がかなり空いています。
2. スマホはどうやって自分の居場所を知るのか（1:1 の解説動画）
How does your phone know where you are? A 25-second GPS explainer for my science Instagram, playful but accurate.
見どころ。「楽しく、でも正確に」という指示は、リソグラフ印刷の科学 ZINE 風の見た目になりました。クリーム色の紙に青とピンクのフラットなインク、主人公は小さなピンクのスマホです。物理は正しく、縮尺どおりに描かれています。高度 20,200 km に約 30 基の衛星、0.070 秒と測られた信号が 21,000 km に換算され、3 つの距離の円がスマホの位置で交わります。そのうえで「スマホ自身の時計がずれている」という落とし穴があり、4 基目の衛星がそれを補正します。サウンドトラックはマリンバとウッドブロックの打楽器で、ポンと現れる動き、パルス、ピンのすべてに音が付いています。
直したい点。測位は球ではなく平面の円で描かれています。これはよくある単純化です。引きの画面ではスマホの高さが 30 px ほどしかなく、「耳を澄ます」ポーズがほとんど伝わりません。また、4 基目の衛星の円が届く場面でも、衛星そのものは画面外のままです。
3. Enter を押してからの 0.5 秒（16:9 の解説動画）
What happens in the half second after you type a website address and press Enter? A 30-second explainer for our developer newsletter.
見どころ。カメラが 1 枚のつながったネットワーク図の中を移動していきます。DNS、次に回線上を流れる SYN / SYN-ACK / ACK のチップとして描かれた TCP ハンドシェイク、証明書の確認と南京錠が出てくる TLS、そして GET / と 200 OK、最後にページの描画です。各メッセージは、そのメッセージが文字どおり何と言っているかを示すチップになっています。ブラウザが送るものはアンバー、応答はオフホワイト、緑は通信が暗号化されてからだけ使われます。例に使ったアドレスは 203.0.113.42 に解決されます。これはドキュメント用に予約されたアドレス範囲なので、誰かの実在のサーバーではありません。
直したい点。引きの画面ではチップが画面上 25〜35 px しかなく、スマホでは小さく見えます。最初の 3.7 秒はかなり静かで（問いとタイピングだけ）、内容も単純化しています。DNS キャッシュや HTTP/3 は出てきません。
4. 30 秒でわかる現代 AI の歴史（16:9）
A 30-second history of modern AI, from the 2017 paper 'Attention Is All You Need' to today's AI agents that write code. For a tech YouTube channel.
見どころ。6 つの時代を 1 ショットずつ見せ、画面下のタイムラインバーが年を追っていきます。タイトルの単語どうしをアテンションの弧で結んだ 2017 年の論文、2018 年の GPT と BERT、パラメータ数（117M、1.5B、175B）に面積を合わせた正方形で表したモデルの大きさ、2022 年のチャット画面、"strawberry" に含まれる r を数える推論モデル、そしてテストを通すコーディングエージェントです。エージェントは画面に出す事実を確信のあるものだけに絞り、2022 年以降の製品名は使いませんでした。
直したい点。最後に引いていく場面では 6 つの時代がサムネイル大に縮み、中身が読み取れません。29 px のキャプションもスマホでは小さめです。また、この記事でいちばん暗い作品で、モデルの好みの作風（深い青の背景にアンバーのアクセント）がもっとも強く出ています。
5. お月さまが星たちを寝かしつける（1:1、2 歳児向け）
A 20-second bedtime animation for a 2-year-old: the moon tucks the stars into bed.
見どころ。同じエンジンで、正反対のトーンです。丸みのあるキャラクター、大きな目、ナイトキャップをかぶったお月さま、そしてほぼ途切れないやさしい動き。下の計測表でも、話題になった作品と同じくらい動いているのは、私たちの作品ではこれだけです。「2 歳児向けに楽しく」という指示を、エージェントは題材だけでなく見た目の指定としても読み取っています。
直したい点。サウンドトラックの音量レンジが作例の中でいちばん狭く（約 4 dB）、寝る前には合っていますが、そのぶんカットは体で感じるビートに乗るというより、やわらかく切り替わります。
6. 月はなぜ形を変えるのか（1:1、スペイン語）
¿Por qué la Luna cambia de forma cada noche? Un video corto para mi canal de ciencia para niños, texto en español.
見どころ。スペイン語のプロンプトからは、スペイン語の作品ができます。文字は動画モデルではなくコードで描かれるので、画面上の文字も一字一句正確です。説明も正しいもので（月は自分では光っていない、毎晩、光が当たっている半分の違う部分を見ている、周期は約 29 日半）、太陽・地球・月の配置図に「地球からの見え方」の小窓を添えて描いています。
直したい点。40 秒とこの記事でいちばん長く、AI の歴史の次に動きが少ない作品です。はっきりした動きがあるフレームは 37% しかありません。子ども向けチャンネルなら、図解の区切りと区切りの間にもっと動きがほしいところです。
7. 「1 行直してって頼んだだけなのに」（オープンソースのサンプル）
見どころ。この作品はアプリではなく、オープンソースの javascript-animation スキルを使って Claude Code で作りました。解説動画ではなくコメディです。誰かが 01:58 に 1 行のタイポ修正を頼んで寝てしまい、08:30 にはコードベースが高層ビル街になっています。81 KB の HTML ファイル 1 つで、音符も効果音もすべて同じファイルの中で合成しています。リポジトリのチェックでは、14 カット中 14 カットがビート上にあり、300 枚のサンプルフレームで文字の重なりはゼロでした。
直したい点。この作品の最初のテイクは子どもっぽく見え（丸っこく、輪郭線付きで、ちびキャラ風）、オブジェクトの上に文字が乗っていました。ここに載せているのは 2 回目のテイクで、補助線の入ったフラットで映画的な見た目になっています。そこに至るには監督の目によるレビューが必要でした。そのステップは、今はアプリが代わりにやってくれます。
計測結果：私たちの作品と、話題になった作品の比較
この記事の全作品と、Opus 5.5 のリリース後に X でシェアされた作品 4 本に、同じスクリプトをかけました。各作品を 48×48 のグレースケールのサムネイル、毎秒 10 フレームに縮小し、4 つの値を計測します。平均の動き（連続するフレーム間のピクセル変化の平均。大きいほど 1 秒あたりに多くのことが起きている）、動きのあるフレーム（0.1 秒ごとのステップのうち、目に見える変化があるものの割合）、10 秒あたりのハードカット数、そして音量レンジ（いちばん大きい 1 秒と静かな 1 秒の差、デシベル）です。公開作品については計測値だけを載せ、元の投稿にリンクしています。動画そのものは転載していません。
| 作品 | 長さ | 平均の動き | 動きのあるフレーム | ハードカット / 10 秒 | 音量レンジ |
|---|---|---|---|---|---|
| Watermelon（Kevin Ngo、@claudeai がシェア） | 29 秒 | 10.9 | 85% | 13.3 | 11 dB |
| "What do you love?"（Kevin Ngo） | 28 秒 | 11.4 | 97% | 12.5 | 6 dB |
| "Small print"（@Voxyz_ai） | 29 秒 | 8.2 | 98% | 0 | 7 dB |
| Video-editor demo（@NFT_Chen） | 30 秒 | 4.5 | 94% | 9.0 | 7 dB |
| 5. お月さまが星たちを寝かしつける | 20 秒 | 4.8 | 80% | 6.0 | 4 dB |
| 7. 1 行直してって頼んだだけなのに | 30 秒 | 3.5 | 52% | 6.0 | 14 dB |
| 1. ChatGPT は次の単語をどう選ぶのか | 26 秒 | 2.1 | 38% | 1.9 | 12 dB |
| 2. スマホはどうやって自分の居場所を知るのか | 25 秒 | 1.4 | 26% | 2.0 | 8 dB |
| 6. 月はなぜ形を変えるのか | 40 秒 | 1.2 | 37% | 1.5 | 6 dB |
| 3. Enter を押してからの 0.5 秒 | 30 秒 | 1.2 | 33% | 1.0 | 12 dB |
| 4. 30 秒でわかる現代 AI の歴史 | 30 秒 | 1.1 | 24% | 1.3 | 14 dB |
傾向ははっきりしています。話題になった作品はほぼ常に動いていて（フレームの 85〜98%）、動きも大きく（平均の動き 4.5〜11.4）、1 秒に 1 回以上のペースでカットが入ります。私たちの解説動画は、文字を読めるように止まっています。動きのあるフレームは 24〜38%、平均の動きは 1.1〜2.1 です。これはジャンルの違いであって、品質の点数ではありません。スイカの作品のように動く解説動画では読めなくなってしまいますし、私たちの作品のうち解説ではなくストーリーの 2 本（寝る前の作品とコメディ）は、話題の作品群にかなり近い位置にあります。話題の作品のような感触がほしいなら、プロンプトでそう頼んでください。絶えず動くこと、ビートごとにカットすること、読ませる文字は入れないこと、です。
音量の列も、正直に見ておくべき数字です。私たちの作品は、話題の作品の多く（6〜7 dB）よりダイナミクスが広く（最大 14 dB）なっています。音楽をセクションと無音のブレイク付きで書いているためで、カットの切れ味は増しますが、無音からいきなり一撃が来るとびっくりさせてしまうことがあります。soundtrack スキルの同期チェックが警告するのは、まさにその点です。
FAQ
canvasアニメーションとは何ですか？
canvasアニメーションとは、コードが HTML の canvas 要素に 1 フレームずつ描くアニメーションです。関数がその瞬間ごとに画面全体を描くので、画面上に読み込んだ画像や動画は一切ありません。このページの作品はすべて canvasアニメーションで、コードは Claude Opus 5.5 が書き、音楽も同じコードで合成しています。
これらの作例は手作業で編集していますか？
していません。どの作品も、掲載したプロンプトからエージェントが最初に仕上げたテイクそのもので、各作品の下に書いた欠点も含まれています。作品 7 はオープンソースのサンプルの 2 回目のテイクで、監督の目によるレビューで見た目が変わりました。そのレビューは現在、アプリのエージェントが自分で行う工程の一部になっています。
自分でも作れますか？
作れます。各作例の下にある「このプロンプトを iArt で試す」をクリックすると iArt の Animation モードで開きます。または、オープンソースの javascript-animation スキルを Claude Code にインストールしてください。作り方の全体は、上でリンクしたガイドにまとめています。
話題になった作品は、なぜこれらよりずっと動いているのですか？
解説動画ではなく、ループやストーリーだからです。計測では、シェアされた作品はフレームの 85〜98% に目に見える動きがあります。解説動画は文字を読めるように止まるので、24〜38% に収まります。そういう感触がほしいなら、絶えず動くことと、ビートごとのカットを頼んでください。
計測はどのように行いましたか？
短いスクリプトで各作品を毎秒 10 フレーム、48×48 のグレースケールに縮小し、フレーム間のピクセル変化の平均、目に見える変化があるフレームの割合、ハードカットの数、音声の音量レンジ（デシベル）を計算しました。私たちの作品にも公開作品にも、同じスクリプトを使っています。
自分で作ってみましょう
このページのプロンプトはどれも 1 文です。作りたいものにいちばん近いものを選び、題材を変えて、iArt の Animation モードで実行してみてください。チャンネル向けにシリーズを作るなら、iArt で作れるもっと長い形式を顔出しなし動画メーカーのページで紹介しています。ナレーション付きの解説動画については解説動画のページをご覧ください。