AIツール
読了 8分

HyperFramesとは?HTMLで動画を作るAIエージェント向けOSS

目次

HyperFramesは、HTML/CSS/JavaScriptで書いたコンポジションをそのままMP4動画にレンダリングする、AIエージェント向けのオープンソースツールです。Claude CodeやCursorなどのコーディングエージェントに「こういう動画を作って」と頼むだけで、エージェントがHTMLを書き、そのままMP4として書き出せます。プログラミング不要をうたうAI動画生成ツールとは違い、HTMLを土台にしているぶん制御しやすく、同じコードからは毎回同じ結果が再現できる点が最大の特徴です。

HyperFramesとは?開発元・ライセンス・登場の背景

HyperFramesは、AIアバター動画生成サービスで知られるHeyGenが2026年4月17日にApache 2.0ライセンスで公開したオープンソースの動画フレームワークです。自社のローンチビデオをClaude Code + HyperFramesで制作し、その基盤ごとOSSとして切り出したという経緯があり、公開直後からVercelのCEOであるGuillermo Rauch氏がコメントするなど、エンジニアコミュニティで注目を集めました。

公式のキャッチコピーは「Write HTML. Render video. Built for agents.」。動画編集ソフトを操作するのではなく、Webページを書く感覚で動画を作る発想です。ライセンスはApache 2.0で、セルフホストであればランニングコストはかかりません。

仕組みを理解する:HTML/CSS/JSがMP4になるまで

HyperFramesのコンポジションは、見た目としては普通のHTMLファイルです。ここに(開始タイミング)や(表示時間)、(レイヤー)といったdata属性を付けることで、時間軸を持つ「動画のタイムライン」として扱えるようになります。

裏側では、ヘッドレスChrome(Puppeteer)がこのHTMLをフレームごとにキャプチャし、FFmpegでMP4にエンコードします。アニメーションはCSS・GSAP・Lottie・Three.jsといった既存のWeb標準ランタイムに対応しており、ソーシャルオーバーレイやトランジションなど50種類以上の既製コンポーネントも用意されています。入力HTMLが同じであれば出力されるピクセルも毎回同じになる、決定論的なレンダリングパイプラインという設計思想です。

Remotionなど他の動画生成手法との違い

プログラムで動画を作る手法として真っ先に比較されるのがRemotionです。両者の違いは大きく2点に集約されます。

  • 主言語がHTML/CSSかReactか:RemotionはReactコンポーネントで動画を組み立てるのに対し、HyperFramesは素のHTML/CSSで完結します。仮想DOMやHookのライフサイクルを意識する必要がないぶん、AIエージェントが生成するコードで壊れにくいという声もあります
  • ライセンス:HyperFramesはApache 2.0のOSSで無料。Remotionは用途によって商用ライセンスが必要になる場合があります

なお、実写素材を編集する用途(トーキングヘッドやインタビュー動画のカット編集など)は守備範囲外です。HyperFramesはゼロから動画を組み立てる「合成」に特化しており、撮影済み素材の編集を目的としたツールとは棲み分けて考える必要があります。

Claude Codeでの導入〜レンダリングまでの手順

環境準備とスキルのインストール

HyperFramesの実行にはNode.js(22以降)・FFmpeg・Puppeteer経由のヘッドレスChromeが必要です。まず以下のコマンドを実行すると、Node.jsのバージョンやFFmpeg・Chromeの有無、CPU・メモリ・ディスク空き容量を一括でチェックできます。

npx hyperframes doctor

Claude Codeへの導入は1コマンドです。

npx skills add heygen-com/hyperframes

インストールすると、(HTMLコンポジションの作成・編集)、(初期化・プレビュー・レンダリングの実行)、(音声合成・文字起こし・背景除去などのメディア処理)という3つのスラッシュコマンドがClaude Code上で使えるようになります。

プロンプト設計とPDF資料からの動画化(Warm start)

公式のPrompt Guideでは、依頼時に尺(例:10秒、30秒、5シーンで各3秒など)とアスペクト比(16:9/9:16/1:1)を必ず明示することが推奨されています。

パワーポイント資料をそのまま動画化したい場合、HyperFramesは.pptxを直接は読み込めないため、いったんPowerPoint側で「エクスポート」からPDF形式に変換します。そのPDFをClaude Codeに渡し、「このPDFを要約して16:9・30秒の説明動画にして」のように、入力コンテキストと一緒に依頼するのが公式が示す「Warm start」というワークフローです。エージェントがPDFの内容を解釈し、スライドの要点をテキストやアニメーションのタイムラインに変換したHTMLを書いてくれます。

