自己紹介

株式会社Good Labでエンジニアをしているコータローです。
日々、Java・SQL・Gitなどの技術情報や、新人エンジニア向けの学習ノウハウ、
AI活用についての情報を発信しています。

Good Labについて気になった方は、コーポレートサイトもぜひご覧ください。
▶コーポレートサイト

はじめに

「動画編集ソフトを開いて、タイムラインにクリップを並べて、キーフレームを打って…」

After Effects は1993年、Premiere Pro は1991年リリース。30年以上、動画編集の基本構造は「タイムライン+レイヤー+キーフレーム」のまま変わっていません。GUI 前提のこの構造は、人間の編集者には最適化されていますが、AI エージェントには扱いづらい という弱点があります。

LLM の母語は何かと言えば、Web（HTML / CSS / JS） です。インターネット上の数十億ページを学習している LLM は、HTML をネイティブに書ける一方で、専用 DSL や独自フォーマットは苦手です。

だったら、動画も HTML で書けばいいのでは？

この発想を本気で形にしたのが、HeyGen が 2026年4月17日にリリースしたオープンソース動画フレームワーク HyperFrames です。本記事ではその全体像と、実際に動かすところまでを解説します。

筆者は実際にこのフレームワークでポッドキャスト「TECH LOOSE」の12分動画を自動化しました。その経験も交えながら紹介します。

45秒の動画でざっくり世界観を掴みたい方はこちら（この動画自体も HyperFrames で書きました）。

@youtube

1. HyperFrames とは

一言でいうと

HyperFrames は、HTML + CSS + JavaScript で動画を記述し、ヘッドレスChrome で1フレームずつレンダリングして MP4 を生成する OSS フレームワーク です。

項目	内容
開発元	HeyGen（AI 動画生成サービスの大手）
初回リリース	2026年4月17日
ライセンス	Apache License 2.0（商用利用無制限）
GitHub	https://github.com/heygen-com/hyperframes
公式サイト	https://www.hyperframes.dev/
現バージョン	0.4.x 系
動作要件	Node.js 22+ / FFmpeg

何が新しいのか

HyperFrames が一線を画すのは、「AI エージェント前提」で設計されている 点です。リポジトリには CLAUDE.md が同梱されており、Claude Code 用の Skills（スラッシュコマンド）まで公式提供されています。

つまり、「Claude Code に動画を作らせる」ことを最初から想定した動画フレームワーク が登場したということです。

2. なぜ HTML が「動画」になるのか

「HTML で動画？」と疑問に思うかもしれません。仕組みは驚くほどシンプルです。

data-属性をちょい足しするだけ

通常の HTML 要素に、HyperFrames 独自の data-start / data-duration / data-track-index などの属性を追加するだけで、そこがタイムライン上のクリップとして扱われます。

<div class="clip" data-start="0" data-duration="3">
  最初の3秒間表示される要素
</div>
<div class="clip" data-start="3" data-duration="2">
  3秒〜5秒に表示される要素
</div>

Web の全資産がそのまま使える

HTML+CSS+JS の世界に閉じているので、Web のエコシステムを丸ごと持ち込めます。

ライブラリ	用途
GSAP	プロ品質のタイムラインアニメーション
Lottie	After Effects から書き出した JSON を再生
Three.js	3D グラフィックス
D3.js	データ可視化
Tailwind CSS	スタイリング

LLM 親和性

LLM は HTML / CSS / JS を ネイティブに大量学習済み です。そのため、Claude Code に「Instagram のフォロー誘導風アニメーションを2秒挿入して」と指示すると、まさに HTML を書く感覚でコード差分を出してきます。

3. 仕組み：決定論的レンダリング

HyperFrames の重要な特性が 決定論的（deterministic）レンダリング です。

レンダリングフロー

HTML（コンポジション定義）
   ↓
ヘッドレス Chrome で1フレームずつキャプチャ
   ↓
PNG シーケンス
   ↓
FFmpeg で MP4 に圧縮
   ↓
完成した動画ファイル

時刻ベースではなく「フレーム番号ベース」

HyperFrames はアニメーションを「現在時刻」ではなく 「フレーム番号」で制御 します。30fps で 5秒の動画なら、フレーム0〜149まで順番にレンダリングされます。

