HeyGen Hyperframes×Claude Codeで動画外注がほぼゼロに｜HTMLが動画になる新OSSの作例・GUI・苦手領域まで徹底解説

この記事はClaude Code を触ったことがある個人発信者・コンテンツ販売者向け（HTML を見たことがあれば読めます）。

そもそも HeyGen Hyperframes って何？

2026年4月17日、
AIアバター動画 SaaS の HeyGen が「Hyperframes」というツールを GitHub にオープンソースで放流しました。
タグラインは「Write HTML. Render video. Built for agents.」。
HTML を書くと動画が出てくる、
エージェント前提のフレームワーク、
という宣言です（出典: GitHub heygen-com/hyperframes）。

仕組みはシンプルです。
HTML+CSS にいくつかの data 属性を足したファイルを Claude Code などのエージェントに書かせて、
CLI で npx hyperframes render を打つと、
ヘッドレス Chrome が1フレームずつ画面をキャプチャし、
FFmpeg が MP4 に圧縮します。
React も独自 DSL（独自の構文体系）も無し。
素の HTML が動画ソースです。

Imagine you could make videos like this. Your agent already can — just give it HyperFrames.

（こんな動画が作れたら、
と想像してみてほしい。
あなたのエージェントはもうできる——HyperFrames を渡すだけで）

出典: 公式ローンチ動画 SCRIPT

この煽り文句、
ローンチ動画のナレーションそのままです。
動画自体も Hyperframes で作られていて、
ソースが GitHub に丸ごと公開されています。
49.77秒・1920×1080・30fps・17のサブコンポジションで構成された実物が、
コードごと手元に取れる状態です（出典: hyperframes-launch-video）。

百聞は一見にしかずで、
ローンチ動画の冒頭5秒分のプレビューGIFが公式リポジトリに置いてあります。
これだけで「HTMLが動画になるって、
こういうことか」がほぼ伝わります（出典: launch-video docs/preview.gif）。

ライセンスは Apache 2.0。
商用利用も再配布も無制限・無料です。
リリース1週間ほどで GitHub スターは 10,800 を超えました（2026年4月26日時点）。
私はこの熱量を遠目で見ていますが、
リリース直後に1万スター超は普通じゃない、
というのが第一印象です。

どんな動画が作れるの？

「で、
結局どんな動画が作れるの？」という疑問が一番大事です。
公式ガイドと公開済みのローンチ動画ソースから、
作例の解像度を上げていきます。

Website-to-Video が想定する6種類の動画タイプと尺

公式の Website-to-Video ガイド（URL を渡すと動画が組み上がるパイプライン）が、
6種類のフォーマットと推奨尺を明示しています（出典: 公式 Website-to-Video）。

SNS で発信していてランディングページを持っている人なら、
この6つはどれも他人事じゃないはずです。
私は note と X で発信していますが、
note の新記事告知に Teaser、
商品 LP（ランディングページ。
サービス紹介の1枚ページ）の上部に Product launch、
というセットがそのまま当てはまる感覚があります。

9種類のスタータープロジェクト

白紙から組まなくていいように、
9種類のテンプレートが最初から用意されています（出典: 公式 Examples）。

コマンドは npx hyperframes init my-video --example play-mode のように1行。
X で動画を流したい発信者なら play-mode か vignelli から始めるのが現実的です。

テンプレの実物4本（公式CDN直リンク）

表で説明されてもピンと来ないと思うので、
9テンプレのうち代表4本を実物動画で置きます。
再生ボタンを押すと公式CDN（HeyGen配信のCDN）から MP4 が読み込まれます。
残り5本（swiss-grid / decision-tree / product-promo / nyt-graph / blank）は公式 Examples ページで全部見られます。

動画ソースは全て公式CDN（static.heygen.ai/hyperframes-oss/）の直リンクです。
出典: 公式 Examples。

公式ローンチ動画の中身（17シーンのうち代表5つ）

ローンチ動画のソースが完全公開されているので、
何が作れるかの「上限」もある程度見えます。
49.77秒の中に17のサブコンポジションが入っていて、
それぞれ別の HTML ファイルです（出典: launch-video HANDOFF.md）。

