JavaScriptアニメーションメーカー
すべてのフレームを、コードで描く。
あなたは説明するだけ。
Claude Opus 5.5搭載のエージェントが、canvasに全フレームを描くJavaScriptを書き、
サウンドトラックもコードで作曲します。画像も、映像素材も、音声ファイルも、ターミナルも不要です。
JavaScriptアニメーションとは？
コードで書かれた映像。
毎フレーム、新しく描かれる。
iArt.aiのAnimationモードは、1文の説明をJavaScriptアニメーションに変えます。Claude Opus 5.5で動くエージェントがコードを書き、HTML canvasに全フレームを描く短い映像です。画像も、ストック映像も、音声ファイルも読み込みません。画面全体はdraw(ctx, t)という1つの関数で、任意の時刻tのcanvasを描きます。キャラクター、背景、文字、カメラワークまですべてです。音楽と効果音は、同じページ内でWeb Audio APIを使って合成されます。
iArt.ai は、この手法をブラウザのタブひとつで使えるようにしました。AnimationモードはClaude Opus 5.5搭載のエージェントです。あなたが映像を説明すると、エージェントがビートとショットを計画し、描画コードと音楽を書き、自分で静止画をチェックして、結果をブラウザで再生します。決まったスタイルはありません。見た目は題材とあなたの言葉から生まれるので、決済の解説動画と2歳児向けのおやすみ絵本が似ることはありません。
なぜ今広まったのか。映像を丸ごとコードで描くには、モデルの空間推論力、センス、長く丁寧なコードを書く力、そして自分が描いたフレームを見て直す力が必要です。Claude Opus 5.5によって、コードで描いた映像は人がシェアしたくなる水準に達し、「全フレームJavaScript」はひとつのジャンルになりました。
定義を詳しく知りたい方は JavaScriptアニメーションとはを、自分で手順どおりに作りたい方は Claude Opus 5.5でアニメーションを作る方法をご覧ください。
作品例
すべてコードで描かれた映像。
どの映像も、下に記載したプロンプトからiArtのAnimationエージェントが制作しました。すべてのフレームはcanvasのコード、すべての音はWeb Audioです。プロンプトを試すと、同じ映像のコピーではなく、同じ方向性の映像ができあがります。
“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.”
このプロンプトを試す →“How do noise-cancelling headphones actually cancel noise? Short vertical explainer for TikTok, ~20s.”
このプロンプトを試す →“Why is the sky blue? A 20-second explainer in the style of a 1950s science textbook.”
このプロンプトを試す →“Opening sequence for my faceless YouTube bedtime-story channel 'Sleepy Lantern'. Cozy, 15 seconds, ends on the channel name.”
このプロンプトを試す →“A 20-second bedtime animation for a 2-year-old: the moon tucks the stars into bed.”
このプロンプトを試す →“¿Por qué la Luna cambia de forma cada noche? Un video corto para mi canal de ciencia para niños, texto en español.”
このプロンプトを試す →仕組み
説明する。計画する。描く。仕上げる。
プロンプトから最初のフレームまでに何が起きているのかを紹介します。
01
映像を説明する
作りたいものを普段の言葉で伝えてください。題材、誰に向けたものか、長さ、トーンなどです。16:9、9:16、1:1から選べます。実在の人やペットをもとにしたキャラクターにしたい場合は写真を添付してください。エージェントが写真からキャラクターを描き起こし、写真そのものが映像に登場することはありません。
02
ビートとショットを計画
何かを描く前に、エージェントはひとつの連続した世界を舞台にしたビートグリッドとショットリストを書き、さらに映像と音楽の両方が参照する共通のイベントリストを作ります。だからカットがビートにぴたりと合うのです。
03
描いて、音をつけて、チェック
canvasに全フレームを描くコードと、Web Audioのサウンドトラック（音楽と効果音）を書きます。そのうえで、あなたが見る前に自分の静止画とコンタクトシートを確認し、文字の重なりや空白のフレームがないかをチェックします。
04
編集・続き・書き出し
チャットで返信すれば何でも変更できます。エージェントがコードを編集して描き直します。長い映像にしたいときは「続けて」と頼めば、同じプロジェクト内で、同じキャラクター・見た目・音楽のまま続きを追加します。公開リンクで共有でき、有料プランではサウンドトラック付きのMP4を書き出せます。
3つのエンジン
iArtのどのエンジンを使うべき？
Animationは、iArtで動画を作る3つの方法のうちのひとつです。描かれた映像や解説動画には最適ですが、万能ではありません。
| Animation | Motion Design | AI Video | |
|---|---|---|---|
| 作り方 | コードがcanvasに全フレームを描き、サウンドトラックもコードで合成 | コードが組版したレイアウトをアニメーション化（React + GSAP） | 生成AIの動画モデルが映像をレンダリング |
| 得意分野 | 手描き風・イラスト調の映像や解説動画 | モーショングラフィックス：正確な文字、データ、ブランド、製品 | 実写のようなシネマティックなショット |
| 画面上の文字 | 正確（コードで描画） | 正確（組版） | モデルが描くため、綴りが崩れることがある |
| 素材 | なし：画像・動画・音声ファイルを一切使わない | 手持ちの画像、ロゴ、スライド、データを使える | 生成された映像 |
| ナレーション | 未対応（音楽と効果音のみ） | AIナレーション内蔵 | AIナレーション |
ナレーションや正確なブランドタイポグラフィが必要なら、Motion Designが両方に対応しています。詳しくは 解説動画をご覧ください。
自分で動かすか、
セットアップを省くか。
この手法はオープンソースです。ターミナルが日常なら、自分のコーディングエージェントで動かせます。ブラウザで一文を入力するほうがよければ、Animationモードを使ってください。
Claude Code + javascript-animation-skills
オープンソースのスキルパックが、あなたのコーディングエージェントに同じ手法を教えます。ビートグリッドとショットリスト、描画ライブラリ、Web Audioのサウンドトラック、セルフチェック、MP4へのレンダリングまで。Claude Opus 5.5で開発・検証しています。
- – 無料・MITライセンス。Claude CodeのプランやAPI利用料はご自身で用意します
- – Claude Codeやその他のコーディングエージェントで動作
- – Node 18+、ffmpeg、Chrome、playwright-coreが必要
- – 映像はあなたのものになるHTMLファイルで、手で編集できます
同じ手法を、ブラウザのタブで
インストール不要、ターミナル不要。映像を説明し、再生を見て、チャットで返信して変更するだけです。
- ✓ app.iart.aiのCreateページにあるAnimationタブで動作
- ✓ 長い映像は「続けて」と頼むだけ
- ✓ 添付した写真からキャラクターを描く
- ✓ 公開リンクで共有。有料プランではサウンドトラック付きMP4を書き出し
JavaScriptアニメーションとは？
コードで描くアニメーションという意味でのJavaScriptアニメーションとは、すべてのフレームをコードでHTML canvasに描く映像のことです。draw(ctx, t)という関数が時刻tに画面に映るべきものを描画し、音楽と効果音はWeb Audio APIで合成します。画像も、映像素材も、音声ファイルも読み込みません。iArtのAnimationモードは、テキストプロンプトからそのコードを書いてくれるAIアニメーション生成ツールです。
iArtのAnimationモードはどのモデルを使っていますか？
Claude Opus 5.5です。エージェントがビートとショットを計画し、描画コードと音楽を書き、映像を見せる前に自分の静止画とコンタクトシートを確認します。この手法のオープンソース版であるjavascript-animation-skillsも、Claude Opus 5.5で開発・検証しました。
映像はどのくらいの長さまで作れますか？
作りたい長さを伝えてください。長い映像は同じプロジェクトの中でパートごとに作られ、キャラクター・見た目・音楽はそのままです。完成まで「続けて」と頼んでください。このページの「種が木になるまで」は2回に分けて作った40秒の映像です。
Animationモードでナレーションは付けられますか？
まだ対応していません。Animationモードのサウンドトラックは、コードで合成した音楽と効果音です。ナレーションが必要な場合は、ReactとGSAPのコードでアニメーションを作り、AIナレーションを備えたiArtのMotion Designモードをお使いください。
自分の画像や写真は使えますか？
参考写真を添付すると、エージェントがそこからキャラクターを描き起こします。写真そのものが映像に登場することはありません。それ以外は何も読み込まず、画像として生成されるものもありません。画面上のすべての線や形はコードで描かれます。
料金は？動画はダウンロードできますか？
新規アカウントには$2のサインアップクレジットが付与され、30秒程度までのアニメーションを1本作れます。どの映像も公開リンクで共有できます。サウンドトラック付きMP4の書き出し（ブラウザ内でエンコード）には有料プランが必要です（Proは月$20）。
無料のオープンソースで同じことはできますか？
できます。javascript-animation-skills（github.com/iart-ai/javascript-animation-skills、MIT）は、あなたのコーディングエージェントに同じ手法を教え、手元のマシンで映像をMP4にレンダリングするClaude Codeのスキル集です。Node 18+、ffmpeg、Chromeが必要です。iArtのAnimationモードは、同じアプローチをセットアップなしで使えるものです。
映像を説明しよう。
全フレームはエージェントが描きます。
すべてのフレームをコードで描き、音楽もコードで合成。読み込む素材はゼロです。$2のサインアップクレジットで始めて、有料プランでMP4を書き出せます。