HTMLを書くだけで動画が出力される時代へ

HeyGenがオープンソースで公開した「HyperFrames」は、HTMLとCSSで動画フレームを記述すると、AIエージェントが自動でレンダリングして動画を出力するTypeScript製ライブラリです。公開からまもなくGitHubで約3万スターを集めており、dev界隈での注目度は相当高い。

ここで面白いのは、「動画制作」という工程が「HTMLを書く」という工程に置き換わっている点です。従来、動画を作るには素材を用意してタイムラインを組んで書き出して……という工程が必要でした。HyperFramesの発想は、その工程をまるごとコードで定義してしまう。フレームごとにHTMLで構造を書き、CSSでスタイルを当てれば、エージェントがそれを動画として出力します。

「エージェントが動画を作る」という話は以前から語られてきましたが、HyperFramesが切り開いているのは「エージェントに動画の設計図を渡す言語として、HTMLを使う」という具体的な方法論です。すでにWebの知識がある人間にとって、学習コストが極めて低いことが最大の特徴と言えます。

HyperFramesが実用的に面白いのは、動画をコードで定義できるということは、「変数を差し替えるだけで別の動画が出力できる」という設計が可能になる点です。

たとえばABテスト用に訴求文言を変えた広告動画を10本作りたいとき、これまでは10回の作業が発生していました。HyperFramesのアプローチでは、テキストや画像のパラメータをループで回せば、理論上は同じ手間でn本に拡張できます。自分でLPも動画も作りたい人にとって、「量」の問題が構造的に変わる可能性があります。

また、AIエージェントに対応したアプリ設計の新フレームワーク登場で触れたような「エージェントを動かすための設計」という文脈と組み合わせると、HyperFramesの立ち位置がより鮮明になります。このライブラリはまさに「エージェントに渡すための動画設計図を書く言語」として設計されており、エージェントありきのアーキテクチャです。

注目したいのは、コードが書けなくても「HTMLとCSSの基礎知識があれば触り始められる」と公式ドキュメントが示唆している点。ゼロからプログラミングを学ぶ必要はなく、Webの基礎がある人間にとってはすぐに試せる入口が用意されています。

HyperFramesは技術ライブラリなので、全員が同じ温度で触れるわけではありません。現実的な線引きを整理しておきます。

コードが書けなくても試せること 公式リポジトリ（heygen-com/hyperframes）にはサンプルのHTMLテンプレートが用意されています。このサンプルを読むだけでも「どういう構造で動画が定義されるのか」の概念はつかめます。また、HeyGenのプラットフォーム上でHyperFramesを活用したUIが展開される可能性もあり、そちらを待つ選択肢もあります。

TypeScriptが書けると有利なこと ライブラリ本体はTypeScript製です。カスタムのフレーム定義を組む、エージェントとの連携ロジックを書く、パラメータをループで回して複数動画を生成する——といった「量産・自動化」の恩恵を本格的に受けるには、TypeScriptの基礎が必要になります。

Codexが「見せるだけ自動化」へ進化中で紹介したような「コードは書かずに指示だけで動かす」アプローチとの組み合わせも今後出てくるかもしれませんが、現時点では「自分でコードを読める」ことが、HyperFramesを使い倒す前提条件です。