1シーン1ファイルで、
合計17個。
Three.js のセラミック風3Dオブジェクト、
WebGL シェーダーの虹色シャボン玉、
Lottie のフラットキャラクター、
CSS だけで動く幾何形状。
エージェントが書ける範囲は、
想像よりかなり広い。

50以上のビルトインブロック

ゼロから組まなくても、
すぐ呼び出せる部品が50以上カタログ化されています（出典: 公式 Catalog）。
発信者に刺さりそうな代表だけ抜き出します。

• SNSオーバーレイ7種: instagram-follow / tiktok-follow / youtube-lower-third / spotify-now-playing / x-post-card / reddit-post-card / macos-notification
• シェーダートランジション14種: flash-through-white / Glitch / Light Leak / Cinematic Zoom / Whip Pan / Ripple Waves / Thermal Distortion / Swirl Vortex など
• CSS トランジション13カテゴリ: 3D / Blur / Cover / Destruction / Dissolve / Distortion / Grid / Light / Mechanical / Push / Radial / Scale / Other
• エフェクト3種: Grain Overlay / Shimmer Sweep / Grid Pixelate Wipe

呼び出しは npx hyperframes add x-post-card のような形。
X のポスト風カードが画面に出てくるカット、
これだけで作れます。

人間が出てくる動画はどう作るの？

9種類の公式テンプレも50以上のビルトインブロックも、
タイポグラフィとグラフィック中心で人物登場ゼロです。
公式ドキュメント全索引（llms.txt）でも avatar / person / talking head / portrait といった人物系ブロックの登録は0件でした。

つまり Hyperframes 単体で「人間が喋る動画」は生成できません。
仕組みとしては「人物素材は外部から持ち込み、
Hyperframes で背景・テロップ・トランジションを合成する」という分業になります。

公式ローンチ動画のシーン6F（0:36–0:38）が、
この分業を実例で見せてくれます。

A video frame appears (rounded rectangle, soft shadow) — inside it, a Seedance-generated creator speaking to camera. Warm lighting, natural setting, mid-sentence gesture.

（角丸・ドロップシャドウ付きの動画フレームが現れて、
その中で Seedance が生成したクリエイターがカメラに向かって喋る。
暖色光、
自然な背景、
話の途中で手が動く）

出典: launch-video STORYBOARD.md

Seedance は別系統のAI動画生成モデルです。
Hyperframes はこの生成済みのクリエイター映像を <video> 要素として読み込み、
その上にローワードサード・キャプション・ブランドフレームを HTML+CSS で重ねている、
という構造です。

「人間が出てくる動画」を作る現実的な選択肢は4つに整理できます。

HeyGen 公式が Hyperframes の使いどころとして強く押しているのが3行目の「HeyGen アバターと組み合わせる」パターンです。
公式説明はこう書かれています。

You can combine an AI-generated script, a photorealistic HeyGen avatar speaking the script, and HyperFrames rendering the dynamic HTML backgrounds and text overlays behind them, all triggered by a single API call or CLI command.

（AI生成の台本、
フォトリアルな HeyGen アバターがその台本を喋る映像、
Hyperframes が背景とテキストオーバーレイをレンダする、
これを1回の API 呼び出しか CLI コマンドで通せる）

出典: HyperFrames公式

これが HeyGen が Hyperframes を無料で配った戦略の核です。
アバター（喋る人）は HeyGen 本体（有料SaaS）が稼ぎ、
周りの装飾は Hyperframes（無料OSS）に任せて両方を回す、
という設計図です。

ノーコードで人間動画を作りたいなら HeyGen 本体だけで完結します。
Hyperframes が効くのは「アバター動画ができた後の周りの装飾を量産したい」発信者です。
たとえば毎週違う背景・違うCTAでアバターの上にトッピングを変える、
みたいな運用なら、
Hyperframes の決定論的レンダリング（同じ入力で同じ結果）がそのまま効きます。

Claude Code に話しながら作るって、実際どんな感じ？

Claude Code（Anthropic の CLI 型コーディングエージェント）と Hyperframes は、
スラッシュコマンド経由で繋がります。
npx skills add heygen-com/hyperframes で ~/.claude/skills/ 配下にスキルが配備されると、
5本のコマンドが使えるようになります（出典: 公式 Prompting ガイド）。

