Blog

HyperFramesでAIエージェントを使って動画編集する方法

Ashley Innocent

Ashley Innocent

17 4月 2026

HyperFramesでAIエージェントを使って動画編集する方法

Apidog エンタープライズ

オンプレミスデプロイ

SSO & RBAC

SOC 2 準拠

Apidog Enterpriseを見る

要約

AIエージェントはコードを書き、APIを呼び出し、多段階のワークフローを実行できます。しかしこれまで、彼らに欠けていた能力が一つありました。それは動画編集です。After EffectsやDaVinci Resolveのようなプロフェッショナルなツールは、レイヤー化されたタイムラインやJSONシーングラフを使用しており、LLMはそれらでトレーニングされていませんでした。HeyGenの新しいオープンソースプロジェクトである**HyperFrames**は、このアプローチを逆転させます。AIエージェントがHTML、CSS、JavaScriptを使用して動画を構成し、その結果をMP4、MOV、またはWebMとしてレンダリングできるようにします。これをClaude Codeスキルとして1つのコマンドでインストールするだけで、あなたのエージェントは動画エディターになります。

はじめに

動画は、ウェブ上で最も魅力的なコミュニケーション形式です。AIエージェントが作成できる他のすべてのメディア（テキスト、コード、画像、グラフ）には明確なツールチェーンがあります。動画にはそれがありませんでした。

Sora、Veo、またはRunwayを使って、モデルにフルクリップを生成するよう促すことはできますが、そのアプローチには限界があります。プロンプトから単一のモノリシックな動画が生成されるだけです。それを構成することはできません。モーショングラフィックスを繰り返したり、特定のブランドアニメーションを重ねたりすることはできません。エージェントに「シーン3をよりゆっくりフェードインするようにやり直して」と指示することはできません。

HeyGenは、このギャップを埋めるために2026年4月17日にHyperFramesをリリースしました。エージェントに従来の動画ソフトウェアを教える代わりに、エージェントがすでに知っているフォーマットであるHTMLを与えました。このガイドでは、それがどのように機能するのか、このアプローチがなぜ理にかなっているのか、そしてあなた自身のエージェントが動画を編集できるように設定する方法を説明します。

動画を生成するAPI駆動のエージェントワークフローを構築している場合、オーケストレーションレイヤーもテストしたいと思うでしょう。Apidogがどのように適合するかについては、最後に説明します。

button

AIエージェントがこれまで動画を編集できなかった理由

従来の動画編集ツールはエージェントのために作られたものではありません。タイムラインをクリックする人間のために作られていました。

具体的な3つの障壁:

タイムラインベースのUIはコードにマッピングされない。After Effects、Premiere、DaVinci Resolveは、プロジェクトを独自のバイナリ形式または深くネストされたJSONシーングラフとして保存します。エージェントがこれらのファイルを読み取れたとしても、セマンティックな空間は狭いです。これらの形式のモデルの重みに関するトレーニングデータはほとんど存在しません。

モーショングラフィックスには視覚的思考が必要。アニメーションのキーフレーミング、イージングカーブ、レイヤー合成は通常、目視で行われます。エージェントにはプレビューウィンドウがありません。動きについて推論するために、テキストファーストの抽象化が必要です。

ツールは人間の操作者を前提としている。レンダリングパイプライン、プラグインエコシステム、コーデックの選択はすべてUIメニューの背後にあります。スクリプトを介してそれらを自動化することは限られたケース（例えばAfter EffectsのExtendScript）で機能しますが、APIは狭く脆弱です。

結果として、エージェントはffmpegを呼び出し、クリップを結合し、基本的なフィルターでテキストを重ねるスクリプトは書けました。それ以上は人間が必要でした。

動画のためのHTMLの洞察

HeyGenのチームは異なる観察をしました。LLMは数十億ページに及ぶHTML、CSS、JavaScriptでトレーニングされています。彼らは数十万ものGSAPアニメーション、SVGコンポジション、Canvas実験、Lottieファイルを見てきました。ウェブは彼らのトレーニングデータの中で最大のクリエイティブメディアです。

フロンティアモデルに視覚的に豊かなアニメーションを生成するように求めると、HTMLを流暢に書きます。モデルは以下の方法を知っています:

エディターが必要とするすべての視覚的プリミティブは、すでにブラウザに存在します。不足していたのは、HTMLシーンのタイムラインをレンダリングされた動画ファイルに変換することでした。

それがHyperFramesが行うことです。名前が示す通り、HTMLは動画フレームになります。HyperFrames。

HyperFramesの仕組み

HyperFramesは、標準的なHTMLに少数のdata-属性を追加します。これらの属性は動画のタイムラインを定義します。それ以外はすべてプレーンなウェブコードです。

コア属性:

属性 目的
data-composition-id 動画構成の一意のID
data-width / data-height ピクセル単位の出力解像度
data-start シーンの開始時刻（秒単位）
data-duration シーンの持続時間（秒単位）
data-track-index シーンが重なる場合のレイヤー順序

