HyperFramesで始めるHTMLから動画生成バイブコーディング

HyperFramesは動画版「バイブコーディング」の入口

コードを書くときにClaude CodeやCursorに「ここをこう直して」と話しかけながら進める作業、いわゆるバイブコーディングがすっかり当たり前になりました。けれども動画編集の世界では、長らくこの体験が成り立っていませんでした。Adobe Premiereを開いてマウスでタイムラインを動かす作業は、テキスト中心のAIエージェントにとっては触れない領域だったからです。

そこに登場したのがHeyGenのHyperFramesです。Apache 2.0ライセンスの完全なオープンソースで、HTMLとCSSとGSAPで動画コンポジションを書き、そのまま動画ファイルにレンダリングできます。公式が「Edit Videos By Vibe-Coding」と打ち出しているとおり、AIエージェントに動画の設計と実装を任せる前提で作られた基盤です。

おそらく多くの方は、最初に聞いたとき「HTMLで動画を作る奇抜なツールが出たんだな」と感じるはずです。私も最初はそう思いました。けれども調べていくうちに、これは奇抜さで終わる話ではないことが見えてきます。Hyperframesが本当に変えたのは「動画編集をAIが触れる形式に降ろした」という点で、その意味するところは想像以上に大きいです。

実際に、Hyperframesで「この記事の動画を作って」といって作ってもらった動画はこちらです。何も一切修正してないし、人間の手が加わってないのですが、まあまあな出来ではないでしょうか？

この記事ではHyperFramesの正体と使い方を、初めての方にも追えるかたちでまとめていきます。先に到達点を共有しておきますと、読み終わったあとには次のことが分かるはずです。

• HyperFramesがどんな仕組みで動画を作っているのか
• なぜAIエージェントとの相性が抜群にいいのか
• 最短どれくらいで自分の手元で1本作れるのか
• どんな種類の動画が現実的に作れて、どこは苦手なのか
• AIに何を任せ、人間が何を決めるべきなのか

バイブコーディングで動画を作る時代の入口が、特定のSaaSの中ではなくオープンソースで開いたこと自体が小さくない事件です。早速、その正体を覗いていきましょう。

HyperFramesの正体は「動画用のコンパイラ」

HyperFramesは「動画編集ソフト」ではありません。ここを取り違えると、なぜこれが面白いのかが伝わらなくなります。正確に言うと、HyperFramesは動画用のレンダリングエンジン、つまりコンパイラに近い存在です。HTMLというソースコードを書くと、それが決定的な動画ファイルとして出力されます。

もう少し具体的に見てみましょう。HyperFramesではHTML要素のひとつひとつが「クリップ」として扱われます。data-startやdata-duration、data-track-indexという属性をつけることで、その要素が動画上のどのトラックの何秒目に何秒間表示されるかが決まります。たとえば公式のQuickstartに出てくる最小コンポジションはこんな感じです。

<div id="root" data-composition-id="my-video"
     data-start="0" data-width="1920" data-height="1080">
  <h1 id="title" class="clip"
      data-start="0" data-duration="5" data-track-index="0">
    Hello, Hyperframes!
  </h1>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: -50, duration: 1 }, 0);
    window.__timelines = window.__timelines || {};
    window.__timelines["my-video"] = tl;
  </script>
</div>

このHTMLを書いてnpx hyperframes previewを打つと、ブラウザでライブプレビューが開きます。気に入ったらnpx hyperframes render --output output.mp4でMP4として書き出されます。これだけです。中ではヘッドレスChromeがフレームごとにシーク再生し、PNGをFFmpegに流し込んで動画にしています。フレーム単位で「いま何秒目か」をChromeに指示できる仕組みなので、何度実行しても同じ出力になる決定的レンダリングが成立します。

ここがおそらく一番大事なポイントだと思っています。動画が決定的にビルドできるということは、動画がGitで管理できる資産になるということです。コードと同じようにdiffを見て、PRでレビューして、CIで毎週リビルドできます。動画が「成果物」から「ビルドできる資産」に変わる、という話です。

