画像生成AIの次は「動画」。html-videoでゼロ円MP4を作る方法

こんにちは、プロンプト画伯です。

Midjourneyやnano-banana、gpt-imageで静止画を量産する日々を送っているんですが、最近どうしても引っかかっていることがあって。

「画像はもう自由自在に作れるのに、動画になった瞬間、急にお財布を出さされる」問題です。

先日GitHubを漁っていたら、その引っかかりを真正面から殴ってくる動画生成OSSを見つけました。Apache 2.0で公開されているhtml-videoというツールです。これがAIエージェントにHTMLを書かせて、そのままMP4まで吐き出してくれる代物で、ローカル完結・GPU不要・ランニングコストゼロ。

画像生成AIの延長線で動画に踏み出したいクリエイター向けに、この発見をシェアします。

GitHub - nexu-io/html-video: Programmatic video for coding agents — HTML to video on your laptop. Turn HTML, CSS & data into real MP4s with pluggable render engines, 21 templates, AI soundtrack. Apache-2.0, no per-render fees. An official project by the Open Design team.

Programmatic video for coding agents — HTML to video on your laptop. Turn HTML, CSS & data into real MP4s with pluggable render engines, 21 templates, AI soundtrack. Apache-2.0, no per-render f...

github.com

画像の次は動画。AI Agent 動画生成のフロンティアにhtml-videoが現れた

正直、ずっとモヤモヤしていたんです。

プロンプトで画像が作れる時代に慣れすぎて、「同じノリで動画も作れるはず」という感覚だけはあるのに、現実はRunwayは月払い約2,250円・年払いなら約1,800円（$15/$12 Standard）、Pikaは月払い1,500円前後・年払いなら約1,200円前後（為替・プランで変動）。試しに使うだけでもお財布が痛い。しかも生成尺は数秒、レンダリング枠で追加課金、というのが画像生成クリエイター層の正直な体感だと思います。

html-videoは、そこに別解を持ってきました。

仕組みはシンプルで、AIエージェントがHTML/CSS/JSでアニメーションを書く→Chromiumがそれをフレーム単位で録画→ffmpegでMP4に書き出す、という流れ。つまり「動きをAIが描画する」のではなく、「動きの設計図をAIが書いて、ブラウザが演じる」スタイルです。

ここが面白いポイントで、これって画像生成AIで言うところの「プロンプトを書いて画像を呼び出す」感覚そのままなんですよ。プロンプトの代わりにAIエージェントに日本語で指示する、画像の代わりにMP4が出てくる。画像生成AIに慣れた人ほど、頭の切り替えコストが低い。これが、RunwayやPikaとは根本的に違うところです。次のセクションで詳しく分解します。

html-videoの正体——AIエージェント MP4 という新しい生成体験

ざっくり言うと、AIに「動画の設計図」を書かせてMP4にするためのスタジオです。

html-videoを立ち上げると、ローカルにスタジオUIが起動します。テンプレートを選んで、AIエージェントに指示を出すと、エージェントがHTML/CSS/JSをガリガリ書いてくれる。画像生成ツールのWebUIを触る感覚そのままです。

採用しているコアエンジンはHyperFramesです。HyperFrames単体はコードで動かす必要がありましたが、html-videoはその上にGUIを載せてくれている、と思ってOK。さらに21テンプレート＋13種のAIエージェント連携まで乗っています。

各動画はtemplate.html-video.yamlというマニフェストで管理されていて、ページ単位で編集できます。1ページ＝1シーン、と捉えると分かりやすいです。さらにMiniMax連携でBGMも自動生成できて、calm cinematic ambientのようなムードを記述する短い指示でテンポに合った音楽がつきます。

そして地味にこれがすごい。Chromium＋ffmpegで動くのでGPU不要、CPUだけでMP4が出力できるんです。MacBookでもWindowsノートでもそのまま動く。FramePackやLTXのようなディフュージョン系ローカル動画生成だとVRAMの戦いになりますが、html-videoはそこから完全に降りています。つまり「ハイエンドGPU持ってないと動画は無理」という壁が、ここで崩れるんです。

「でも、Runwayと何が違うの？」という疑問が浮かんでいると思います。次のセクションで表にしながら整理します。

Runway 代替に「ローカル無料」を持ってきた。html-videoは合成動画の新ジャンル

結論から言うと、そもそも作るものの種類が違います。

