メインコンテンツまでスキップ

AI解説動画:コード駆動パイプライン

中級

"Opus 5.5 is good at explainer videos" と題された投稿が 319ポイント、175コメントで Hacker News の上位に居座りました — そしてスレッドを読んでいて最も興味深いのは、 どれだけ多くの人が仕組みを取り違えていたかです。彼らは動画モデルだと思い込んでいました。 そうではありません。

実際に起きていることはもっと奇妙で、はるかに有用です:コーディングモデルが 決定論的なアニメーションプログラムを書き、別のレンダラーがそのプログラムを フレームに変換します。モデルは出力のピクセルを一切見ません。つまり全体が ソフトウェアのように振る舞う — 差分が取れ、再レンダリングでき、パラメータ化でき、 デバッグできる — のであって、見た目が整うまで再プロンプトを繰り返すスロットマシンの ようには振る舞いません。

このページは、あのスレッドに欠けていた実践的なガイドです:パイプラインの仕組み、 3つのレンダーエンジンのどれを選ぶか(そしてモデルが測定可能なほど苦手なのはどれか)、 エージェントが書いたアニメーションコードを静かに壊す2つの失敗モード、見られる解説動画と 読めない解説動画を分けるペーシングの算術、そしてお金が実際にどこへ行くのか。

What you'll learn
  • なぜコーディングモデルが解説動画で動画モデルに勝るのか — そして何を諦めているのかを説明する
  • フレームレンダリングされるアニメーションで Math.random() が禁止される理由と、その代替を挙げる
  • Remotion、Motion Canvas、Manim をライセンスと「モデルがどれだけうまく書けるか」で選び分ける
  • エージェントが書いたアニメーションコードの2つの罠を見抜く:Manim のフォーク分裂と、古くなった Remotion API
  • 推測ではなくスライドごとの最小表示時間を計算し、視聴者が実際に読めるようにする
  • どの費目が請求額を支配するかを予測する(たいていは LLM ではありません)

仕組み:モデルが書くのは動画ではなくプログラム​

まったく別の2つのものが「AI動画」と呼ばれています。

拡散動画モデル(ジェネレーティブメディア で扱っているファミリー)はプロンプトを受け取り、ピクセルを直接出力します。b-roll、 ドローンショット、テクスチャ、ムードには最適です。正確でなければならないもの — 読める文字、正しいアーキテクチャ図、実際のプロダクトUI、40%と書かれていなければならない 数字 — には不向きです。

コード駆動アニメーションは逆方向に進みます。コーディングモデルがアニメーションの ソースコード — React コンポーネント、TypeScript のシーングラフ、あるいは Python — を書き、レンダラーがそれを実行します。テキストはテキストなので、鮮明で綴りも正しい。 図はレイアウトなので、正確です。あなたのロゴはあなたのロゴファイルそのものです。

この分かれ方が、HN スレッドで最も多かったワークフロー報告を説明します:モデルが 「HTMLページを作り、生のJSでタイミング制御したアニメーションを使う」、そしてフレームを キャプチャして ffmpeg で組み立てる、というものです。同時に、このアプローチが何を 諦めているかも説明します — 写実的な映像を創り出すことはできないので、実際のパイプラインの 多くは b-roll のために画像モデルや動画モデルを呼び、合成しています。

内面化しておく価値のある帰結:あなたの解説動画はリポジトリになる。 スライド4の 価格を変えて、再レンダリング、完了。ナレーションをローカライズして、同じシーンから 12言語を再レンダリング。プロンプト・トゥ・ビデオのモデルが与えてくれる性質では ありません。

なぜ決定論こそがすべての鍵なのか​

ここが、あなたのパイプラインがきれいな動画を作るのかチラつく汚れを作るのかを静かに 決める部分であり、これについて書く人はほとんどこれに触れません。

Remotion のようなレンダラーは、あなたのアニメーションを画面録画しません。 ヘッドレス Chrome でコンポジションを開き、クロックをフレーム0にセットしてスクリーンショット、 クロックをフレーム1にセットしてスクリーンショット、と続けます — しかもこれを 複数スレッドにわたって、ページを何度も開きながら行います。フレームは順不同に、 並列に、別々のブラウザコンテキストで生成されます。