スラッシュコマンド5本の役割

動画をゼロから作るなら /hyperframes、
手元の LP を素材に変換するなら /website-to-hyperframes という分担です。

Cold start と Warm start

公式は2種類のプロンプトの出発点を提示しています。

• Cold start（白紙から）: 尺・縦横比・ムード・主要要素を指示する。例「Using /hyperframes, create a 10-second product intro with fade-in title」
• Warm start（素材ドリブン）: URL・PDF・トランスクリプトを渡してエージェントにリサーチさせる。Cold start より豊かな出力になる、と公式は明記

公式が推しているのは Warm start です。
発信者の文脈で言うと、
手元の note 記事 URL や商品 LP を投げて「これを30秒のティーザーにして」と頼む形が現実的です。

モーション語彙→GSAP関数のマッピング

「もっと弾むように」「もっとカチッと」みたいな日本語感覚の語彙が、
そのまま動きに変換されるよう公式が定義しています（出典: 同上）。

「タイトルは bouncy で、
本文は smooth で」というラベル指定だけで、
エージェントが対応する GSAP イージング関数を選んで書きます。
動画編集ソフトでイージングカーブをマウスで描いた経験がある人なら、
この単語1個で済む省略の重みが分かるはず。

キャプションスタイル5トーン

字幕のトーンも5つから選ぶだけです: Hype / Corporate / Tutorial / Storytelling / Social。
指定すると、
フォント・アニメーション・サイズが自動で揃います（出典: 同上）。
X 向けなら Social か Hype、
企業案件なら Corporate、
というシンプルな振り分け。

公式推奨ワークフロー6ステップ

公式 Prompting ガイドが推している基本フローはこうです（出典: 同上）。

1. npx hyperframes init my-video でプロジェクト作成
2. Claude Code（または Cursor）でプロジェクトを開く
3. /hyperframes ＋プロンプトでコンポジション生成
4. npx hyperframes preview でブラウザにライブ表示
5. 「タイトルを2倍大きく、ダークモードに、フェードアウト追加」みたいな小さな修正プロンプトで反復
6. npx hyperframes render --output output.mp4 で MP4 出力

修正の反復はチャットで進む設計です。
ターミナルでファイルを直接いじる必要はなく、
Claude Code に「ここをもう少し速く」と打てば該当の data 属性とスクリプトを書き換えてくれる、
という流れ。

GUI はあるの？Hyperframes Studio って何？

「コードでしか触れないのか？」という疑問の答えはノーです。
npx hyperframes preview を打つと localhost:3002 に Hyperframes Studio という GUI が立ち上がります（出典: 公式 CLI ドキュメント）。

Studio の機能5つ

• ビジュアルタイムライン: 各クリップが色付きバーで表示。data-start と data-duration が位置と幅に対応
• コードエディタ: HTML+GSAP スクリプトを CodeMirror（軽量コードエディタライブラリ）でその場編集
• ライブプレビュー: 編集と同時に画面が更新される
• プロパティビューア: 要素の属性を UI から直接書き換え
• タイムライン操作: ドラッグでタイミング、リサイズで尺、ドロップでレイヤー位置を変える

「HTML が真のソース」という設計原則

これが Hyperframes Studio の一番大事な設計です。

Every supported timeline action updates the same data-* attributes and inline styles that your composition already uses.

（Studio のタイムライン操作は、
すべてコンポジションの data-* 属性とインラインスタイルを直接書き換える）

出典: 公式 Timeline Editing

普通の動画編集ソフトは「プロジェクトファイル」がソースで、
エクスポートしないと中身が触れません。
Hyperframes は逆。
HTML が原本で、
Studio はそれを GUI で見せているだけ。
Studio で動かしたら HTML が書き換わるし、
HTML を書き換えたら Studio が更新されます。

つまり、
エージェント生成→Studio で確認→気になる箇所だけコードかドラッグで修正、
というフローが綺麗に成立します。
私はこの「コードと GUI が同じデータを見ている」設計が一番面白いと感じています。

他の動画ツールとの位置付けの違い

既存の動画ツールとの関係を整理しておきます（出典: GitHub README、
Timeline Editing）。

