動画制作をしたいけれど、複雑な編集ソフト（Premiere ProやAfter Effectsなど）の操作に挫折したことはありませんか？ また、AIエージェントに動画を作らせようとしても、従来のツールはタイムライン操作や独自のバイナリ形式を前提としていたため、LLM（大規模言語モデル）がうまく扱えないという課題がありました。
こうした課題を解決するのが、HeyGen社が公開したオープンソースの動画フレームワーク「HyperFrames（ハイパーフレームス）」です。
この記事では、「HTMLを書けば、動画になる」という革新的なコンセプトを持つHyperFramesの基礎知識から、具体的な導入手順、AIエージェント（Claude Codeなど）での活用方法までを網羅的に解説します。この記事を読めば、専門的な動画編集スキルがなくても、コードやテキストの指示だけで高品質なMP4動画を生成できるようになります。
HyperFramesの基礎知識・全体像
概念と基本定義
HyperFramesは、HTML、CSS、JavaScriptで記述した「ウェブページ」を、そのままフレームごとにキャプチャして動画（MP4/MOV/WebM）として書き出すフレームワークです。
最大の技術的特徴は以下の通りです：
- HTMLネイティブ： 独自のスクリプト言語やReactなどのフレームワークを必須とせず、プレーンなHTMLとCSSの
data-*属性でタイムラインを定義します。 - 決定論的（Deterministic）レンダリング： 同じHTMLを入力すれば、マシンの負荷状態に関わらず、ビットレベルで同一の動画が毎回生成されます。これは、OSの実時間ではなく「仮想タイムコード」で1フレームずつレンダリングを進める仕組み（Headless Chromeを利用）によって実現されています。
- エージェント・フレンドリー： LLMが最も得意とするHTMLをソースコードに採用しているため、AIエージェントによる自動生成と極めて相性が良い設計になっています。
なぜ今、HyperFramesが重要なのか
これまでの動画生成AI（SoraやRunwayなど）は、プロンプトから一発で動画を生成するため、細かい修正や文字の正確な配置、ブランドルールの適用が困難でした。
HyperFramesは「動画をゼロから描く」のではなく、「Web技術で世界を組み立てる」レイヤーを担います。これにより、以下のことが可能になります：
- 文字化けの解消： HTML/CSSで制御するため、日本語のテロップも1ピクセルの狂いなく表示できます。
- 既存資産の活用： すでにあるLP（ランディングページ）やドキュメント（Markdown）、売上データ（CSV/JSON）をそのまま動画素材に変えられます。
- 運用の自動化： リリースノートが更新されたら紹介動画を自動生成する、といったCI/CDパイプラインへの組み込みが容易です。
メイン解説：具体的な内容や手順
準備：システム要件の確認
HyperFramesを動かすには、ローカル環境に以下の2つがインストールされている必要があります。
- Node.js 22以上： JavaScriptを実行する基盤です。
- FFmpeg： 動画の書き出し（エンコード）に必要です。
環境が整っているかは、ターミナルでnpx hyperframes doctorを実行することで一括チェックできます。
ローカルCLIでの基本フロー（3ステップ）
手動でプロジェクトを開始する手順は非常にシンプルで、実質3つのコマンドで完結します。
- プロジェクトの初期化：
npx hyperframes init my-videoこれでサンプルのHTMLコンポジションや設定ファイルが入ったディレクトリが作成されます。 - ライブプレビューでの編集：
npx hyperframes previewブラウザでプレビュー画面（Studio）が立ち上がり、index.htmlなどのファイルを編集して保存すると、即座に画面に反映されます。 - 動画のレンダリング（書き出し）：
npx hyperframes render内部でHeadless Chromeがフレームをキャプチャし、FFmpegがMP4として出力します。成果物は通常renders/配下に保存されます。
HTMLコンポジションの書き方
動画の構成はHTMLのdata-属性で行います。主要な属性は以下の通りです。
| 属性名 | 対象 | 役割 |
|---|---|---|
data-composition-id | ルート要素 | 動画構成の一意のIDを定義 |
data-width / data-height | ルート要素 | 解像度（例：1920 / 1080）を指定 |
data-start | 各要素 | 要素が表示される開始時刻（秒） |
data-duration | 各要素 | 要素が表示され続ける長さ（秒） |
data-track-index | 各要素 | レイヤーの重なり順（数字が大きいほど手前） |
class="clip" | 各要素 | フレームキャプチャの対象であることをマーク |
具体的なコード例：
<div data-composition-id="intro" data-width="1920" data-height="1080">
<!-- 0秒から5秒間、ロゴを表示 -->
<img src="logo.png" class="clip" data-start="0" data-duration="5" data-track-index="1">
<!-- 0秒から10秒間、BGMを流す -->
<audio src="music.mp3" data-start="0" data-duration="10" data-volume="0.5"></audio>
</div>
アニメーションには、GSAP（JavaScriptアニメーションライブラリ）やCSSアニメーションをそのまま利用できます。
AIエージェント（Claude Code / Cursor）での活用
HyperFramesの真価は、AIエージェントに「動画を丸投げ」できる点にあります。
- スキルのインストール：
npx skills add heygen-com/hyperframesこの1コマンドで、Claude CodeやCursorがHyperFramesの規約や構文を理解できるようになります。 - プロンプトで指示： 指示を出す際は、先頭に
/hyperframesをつけるのがコツです。- 例：「/hyperframes 10秒のプロダクト紹介動画を作って。黒背景に白いタイトルがフェードインし、最後にCTAボタンを出して」
- 対話で修正： 「タイトルを2倍の大きさにして」「背景をブランドカラーの#0055ffに変更して」といった追加の指示を出すだけで、AIがHTMLを書き換え、プレビューが更新されます。
具体的な使い方と手順
HyperFramesをAIで使いこなすには、大きく分けて3つのステップがあります。
2-1環境構築：AIエージェントに「動画制作のスキル」を授ける
まずは、あなたのPCにツールをインストールし、AIエージェントがHyperFramesの作法を理解できるようにします。
- 必要なツールの準備
- Node.js 22以上： 実行環境として必須です。
- FFmpeg： 動画をエンコード（書き出し）するために必要です。
- npx hyperframes doctor： このコマンドを叩くと、環境が整っているか自動診断してくれます。
- AIスキルの追加 AIエージェント（Claude Code, Cursor, Gemini CLI, Codexなど）に対し、以下のコマンドでHyperFrames専用の知識をインストールします。
- これにより、AIが「動画を作るためのHTMLの書き方」を完璧に学習します。
2-2. 制作ワークフロー：対話形式で動画を形にする
プロジェクトを初期化し、AIに具体的に作りたい動画を伝えます。
- プロジェクトの初期化
- プロンプト（指示）を出す AIに対し、以下のように具体的に依頼します。
- 尺（長さ）： 「15秒の動画で」
- アスペクト比： 「9:16の縦型で（Instagram用など）」
- 構成： 「ロゴがフェードインし、次に3つの特徴がスライドインする流れで」
- トーン： 「Appleのキーノート風のミニマルなデザインで」
- ブラウザでライブプレビュー
- ブラウザが立ち上がり、AIが書いたコードが即座に映像として再生されます。
2-3. 修正とレンダリング：一文のリテイクで完成させる
AIによる初稿をベースに、気になる点を言葉で直していきます。
- 一文で修正指示を出す 「タイトルを2倍の大きさにして」「背景をもっと暗い青に変えて」「0.5秒早くフェードアウトさせて」など、映像の専門用語を使わずに日常語で伝えます。AIが即座にHTMLを書き換え、プレビューに反映されます。
- MP4として書き出す 納得がいったら、最終的なレンダリングを行います。
- 数分で、高品質なMP4ファイルが生成されます。
比較・注意点・メリット＆デメリット
他ツールとの比較：HyperFrames vs Remotion
コードで動画を作る代表的なOSS「Remotion」との違いを整理します。
| 比較項目 | HyperFrames | Remotion |
|---|---|---|
| 主な記述言語 | HTML / CSS / JS | React (JSX/TSX) |
| ライセンス | Apache 2.0 (完全無料) | Remotion License (規模により有償) |
| 学習コスト | Web制作の基礎知識があればOK | React/Hooksの知識が必須 |
| AI親和性 | 極めて高い（HTML生成が容易） | 普通（JSXの構造が複雑になりがち） |
| 特徴 | エージェント向けの軽量設計 | 型安全やコンポーネント統制に強い |
メリット
- 圧倒的な開発スピード： Webエンジニアなら数時間で動画制作の流れを掴めます。
- 豊富なコンポーネント： SNS風オーバーレイやシェーダートランジションなど、50種類以上の既製パーツ（カタログ）を
npx hyperframes addで即座に追加可能です。 - Git管理が可能： 動画がコード（HTML）なので、変更履歴をGitで完全に追跡できます。
注意点・デメリット
- 長尺動画には不向き： 10分を超えるような長尺動画は、レンダリング時間やメモリ消費が膨大になるため現時点では推奨されません（30〜90秒が最適）。
- オーディオミキシングの制約： 標準のオーディオ機能は基本的な再生・音量調節に限られます。高度なミキシングには別途FFmpeg等での後処理が必要です。
- 日本語音声の品質： 組み込みのAI音声合成（Kokoro-onnx）は日本語のアクセントが不安定な場合があります。高品質な動画を作るなら、外部の音声ファイル（assets配下）を使用することが推奨されています。
よくある質問（FAQ）
Q1. プログラミング初心者でも使えますか？
A: HTML/CSSの基礎知識があれば始められます。特にAIエージェント（Claude Codeなど）を併用すれば、自分でコードを書かなくても対話形式で動画を作成できるため、動画編集ソフトを学ぶよりもハードルが低い場合もあります。
Q2. 実写映像の上に字幕をつけることはできますか？
A: 可能です。<video>タグを背景として配置し、その上にHTML要素でテキストを重ねるだけで、精密なタイミングの字幕（テロップ）付き動画が作成できます。また、既存動画から自動で文字起こししてテンプレートに組み込む機能（--videoフラグ）も備わっています。
Q3. 商用利用は可能ですか？
A: はい、Apache 2.0ライセンスの下で公開されており、商用利用、改変、再配布が完全に自由です。追加料金や本数制限もありません。
Q4. インストールに失敗する場合の対処法は？
A: Node.jsのバージョンが22未満でないか確認してください。また、Git LFSが必要になる場合があるため、公式リポジトリをクローンする際などはGit LFSのインストールも推奨されます。
Q5. 料金は本当にかかりませんか？
A: HyperFrames OSS本体は無料（Apache 2.0）です。 ただし、AIエージェント（Claude Code等）の利用料や、HeyGenのAPIを経由してクラウドで高速レンダリングする場合は、それぞれの従量課金が発生します。
Q6. 作った動画の著作権はどうなりますか？
A: 一般的に、生成AIコンテンツも人間が作ったものと同じ基準で判断されます。 HyperFramesはAIが描画するのではなく、あなたが指示したデザインをレンダリングする「道具」であるため、素材の権利に注意すれば商用利用も可能です。
まとめ
HyperFramesは、単なる動画制作ツールではなく、「動画をコード資産として管理・運用する基盤」です。Web技術とAIエージェントの力を組み合わせることで、これまで動画制作にかかっていたコストと時間を劇的に削減できます。
読者が次に取るべきアクション
- 環境構築： Node.js 22+とFFmpegをインストールする。
- スキル追加： Claude Codeを使っているなら、
npx skills add heygen-com/hyperframesを実行する。 - 最初の1本：
npx hyperframes init my-firstでプロジェクトを作り、簡単な自己紹介動画や製品紹介動画を出力してみる。
「動画を組み立てる」という新しい感覚を、ぜひあなたの手で体験してみてください。
注釈：
- Headless Chrome（ヘッドレス・クローム）： 画面を表示させずに裏側で動作するGoogle Chromeのこと。自動操作やスクリーンショット取得に利用されます。
- FFmpeg（エフエフエムペグ）： 動画や音声の変換、編集を行うためのフリーソフト。
- 決定論的（デターミニスティック）： 同じ入力に対して必ず同じ出力が得られる性質のこと。動画制作における再現性を保証します。
