HeyGen「HyperFrames」公開、AIエージェントがHTMLで動画生成

HeyGenがオープンソースプロジェクト「HeyGen HyperFrames」を公開し、HTMLコードから動画を自動生成できる仕組みを提供開始しました。

📖 この記事で分かること

• HeyGenがHTMLで動画を作るOSSを公開
• Apache 2.0で商用利用も完全無料
• Claude Codeなどから動画を自動生成可能
• 動画制作がコード化される時代の到来

💡 知っておきたい用語

• 決定論的レンダリング：同じレシピで料理すれば毎回同じ味になるように、同じHTMLを入れれば毎回ピタリと同じ動画が出力される仕組みのことです。

最終更新日: 2026年5月21日

HyperFramesとは何か

HeyGenが2026年4月17日に公開した、HTML・CSS・JavaScriptからMP4動画を生成するオープンソースフレームワークです。

AIアバター動画サービスで知られるHeyGenが、自社の動画レンダリング基盤を切り出してオープンソース化したのが「HyperFrames【ハイパーフレームズ】」です。最大の特徴は、タイムラインエディタのような専用UIを使わず、Webページを書く要領でHTMLファイルとして動画を定義することです。GitHubで公開されており、ライセンスはApache 2.0が採用されています。

主な特徴は次のとおりです。

• HTMLファイルに data-start や data-duration などの属性を付けてタイムラインを定義する
• アニメーションは GSAP【ジーサップ】、Lottie【ロッティ】、CSS、Three.js【スリージェイエス】などを利用可能
• ヘッドレスChromeでフレーム単位にキャプチャし、FFmpeg【エフエフエムペグ】でMP4・MOV・WebMにエンコードする
• 必要環境は Node.js【ノード ジェイエス】22以降と FFmpeg のみ

なぜAIエージェント前提なのか

LLM【エルエルエム】が最も得意とする言語がHTMLだから、というのが設計上の核心です。

HyperFramesは公式ドキュメントで「Built for agents（エージェントのために作られた）」と明記されています。Claude Code、Cursor、Gemini CLI、OpenAI Codex CLIといったAIコーディングエージェント向けに、コマンド一発でスキル【AIエージェント向けの専用ガイド】を導入できるようになっています。

npx skills add heygen-com/hyperframes

このスキルを入れると、エージェントは「ランディングページのURLから20秒の紹介動画を作って」「このCSVをアニメーション付きの棒グラフレースにして」といった依頼を、キャプチャ・絵コンテ・スクリプト生成・レンダリングまで一気通貫で処理できるようになります。CLIは非対話型がデフォルトで、フラグ駆動・プレーンテキスト出力・エラー時即時失敗、という設計のため、エージェントが対話プロンプトに詰まる心配がありません。

報じられているところでは、HeyGenのエンジニアであるJoshua Xu氏は、LLMがHTMLで大量に訓練されている一方、React+Remotionは訓練データのごく一部に過ぎない点を、HTMLを選んだ理由として挙げているとされています。

Remotionとの違いとライセンスの論点

最大の違いは、ライセンスと「主に書く言語」の2点です。

HyperFramesは公式に、ReactベースのプログラマブルビデオフレームワークであるRemotion【リモーション】を比較対象として位置付けています。両者ともヘッドレスChromeで決定論的にレンダリングする点は共通ですが、設計思想が分かれます。

HeyGen側の説明によれば、Remotionはソース公開ではあるもののOSI【オープンソース・イニシアティブ】承認のオープンソースではなく、一定規模を超える企業利用には有償ライセンスが必要とされる点が、HyperFramesの差別化ポイントの一つです。一方で、Remotionが切り拓いた「Chromeでフレームを取り、FFmpegに流し込む」というアプローチについて、HyperFramesは公式に敬意を表し、ソース内に実装パターンの帰属コメントを残していると説明しています。

ただし、Remotionにも長く積み上げてきたエコシステム・ドキュメント・実績があり、両者は単純な優劣ではなく「OSS要件の厳しさ」「チームの技術スタック」「対象とする用途」で選択する関係と捉えるのが妥当でしょう。

実務へのインパクトと注意点

動画制作をGitで管理し、CI/CD【シーアイ シーディー】に組み込めるようになるのが実務的な意義です。

HyperFramesでは、動画は単なるHTMLファイルなので、コードと同じようにバージョン管理・差分レビュー・自動テストの対象にできます。同じ入力から毎回同じ出力が得られる決定論的レンダリングのため、「先週レンダリングした動画と今週のものが微妙に違う」といったブレが起きにくく、バッチ生成にも向きます。