CapCut や Canva を毎日触っている発信者から見ると、
Hyperframes は「コード書ける人専用」に映るかもしれません。
ただ、
コードを書くのはエージェント側です。
発信者は日本語で指示するだけ、
という構造は覚えておく価値があります。

何が作れない・苦手なの？

歯切れよく書きます。
Hyperframes には、
現時点で公式が「できない」「やらない」と明示している領域があります。

分散レンダリングは未完

現時点で単一マシンのみ。
複数マシンに処理を分散させる機能は「ロードマップ」と公式が明記しています。
Remotion は AWS Lambda で本番分散レンダリングが既に動いているので、
ここは差です（出典: 公式 Hyperframes vs Remotion）。

タイムラインの「高度な編集操作」は意図的に除外

split, slip, slide, ripple, and roll semantics common in advanced timeline editors は意図的に除外

（高度な動画編集ソフトでよく使うスプリット・スリップ・スライド・リップル・ロール操作は意図的に省いている）

出典: 公式 Timeline Editing

クリップを途中で切る・ずらす・連動させる、
といった編集ソフト的な操作は思想として外されています。
設計の割り切りです。

汎用モーションクリップの前トリム不可

div や GSAP アニメーションは「途中から開始」ができません。
前トリム操作はメディア（video/audio）クリップだけに出てきます（出典: 同上）。
アニメーションは最初から流れる前提、
ということ。

SFX（効果音）ライブラリは組み込み無し

公式に組み込みの効果音ライブラリは存在しません。
実例（ローンチ動画）でも twinkle-glock 等の効果音は <audio> 要素に個別埋め込みする方式でした（出典: launch-video HANDOFF.md）。
素材は自前調達が前提です。

グリーンバック合成（クロマキー）の公式記述なし

緑背景で撮った人物を切り抜いて重ねる、
という典型的な合成について、
公式ドキュメントに記述がありません。
実写映像を <video> 要素として埋め込む実例はありますが、
クロマキーは現状ドキュメント化されていません。

長尺は実例ベースで50〜60秒が上限の感覚

公式に数値の上限明記はないものの、
Product tour 推奨が30〜60秒、
ローンチ動画の実例が約50秒。
1分を大きく超える長尺の公式作例はありません。
長尺ストーリーテリング動画の用途は今のところ守備範囲外、
と読んでおく方が安全です。

4K/60fps は出せるが書き出し時間は伸びる

fps は24/30/60の3択（デフォルト30）、
品質プリセットは draft / standard / high。
--hdr フラグもありますが、
詳細仕様は公開されていません（出典: 公式 Rendering ガイド）。
1フレームずつブラウザでキャプチャする仕組みなので、
解像度と fps を上げれば素直に時間が伸びます。

なぜ「HTML が動画になる」発想が注目されるのか？

ここが Hyperframes 公式が一番強く主張している思想です。
Remotion との比較ページに、
こう書いてあります。

LLMs writing Remotion produced less creative visual outputs and needed a lot more guardrails compared to those writing HTML directly.

（LLM に Remotion を書かせると、
HTML を直接書かせる場合に比べて創造的なビジュアル出力が出にくく、
ガードレールも余計に必要だった）

出典: 公式 Hyperframes vs Remotion

Agents spend tokens learning React framework rules before being creative, while HTML aligns better with training data from 25+ years of accumulated web animation content.

（エージェントはクリエイティブな仕事を始める前に、
Reactフレームワークのルールを学ぶためにトークンを消費してしまう。
HTML は25年以上蓄積されたウェブアニメーションの学習データと相性が良い）

出典: 同上

言いたいことはシンプルです。
LLM の母語は HTML/CSS/JavaScript。
25年分のウェブが学習データに入っている。
React の規約や TSX のビルド手順は「外側のお作法」で、
エージェントはそこにトークンを取られる前にクリエイティブに進める方がいい、
という主張です。

個人的にはこの読みは理にかなっていると感じます。
Claude Code に React のプロジェクト構造を覚えさせるたび、
最初の数往復は環境整備で消える。
HTML だけなら、
いきなり「動くカードを画面の右から左に流して」が通ります。

Remotion とどう違うの？

HTML 動画フレームワークの先行者は Remotion（Reactで動画を書くライブラリ）です。
HeyGen 自身、
過去に Remotion を本番で使っていて、
影響を受けたことを README で明言しています。