似た発想のフレームワークにRemotionがありますが、こちらはReactで動画を書くスタイルです。HyperFramesはReactを使わずHTMLとCSSとGSAPで完結します。React経験がない人も、既存のHTMLやCSSの資産があるチームも、ビルド工程なしですぐ手を動かせます。ライセンスの面でもHyperFramesはApache 2.0でフルにオープンソースで、Remotionは一定規模以上で有料になるソース公開モデルです。商用利用や再配布で気を遣いたくない場面では、Hyperframesは選びやすい選択肢になります。

動画をコンパイル可能な資産として扱う、という視点を一度持つと、Hyperframesの先にある景色が一気に広がります。次は、なぜこの設計がAIエージェントとそんなに相性がいいのかを見ていきます。

AIエージェントと相性がいい理由

冒頭で「動画編集ソフトはAIにとって触れない部屋だった」という話をしました。なぜHyperFramesではそれが成立するのかを、もう一段降りて整理してみます。

まず、LLMはHTMLを読み書きするのが本職です。学習データの大半がHTMLとJavaScriptで埋まっているので、AIにとってHTMLは母国語みたいなものです。Hyperframesが動画の構造をHTMLとデータ属性で定義しているということは、動画編集を「AIが触れる形式に降ろした」と言い換えられます。これはおそらくHyperFramesの設計思想の核です。

しかしHTMLが書けるからといって、AIが正しい動画コンポジションを書けるわけではありません。class="clip"をつけ忘れる、data-startを書き忘れる、GSAPのtimelineを{ paused: true }で作り忘れる。こういう細かい約束事を外すと、レンダリング時に動画が動かなくなります。Hyperframesはここにskillsという仕組みを用意しました。

skillsは、AIエージェント向けのコンテキストパックです。一度インストールすれば、Claude CodeやCursor、Gemini CLI、Codex CLIにHyperframes特有のパターンを覚えさせられます。コマンドはひとつだけです。

npx skills add heygen-com/hyperframes

これを実行すると、AIエージェントが「/hyperframesコマンドが呼ばれたらコンポジション作成のskillを読み込む」という挙動を覚えます。Claude Codeの場合は/hyperframes、/hyperframes-cli、/gsapの3つがスラッシュコマンドとして登録され、URLと動画リクエストが揃ったときには/website-to-hyperframesが自動で呼ばれます。

ここがバイブコーディングで動画が成立する仕掛けです。skillsには、HTMLコンポジションの正しい書き方、GSAPアニメーションの推奨パターン、CLIコマンドの使い分け、字幕とTTSの組み立て方、トランジションの選び方など、ジェネリックなWeb文書には書かれていないHyperframes固有の知識が詰まっています。これは料理で言えばレシピ本ではなく、その家のキッチンの使い方を教えてくれるノートに近いです。

実際のClaude Codeでのプロンプトは、たとえばこんな具合です。

> /hyperframes を使って、10秒の製品紹介動画を作ってください。背景は暗めで、タイトルがフェードインして、最後にCTAが出てくる構成でお願いします。

このプロンプトひとつで、AIエージェントはskillsを読み込み、index.htmlのスケルトン作成、GSAPによるアニメーション実装、window.__timelinesへの登録、プレビューコマンドの実行までを一気にこなします。私たちは「もう少しタイトルを大きく」「フェードアウトを足して」と話しかけるだけで、動画が育っていきます。これはまさに動画版のバイブコーディングと呼べる体験です。

次は実際に手を動かして、自分の手元で1本目の動画を出すまでの最短ルートを見てみましょう。

最短で1本作る使い方

ここからは、自分の手元でHyperFramesを動かす最短ルートを順番に見ていきます。事前に用意しておくのはたった2つです。

• Node.js 22以上
• FFmpeg（動画エンコード用）

Quickstartに書かれているとおり、Macの場合はHomebrewでbrew install ffmpeg、Node.jsはnodebrewやnvmでバージョン22以上を入れておけば大丈夫です。チェック用にnpx hyperframes doctorという診断コマンドも用意されていて、こちらを叩くと必要なものが揃っているかをまとめて確認できます。

ステップ1: skillsを入れる

どこか作業用のディレクトリで、まずskillsを入れます。

npx skills add heygen-com/hyperframes

これでClaude CodeやCursor、Codexがスラッシュコマンド経由でHyperFramesの作法を理解できるようになります。一度入れればセッションをまたいで残るので、毎回入れ直す必要はありません。