すべてはそこから導かれます:

  • アニメーションはフレーム番号の純粋関数でなければならない。 Remotion では それが文字通り API です:useCurrentFrame() がフレームを与え、interpolate() が それを値に写像します。タイマーなし、requestAnimationFrame なし、実時間で駆動される CSS トランジションなし。CSS トランジションは、スクリーンショットが撮られた瞬間に たまたま途中だった状態をそのままレンダリングします。
  • Math.random() は構造的に壊れている。 スレッドごと、ページロードごとに異なる値を 返すので、「ランダムな」パーティクルが毎フレーム新しい位置へ飛び跳ねます。Remotion は まさにこのために random(seed) — シード付き mulberry32 PRNG — を同梱しています: random(1) は常に 0.07301638228818774 を返します。spring() も同様で、 (frame, fps, config) をキーにキャッシュされた純粋計算です。
  • フレーム落ちが原理的に起こらなくなる。 重いアニメーションの画面録画は、CPUが 追いつかないとフレームを落とします。フレームごとのレンダリングは単に時間が長く かかるだけです。ノートPCでの5分のレンダリングが完全に滑らかに再生される動画を 生み出せるのはこのためです。
Watch out
  • アニメーションコードをエージェントに書かせるためのルールを1つだけ覚えるなら:実時間を禁じること。setTimeout なし、CSSトランジションなし、Date.now() なし、Math.random() なし。すべての視覚的な値は現在のフレーム番号から導かれなければなりません。モデルはCSSトランジションに手を伸ばしがちです — ウェブのコーパスがそれで溢れているからです。

3つのエンジン​

3つとも実在し、活発にメンテナンスされ、放送品質の出力を生み出します。違うのは言語、 ライセンス、そして — 重要なことに — モデルがどれだけ確実にそれを書けるかです。

RemotionMotion CanvasManim
言語React / TypeScriptTypeScript(ジェネレーター)Python
リポジトリremotion-dev/remotionmotion-canvas/motion-canvas(約19.2kスター)ManimCommunity/manim(約41k)・3b1b/manim(約94k)
ライセンスソース公開型 + Company LicenceMITMIT
得意領域プロダクト/ローンチ動画、UI、テキスト中心の解説タイムライン精度のモーショングラフィックス数学的・アルゴリズム的な可視化
モデルが書く品質強い — しかも公式のエージェントスキルを提供まずまず3つの中で最弱(下記参照)

この表のうち2点は、1行では足りません。

Remotion の落とし穴はコードではなくライセンス​

Remotion は MIT ではありません。ソース公開型で2階層の商用ライセンスがあり、その閾値は ほとんどのチームを捕まえるほど小さいものです:個人、非営利、評価目的、そして従業員3名まで の営利企業は無料。3名を超える営利組織には有料の Company Licence が必要です。

2つ目の分岐は、動画ではなくプロダクトを作っている場合にさらに重要になります:

  • Remotion for Creators — シート課金。自社内で自社のために行う低ボリュームの レンダリングを想定しており、エンドユーザーにパーソナライズ動画を配信することは 明示的に対象外です。
  • Remotion for Automators — レンダリング課金。エージェントが顧客向けに動画を レンダリングした瞬間に該当するのがこの階層です。バージョン5.0からは ライセンスキーによるテレメトリ報告が必須になります。

つまり「エージェントがサインアップごとに動画を生成する」は Creators のユースケースでは ありません。出荷する前に Automators として見積もってください。それが致命的なら、 Motion Canvas は MIT で、同じ領域の多くをカバーします。

Manim の罠:2つのフォーク、1つのimport名​

これは聞いたことがない人を焼き尽くすもので、同時に HN スレッドのある観察 — 強力なコーディングモデルが期待よりひどい Manim を書き、Gemini のほうが Opus 5.5 より うまく扱えるというコミュニティ報告がある — も説明します。

Manim は2つあります:

  • 3b1b/manim — Grant Sanderson のオリジナル、あの有名な動画のもの、約94kスター、 manimgl としてインストールされます。
  • ManimCommunity/manim — コミュニティフォーク、約41kスター、一般用途として実際に ドキュメント化・メンテナンスされているもの、manim としてインストールされます。