これにより、同じ入力からは常にビット単位で同じ出力が得られる ことが保証されます。

CI/CD に組み込める

決定論的なので、

GitHub Actions で動画を自動ビルド
Pull Request ごとに動画の差分を生成
スナップショットテスト（前回と1ピクセルでも違ったら失敗）

といった「コードと同じ扱いの動画」が可能になります。

4. Remotion との違い

「動画を React で書ける Remotion ならもうあるじゃん」と思った方も多いはずです。両者の違いをまとめます。

項目	Remotion	HyperFrames
記法	React / TypeScript（TSX）	プレーン HTML + CSS + JS
LLM 親和性	TSX の構造を理解させる必要あり	HTML は全 LLM がネイティブ
商用ライセンス	個人 $15/月〜、企業は年商連動	Apache 2.0（完全無料）
学習コスト	React / TS 知識が前提	HTML が書ければ OK
エコシステム	4年以上で成熟、企業導入多数	リリース直後
エージェント前提設計	後付け	公式 `CLAUDE.md` / Skills 同梱
決定論的レンダリング	対応	対応

どっちが優れているか？ という話ではありません。React の世界で動画を扱いたいなら Remotion、AI エージェントに動画生成を委ねたいなら HyperFrames、という棲み分けです。

5. 環境構築は3つだけ

必要なものは以下の3つだけです。

ツール	用途
Node.js 22+	HyperFrames 本体の実行環境
FFmpeg	フレームを MP4 に変換
Claude Code（推奨）	AI 駆動で動画コードを書く

macOS なら Homebrew で一発です。

brew install node ffmpeg

6. Hello World：5秒の最小コンポジション

実際に動かしてみましょう。

プロジェクトを作成

npx hyperframes init my-video --non-interactive --example blank
cd my-video

blank テンプレートは最小構成です。index.html がコンポジション定義ファイルになります。