導入時のチェック観点としては、以下のような点を押さえておくとよさそうです。

• 環境要件: Node.js 22以降と FFmpeg がローカル（または実行環境）に必要
• 体制: 動画担当チームがHTML/CSSとCLIに馴染んでいるか
• 用途適性: 量産型のテンプレート動画なら相性が良いが、自由度の高い手作業中心の編集には不向きな可能性
• AIエージェント運用: スキル導入後の出力品質をどうレビュー・受け入れ判定するか

GitHubのスター数は本記事執筆時点で1万件超に達しており、関心の高さが見て取れます。一方で、まだリリースから間もないため、ノウハウの蓄積や周辺ツールの拡充は今後の動向を見守る段階です。なお、HeyGenの本業であるアバター動画サービスとの統合スケジュールについては、執筆時点では公式に確認できる情報はありません。

編集部の見方

実装パラダイムの転換: 従来の動画生成は「テキスト/画像 → モデル → 動画ファイル」という一方向の処理でしたが、HyperFrames は HTML をエージェントが書き、それをブラウザでレンダリング → 動画化する設計です。コード化された動画はバージョン管理・差分編集・部分書き換えが可能で、編集現場の制作フローを根本から変える余地があります。

OSS + Apache 2.0 の意義: 商用利用無料の Apache 2.0 で公開された点は、企業ユーザーが社内導入で法務懸念を抱えにくいことを意味します。Claude Code や Codex といったコーディング AI と組み合わせることで、動画制作の自動化パイプラインを内製化する道筋が現実的に開けました。

クリエイティブ業務への適合度: 短尺の説明動画、ダッシュボード型のレポート動画、教育コンテンツなど「テキスト/データを動画化したい」用途では即戦力ですが、表現の独自性が求められる映像作品では、まだ従来の編集ツールに分があります。用途を見極めての選定が必要です。

よくある質問

Q: 無料で使えるのですか？

A: はい。Apache 2.0ライセンスのため、商用利用や再配布も含めて利用できます。レンダリング数や席数による制限、企業規模による制限もありません。

Q: AIエージェントなしでも使えますか？

A: 使えます。npx hyperframes init でプロジェクトを作成し、HTMLを直接編集して npx hyperframes render でMP4を出力する、という従来型の使い方も可能です。

Q: HeyGenのアバター動画サービスとは別物ですか？

A: 別物です。HyperFramesは独立したオープンソースのレンダリングフレームワークで、HeyGenの有償サービスへの加入は不要です。

まとめ

HyperFramesは、動画制作を「HTMLを書く」というWeb開発者おなじみのワークフローに置き換える試みです。AIエージェントとの相性を最初から織り込み、ライセンスもApache 2.0で開かれているため、Remotionとの比較における新しい有力な選択肢として位置付けられそうです。動画自動化に関心のあるチームは、まずスキルを入れて小さなサンプルから試してみると、可能性の輪郭がつかめるはずです。

【用語解説】

• HyperFrames【ハイパーフレームズ】: HeyGenが2026年4月に公開した、HTMLからMP4動画を生成するオープンソースフレームワークです。
• 決定論的レンダリング: 同じ入力から毎回同じ動画を生成できる仕組みで、CIテストやバッチ生成に向きます。
• GSAP【ジーサップ】: Webで広く使われるアニメーションライブラリで、HyperFramesでもタイムラインアニメーションの実装に利用されます。

免責事項: 本記事の情報は執筆時点のものです。AI技術は急速に進歩しているため、機能や制限は予告なく変更される場合があります。

引用元:

• [1] HyperFrames 公式サイト – https://hyperframes.heygen.com/
• [2] HyperFrames Introduction（公式ドキュメント） – https://hyperframes.heygen.com/introduction
• [3] heygen-com/hyperframes（GitHubリポジトリ） – https://github.com/heygen-com/hyperframes
• [4] HyperFrames Quickstart（公式ドキュメント） – https://hyperframes.heygen.com/quickstart
• [5] HeyGen HyperFrames: HTML to MP4 for AI Agents（Creative AI News） – https://www.creativeainews.com/blog/heygen-hyperframes-html-to-video-ai-agents/

この記事について: AI 支援で執筆、編集部が事実確認・編集しています。誤りや追加情報があれば Contact よりお知らせください。