ステップ2: プロジェクトを作る

次にHyperFramesプロジェクトのひな型を作ります。手で起動する場合はこうです。

npx hyperframes init my-video
cd my-video

対話式のウィザードが立ち上がり、テンプレートや初期メディアの取り込みを案内してくれます。CIや非対話で進めたいときは--non-interactive --example blankをつければスキップできます。生成されるディレクトリは次のようなシンプルな構成です。

• meta.json: プロジェクトのメタ情報
• index.html: 動画の入口になるルートコンポジション
• compositions/: サブコンポジションを置く場所
• assets/: 動画や音声、画像などのメディア

 

ステップ3: AIエージェントに依頼する

ここからが本題です。プロジェクトディレクトリでClaude CodeやCursorを開き、こんなふうに話しかけてみます。

> /hyperframesを使って、10秒の製品紹介動画を作ってください。タイトルが上からフェードインで現れて、背景に薄いグラデーションが動いて、最後にCTAボタンがバウンドする感じでお願いします。

AIエージェントは内部的にskillsを読み込み、index.htmlを編集してくれます。GSAPのtimelineをwindow.__timelinesに登録し、class="clip"を必要な要素につけ、data-startとdata-durationを整えるところまで自動です。Hyperframesが用意した50以上のブロックやコンポーネント（ソーシャルオーバーレイ、シェーダートランジション、データチャートなど）を組み合わせるよう促せば、npx hyperframes add flash-through-whiteのような形で部品を追加してくれることもあります。

ステップ4: ブラウザでプレビューする

書きあがったらプレビューしてみます。

npx hyperframes preview

ブラウザでHyperframes Studioが開き、HTMLファイルを編集すると即座に反映されます。ホットリロードがあるので、AIに「もうちょっとタイトル大きくして」と頼んだら、保存と同時に画面上で動画が更新されていきます。気になるところはここでどんどん直します。

ステップ5: MP4として書き出す

プレビューでOKだったら、いよいよ書き出しです。

npx hyperframes render --output output.mp4

出力にはこんな表示が出ます。

✔ Capturing frames... 150/150
✔ Encoding MP4...
✔ output.mp4 (1920x1080, 5.0s, 30fps)

--qualityをdraft、standard、highから選べたり、ファイルサイズを抑えたいなら--video-bitrate 10Mを指定したり、CIでの再現性を高めたいなら--dockerをつけてDocker内でレンダリングしたりと細かい調整も効きます。最初のうちはデフォルトのstandardで十分です。

ここまでで、自分の手元で動画が1本できあがります。コードはGitに入れておけば、あとから「ここをこう変えたい」とAIに頼むたびに、過去の動画と差分が見える状態で改善を続けられます。次は、この仕組みで実際にどんな動画が作れるのかを類型でまとめていきます。

バイブコーディングで作れる動画の5類型

仕組みが分かると、次に気になるのは「結局どんな動画が作れるのか」だと思います。HyperFramesはどんな映像でも作れる万能ツールというわけではなく、向いている領域がはっきりしています。公式ドキュメントのWebsite to VideoやGitHubリポジトリ、外部の活用事例から見えてくる得意ジャンルを5つに整理してみました。

1. 製品紹介・ランディングページ動画

もっとも相性がいいのがこのタイプです。ヒーローコピー、製品UI、特徴3点、CTAという「型」が決まっているので、AIに構成を任せやすいからです。HyperFramesは公式のWebsite to Videoとしてこの領域をはっきり狙っています。

想定シーンとしては、新製品ローンチの25秒動画、SaaSの機能紹介、AIツールやノーコードツールのプロモ、採用ページのカルチャー紹介などです。LP作成と同時にX用の動画を一緒に作ってしまう、という使い方もできます。

2. データ可視化・レポート動画

CSVや数表をアニメーション付きのチャート動画にする使い方も得意です。READMEでも明示的に挙げられているユースケースで、Catalogにはdata-chart系のブロックも揃っています。

たとえば月次のKPIレポート、マーケティング実績まとめ、決算ハイライト、アンケート結果の短尺解説などです。これらは毎回Premiereで作るのは骨が折れる定型作業なので、Hyperframesに置き換えると効果が大きいです。データを差し替えれば動画ごと再ビルドできるので、毎月の運用がぐっと軽くなります。