両者は API 互換性がなく、どちらも from manim import * でインポートされます。 学習コーパス中のチュートリアル、StackOverflow の回答、ブログ記事はどれかの一方であり、 ラベルはありません。だからモデルはもっともらしいコードを書きつつ両方の方言を混ぜ、 Python はもう一方のフォークにしか存在しないメソッドで例外を投げます。これは推論の失敗では なく、名前空間が汚染されたことによる失敗です。

修正法は退屈ですが効きます:プロンプトと環境の両方でフォークを固定し、エージェントに 思い出させるのではなく、そのバージョンの実際のAPI表面を与えることです。

エージェントが1行書く前に Manim の方言を固定する

Use ManimCommunity Manim (the "manim" package on PyPI), NOT 3b1b/manimgl.
Before writing any scene, run:
python -c "import manim; print(manim.__version__)"
and confirm the version. If a class or method you want is not in that
version's API, do not use it — check with:
python -c "import manim; print([n for n in dir(manim) if 'Text' in n])"
Never mix manimgl APIs (e.g. ShowCreation) with community APIs (Create).

古いAPIの罠(Remotion 編)​

同じコーパス汚染の問題が、別の理由で Remotion を襲います:ライブラリが学習データより 速く動いたのです。

現在の Remotion では、メディアコンポーネントは @remotion/media にあり、トリミングの プロパティは trimBefore / trimAfter です。プレビューとレンダリングで意図的に異なる コンポーネントを使うことすらできます — プレビュー中は remotion の Html5Audio、 レンダリング時は @remotion/media の Audio を useRemotionEnvironment() で切り替える、 というように。古い資料を中心に学習したモデルは import {Audio} from 'remotion' を startFrom 付きで書きますが、これは旧形式です。

そのコードは動いてしまうかもしれません。そして何の役にも立たないことを静かに行う 可能性もあり、そちらのほうが厄介です。

だからこそ Remotion は公式の Agent Skills を公開しています — モデルが覚えていることに 期待するのではなく、現在のベストプラクティスをエージェントに手渡す12個のスキル群です。 Claude Code、Codex、Cursor などに向けて設計されており、 オープン標準としての SKILL.md で扱っているのと 同じオープンフォーマットに従っています。

Remotion の公式エージェントスキルをインストールする

npx skills add remotion-dev/skills

スキルは粒度が細かく、それが要点です — 作業フェーズに合うものを呼び出します: /remotion-create で足場を作り、/remotion-markup でアニメーションとタイポグラフィ、 /remotion-studio でプレビュー、/remotion-render でレンダリング、 /remotion-captions で字幕、そして迷ったときの傘として remotion-best-practices。 ベンダーがメンテナンスするスキルは、動きの速いライブラリに関するモデルの古い知識に対して 最も安価に手に入る修正です:一度インストールすれば、エージェントは推測をやめます。

実際に機能するパイプライン​

品質を最も大きく左右するレバーは、動画全体に対するより良いプロンプトではありません。 モデルが判断作業を、レンダラーが決定論作業を担うように仕事を分割すること — その間に 人間が読める成果物を置くことです。

Guided walkthrough1 of 7
  1. まず JSON のシーンリストを求めます:シーンごとに、タイトル、画面上のテキスト、ビジュアルの意図、そして秒単位の尺。これが安価でレビュー可能なステップです。12シーンなら30秒で読めて、コンポーネントが1つも存在しないうちに物語を直せます — そして物語を直すことこそが動画を最も改善する編集です。レビュー済みのストーリーボードから生成されたコードは、ふわっとした段落から生成されたコードよりはるかに一貫します。

CLIからレンダリングし、本当の並列度を見つける

# deterministic render, reproducible in CI
npx remotion render src/index.ts MyExplainer out/video.mp4

# stop guessing --concurrency: measure it
npx remotion benchmark src/index.ts MyExplainer --concurrencies=2,4,8 --runs=3

ペーシング:ほとんどのAI解説動画が見ていられない理由​

HN スレッドで最も一貫していた不満は、動画の見た目が悪いということではありませんでした。 読むには速すぎる、ということでした。スライドが現れ、テキストがアニメーションで 入ってきて、人間が文を読み終える前に消えてしまう。

これは好みの問題ではなく、公式のあるバグです。見慣れない画面上のテキストに対する大人の 読み速度はおおよそ毎分200〜250語で、視聴者はさらに読み始める前に新しいテキストを 見つける時間も必要とします。したがって:

# minimum dwell time for a text block, in frames
words        = number of words in the block
wpm          = 200          # conservative for unfamiliar on-screen text
settle       = 0.4          # seconds to notice and locate the new text
exit         = 0.3          # seconds of breathing room before it leaves

dwell_seconds = settle + (words / wpm) * 60 + exit
dwell_frames  = ceil(dwell_seconds * fps)

# worked example: a 14-word bullet at 30 fps
# 0.4 + (14 / 200) * 60 + 0.3 = 4.9 s  ->  147 frames

これを実際に使えるものにする2つの注意:

  • 入りは速く、保持は長く。 入場トランジションは200〜400msであるべきで、 保持にこそ表示時間の予算を注ぎます。モデルは逆をやりがちです — 長く優雅なフェード、そして短い保持。
  • ナレーションがあるなら、表示時間の下限はナレーションの長さ。 テキストは、 それを説明する文と少なくとも同じ長さだけ画面に残らなければなりません。合成音声から シーン長を導く(上記ステップ4)とペーシングがほぼタダで直るのはこのためです。

すべてのシーンを max(dwell_frames, narration_frames) にクランプすれば、ビジュアルを まったく変えなくても「AIスロップ動画」感の大部分が消えます。

いくらかかるのか、そしてどの費目が支配するのか​

HN スレッドのコミュニティ報告では、完成した生成解説動画1本あたりおよそ 3〜4ドルのAPI支出で、注目すべき点として、コストを支配していたのは 言語モデルではなく画像モデルの呼び出しでした。あるコメント投稿者は、 オーケストレーションされたパイプラインを使い、M4 MacBook Air 上で5分の動画を 実時間およそ5分で生成したと報告しています。

絶対値は生ものとして扱うべきですが、その形は構造的で、計画に織り込む価値があります:

  • ここでは LLM は安い。 ストーリーボードと数百行のアニメーションコードは少ない トークン数です。フラッグシップ価格でもセント単位です。 プロバイダー横断のAIコストを参照。
  • アセットごとの生成呼び出しが支配する。 生成画像や b-roll クリップは1つずつが 有料の呼び出しで、シーン数だけ掛け算されます。上限を設けるべきはこの費目です。
  • 計算資源は自前。 レンダリングは自分のマシンか CI で走るので、API支出ではなく時間と 電気代です — サーバーレスレンダラーに移すまでは。移した時点で両方になります。
  • 再レンダリングはほぼ無料であり、これこそが構造的な優位のすべてです。スライド4の 誤字修正にかかるのは1回のレンダリングであって、1回の再生成ではありません。12言語への ローカライズは12回のTTSと12回のレンダリングであって、12本の動画ではありません。

実務的な予算管理の一手:画像は一度生成してアセットとしてコミットし、再レンダリングを アセットフリーに保つこと。レンダリングのたびに画像を再生成するパイプラインこそが、 驚くような請求書を生みます。

画一化の問題​

スレッドで最も鋭い批判は、真剣に受け止める価値のあるものでした:これらのツールが 広まって数週間のうちに、出力が見分けられるようになった、というものです。同じグラデーション 背景、同じスプリングで入ってくるカード、同じ3語の箇条書き、同じ小気味よい声。 複数のコメント投稿者は、繰り返しの多いコピーも指摘しており、ある例では、動画が まったく別の題材について自信満々に語っていた — Twilight Imperium の参考サイトが AIデータのスタートアップとして説明されていた — と報告しています。

これを本気で使うなら、出力の没個性化を測定可能なほど抑えるレバーは次のとおりです:

  • デザインシステムを与える。発明させない。 実際のパレット、タイプスケール、 スペーシングスケール、ロゴを、コンポーネントがインポートする定数として渡します。 指定が足りないプロンプトこそ、モデルのハウススタイルが漏れ出す場所です。
  • コピーは自分で書くか、徹底的に手を入れる。 ビジュアルはモデルが得意な部分です。 物語こそが「生成されたもの」として読まれる部分です。
  • 自分の画面録画をヒーローアセットに使う。 生成されたシーンに合成された本物の プロダクト映像は、画一化に対する最強の一手であり、ハルシネーションのリスクも 解消します — プロダクトが画面に映っていれば、動画がプロダクトを誤って説明することは できません。
  • 主張はドキュメントと同じように検証する。 解説動画の中の事実的な内容はすべて、 あなたの名前で公開される事実の主張であり、テキストページのような簡単な訂正経路は ありません。YouTube に上がってからではなく、レンダリングする前に確認してください。
  • 意図的に1つだけ慣例を破る。 デフォルトのテンプレートなら選ばない意図的な選択 — 変わったアスペクト比、音楽が期待される場所での沈黙、手描きのアセット — が1つあれば、 たいてい出力が機械のデフォルトとして読まれるのを止めるのに十分です。
