0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@kotaro_ai_labin株式会社Good Lab 開発部

HTMLで動画を書く時代が来た：HeyGen発OSS「HyperFrames」入門

0
Posted at

自己紹介

株式会社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つ。

  1. ルート要素に data-composition-id / data-duration / data-width / data-height を指定
  2. アニメーションさせたい要素は class="clip" + data-start / data-duration
  3. 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 から始めてみてください。

参考

最終更新日: 2026-05-06

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?