3. GitHub・技術解説動画

エンジニア向けの動画も射程に入ります。実際に外部プロジェクトのagno-agi/vibe-videoは、自然言語からモーショングラフィックス動画を作るマルチエージェントチームを構築していて、HyperFramesを裏側で使っています。GitHubリポジトリを渡すと内容を読み解き、解説動画にまで仕上げる発想です。

OSSの紹介動画、新機能リリースの説明動画、アーキテクチャ概説、APIチュートリアルといった用途に、ぐっと敷居が下がります。テックブログの記事を書くついでに紹介動画も作る、という運用が現実的になってきます。

4. 縦型ショート動画

9:16のTikTok・Reels・Shorts向けの動画もユースケースとして公式に挙げられています。Quickstartには次のようなプロンプト例が載っています。

> Make a 9:16 TikTok-style hook video about [topic] using /hyperframes, with bouncy captions synced to a TTS narration.

テンポ速めの3つのポイント解説、SNS用ニュース要約、アプリ紹介ショート、商品レビューの字幕付き動画など、いわゆる「1シーン1メッセージ」の型がはまる動画です。AIに「字幕は大きめ」「テンポ速め」と伝えるだけで雰囲気が決まるので、量産にも向きます。

5. ナレーション付きexplainer動画

Website to Videoのパイプラインにはvoiceover生成が組み込まれていて、TTSと字幕同期もカバーされています。これを応用すると、教材動画、サービスのonboarding動画、プレゼンの自動動画化、ブログ要約動画なども作れます。

人が話すスタイルの動画は撮影と編集の負担が重い領域でしたが、HyperFramesに任せれば、原稿を渡すだけで自動的にナレーションと字幕付きの解説動画になります。教育コンテンツやドキュメンタリー風の動画を量産する基盤として、このあたりは特に化けるポイントだと感じています。

さて、これだけ並ぶと「自分の業務でも何か当てはまるかも」と感じる方もいるのではないでしょうか。次のセクションでは、これらの動画を一気通貫で作れる「Website to Video」というパイプラインを覗いてみます。

Website to Videoで体験する一気通貫パイプライン

HyperFramesでいちばん「未来感」を味わえるのが、Website to Videoというパイプラインです。やっていることはシンプルで、AIエージェントにURLと方向性をひとこと渡すだけで、動画が出来上がります。たとえばこんなプロンプトです。

> Create a 25-second product launch video from https://example.com. Bold, cinematic, dark theme energy.

これを受けたAIエージェントは、Hyperframesのskillsを読み込み、内部で7つのステップを順番に進めます。

1. Capture: サイトをスクリーンショットしつつ、デザイントークン、フォント、画像、アニメーションを抽出する
2. Design: ブランドの色、タイポグラフィ、do/don’tをまとめたDESIGN.mdを生成する
3. Script: フック、ストーリー、根拠、CTAというナレーション原稿をSCRIPT.mdに書き出す
4. Storyboard: ビートごとのムード、素材、アニメーション、トランジションをSTORYBOARD.mdにまとめる
5. VO + Timing: TTSでナレーション音声を作り、単語単位のタイムスタンプを得る
6. Build: ビートごとにアニメーション付きHTMLコンポジションを書く
7. Validate: スナップショットPNGで構成を検証する

ここで面白いのは、各ステップの成果物がそのままファイルとして残る点です。途中で「ストーリーボードのビート2をもっとエネルギッシュにしてほしい」と頼めば、その部分だけ書き直してくれます。AIに丸投げではなく、要所で人間が手を入れるための余地が設計されています。

プロンプトの方向性で雰囲気が変わる

HyperFramesのプロンプトは、長さよりも方向性のほうがはるかに大事です。公式ガイドにある例をそのまま借りると、こんな指示の仕方ができます。

• 15秒のInstagramリール、テンポ速め、カット多め
• 25秒の製品ローンチ、Appleのキーノート風
• 45秒の機能ツアー、上位3機能を紹介
• 10秒のティーザー、超ミニマル、フックだけ
• 20秒のブランドリール、デザインを称えるトーン