エージェントは通常のHTMLファイルを記述します。HyperFramesはデータ属性を読み取り、ヘッドレスブラウザでページを実行し、ターゲットフレームレートでフレームをキャプチャし、FFmpegで出力をエンコードします。

それだけです。新しいDSLも、シーングラフも、キーフレームエディタもありません。アニメーションはGSAPタイムラインまたはCSSアニメーションの中に存在し、モデルがすでに生成するコードとまったく同じです。

最小限の例

以下は、70行未満のHTMLで構成された5秒間の動画構成です。2つのシーンがあります。タイトルカードがフェードインし、その後クロージング画面にぼかしクロスフェードします。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
  <style>
    body { margin:0; width:1920px; height:1080px; overflow:hidden; background:#0D1B2A; }
    .scene { position:absolute; inset:0; width:1920px; height:1080px; overflow:hidden; background:#0D1B2A; }
    #scene2 { z-index:2; opacity:0; }
    .s1 { display:flex; flex-direction:column; justify-content:center; padding:120px 160px; gap:20px; }
    .s2 { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:100px 160px; gap:32px; }
  </style>
</head>
<body>
  <div id="root" data-composition-id="hyperframes-intro"
       data-width="1920" data-height="1080" data-start="0" data-duration="5">
    <div id="scene1" class="scene">
      <div class="s1">
        <div class="s1-title">HTML is Video</div>
        <div class="s1-sub">Compose. Animate. Render.</div>
      </div>
    </div>

    <div id="scene2" class="scene">
      <div class="s2-title">Start composing.</div>
    </div>
  </div>
  <script>
    window.__timelines = window.__timelines || {};
    const tl = gsap.timeline({ paused: true });

    // Scene 1: title entrance
    tl.from(".s1-title", { x:-40, opacity:0, duration:0.5, ease:"power3.out" }, 0.25);
    tl.from(".s1-sub", { y:15, opacity:0, duration:0.4, ease:"power2.out" }, 0.5);

    // Blur crossfade transition
    const T = 2.2;
    tl.to("#scene1", { filter:"blur(8px)", scale:1.03, opacity:0, duration:0.35, ease:"power2.inOut" }, T);
    tl.fromTo("#scene2",
      { filter:"blur(8px)", scale:0.97, opacity:0 },
      { filter:"blur(0px)", scale:1, opacity:1, duration:0.35, ease:"power2.inOut" }, T + 0.08);

    window.__timelines["hyperframes-intro"] = tl;
  </script>
</body>
</html>

注目すべき点が2つあります。

  1. アニメーションロジックは純粋なGSAPです。GSAPチュートリアルを見たことのあるモデルであれば、このようなタイムラインを記述できます。
  2. HyperFramesのオーバーヘッドはごくわずかです。ルート要素にいくつかのdata-属性があるだけです。他には何もありません。

このファイルをレンダリングすると、アニメーションの1920x1080のMP4が得られます。テキストを変更したり、色を変更したり、フォントを交換したり、ロゴを追加したりできます。ファイル全体はプレーンなHTMLです。

エージェントが実際に使用できるもの

レンダリングパイプラインは実際のブラウザであるため、あらゆるウェブ技術が機能します。

ラッパーも、プラグインアーキテクチャも、学ぶべきフレームワークもありません。エージェントはすでに知っているものを使用します。

1つのコマンドでエージェントに動画編集機能を与える方法

HyperFramesはClaude Codeスキルとして提供されています。Claude Codeを使用している場合、インストールは単一のnpmコマンドです。

npx skills add heygen-com/hyperframes

これにより、HeyGenのGitHubリポジトリからスキルが取得され、ツールチェーンがインストールされ、Claude Codeに動画編集機能が登録されます。

インストール後、エージェントに自然にプロンプトを送信します。

新しいAPIのための10秒間の製品説明動画を作成してください。
暗いグラデーションの背景から始め、製品名を下からフェードでスライドアップさせ、
次にアイコン付きの3つの箇条書きに切り替え、最後にコールトゥアクションカードで終えてください。

エージェントはHTMLを記述し、ローカルプレビューを実行し、最終的なMP4をレンダリングします。APIキーも、外部サービスも不要です。すべてがあなたのマシンで実行されます。

Claude Codeなしでセットアップする

HyperFramesはフレームワークに依存しません。シェルコマンドを実行し、ファイルを読み取ることができる任意のエージェントから呼び出すことができます。

リポジトリをクローンします。

git clone https://github.com/heygen-com/hyperframes
cd hyperframes
npm install

構成ファイルをレンダリングします。

npx hyperframes render my-video.html --output my-video.mp4

ローカルでプレビューします。

npx hyperframes preview my-video.html

プレビューコマンドはブラウザウィンドウを開き、そこでタイムラインをスクラブして、完全なレンダリングを行う前にフレームごとの精度を確認できます。

これが開発者にもたらすもの

いくつかのユースケースがすぐに開拓されます。

自動化された製品マーケティング。エージェントはリリースノートをプルし、シーンごとのHTMLを生成し、レンダリングをCDNに公開できます。人間がタイムラインに触れることなく、すべてのリリースで動画が作成されます。

パーソナライズされた動画応答。APIウェブフックがエージェントをトリガーし、ユーザーイベントごとにパーソナライズされたクリップをレンダリングします。ウェルカム動画、領収書、マイルストーンのお祝いなど、すべてオンデマンドで生成されます。

データストーリーテリング。エージェントにメトリックを提供します。エージェントはHyperFramesシーンにラップされたD3ビジュアライゼーションを記述します。出力は、ダッシュボードのナレーション付きウォークスルーで、四半期ごとに自動的に更新されます。

ポッドキャストまたは長尺コンテンツ用の動的Bロール。エージェントはトランスクリプトを読み取り、各キーポイントを説明するモーショングラフィックスを生成し、それらを音声の上に重ねます。

APIドキュメント動画。OpenAPI仕様を解析し、アニメーション化されたリクエスト/レスポンス図を含むエンドポイントウォークスルーを生成し、共有可能なクリップとしてエクスポートします。

Apidogでのエージェントオーケストレーションのテスト

HyperFramesはレンダリングステップを処理します。上流のすべてはオーケストレーションです。つまり、エージェントループ、ツール呼び出し、LLM APIリクエスト、およびどの入力からどのような動画を生成するかを決定するロジックです。

プロダクションで問題が発生するのはここです。不正なツールペイロード、タイムアウトしたAPIリクエスト、誤ったtool_use_id参照、または不一致のメッセージスキーマは、単一のフレームがレンダリングされる前に動画パイプラインを停止させます。

Apidogは、HyperFramesがカバーしない部分のテスト環境を提供します。

LLMエンドポイントをモックする。エージェントが期待する正確なスキーマを持つダミーのClaudeまたはOpenAIエンドポイントをApidogで構築します。実際のAPIコストが発生する前に、不正な応答や遅延した応答にパイプラインがどのように反応するかをテストします。

ツール使用ペイロードを検証する。エージェントが外部API（アセット取得、ストック映像検索、ブランドキット取得など）を呼び出す場合、それらのエンドポイントをApidogでセットアップし、テストシナリオにチェーンします。エージェントのツール呼び出し構造がAPIと一致することを確認してから、エンドツーエンドで実行します。

トークン消費量を追跡する。Claude Opus 4.7は、Opus 4.6よりも最大35%多くのトークンを生成する新しいトークナイザーを使用しています。豊富なCSSと200行のJavaScriptを含む動画構成は小さくありません。Apidogの使用状況追跡は、コストに驚く前にプロンプトのサイズを把握するのに役立ちます。

マルチターンエージェントフローをデバッグする。完全な動画レンダリングには、多くの場合5〜10のLLMターン（動画の計画、シーンの草稿、タイミングの修正、アニメーションの修正、最終化）が必要です。Apidogを使用すると、正確な会話を再生して、エージェントがどこで脱線したかを見つけることができます。

button

哲学的な議論

HeyGenのチームは、「HTMLはエージェントが生成する動画にとって便利なフォーマットである」というよりも強力な主張をしています。彼らはHTMLが動画の未来にとって適切なフォーマットであると信じています。

その推論は理にかなっています。従来の動画は、Adobe、Blackmagic、そして少数のコーデックベンダーによって管理される独自のフォーマットの中に閉じ込められています。HTMLはオープンで標準化されており、バージョン管理可能で、検索可能であり、地球上のあらゆるテキストツールで編集できます。

HTMLベースの動画が交換フォーマットになれば、動画は次のようになります。

これらはすべて理論的なものではありません。これらの特性はすべてブラウザですでに機能しています。HyperFramesは、ブラウザネイティブコンテンツを実用的な動画ソースにするための橋渡しです。

知っておくべき制限事項

HyperFramesはバージョン1です。いくつかの実際の制約があります。

これらはどれも決定的な問題ではありませんが、プロダクションパイプラインを構築する場合は考慮に入れてください。

開始チェックリスト

今すぐHyperFramesを試したい場合:

結論

AIエージェントは何年も前からコードを書くことができていました。これまで、動画編集は、人間が関与する必要がある最後の主要なクリエイティブ領域でした。HyperFramesは、エージェントがすでに作業しているHTML、CSS、JavaScriptに合わせることで、その依存関係を取り除きます。

このアプローチは、一文で説明できるほどシンプルでありながら、放送品質のモーショングラフィックスを生成できるほど柔軟です。動画を成果物として必要とするあらゆるもの（マーケティング自動化、パーソナライズされたコンテンツ、データストーリーテリング、エージェント主導のドキュメント作成）を構築している場合、HyperFramesはあなたのスタックに不可欠です。

その周囲にあるAPIおよびオーケストレーションレイヤーについては、スケールする前にApidogでエージェントの会話、ツール呼び出し、LLMリクエストをテストしてください。APIリクエストの失敗はMP4としてレンダリングされません。

ApidogでAPIデザイン中心のアプローチを取る

APIの開発と利用をよりシンプルなことにする方法を発見できる

無料会員登録ダウンロード