最初の生成で完璧を狙う必要はなく、「タイトルをもっと大きく」「このタイミングでロゴを出して」のように、動画編集者に指示するような短い言葉で追加修正していく運用が想定されています。

プレビューとレンダリング

以下のコマンドでブラウザ上のプレビューを確認しながら細部を調整します。

npx hyperframes preview

問題なければ、以下のコマンドでMP4として書き出します。

npx hyperframes render

同じコマンドをCIやバッチ処理に組み込めば、章立てが決まった研修動画のイントロなど、同じテンプレートで内容だけ差し替える動画を自動で量産することもできます。

向いている用途・向いていない用途

向いている用途

  • 5〜30秒程度のプロダクト紹介・ロゴアニメーション・SNS用スポット動画
  • 売上データなどをアニメーション付きグラフとして可視化する動画
  • 既存のWebページURLを読み込ませ、スクロールやハイライトを付けた紹介動画に変換する用途
  • 同じフォーマットを使い回す量産型の動画(研修教材の章イントロなど)

向いていない用途

  • 実写映像の代替:HyperFramesはHTMLの合成に特化しており、複雑な人物動作やリアルな光、映画的なカメラワークを再現する用途には向いていません
  • AIアバターによるトーキングヘッド動画:これはHeyGen本体(有料サービス)が担う領域で、HyperFramesはあくまでHTMLを動画化するレンダリングエンジンです
  • 撮影済み素材のカット編集:トーキングヘッドやインタビュー、モンタージュのような実写ベースの編集作業には別の編集ツールが適しています

使ってみて分かった注意点・つまずきポイント

HyperFramesは公開から間もないOSSで、GitHub上のバージョン表記もv0.x系のまま頻繁に更新が続いています。API仕様が変わりやすい段階にあるため、業務の基幹フローに組み込む場合は、バージョンアップ時の挙動変化を前提に運用を設計しておくと安心です。

環境チェックのでは、メモリの空き容量が少ない環境で警告が出るケースが報告されています。ヘッドレスChromeでのレンダリングはメモリを消費するため、非力なマシンやCI環境で動かす場合は空きメモリの確保やスワップ設定を事前に確認しておくのが無難です。

また、日本語フォントや音声周りは環境によって表示崩れや文字化けが起きることがあるとの報告もあり、日本語コンテンツで使う場合はフォント指定を明示的に行うなど、多少の試行錯誤を見込んでおく必要があります。まだ本格的なノーコード編集UI(キーフレームエディタなど)は用意されておらず、基本はコード(またはそれを書けるエージェント)を扱う前提のツールという点も踏まえておきたいポイントです。

よくある質問(FAQ)

Q. HyperFrames自体がAIで動画の中身を生成してくれるのですか?
A. いいえ。HyperFramesは「HTMLを動画としてレンダリングするエンジン」であり、動画の中身(構図やアニメーション)を考えてHTMLを書くのはClaude CodeなどのAIエージェント側の役割です。

Q. 無料で使えますか?
A. Apache 2.0ライセンスのOSSのため、セルフホストであれば無料で利用できます。別途HeyGenの有料サービス(AIアバター等)を組み合わせる場合は、その部分に料金が発生します。

Q. Claude Code以外でも使えますか?
A. Cursor・Gemini CLI・OpenAI Codexなど、複数のAIコーディングエージェント向けにスキルが提供されています。

Q. プログラミング未経験でも使えますか?
A. HTML/CSSの知識がなくても、AIエージェントに指示を出す形で動画を作ることは可能です。ただし環境構築やエラー対応の場面ではコードやログを読む場面が出てくるため、開発環境に慣れている方の方がスムーズに扱えます。

まとめ

HyperFramesは、HTMLを書く感覚でAIエージェントに動画を作らせる、HeyGen発の無料OSSです。Remotionと違いReactの知識が不要で、Claude CodeなどのエージェントにHTML/CSSを書かせやすい設計になっているのが特徴です。プロダクト紹介やSNS用の短尺動画、資料の要約動画といった「構造化された動画」を素早く量産したい開発者には試す価値のあるツールですが、公開間もないOSSゆえのバージョン変化や実行環境のメモリ要件には注意が必要です。まずはで環境を確認するところから始めてみてください。

※本記事の情報は執筆時点のものです。HyperFramesはバージョン更新が頻繁なOSSのため、最新の仕様は公式ドキュメント・GitHubリポジトリをご確認ください。

関連記事