動画タイプを指定するよりも、「Apple keynote energy」や「playful, hand-crafted feel」のようなクリエイティブな方向性を渡したほうが、AIは絵コンテに反映しやすいです。これは普段のClaude Codeとのやり取りに通じる感覚で、要件を箇条書きにするより、雰囲気を比喩で伝えたほうが伝わるのと同じです。

Geminiを足すと描写の解像度が上がる

Website to Videoは、デフォルトではDOMの文脈（alt属性、近くの見出し、CSSクラス）から素材を説明します。そこにGemini APIキーを加えると、Vision API経由で画像の中身までAIが読み取れるようになります。.envにGEMINI_API_KEY=your-key-hereを書くだけで切り替わります。

たとえばGeminiなしだと「hero-bg.png — 582KB, section: “Hero”」のように位置情報しか分かりませんが、Geminiありだと「紫と青のグラデーション波が暗い背景を横切り、オーロラのような効果を作っている」というところまで描写されます。AIが絵コンテを書くときの判断材料が増えるので、出来上がる動画の質感が変わってきます。料金は有料枠で1枚あたり0.001ドル程度、40枚キャプチャするサイトで約0.04ドルなので、コストもほぼ気になりません。

イテレーションは部分書き換えで

出来上がったストーリーボードに対して全部やり直す必要はありません。STORYBOARD.mdの特定のビートだけ書き換えてAIに「ここだけ作り直して」と頼めば、対応するcompositions/beat-3-proof.htmlだけ更新されます。動画がコードでできているからこその身軽さです。普通の動画編集だと「修正のたびに全体を見直さなきゃ」とため息が出るところですが、ここは大きな違いになります。

Website to Videoの体験に一度触れると、「動画は1本ずつ手で作るもの」という感覚が少しずつ書き換わっていきます。とはいえ、丸投げで全部うまくいくほど甘くもありません。次は、Hyperframesを実際に使いこなすための役割分担の話に進みます。

使いこなしの本質は「役割分担」

HyperFramesを触っていると、「これ全部AIに任せれば動画ができるんでしょ」という期待を抱きがちです。実際8割くらいまではそうなのですが、最後の2割を人間が詰めないと、どこかで見たような平凡な動画にしかなりません。使いこなしの本質は、人間とAIの役割分担を意識することにあります。

どう分けるかというと、私の中では3つのレイヤーに整理しています。

人間が最初に決めるもの

これは、ツールに頼っても答えが出ないものです。

• 誰に届けたい動画なのか
• 何秒で終わらせるか
• 何を見せて何を捨てるか
• どんな感情を起こしたいか
• ブランドのトーンや守りたい一貫性

ここがブレていると、AIが上手に絵を作ってくれても、出来上がる動画は焦点がぼやけたものになりがちです。逆にここが定まっていれば、AIに渡すプロンプトが一気にシャープになります。「30代エンジニア向け、20秒、無駄を省いた構成、感情はワクワクと安心感、ブランドカラーはダーク基調」と言えれば、もう半分は決まったようなものです。

AIに任せるもの

人間が決めた方向性が固まったら、ここからはAIの出番です。

• HTMLコンポジションの初稿
• GSAPアニメーションの実装
• テキストの分割と字幕配置
• 背景・オーバーレイ・トランジションの組み合わせ
• データからの説明構成
• ボイスオーバーと字幕同期

この部分は、人間がイチから手を動かすと膨大な時間がかかります。HyperFramesのskillsに従ってAIが書く初稿は、最初から動く水準で出てきます。ここで時間を稼げるからこそ、人間は方向性の設計と最後の磨きに集中できます。

最後に人間が詰めるもの

ここが、いちばん見落とされがちで、いちばん差がつくところです。

• タイミングの微調整（0.2秒早める、0.5秒残す）
• 文字の読みやすさ（視線が追えるか）
• テロップの量と密度（情報を詰めすぎていないか）
• 画面のノイズ削減（要素を1つ消すだけで化けることが多い）
• 強弱のメリハリ（いちばん見せたいシーンが本当に立っているか）