コード駆動動画:語彙
Enter キーまたはスペースキーでカードを裏返します。左右の矢印キーでカードを移動できます。用語を表示しました。
1 / 8

これが得意なこと、そうでないこと​

正直に書く価値があります。あのスレッドの懐疑派には一理あったからです:作られているものの 多くは、ナレーション付きのアニメーション化されたスライドデッキです。それは変更履歴、 ローンチ、リリースノート、オンボーディングのウォークスルーには申し分のない成果物であり — そして本当の「教えること」の代用としては貧弱です。教えることには、実例、間違った回り道、 そして気にかける理由が必要だからです。

コード駆動パイプラインに手を伸ばすのは、こんなときです:

  • 内容が正確でなければならない — 実際のUI、実際の数字、実際の図。
  • 後で変更する必要がある、あるいは複数言語で出す。
  • 同じテンプレートから異なるデータで多数の動画を作る。

別の手段に手を伸ばすのは、目的が写実的な映像のとき(動画モデルを使う)、あるいは 価値が「人間が難しい考えをまず下手に、次にうまく説明すること」にあるとき — これは いまだにどんなパイプラインも生み出せないものです。

Check yourself

0/5
  1. モデルがCSSトランジションと setTimeout を使って解説アニメーションを書きました。プレビューは完璧に見えます。レンダリングでは何が起きますか?
  2. エージェントの Manim コードが「存在するはず」のメソッドで失敗し続けます。最も可能性の高い原因は?
  3. 3人のスタートアップが、新規サインアップごとにパーソナライズされた Remotion 動画をレンダリングするプロダクトを作ります。ライセンス上の立場は?
  4. レビュアーが、生成した解説動画は「速すぎる」と言っています。最も安価な構造的修正は?
  5. 生成解説動画のコストはLLMが支配すると予想していました。報告は実際に何を示していますか?

出典と参考文献​

  • Opus 5.5 is good at explainer videos — Hacker News の議論 — このページが土台にしているスレッド:319ポイント、175コメント、報告されたワークフロー(HTML + JS のタイミング制御アニメーションを ffmpeg でキャプチャ)、約3〜4ドルのコスト、Manim の弱さ、ペーシングへの不満、画一化への批判。ベンダーの主張ではなくコミュニティの報告であり、本ページ全体を通じてそのように扱っています。
  • Remotion — React ベースのレンダラー。決定論モデルについては useCurrentFrame() と interpolate()、Math.random() が禁止される理由とシード付きPRNGが返す値については random()、Company Licence、Creators/Automators の分岐、v5.0 のテレメトリ要件についてはライセンスのページを参照。
  • remotion-dev/skills — Claude Code、Codex、Cursor などのための Remotion の12個の公式 Agent Skills。npx skills add remotion-dev/skills でインストールできます。モデルの古い知識を修正するためにベンダーがエージェント向けドキュメントを出荷している、現時点で最も明快な例です。
  • @remotion/install-whisper-cpp — 字幕のためのローカル文字起こし:installWhisperCpp()、downloadWhisperModel()、トークン単位タイムスタンプ付きの transcribe()、そして後処理のための toCaptions()。
  • npx remotion benchmark — フラグを推測する代わりに、並列度ごとのレンダリング時間を測定します。
  • Motion Canvas — MIT、TypeScript、ジェネレーターベースのタイムライン。Remotion の Company Licence が障害になるときのライセンスフリーな代替。
  • ManimCommunity/manim と 3b1b/manim — どちらもMIT、どちらも manim としてインポートされ、相互に非互換。上記の Manim 失敗モードの根本原因です。
  • AILmanac の関連ページ:ジェネレーティブメディア:画像、音声、動画 · オープン標準としての SKILL.md · プロバイダー横断のAIコスト · Claude Opus 5.5 フィールドガイド

次へ​