Runway/Pika/Soraは「現実の動き」を生成するのが得意で、人物が振り向く、風が吹く、波が立つ、みたいな映像をAIが想像で作ってくれます。一方のhtml-videoは、自分が描いた画像やテキスト、データを素材として、それらをデザイン的に動かしたMP4を作ります。

たとえば自作のMidjourney画像を15秒のプロモに仕立てる、自分の制作プロセスをデータビジュアル動画にする、SNS用のタイトル映像を量産する、という用途。リアルな動きが必要なときはRunway、自作素材のショーケースや情報的な動画を作りたいときはhtml-video、と棲み分けるのが現実解です。

そしてhtml-video側の決定的アドバンテージが、ローカル完結＆無課金。素材を外部に送らない安心感、ランニングコストゼロという身軽さは、SNS発信を回す画像生成クリエイターにとってかなり効きます。

棲み分けが分かったところで、実際に動かしてみましょう。

Claude Codeで5分で動く。html-video セットアップは一発コマンド

Node.jsとpnpmが入っていれば、立ち上げは下の一発でいけます。

pnpm install && pnpm -r build && node packages/cli/dist/bin.js studio

これを叩くとhttp://127.0.0.1:3071にスタジオが立ち上がります。ブラウザで開けばGUIが出てくるので、ここからは画像生成AIのUIを触る感覚と同じです。

肝なのが、AIエージェントの自動検出。スタジオのトップバーから、Claude Code、Cursor Agent、Codex CLI、Gemini CLI、Grok Build、Qwen Code、GitHub Copilot CLI、Aider、Hermes、OpenCode、Trae CLI、Open Design (Vela)、Anthropic APIの13種類をワンクリックで切り替えられます。PATHから自動検出してくれるので、自分が普段使っているエージェントをそのまま選べばOK。

画像生成クリエイターでとりあえず触りたいなら、普段使っているClaude CodeかCursor Agentを選んでおけば外れません。

そこから先は、テンプレートを選んで、エージェントに日本語で「自作のAIアート作品をシネマティックに見せる15秒のプロモ動画を作って」と投げるだけ。エージェントがtemplate.html-video.yamlとHTML/CSS/JSを書き、スタジオがプレビューしてくれて、最終的にlibx264でMP4にエンコードしてくれます。

コードを一行も書かずに動画が出てくる。「自分はプロンプトだけ書く人間」というスタンスを崩さずに動画まで踏み込める、ここがhtml-videoの本当の価値です。迷ったら、画伯が刺さった5つから入ってください。

html-video テンプレート21種からクリエイターが動画制作に今すぐ試すべき5つ

html-videoには21種類のテンプレートが入っています。画像生成クリエイター視点で「これは刺さる」と感じた5つがこちらです。

• タイトルカード（グリッチエフェクト）：作品集や連載の冒頭に。シネマ風の重厚なオープニングが数十秒で組める
• ヒーロー画像（液体グラデーション）：自作のMidjourney画像を映画予告編風に。背景が液体のようにうねって、画像がドラマチックに浮かび上がる
• シネマティックフレーム（フィルムグレイン）：AIアートにフィルムの粒子感を載せて、デジタル臭をアナログ寄りに寄せる。完成画像の質感を一段上げたいとき用
• データビジュアル（NYTスタイルチャート）：制作枚数、使用プロンプト数、テーマ別分布などを動くインフォグラフィックに。Xでバズるのはこの手の動画です
• プロダクトプロモ（15秒マルチシーン）：SNSのリール・ショート向けにそのまま流せる長さと構成。自作AIアートの「シリーズ紹介」にハマる

正直、テンプレートを開いて触り始めた瞬間に「これ、自分の作品集まるまる動画化できるじゃん」と画伯は震えました。静止画で止めていた作品が、動画というレイヤーに進化するイメージが一気に湧いてきます。

動画生成は、もう「Runwayに課金しないと始まらない世界」じゃなくなりました。Claude CodeかCursorを開いて、pnpm installを叩いて、テンプレートを選ぶ。それだけで、画像生成AIの次の景色が見えてきます。

試してみて一番驚いたのは、静止画が「存在するだけ」だった作品が、動画になった瞬間に「語り始める」ことでした。作品発信の手触りが変わります。動画というフロンティアに、画像生成クリエイターの感覚のまま踏み込める時代が、ついに来ました。