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は進化が速い分野のため、最新の仕様は公式サイトでご確認ください。