2026 年の春、動画制作の世界で静かに、しかし確実に地殻変動が起きています。「動画をコードで書く」という発想が、一部の開発者の遊び場を超えて、BtoB 企業の動画運用担当者の視野に入り始めました。
その震源地となったのが、HyperFrames と Remotion という 2 つのフレームワークです。どちらも「コードを書くと動画が出力される」という仕組みを持ちながら、設計思想も向き合う読者も異なります。この記事では、両者を BtoB 動画運用の視点から丁寧に読み解きます。
少し個人的な話を挟むと、最初に「HTML で動画を書く」という記事を読んだとき、正直なところ「動画制作ツールの新しい包み方でしょ」という印象でした。動画というのはタイムラインとレイヤーで作るもの、という先入観が私の中にありました。
ところが HyperFrames の GitHub リポジトリを実際に開いてみると、構造はまるで Web ページの HTML そのものでした。`<video-scene>` タグの中に要素を並べ、CSS でスタイルを当て、JavaScript でアニメーションを制御する。「動画を作っている」のではなく、「動くWebページを動画としてレンダリングしている」と言った方が正確です。
その認識を改めた瞬間から、これが AI エージェント時代に持つ意味が急に鮮明になりました。
なぜ今、コードで動画を作るのか
従来の動画制作は「デザイナーの納品物」でした。1 本ずつ手作業で作り、修正が入れば Adobe Premiere や After Effects を再度開き、最初から書き出す。納品物はファイル 1 枚で、それ以上でも以下でもない。
コードで書いた動画は性格が根本的に違います。変数にデータを渡せば、製品 A 版・製品 B 版・英語版・日本語版を同時に出力できます。「エンジニアの納品物」。つまり、一度設計すれば量産できる仕組みです。
この変化を後押ししているのがマーケット全体の動きです。AI 動画生成ツール市場はグローバルで 2026 年に 8 億 4,700 万ドル（約 1,270 億円） に達すると予測されています。
国内でも、AI システム市場は 2024 年に 1 兆 3,412 億円（前年比 56.5% 増） に拡大し、2029 年には 4 兆 1,873 億円規模に達するとの試算があります。
「動画をコードで書く」というアプローチは、この大きな流れと交差する場所に立っています。
HyperFrames とは何か
HeyGen が 2026 年 4 月 17 日にオープンソース（Apache 2.0 ライセンス）として公開したフレームワークです。キャッチコピーは「Write HTML. Render video. Built for agents.」。HTML を書いて動画を出力する、AI エージェントのために設計されたツール、という宣言です。
公開から約 3 週間で GitHub スター数は約 15,800（2026 年 5 月 8 日時点） に達しました。
フォーク数は約 1,400、日次成長率が急峻だった時期には 1 日で 500 スターを超えたこともあります。開発者コミュニティが「これは面白い」と反応した速度は、HyperFrames の登場が単なるニッチなツールではないことを示しています。
「動画版 HTML/CSS」という設計思想
HyperFrames の最大の特徴は、記述言語として HTML / CSS / JavaScript を採用した点です。Webページを作るのと同じ感覚で動画を書ける、という意味で「動画版 HTML/CSS」と呼ぶのが一番分かりやすい説明です。
なぜ HTML を選んだのか。HyperFrames の公式ドキュメントには設計思想として「LLM（大規模言語モデル）は HTML を学習データとして大量に持っているため、AI エージェントが最もネイティブに扱える記述言語で動画を書ける」と明示されています。
つまり、Claude Code や Gemini CLI などの AI エージェントが「指示を受けて動画を自動生成する」ときに、React コンポーネントよりも HTML の方が書き間違いが少なく、修正もしやすい、という発想です。
アニメーション対応の幅広さ
HyperFrames は GSAP、Anime.js、CSS アニメーション、Lottie、Three.js、Web Animations API（WAAPI）など 11 種類以上のアニメーションランタイムに対応しています。
既存の Web アニメーション資産をそのまま動画として出力できる幅の広さは、フロントエンド開発の経験がある人材にとって学習コストを大幅に下げます。
HeyGen という開発母体
HyperFrames を作った HeyGen は、AI 動画生成ツールのグローバルリーダーの一社です。2024 年 6 月時点で 評価額 5 億ドル（約 750 億円）、ARR 9,500 万ドル（約 143 億円）、顧客 4 万社以上 という実績を持ちます。
HyperFrames はその HeyGen が自社の AI エージェント動画生成インフラとして研究・開発した副産物をオープンソース化したものです。実験的なスタートアップの概念実証ではなく、実運用に乗ったプロダクトから派生した技術という背景があります。
Remotion とは何か
Remotion は Jonny Burger（ジョニー・バーガー）氏が 2021 年 2 月に公開した独立の React 動画ライブラリです。OpenAI とは無関係の個人プロジェクトとして始まり、現在は Remotion チームが中心になって開発が続いています。
GitHub スター数は約 46,200（2026 年 5 月 8 日時点）。
HyperFrames の約 3 倍のスター数は、Remotion が「コードで動画を作る」というカテゴリで先駆者として 5 年間積み上げてきた実績の厚みを示しています。
React コンポーネントで動画を書く
Remotion の記述言語は React（TypeScript）です。`<Sequence>` や `<AbsoluteFill>` といった Remotion 独自のコンポーネントを使い、動画のタイムラインをコードで表現します。既存の React エコシステム（状態管理ライブラリや UI コンポーネントライブラリ）をそのまま持ち込める点が強みです。
楽譜と演奏の関係に例えると分かりやすいかもしれません。React コンポーネントが楽譜で、レンダリングが演奏です。決定論的レンダリング（同じ入力から必ず同じ動画が出力される仕組み）を持つため、「同じコードを実行すれば世界中どこでも同じ動画が出る」という再現性があります。これは CI/CD パイプラインに組み込む際の重要な特性です。
ライセンスの条件
Remotion のライセンスは注意が必要な点があります。個人、従業員 3 名以下の企業、非営利団体は無料で商用利用できます。従業員 4 名以上の営利企業は Company License（有料）が必要です。
有料プランの価格は次の通りです（2026 年 5 月 8 日時点）:
- Creators プラン: 月額 $25 / シート（個人向け動画制作）
- Automators プラン: $0.01 / レンダリング、月額最低 $100〜（SaaS・自動化向け）
- Enterprise License: 月額 $500〜（カスタム条件）
HyperFrames の Apache 2.0（完全無償・商用利用可）と対比すると、企業規模によってコスト試算が大きく変わります。
実際にビジネスになった事例
Remotion の公式サイトには成功事例が掲載されています。Submagic は Remotion 採用後 3 ヶ月で ARR 100 万ドルを達成し、累計 300 万ユーザーを獲得しました。Crayo.ai は月間 50 万ドル超（年換算 600 万ドル）の収益を上げ、200 万ユーザーに達しています。
これらは C 向けの短尺動画生成 SaaS が多いですが、「Remotion で動画量産を自動化した事業が実際に動いている」という事実は、BtoB 動画運用の文脈でも参考になります。
二つを 10 軸で比較する
10 の軸でまとめると、両者の違いが浮かび上がります。提供元・公開日・ライセンス・記述言語・AI エージェント親和性・決定論的レンダリングの有無・出力形式・想定ユースケース・学習コスト・主要ツール連携。それぞれに明確な差があります。
以下では、BtoB 動画運用の観点で特に重要な 5 軸を文章で掘り下げます。
軸 1: ライセンス
HyperFrames は Apache 2.0 です。企業規模に関係なく、無償・商用利用可で、改変・再配布も自由です。Remotion は Custom License で、従業員 4 名以上の営利企業は必ず有料ライセンスが必要になります。
社内で「まず試してみよう」という検証フェーズでは両者とも動かせますが、本番導入・量産自動化を検討する段階では、Remotion は予算計上が必要になります。
軸 2: 記述言語と学習コスト
HyperFrames は HTML / CSS / JavaScript。Web 制作の経験があれば即日着手できます。Remotion は React（TypeScript）。コンポーネント設計の理解が必要で、フロントエンド未経験者には壁があります。
「動画版 Word マクロ vs プログラミング言語」という比喩が当てはまります。Remotion は既に React を書いているエンジニアには強力な武器ですが、そうでなければ導入コストが跳ね上がります。
軸 3: AI エージェント親和性
HyperFrames の公式設計思想は「First-class（第一級市民として）AI エージェントをサポートする」です。Claude Code や Gemini CLI が直接 HTML を書いて動画を生成できる構造になっており、人間が書いたコードを AI が修正・拡張するのではなく、AI が最初から動画の「設計者」として機能することを想定しています。
Remotion は React コンポーネントという構造上、AI エージェントが生成する際に「Remotion 固有のコンポーネント体系」を理解させるプロンプト設計が必要になります。AI との連携が不可能なわけではありませんが、HyperFrames ほど自然ではありません。
軸 4: 出力形式
HyperFrames は MP4 / MOV / WebM を出力できます。Remotion は MP4 主体で、WebM などへの対応は設定次第です。出力形式の多様性は動画配信チャネルが複数ある企業では実務上の差になります。
軸 5: 想定ユースケース
HyperFrames の想定は「AI エージェントベースの動画量産」です。AI が動画を自動生成し、大量にバリエーションを出す用途に向けて設計されています。Remotion は「既存の React チームが大量の動画を生成する」用途、つまりエンジニアリングチームが動画制作パイプラインを構築する場面です。
どちらを選ぶかはチームの技術スタックによって変わる、というのが現時点の現実です。
どちらを選ぶべきか
AI エージェント中心の量産チームなら HyperFrames
Claude Code や Gemini CLI など AI エージェントを主役に動画を量産したいチームには、HyperFrames が明確に向いています。HTML/CSS さえ書けるリソースがいれば学習コストが低く、Apache 2.0 ライセンスでコスト試算もシンプルです。
「既製服（Remotion）ではなくパターン紙（HyperFrames）を選ぶ」という比喩が当てはまります。既製服は React というサイズで仕立てられており、その生態系に入ることが前提です。パターン紙は HTML/CSS という汎用素材から自分で組み立てる。AI エージェントはパターン紙の方が扱いやすい、という設計思想が HyperFrames の背景にあります。
既存 React チームなら Remotion
フロントエンドエンジニアが社内にいて、すでに React で開発している組織には Remotion が合います。既存のコンポーネント設計・状態管理・CI/CD パイプラインをそのまま動画生成に転用できるためです。
ARR 100 万ドルを達成した SaaS 事例が複数存在するという実績は、「ビジネスになる規模で動画量産を自動化できる」という証明です。動画 SaaS を立ち上げる開発者チームにとっては、Remotion のエコシステムはすでに機能します。
BtoB 動画運用に手を出したい経営層には
先月、VideoNext が支援する IR 担当の方と打ち合わせをしたとき、「決算説明会の動画を四半期ごとに外注で作り直しているが、毎回 50 万円かかる。それを変えられないか」という話が出ました。全拠点のオンボーディング動画を言語別に展開するコストも同様です。「変数を書き換えれば別バージョンが出力される」という HyperFrames の発想を聞いたとき、手応えを感じたのはその文脈です。
ただ本音を言えば、HyperFrames も Remotion も「エンジニアが動画の設計をコードで書く」という前提が崩れません。フロントエンドの知識がない動画担当者が明日から使い始められるツールではありません。両ツールが実用水準に達するには、社内に適切な技術スタックと担当者が必要です。この現実は、2026 年春時点では正直に伝えるべきだと考えています。
VideoNext 視点 — BtoB 動画運用への影響
「コードで動画を作る」潮流が BtoB 動画運用に与える影響を、VideoNext の視点から整理します。
最も大きな変化は、動画制作の役割が「作る人」から「設計する人」へ移行するという点です。動画 1 本を丁寧に仕上げる職人的スキルから、「どの変数を変えれば何百本のバリエーションが生まれるか」を設計する構造的スキルへ。
この変化を数字で裏付ける事例があります。ある欧州のマーケティングエージェンシーでは、AI を活用した動画制作の自動化によって 月 8 本から月 85 本（10.6 倍） にスケール、動画 1 本あたりのコストを 5,200 ドルから 720 ドル（86% 削減）、制作期間を 18〜22 日から 1〜2 日（92% 短縮） を達成しています。
この事例で使われたのは HyperFrames でも Remotion でもありませんが、「動画をデータとして量産する設計ができれば経営インパクトに直結する」という構造は同じです。
VideoNext として、この潮流をどう受け止めるか。
動画制作ツールが高度化し、AI エージェントが自動で動画を書くようになっても、「何を伝えるか」「誰に届けるか」「どのシーンで視聴者の意思決定を変えるか」という設計の問いは消えません。むしろ量産が容易になるほど、設計の質が差になります。
私が興味深いと感じるのは、HyperFrames が「LLM が HTML を学習データとして大量に持つ」という事実から出発して設計されている点です。これは技術的な判断ですが、その含意は「AI と人間が協働して動画を設計する」という未来への宣言でもあります。
VideoNext が支援したいのは、その「設計でつなぐ」部分です。ツールが何であれ、動画が本当に機能するためには設計が必要です。その設計パートナーとして、BtoB 動画運用に向き合っていきます。
まとめ — 2 つのフレームワークの立ち位置
HyperFrames と Remotion を整理すると、次のように言えます。
- HyperFrames: AI エージェント時代に向けて設計された、HTML ネイティブの動画フレームワーク。2026 年 4 月公開、Apache 2.0 完全無償、学習コストが低い。AI エージェントを主役に動画を量産したいチームに向く
- Remotion: 2021 年公開の実績ある React 動画ライブラリ。スター数 46,200 が示すエコシステムの厚み。既存 React チームや動画 SaaS を作りたい開発者に向く。従業員 4 名以上の営利企業は有料ライセンスが必要
- BtoB 動画運用担当者への示唆: どちらも「エンジニアが設計する」前提が伴う。エンジニアリングリソースがある組織では実用的。そうでなければ、AI 動画生成サービスやプロの支援を経由する方が現実的
「コードで動画を作る」という流れは止まりません。今後 AI エージェントの能力が上がるほど、HyperFrames が想定する「AI が動画の設計者になる」シナリオの現実味が増します。このカテゴリを早期に理解しておくことは、BtoB 動画運用の未来を考える上で意味があります。
VideoNext では、AI 動画の設計から制作・運用支援まで BtoB 企業向けにサービスを提供しています。「動画を量産したい」「コスト構造を見直したい」「IR・人材育成・営業 DX の動画運用を整えたい」という方は、まずお気軽にご相談ください。