index.html を編集

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <style>
    body { margin: 0; background: #111; }
  </style>
</head>
<body>
  <div id="root"
       data-composition-id="my-video"
       data-start="0" data-duration="5"
       data-width="1920" data-height="1080">

    <h1 id="title" class="clip"
        data-start="0" data-duration="5" data-track-index="0"
        style="font-size: 200px; color: white; text-align: center; margin-top: 400px;">
      Hello, Hyperframes!
    </h1>

    <script>
      window.__timelines = window.__timelines || {};
      const tl = gsap.timeline({ paused: true });
      tl.from("#title", { opacity: 0, y: -50, duration: 1 }, 0);
      window.__timelines["my-video"] = tl;
    </script>
  </div>
</body>
</html>

ポイントは3つ。

ルート要素に data-composition-id / data-duration / data-width / data-height を指定
アニメーションさせたい要素は class="clip" + data-start / data-duration
GSAP のタイムラインを window.__timelines["コンポジションID"] に登録

レンダリング

npx hyperframes render --output hello.mp4

これで 5秒の MP4 ファイルが出力されます。1080p なら数十秒で完了するはずです。

7. 9種のスタータープロジェクト + 42種のブロック

「白紙から書くのはハードルが高い」という人向けに、HyperFrames は実用的なスターターを多数提供しています。

スタータープロジェクト（抜粋）

名前	用途・スタイル
warm-grain	コーポレート向け（落ち着いたトーン）
play-mode	SNS 派手系（ポップな色とモーション）
swiss-grid	スイスデザイン風の整然レイアウト
kinetic-type	プロモーション・タイポグラフィ
decision-tree	解説動画（フローチャート系）
product-promo	商品紹介
nyt-graph	データ可視化（NYT 風）
vignelli	縦型 9:16（Shorts / Reels 向け）
blank	白紙テンプレート

ブロック（部品）

42種類以上のブロックが提供されており、1コマンドで導入できます。

npx hyperframes add instagram-follow
npx hyperframes add youtube-lower-third
npx hyperframes add spotify-now-playing

代表例：

Instagram Follow / TikTok Follow / YouTube Lower Third
Spotify Now Playing
シェーダートランジション 14種
CSS トランジション 13カテゴリ

これらを組み合わせれば、SNS 動画程度なら1時間でテンプレが完成します。

8. Claude Code Skills 連携が爆速

HyperFrames の真価が出るのが Claude Code 連携です。

npx skills add heygen-com/hyperframes --all --global

これだけで Claude Code に 13個の専用スキル が登録されます。

スキル	役割
`hyperframes`	フレームワーク本体の知識
`hyperframes-cli`	CLI コマンドの使い方
`hyperframes-media`	画像・動画素材の扱い
`hyperframes-registry`	ブロックの追加
`gsap`	GSAP アニメーション
`lottie`	Lottie 再生
`three`	Three.js 3D
`tailwind`	Tailwind CSS
`css-animations`	CSS アニメーション
`animejs`	anime.js
`waapi`	Web Animations API
`remotion-to-hyperframes`	Remotion から移行
`website-to-hyperframes`	既存サイトを動画化

Claude Code 内で /hyperframes /hyperframes-cli /gsap といったスラッシュコマンドが使えるようになり、「2秒のフェードインを冒頭に追加して」 のような自然言語指示で正確な差分を出してくれます。

9. どんな用途に向くか / 向かないか

何でもできるわけではありません。素直に向き不向きがあります。

向くもの

トーク系：解説動画、ニュース、ポッドキャストの動画化
画面録画 + ナレーション：チュートリアル、開発ログ
スライド型：プレゼン動画、製品説明
データ可視化動画：グラフがアニメーションする系
SNS Shorts / Reels：定型フォーマットの量産

向かないもの

Vlog：人物の感情表現や映像の機微が中心のコンテンツ
複雑なモーショングラフィックス：After Effects のパーティクル・3Dカメラの世界
実写編集中心：カット編集や色補正が主な作業

「Web で表現できることなら何でも動画にできる、その先は専用ツールに任せる」という割り切りが大切です。

10. 実体験：ポッドキャスト動画化を自動化してみた

筆者は週次配信しているポッドキャスト「TECH LOOSE」の動画版を、HyperFrames で自動化しました。具体的な数値はこんな感じです。

指標	値
動画の長さ	12分
レンダリング時間	約 8〜10分（実時間とほぼ同じ）
出力ファイルサイズ	35MB（旧 iMovie 版は 245MB）
環境構築〜初回出力まで	約 2〜3時間
Hello World 自体	約 10分

ファイルサイズが 約1/7 になったのが個人的に衝撃でした。エンコード設定を細かく制御できるので、配信に最適化したファイルが作れます。

毎週のオペレーションが「原稿を書く → コマンドを叩く」だけになったので、運用負荷が劇的に下がりました。

11. まとめ

ポイント	内容
HyperFrames とは	HTML+CSS+JS で動画を書く OSS フレームワーク
開発元	HeyGen（2026年4月17日リリース）
ライセンス	Apache 2.0（商用利用無制限）
強み	LLM ネイティブ・決定論的レンダリング・Claude Code 公式連携
Remotion との差	プレーン HTML / Apache 2.0 / エージェント前提設計
向く用途	トーク系・解説・スライド・データ可視化・SNS Shorts
向かない用途	Vlog・複雑なモーショングラフィックス

リリース直後ということもあり、日本語の情報がまだ非常に少ない のが現状です（本記事執筆時点）。逆にいえば、今触っておけば日本のエコシステムで先行者になれる タイミングでもあります。

「動画もコードと同じように Git 管理し、CI で自動ビルドし、AI エージェントに任せる」――そんな世界を覗いてみたい人は、ぜひ npx hyperframes init から始めてみてください。

参考

HyperFrames 公式サイト: https://www.hyperframes.dev/
GitHub リポジトリ: https://github.com/heygen-com/hyperframes
Apache License 2.0: https://www.apache.org/licenses/LICENSE-2.0
Remotion 公式サイト（比較対象）: https://www.remotion.dev/
GSAP（HyperFrames で利用するアニメーションライブラリ）: https://gsap.com/

最終更新日: 2026-05-06

@kotaro_ai_lab
AI活用や開発効率化について発信しています。フォローお気軽にどうぞ！