JavaScript アニメーション

JavaScript アニメーションとは？

JavaScript アニメーションとは、Web ブラウザ上で動くコードが生み出す動きのことです。スクリプトが時間の経過に合わせて画面の内容を変えていくもので、ページ上の要素（HTML や SVG）を動かす方法と、<canvas> に全フレームを描く方法があります。Web サイトの UI の動きを支えているほか、コードが自分で 1 フレームずつ描けば、画像や動画のファイルを一切使わずにアニメーション作品をまるごと作ることもできます。

この言葉は、かなり性質の違う 2 つのものを指します。

• ページ上の要素を動かす。GSAP や anime.js といったライブラリ、あるいはブラウザ標準の Web Animations API を使って、ボタンや文字、SVG の図形をタイムライン上で動かしたり、フェードさせたり、変形させたりします。Web サイトの動きの多くはこの方法で作られています。
• canvas に全フレームを描く。ある瞬間の画面全体を描く関数があり、ブラウザがそれをフレームごとに呼び出します。画面にはコードが描いたもの以外、何も存在しません。Claude Opus 5.5 のリリース後に広まり、"every frame drawn in JavaScript"（全フレームを JavaScript で描いた）と紹介されていたのは、この種類のアニメーションです。

コードで描く JavaScript アニメーションの仕組み

canvas を使う方法では、作品は時間だけを引数にとる純粋関数 draw(ctx, t) です。同じ t を渡せば、必ず同じ絵が返ってきます。この性質があるからこそレンダリングできます。ヘッドレスブラウザが各フレームへ移動してキャプチャし、MP4 に書き出します。1 フレームの描画にどれだけ時間がかかっても、フレーム単位で正確です。こうした作品に手描きの味を出しているのは、次の 3 つの技法です。

• シード付きの乱数：揺れる線やインクで塗ったような塗りが、ちらつかずにレンダリングのたびに同じ形で再現されます。
• Web Audio API で合成する音楽：同じページの中で作り、オフラインでレンダリングして動画にミックスします。
• 共有された 1 本のタイムライン（テンポ、ショット、イベント）：描画コードと音楽の両方がこれを読むので、音は動きに、カットはビートにぴったり合います。

JavaScript アニメーション、キーフレームアニメーション、AI 動画の違い

真ん中の列について詳しくはキーフレームアニメーションを、AI によってそれがどう変わるかは AI アニメーションとキーフレームアニメーションの比較をご覧ください。

主な活用例

• 解説動画：カード決済が処理される仕組み、空が青い理由、ノイズキャンセリングの原理など。図もラベルもカメラワークも、すべてコードで描きます。
• チャンネルのオープニングやループ映像：YouTube、TikTok、Instagram 向け。顔出しなしのチャンネルにも使えます。
• 短いストーリーや絵本：参考写真をもとに描いたキャラクター、寝る前のお話、セリフのない短編など。
• Web サイトやプロダクトの動き：UI アニメーション、ヒーローエリアのループ、インタラクティブなグラフィック（通常はページ要素を動かすタイプ）。

AI で JavaScript アニメーションを作る方法

描画コードを自分で書く必要は、もうありません。Claude Opus 5.5 は、作品をビートグリッドとショットリストとして計画し、canvas の描画コードと Web Audio の音楽を書き、コンタクトシートで自分のフレームをチェックできます。実行する方法は 2 つあります。無料でオープンソースの javascript-animation スキルを使って Claude Code で動かす方法と、iArt の Animation モードを使う方法です。後者はブラウザでプロンプトを入力するだけで作品ができ、長くしたいときは「続けて」と頼みます。実際のプロンプトと作品を使ったステップごとのガイドは、全フレームを JavaScript で描くアニメーションの作り方にまとめています。

関連する概念

関連用語：キーフレームアニメーション、モーショングラフィックス、解説動画、キネティックタイポグラフィ。