Hyperframes is inspired by Remotion — we used Remotion at HeyGen in production, learned a ton from it, and kept attribution comments in the source for the patterns it pioneered.

（Hyperframes は Remotion から着想を得ている。
HeyGen で本番運用した経験から多くを学び、
ソースコードには Remotion が切り拓いたパターンへの謝辞コメントを残している）

出典: GitHub README

その上で、技術とライセンスの両面で違いがあります。

大量レンダリングを安定運用したい SaaS 事業なら Remotion Lambda が現状有利です。
一方、
個人発信者が手元の PC で動画を作る用途なら、
ライセンス料ゼロで React も要らない Hyperframes の方が摩擦が少ない。
住み分けはハッキリしています。

動画外注の相場とどれくらい違うの？

発信者の懐に直結する話です。
日本市場の動画外注相場を公式相場ページから引きます（出典: クラウドワークス 発注相場、
動画編集市場価格）。

SNS 短尺動画を月に10本回している発信者なら、
TikTok・ショート動画3,000円×10本=月3万円、
年間36万円が外注枠です。
Hyperframes に置き換えれば、
ライセンス料はゼロ、
追加 SaaS 課金もゼロ。
Claude Pro $20/月とローカル PC の電気代だけで、
近い品質が出せる可能性がある、
というのが構造です。

「ゼロになる」とは断言しません。
学習時間、
Node.js v22 のセットアップ、
FFmpeg の導入、
Chrome のバージョン管理、
レンダリング待ち時間、
これらは全部隠れコストとして残ります。
それでも外注比で限りなくゼロに近づく、
という言い方なら歯切れよく言えます。

HeyGen 本体（有料アバター SaaS）と Hyperframes（無料 OSS）の違い

混同しやすいので一度整理します。
HeyGen 本体は AI アバターが喋る動画を作る有料 SaaS で、
230以上のアバターと140言語以上に対応しています。
一方 Hyperframes は HTML を MP4 に変換する無料の OSS フレームワークで、
アバターは関係ありません（出典: HeyGen Series A 発表、
Hyperframes GitHub）。

同じ会社が両方を出している意図は、
HeyGen の VP of Product Engineering（Pinterest からジョインし、
買収した Alisa の Co-founder/CEO 経験者）が公式ブログで言うところの「creative operating system（クリエイティブの OS）」を握ることだと読めます（出典: HeyGen 公式ブログ）。
アバター動画の SaaS で稼ぎつつ、
エージェント時代の動画フレームワーク標準を OSS で押さえる、
という両輪戦略です。

Claude Code でどう使い始めるの？

「気になるから触ってみる」という人向けに、
公式が示している立ち上げ手順を順番に書きます。
実行は自己責任で、
PC スペック・ネットワーク環境を確認してから進めてください（出典: GitHub README、
公式 Prompting ガイド）。

1. 前提を整える: Node.js v22 以上、FFmpeg、ヘッドレス Chrome を手元の PC に入れる。Claude Code が動く環境（macOS / Linux / WSL）を用意
2. スキルを Claude Code に追加: ターミナルで npx skills add heygen-com/hyperframes。~/.claude/skills/ にスキルが配備されて、5本のスラッシュコマンドが有効になる
3. プロジェクトを作る: npx hyperframes init my-video --example play-mode。play-mode を別のテンプレ名に変えれば9種類から選べる
4. Claude Code でプロジェクトを開いて指示する: /hyperframes に続けて「10秒の Teaser、note の最新記事告知、ダークトーン、bouncy なモーション」のように日本語で書く
5. プレビューと反復: npx hyperframes preview でブラウザに Studio が立ち上がる。気になる箇所は Claude Code に「タイトルもう少し速く、字幕は Social トーンで」と打って書き換えてもらう
6. レンダリング: npx hyperframes render --output output.mp4 --fps 30 --quality high。MP4 が出てきたら完了

引っかかりやすいのは Step1 です。
Node.js のバージョン要件 v22 が地味に厳しいので、
node -v で先に確認する方がいい。
FFmpeg と Chrome の問題は npx hyperframes doctor で依存関係を診断できます。