このレイヤーはAIが苦手としているところです。タイミング感覚や情報密度の判断は、視聴者の視線の動きや感情の流れに依存していて、まだAI単独では掴みきれないと感じます。HyperFramesがStudioとTimelineエディタを持っているのも、ここを人間が補うためだと思います。実際、TimelineをドラッグするとプレビューがリアルタイムにアップデートされるUIが用意されていて、AIが苦手なタイミングを直接調整できます。

80%/20%の運用が現実的

結局のところ、HyperFramesでよい動画を作るコツは「80%はAI、最後の20%は人が審美眼で詰める」運用に慣れることです。これはコードのバイブコーディングとほぼ同じ感覚で、AIに大枠を書かせて、人間がバグや読みやすさを調整するのに似ています。

もう一歩踏み込んだ視点として、この役割分担はチームでも応用できます。たとえばマーケターがブランドトーンと構成を決め、エンジニアやAIが実装を担当し、編集経験のあるメンバーが最後のタイミング調整を入れる、という流れです。これまでは編集者が一人で抱えていた工程を、複数の役割で分担できるようになる、というのはチームでの動画制作のあり方を変えていく可能性があります。

ここまで来ると、いいことばかりに聞こえると思いますが、当然苦手な領域もあります。次は、HyperFramesが向いていない用途と、最後のまとめに進みましょう。

向いていない領域と、これからのまとめ

ここまで読んでくださった方は「HyperFrames、すごく便利そうだな」と感じてくれたかもしれません。とはいえ正直に書いておくと、HyperFramesは万能の動画ツールではありません。むしろ向いていない領域がはっきりしている分、向いている領域での威力が際立つ、というのが正確な姿です。

苦手な領域

Video as Codeの解説記事でも触れられているとおり、HyperFramesは動画エディタではなくレンダリングエンジンです。次のような用途には向きません。

• 完全に感覚頼みの映画的編集
• 複雑な実写の細かい尺調整やカラコレ
• 高度な3D演出が中心の作品
• 手触り重視の職人的なモーショングラフィックス
• 大量の素材を人間がフレーム単位で詰める案件

このあたりはAfter EffectsやDaVinci Resolveのほうが圧倒的に強いです。HyperFramesはあくまで「構造化できる動画」を、開発者とAIが共同で量産するための基盤です。映像作家の感性を全面に出したい作品づくりには、別の道具が向いています。

それでもこの記事で一番伝えたいこと

苦手な領域があるとはいえ、HyperFramesが本当に面白いのは、動画を「コンパイル可能な資産」として扱える世界を、オープンソースで実装してきたところだと感じています。動画がHTMLとCSSとGSAPで書けるということは、次のような未来がふつうに視野に入ります。

• 動画テンプレートをnpm packageとして配布する
• ブログ記事のCIパイプラインで動画も毎回ビルドする
• データベースの更新フックで動画を自動更新する
• GitHubリポジトリのREADMEに動的な紹介動画を埋め込む
• A/Bテストのために、パラメータだけ変えて何百本も動画を生成する

外部プロジェクトのagno-agi/vibe-videoが示しているとおり、自然言語から動画を作るマルチエージェントの実装も現実に動いています。動画が「制作するもの」から「生成されるもの」へ移っていく流れは、これからの数年で加速していくはずです。

月曜日からできること

読み終わったらそのまま放置、ではもったいないので、月曜日から手を動かせる小さな一歩を提案させてください。

1. 自分の業務で「定型化できる動画」を3つ書き出す（KPIレポート、プロダクト紹介、リリースノートなど）
2. Node.js 22とFFmpegを入れて、npx skills add heygen-com/hyperframesを実行しておく
3. Claude CodeかCursorで、その3つのうちの1つを「/hyperframesを使って20秒の動画にしてください」と頼んでみる

これだけで、動画制作の負担を一段階軽くする入口に立てます。出来上がった動画を見て「もっとここをこうしたい」と感じたら、それは人間にしか分からない方向性のヒントです。AIに渡せばすぐに反映されます。

バイブコーディングで動画が作れる、という言葉が比喩ではなく現実になっています。HyperFramesはその扉を、特定のSaaSではなくオープンソースの形で開いてくれました。動画を「成果物」から「ビルドできる資産」に変えていく流れに、自分のチームも乗っかってみる価値は十分あると思います。さあ、あなたの業務ではどの動画から自動化を始めましょうか。