HyperFrames（ハイパーフレームス）は、HTMLとCSSで書いたページを動画に変換できる、HeyGen製の無料オープンソースフレームワークです。動画編集ソフトの操作を覚えなくても、AIエージェントに指示するだけで動画を作れる仕組みです。GitHubやCLIリファレンスなど公式の一次情報にもとづいて、何ができるのか、料金はどこから発生するのかを整理しました。読み終える頃には、自社の業務にHyperFramesが向いているかどうかを判断できるようになります。
この記事の対象読者：生成AIツールの導入を検討している中小企業の経営者・マーケティング担当者、動画制作を内製化したい情シス・広報担当の方
そもそもHyperFramesとは
HyperFramesは、HTMLとCSSで書いたページを、そのまま1本のMP4動画として書き出せるオープンソースのフレームワークです。動画編集ソフトのタイムラインを手作業で組む代わりに、動画の内容をコードとして記述します。
開発・公開しているのは、AIアバター生成サービスで知られるHeyGenです。ソースコードはGitHub上でApache 2.0ライセンスで公開されており、商用利用にも制限がありません。
2026年3月の公開から8月時点でスター数は4万を超えました。最新バージョンはv0.7.102です。半年足らずでの反響の大きさがうかがえます。
動かすにはNode.js 22以上とFFmpeg（動画・音声を扱う定番の無料ソフト）が必要です。AIコーディングエージェント（Claude Code、Codex、Cursor、Gemini CLIなど）と組み合わせて使うことを前提に設計されています。
「HTMLで動画を作る」と聞くと専門的に感じますが、コードを書くのはAIエージェントの役目です。人間は「こういう動画がほしい」と日本語で伝えるだけで、エージェントがHTMLファイルを組み立て、HyperFramesがそれを動画に変換します。
HyperFramesが簡単にしたこと
HyperFramesが変えたのは、同じHTMLファイルからは、何度書き出しても寸分違わず同じ動画が生成される点です。これは「決定論的（deterministic）」と呼ばれる性質です。つまり、動画の中身が完全にコードとして固定されるということです。
これまでの動画制作は、動画編集ソフトを開き、素材を並べ、タイミングを手で調整するという作業でした。生成AIの動画サービスを使う場合も、プロンプトで指示はできても、同じプロンプトを2回入力すれば毎回少し違う動画が出てくるのが普通です。
この性質があると、企業のロゴや商品名だけを差し替えて同じ体裁の動画を大量に作る、といった業務が現実的になります。生成のたびに結果がぶれる仕組みでは、量産用途には向きません。
仕組み — HTMLが動画になるプロセス
HyperFramesの仕組みは、紙芝居の台本づくりに近いイメージで捉えられます。台本（HTMLファイル）に「このカットは何秒目から何秒間表示するか」を書き込み、それを1コマずつカメラで撮影し、最後につなげて動画にする流れです。
HTML（コンポジション、動画の元になるHTMLファイルのこと）は「紙芝居の台本」です。動画に登場する文字・画像・図形を、ふだんWebページを作るのと同じHTMLとCSSで配置します。
data-start・data-durationは「各カットの登場タイミングと尺の指定」です。「3秒目から5秒間表示する」といったタイミングを、HTMLの属性として書き込みます。動きの部分はGSAP（アニメーション用の定番ライブラリ）などで作り、ページ読み込み時にタイムラインとして登録しておきます。
レンダリング（動画データを実際のファイルとして書き出す処理）は「紙芝居を1コマずつカメラで撮影する」作業です。裏側で、画面を表示せずに動くブラウザ（ヘッドレスChrome）がタイムラインの位置を1フレームずつ移動しながら画面を撮影します。その連続写真をFFmpegが1本のMP4に結合します。
| 用語 | 比喩でいえば | この記事の例では |
|---|---|---|
| HTML（コンポジション） | 紙芝居の台本 | 動画の設計図そのもの |
| data-start / data-duration | 各カットの登場タイミングと尺の指定 | 「3秒目から5秒間表示」の指定 |
| ヘッドレスChromeでの撮影 | 紙芝居を1コマずつカメラで撮る | 動画のフレームを1枚ずつ書き出す作業 |
| FFmpegでのエンコード | 撮った写真をつなげて動画にする | 書き出したフレームを1本のMP4にする作業 |
HTMLで動画を組み立てるという発想自体は、Reactでの動画制作フレームワークであるRemotionから着想を得ています。仕組みが似ている一方で、AIエージェントに書かせやすいかどうかという点で設計思想が分かれています。この違いは後の見出しで比較します。
具体的にできること
HyperFramesのコマンドは、動画制作の一連の作業を1つずつ担っています。「作る・確認する・書き出す」を別々のコマンドに分けているため、途中で確認しながら進められます。
動画のひな形作成とブラウザプレビュー
プロジェクトを立ち上げると、テンプレートから動画のひな形が生成されます。動画や音声ファイルを渡すと、自動で文字起こしをして字幕を差し込む機能も備えています。
組み上げた動画は、ブラウザ上のプレビュー画面でリアルタイムに確認できます。編集ソフトを別途起動する必要がなく、コードを直したその場で見た目の変化を確認できるのが従来との違いです。
Webサイトの動画素材化
公開されているWebサイトのURLを渡すと、そのページのスクリーンショットや使われているフォント、配色といったデザイン情報をまとめて取得できます。従来は、担当者がサイトを見ながらカラーコードやフォント名を1つずつ拾い、動画編集ソフトに手入力する作業でした。
この機能を使うと、URLを渡すだけでその作業が終わります。サイトの世界観をそのまま動画に流用できるのも利点です。
字幕・ナレーション・背景処理の自動化
音声からの文字起こしと字幕の自動生成、ローカルで動く音声合成によるナレーション付与、人物や商品の背景除去、色調（カラーグレーディング）の一括適用ができます。これらはいずれも外部サービスへの登録やAPIキーを必要とせず、ローカル環境だけで完結します。これにより、字幕付け専用のツールと契約する必要がなくなります。
同じ体裁の動画の大量生成
商品名や価格だけが違う動画を何本も作りたいとき、差し替える値をリスト化して渡すと一括で書き出せます。多言語展開にも使え、日本語版のレイアウトを崩さずに英語版・中国語版へ差し替えることも可能です。展示会向けの案内動画を10支店分作る、といった業務がこの機能に当てはまります。
料金 — 無料の範囲と課金の境目
結論からいうと、自分のパソコンで動画を作って書き出すところまでは無料で、商用利用も制限されていません。Apache 2.0ライセンスで公開されているため、レンダリングのたびに費用がかかることも、利用件数に上限が設けられることもありません。
課金が発生するのは、HeyGenが提供するクラウドレンダリングを使ったときだけです。自分のパソコンで書き出す代わりに、HeyGen側のサーバーで動画を生成してもらう機能で、消費したクレジットに応じた従量課金になります。1クレジットあたりの単価は2026年8月時点で非公開のため、利用前にHeyGen側の最新の案内を確認する必要があります。
| 利用方法 | 費用 | 条件・上限 |
|---|---|---|
| ローカルでのレンダリング | 無料 | 商用利用可、件数上限なし |
| HeyGenのクラウドレンダリング | クレジット従量課金（単価は2026年8月時点で非公開） | アップロード上限200MB、4K書き出しは1.5倍の課金 |
| 自前のAWS Lambda/Google Cloud Runでの分散レンダリング （大量の動画を同時に書き出したい企業向けの上級者オプション） |
HyperFrames自体は無料（クラウド利用料は別途発生） | AWS・GCPのアカウントと権限設定が必要 |
| AIエージェントの利用料（例：Claude Pro） | 月額20ドルからなど、エージェント側の契約に依存 | HyperFrames本体とは別会計 |
見落としやすいのが、HyperFrames自体の料金とは別に、指示を出すAIエージェント側の費用がかかる点です。HyperFramesはClaude Codeなどのエージェントを通じて使う設計になっています。
たとえばClaude Codeで応答性能の高いモデルを使うには、Claude Proプラン（月額20ドルから）などの契約が別途必要です。無料なのはHyperFrames自体だけで、それを動かすAIエージェントの利用料は別にかかります。
Remotionや動画生成AIサービスとの違い
Remotionとの最大の違いは「素のHTMLで書くか、Reactのコンポーネントで書くか」という点です。HyperFramesと比べられることが多いのが、同じくコードで動画を作るRemotionです。表にまとめると、ビルド作業とライセンスの2点で差が出ます。
| 項目 | HyperFrames | Remotion |
|---|---|---|
| 記述方法 | 素のHTML＋CSS＋アニメーション | Reactコンポーネント |
| ビルド作業 | 不要。HTMLファイルがそのまま動く | 必要（バンドラーを使う） |
| AIエージェントへの渡しやすさ | HTMLファイルをそのまま渡せる | JSX・Reactプロジェクト一式が必要 |
| ライセンス | Apache 2.0 | ソースは公開だが独自ライセンス（個人・従業員3名以下の企業は無料、それ以上は有料） |
RunwayやKling AIのような生成AI動画サービスとは、そもそも目的が異なります。生成AI動画サービスは、プロンプトから新しい映像そのものを作り出すのが役目です。Higgsfield AIで何が作れる？で扱ったようなツールがこれにあたります。
一方でHyperFramesは、テキストや図形、決まったレイアウトを「毎回寸分違わず」組み立てる用途に向いています。映像そのものの生成ではなく、テンプレート化された動画の量産に強みがあります。
【要注意】使ううえでの注意点・向かないケース
導入前に押さえておきたいのは、HyperFramesは一度の指示で完成品が出てくるツールではないという点です。狙い通りの動きにならなければ、指示を出し直して作り直す前提が必要です。
実際の利用例では、15秒程度のタイトル映像を1本仕上げるのに、15〜20分ほどかかったという報告があります。指示のやり取りを含めた時間です（Artificial Quotientのチュートリアル動画）。
もう一つの注意点は、実行環境の準備が必要なことです。Node.js 22以上とFFmpegのインストール、AIコーディングエージェントの契約が前提になります。非エンジニアが単独で環境を構築するのは難易度が高くなります。
社内に開発に明るい担当者がいない場合は、最初のセットアップだけでも外部の支援を検討する価値があります。
| 誤解 | 実際 | 対処 |
|---|---|---|
| 完全に無料で使える | HyperFrames自体は無料だが、動かすAIエージェントの契約費は別途かかる | エージェントの月額費用まで含めて予算化する |
| 1回の指示で完成品ができる | 短い動画でも指示のやり直しを含めて十数分かかることがある | 初回は簡単な素材で試し、所要時間の感覚をつかむ |
| 非エンジニアでもすぐ環境構築できる | Node.js・FFmpegの導入が前提で、開発知識がないと詰まりやすい | 最初のセットアップだけ社内の開発担当か外部支援に依頼する |
逆にいえば、単発の動画を1本だけ作りたい会社には、HyperFramesはやや過剰な選択肢です。動画編集の専門知識を持つ人材がおらず、量産の予定もないのであれば、既存の生成AI動画サービスや外注の方が早く目的に到達できます。
中小企業・事業会社での現実的な使いどころ
HyperFramesが力を発揮するのは、「同じ体裁の動画を、条件を変えながら何本も作る」業務です。1本きりの動画制作であれば、既存の外注や生成AIサービスで十分間に合います。
具体的には、次のような場面が候補になります。
- 展示会・店舗ごとの告知動画／商品名や価格だけを差し替えて量産する
- Webサイトの動画広告への転用／自社サイトのランディングページをそのまま動画素材にする
- 定例報告用の動画／四半期ごとの実績数値だけを差し替えて作る
いずれも「毎回ゼロから作る」のではなく、決まったテンプレートに数値や文言を流し込む作業です。決定論的にレンダリングできるHyperFramesの性質と噛み合います。
AIエージェントを使ったコード生成やツール連携の全般は、MCPとAPIは何が違うのかで整理しています。AIエージェントに画像・映像を作らせる別の仕組みは、Claude Codeは絵が描けない — CodexとGeminiに描かせる方法で扱っています。
生成AIツールの導入支援では、いきなり全社展開せず、まず1つの業務で試してから広げる進め方が定着しやすいと見ています。HyperFramesも同じで、社内向けの動画1本を試作してから展開範囲を広げるのが現実的な進め方です。
環境構築やAIエージェントとの組み合わせ方に不安がある場合は、外部の開発支援を一時的に活用しながら型を作るという選択肢もあります。
まとめ
HyperFramesは、HTMLで書いた内容を毎回同じ結果で動画に変換できる、HeyGen製のオープンソースフレームワークです。ローカルでの利用は無料で商用利用も制限されず、課金が発生するのはHeyGenのクラウドレンダリングを使う場合に限られます。1本だけの動画制作には不向きですが、体裁を統一した動画を条件を変えて量産したい会社にとっては、有力な選択肢になります。まずは環境を構築し、簡単な素材で1本試作するところから始めるのがおすすめです。
参考リンク
- HyperFrames 公式GitHubリポジトリ（HeyGen）
- HyperFrames 公式ドキュメント・CLIリファレンス
- HyperFrames 公式プレイグラウンド（hyperframes.dev）
- HeyGen公式デモ動画（hyperframes.dev発表）
- Artificial Quotientによるチュートリアル動画
監修者
池田 智彦 ｜ 株式会社Spovisor 代表取締役
NTTドコモ・KDDIで通信業界に21年従事し、グローバル／国内市場で10以上の新規事業の立ち上げと、1,000万ユーザー規模サービスの開発・運用を主導。事業戦略から海外展開、エンジニアリングまで横断する経験を活かし、2023年6月に株式会社Spovisorを設立。現在はAI・アプリ開発、生成AIコンサル、AI駆動開発支援、AI顧問など、企業のDXを実装まで伴走する支援に取り組む。
生成AI／AIエージェントを「成果」に変える、Spovisorの伴走支援
株式会社Spovisorは、生成AI・AIエージェントを「使ってみた」で終わらせず、業務やプロダクトに組み込んで成果を出すところまで伴走する実装パートナーです。
| 支援領域 | 内容 |
|---|---|
| 生成AI組み込みアプリ開発 | Claude／ChatGPT／AIエージェントを組み込んだ業務アプリや自社プロダクトの設計から実装まで支援 |
| 生成AI導入コンサル／AI顧問 | 経営課題や業務プロセスから導入ポイントを設計し、本番運用まで伴走 |
| AI駆動開発支援 | Claude Code／Codexを使った開発生産性向上を現場へ定着 |