注意点（隠れコスト・公式ガイド外の制約）

触る前に知っておきたい現実的なポイントを5つだけ。

• ローカルレンダリング時間は短くない: 1フレームずつブラウザでキャプチャする方式なので、4K/60fps を選ぶと書き出し時間は素直に伸びます。ノート PC で長尺をやると数十分単位で待つことになり得ます
• プレビューがカクつく原因はコード側: backdrop-filter や drop-shadow、高解像度画像が重なるとプレビューがスタッターします。レンダー品質ではなく CSS のコストの問題、と公式 Troubleshooting に明記（出典: 公式 Troubleshooting）
• Chrome / フォントのバージョン差で出力がずれる: ローカルとプレビューで描画が変わることがあります。--docker フラグでコンテナ内レンダリングに統一できます
• Claude Pro 料金は別途: Hyperframes 自体は無料ですが、Claude Code を回すなら Anthropic 側の課金が発生します（Claude Opus 4.7 はリリース日が Hyperframes の前日4月16日、入力 $5 / 出力 $25 per 100万トークン。出典: Anthropic 公式）
• 素材は自前で用意: SFX ライブラリ組み込み無し、グリーンバック合成は公式記述無し、フリー素材集も付属しません。BGM・効果音・実写素材は別途調達が必要です

よくある質問

Hyperframes は完全に無料ですか？

フレームワーク自体はライセンス Apache 2.0 で無料、
商用利用も再配布も無制限です。
ただし Claude Code を回すなら Anthropic の API/サブスク課金は別途発生します。
手元の PC のスペック・電気代・学習時間も実コストとして残ります。

HTML を書いたことがなくても使えますか？

コードを書くのはエージェント側です。
Claude Code に日本語で「10秒のティーザー、
ダークトーン、
bouncy なタイトル」と指示すれば HTML をエージェントが書きます。
ただし、
出てきた HTML を読んで微修正できる素養があれば反復は速くなります。

動画編集ソフト（CapCut や Premiere）の代わりになりますか？

用途次第です。
SNS 短尺動画・モーショングラフィックス・LP のヒーロー動画なら代替候補。
実写素材のカット編集や細かい色調整、
After Effects 級の手作業モーションは現状不向きです。
「split / slip / slide / ripple / roll」は意図的に除外、
と公式が明記しています。

1分超の長尺は作れますか？

公式ドキュメントに数値上限の明記はありません。
ただし Product tour 推奨が30〜60秒、
ローンチ動画の実例が約50秒。
1分を大きく超える公式作例は現状ありません。
長尺は守備範囲外と読んでおく方が安全です。

Remotion から乗り換えるべきですか？

大量レンダリングを AWS Lambda で安定運用している事業なら現状 Remotion 有利です。
分散レンダリングは Hyperframes ではロードマップ段階。
一方、
個人発信者・小規模チーム・エージェント主体のフローなら、
ライセンス料ゼロ・React 不要の Hyperframes に分があります。

HeyGen 本体（アバター動画 SaaS）を契約する必要はありますか？

不要です。
Hyperframes は HeyGen 本体とは別の OSS で、
アカウントもサブスクも要りません。
HeyGen 本体は AI アバターが喋る動画を作る有料 SaaS、
Hyperframes は HTML を MP4 にする無料フレームワーク。
同じ会社が両方を出していますが製品としては別物です。

参考リンク

• Hyperframes 公式 GitHub リポジトリ
• Hyperframes 公式ドキュメント Introduction
• 公式比較ページ Hyperframes vs Remotion
• 公式 Website-to-Video ガイド
• 公式 Prompting ガイド
• 公式ビルトインブロック Catalog
• 公式 Examples（9種スターターテンプレ）
• 公式 CLI ドキュメント
• 公式 Timeline Editing ガイド
• 公式 Troubleshooting
• 公式ローンチ動画リポジトリ
• HeyGen 公式ブログ（VP of Product Engineering ジョイン発表）
• HeyGen Series A 発表
• Anthropic Claude Opus 4.7 リリースノート
• Remotion Pro ライセンス料金
• クラウドワークス 動画外注相場

※この記事の内容は執筆時点のものです。AIは進化が速い分野のため、最新の仕様は公式サイトでご確認ください。