FlowTune Media

HTMLを書くと動画になる — HeyGenがオープンソースで出した「コードで動画編集」の衝撃

HeyGenAI動画オープンソースAIコーディング

HeyGen HyperFrames

AIが画像を生成し、テキストを書き、コードを組み立てる2026年に、なぜ動画だけは「編集ソフトを開いて手作業」なのか。

SoraやRunway Gen-4のようなテキスト→動画のAIは存在するが、あれは「お任せ生成」であって「編集」ではない。テロップの位置を3px右にずらしたい、データを表にして動かしたい、ブランドカラーを一括で変えたい——そういう「決定的にコントロールしたい動画」は、従来のAI動画生成では作れなかった。

4月17日、HeyGenがこの問題に正面から答えるOSSフレームワークをリリースした。HyperFrames。HTML/CSS/JavaScriptを書くと、それがそのままMP4になる。

動画をWebページのように作る

HyperFramesの考え方はシンプルだ。ブラウザで表示できるものは、すべて動画にできる。

HTMLでレイアウトを組み、CSSでスタイルを整え、JavaScriptでアニメーションを動かす。そのWeb画面をフレーム単位でキャプチャし、MP4/MOV/WebMにエンコードする。Webフロントエンドの技術がそのまま動画制作の技術になる。

レンダリングはChromeのbeginFrame APIを使っている。Frame = floor(time * fps) というシンプルな計算で各フレームが独立にキャプチャされ、FFmpegでエンコードされる。壁時計に依存しないseek-drivenな設計なので、マシンのスペックに関係なく同じ入力から同じ出力が得られる。確定的レンダリングだ。

ローカルで完結する。クラウドもAPIキーもアカウントも要らない。Apache 2.0ライセンス。

50以上のブロックとアニメーションライブラリ

白紙からHTMLを書く必要はない。HyperFramesには50以上のプリビルトブロックが用意されている。ソーシャルメディア用のオーバーレイ、シェーダートランジション、データビジュアライゼーション、シネマティックなエフェクト。

アニメーションにはGSAP、Lottie、Three.js、D3、SVG、Canvas——ブラウザで動くライブラリはすべて使える。Webフロントエンドの開発者なら、新しいツールの使い方を覚える必要がほぼない。持っているスキルセットがそのまま動画制作に転用できる。

これは地味に大きい。Premiere ProやAfter Effectsの操作を覚えるより、HTMLとGSAPを書くほうが早い開発者は多いはずだ。

Claude Codeスキルとして使える

HyperFramesが面白いのは、最初からAIコーディングエージェント向けに設計されている点だ。

Claude Codeにスキルパックをインストールすると、3つのスラッシュコマンドが使えるようになる。/hyperframesでコンポジションを作成し、/hyperframes-cliでCLIを操作し、/gsapでアニメーションのヘルプを呼び出す。エージェントが自律的にHTMLを書き、プレビューし、レンダリングまで完了させる。

つまり、Claude Codeに「このデータをアニメーション付きのグラフにして、30秒の動画にまとめて」と頼むだけで、HTMLの作成からMP4の出力まで一気通貫で実行される。人間がタイムラインを触る工程がゼロになる。

Codexにも対応している。

HeyGenがなぜ「コード→動画」に賭けたのか

HeyGenはAIアバター動画の会社だ。テキストを入れるとリアルな人物が喋る動画が出てくる、あのHeyGen。APIの料金は$5からで、MCP経由でClaudeから直接呼び出すこともできる。

そのHeyGenが、AIアバターとは全く異なるアプローチの動画ツールをオープンソースで出した。これは意味深い。

おそらくHeyGenは、AI動画の市場が「生成系」と「プログラマブル系」に分かれていくと見ている。Sora的な「AIにお任せ」は一方の極で、HyperFrames的な「コードで精密制御」がもう一方の極。両方をカバーすることで、動画AIのプラットフォームとしてのポジションを固めようとしているのだろう。

率直に気になる点

HyperFramesの弱点は明確だ。HTML/CSS/JSが書けない人には使えない。これはノーコードツールの対極にある。

また、ローカルレンダリングが前提なので、Chromeのヘッドレスインスタンスを動かせる環境が必要になる。CI/CDパイプラインで動画を量産するような使い方はできるが、スマートフォンからは使えない。

音声の扱いも現時点では限定的だ。動画のビジュアル部分は強力だが、ナレーションやBGMの自動生成は別のツール（HeyGenのTTS APIやElevenLabs等）と組み合わせる必要がある。動画を「無音で」作るフレームワーク、と理解したほうが正確だ。

それから、50以上のブロックがあるとはいえ、本格的な動画を作るにはそれなりのフロントエンド力が要る。GSAPのイージング関数やThree.jsのシェーダーを書ける人と書けない人では、アウトプットの質に大きな差が出る。AIエージェントがどこまでその差を埋められるかは未知数だ。

コードが動画になる時代

HyperFramesが切り開こうとしているのは「プログラマブルビデオ」という領域だ。SaaSのダッシュボードから週次レポート動画を自動生成する。ECサイトの商品データを流し込んでプロモーション動画を量産する。GitHub Actionsの中で変更履歴のサマリー動画を作る。こういったユースケースは、従来の動画編集ソフトでは自動化できなかった。

特にClaude Codeとの統合は、開発者にとって「動画を作る」のハードルを一気に下げる可能性がある。テキストで説明すればHTMLが生まれ、HTMLが動画になる。間にGUIが挟まらない。

関連記事: HeyGen vs Synthesia vs D-ID 徹底比較【2026年版】— AIアバター動画、用途で選べば迷わない

関連記事