JavaScriptアニメーションメーカー
すべてのフレームを、コードで描く。
あなたは説明するだけ。
Claude Opus 5.5搭載のエージェントが、全フレームをレンダリングするJavaScriptを書き、
サウンドトラックもコードで作曲します。キーフレームも、タイムラインも、ターミナルも不要です。
JavaScriptアニメーションとは？
コードで書かれた映像。
毎フレーム、新しくレンダリングされる。
iArt.aiのAnimationモードは、1文の説明をJavaScriptアニメーションに変えます。Claude Opus 5.5で動くエージェントが書いたコードで、全フレームをレンダリングする短い映像です。文字は実際のテキストとして組版され、図形やパスはSVGで描かれ、手描きの絵やパーティクル、テクスチャはcanvasレイヤーが描きます。各フレームは時間の関数なので、再生・シーク・書き出しのどれでも同じ映像になります。音楽と効果音は、Web Audio APIを使ってコードで合成されます。
iArt.ai は、この手法をブラウザのタブひとつで使えるようにしました。AnimationモードはClaude Opus 5.5搭載のエージェントです。あなたが映像を説明すると、エージェントがビートとショットを計画し、アニメーションのコードと音楽を書き、自分で静止画をチェックして、結果をブラウザで再生します。決まったスタイルはありません。見た目は題材とあなたの言葉から生まれるので、決済の解説動画と2歳児向けのおやすみ絵本が似ることはありません。
なぜ今広まったのか。映像を丸ごとコードで描くには、モデルの空間推論力、センス、長く丁寧なコードを書く力、そして自分が描いたフレームを見て直す力が必要です。Claude Opus 5.5によって、コードで描いた映像は人がシェアしたくなる水準に達し、「全フレームJavaScript」はひとつのジャンルになりました。
定義を詳しく知りたい方は JavaScriptアニメーションとはを、自分で手順どおりに作りたい方は Claude Opus 5.5でアニメーションを作る方法をご覧ください。
Claude Motionがご利用のプランにない場合は、 同じタイプのアニメーションを作る4つの方法をご覧ください。
作品例
すべてコードで描かれた映像。
どの映像も、下に記載したプロンプトからiArtのAnimationモードで制作しました。すべてのフレームとすべての音がコードで書かれています。プロンプトを試すと、同じ映像のコピーではなく、同じ方向性の映像ができあがります。
“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.”
このプロンプトを試す →“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.”
このプロンプトを試す →“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.”
このプロンプトを試す →“¿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
描いて、音をつけて、チェック
全フレームをレンダリングするコードと、Web Audioのサウンドトラック（音楽と効果音）を書きます。そのうえで、あなたが見る前に自分の静止画とコンタクトシートを確認し、文字の見切れや重なり、空白のフレームがないかをチェックします。
04
編集・続き・書き出し
チャットで返信すれば何でも変更できます。エージェントがコードを編集してレンダリングし直します。公開リンクで共有でき、有料プランではサウンドトラック付きのMP4（オーバーレイは透過WebM）を書き出せます。
2つのエンジン
iArtのどのエンジンを使うべき？
Animationは、iArtで動画を作る2つの方法のうちのひとつです。文字・データ・タイミングを正確にしたいときに最適ですが、実写のような映像には向きません。
| Animation | AI Video | |
|---|---|---|
| 作り方 | コードが全フレームをレンダリング（組版テキスト、SVG、canvasレイヤー）し、サウンドトラックもコードで合成 | 生成AIの動画モデルが映像をレンダリング |
| 得意分野 | 解説動画、モーショングラフィックス、イラスト調の映像、オーバーレイ | 実写のようなシネマティックなショット |
| 画面上の文字 | 正確（コードで組版） | モデルが描くため、綴りが崩れることがある |
| 素材 | 不要。スクリーンショット、ロゴ、画像、動画クリップを入れることも可能 | 生成された映像 |
| ナレーション | AIナレーション（声を選択） | AIナレーション |
正確なブランドタイポグラフィやデータチャートを使いたい場合は、 解説動画をご覧ください。
自分で動かすか、
セットアップを省くか。
この手法はオープンソースです。ターミナルが日常なら、自分のコーディングエージェントで動かせます。ブラウザで一文を入力するほうがよければ、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タブで動作
- ✓ 長さは自由。長い映像はシーンに分けて作成
- ✓ スクリーンショット、ロゴ、サイトを映像に登場させたり、写真からキャラクターを描いたり
- ✓ オプションでAIナレーションも
- ✓ 公開リンクで共有。有料プランではサウンドトラック付きMP4（オーバーレイは透過WebM）を書き出し
JavaScriptアニメーションとは？
コードでレンダリングするアニメーションという意味でのJavaScriptアニメーションとは、すべてのフレームをコードで生成する映像のことです。時間の関数が各瞬間に画面に映るものを決め、組版テキスト、SVGの図形、canvasの描画を使います。音楽と効果音はWeb Audio APIで合成します。iArtのAnimationモードは、テキストプロンプトからそのコードを書いてくれるAIアニメーション生成ツールです。
iArtのAnimationモードはどのモデルを使っていますか？
Claude Opus 5.5です。エージェントがビートとショットを計画し、アニメーションのコードと音楽を書き、映像を見せる前に自分の静止画とコンタクトシートを確認します。この手法のオープンソース版であるjavascript-animation-skillsも、Claude Opus 5.5で開発・検証しました。
映像はどのくらいの長さまで作れますか？
作りたい長さを伝えてください。長い映像は同じプロジェクトの中でシーンに分けて作られ、見た目と音楽はそのままです。どのシーンも、あとからチャットで返信して変更できます。このページの「種が木になるまで」は40秒の映像です。
Animationモードでナレーションは付けられますか？
はい。メッセージ欄で声を選ぶと映像にナレーションが付き、映像は言葉のタイミングに合わせて進みます。声を選ばない場合、サウンドトラックはコードで合成した音楽と効果音になります。
自分の画像や写真は使えますか？
はい。添付したスクリーンショット、ロゴ、製品写真、短い画面録画は、そのまま映像に登場します。人物の写真や好みのテイストの画像は、描き起こすキャラクターやスタイルの参考として使われます。サイトのURLを伝えることもできます。
料金は？動画はダウンロードできますか？
新規アカウントには$2のサインアップクレジットが付与されます。$2あれば30秒未満の映像を1本作れます。どの映像も公開リンクで共有できます。サウンドトラック付きMP4の書き出しには有料プランが必要です（Proは月$20）。テロップなどのオーバーレイは、代わりに透過WebMで書き出されます。
無料のオープンソースで同じことはできますか？
できます。javascript-animation-skills（github.com/iart-ai/javascript-animation-skills、MIT）は、あなたのコーディングエージェントに同じ手法を教え、手元のマシンで映像をMP4にレンダリングするClaude Codeのスキル集です。Node 18+、ffmpeg、Chromeが必要です。iArtのAnimationモードは、同じアプローチをセットアップなしで使えるものです。
映像を説明しよう。
全フレームはエージェントが書きます。
すべてのフレームも音楽もコードで書かれます。$2のサインアップクレジットで始めて、有料プランでMP4を書き出せます。