HyperFramesはHeyGenのオープンソース・フレームワークで、HTML・CSS・アニメーションをMP4動画に変換します。Webページを書いて動画としてレンダリングする方法、モーショングラフィックスの民主化から誰が得をするのか、そして本当の限界を解説します。

HTMLを書いて動画を作る：HyperFramesがAfter Effectsを開いたこともない人にもモーショングラフィックスを開く方法

Leandro · Diario para Emprendedores

20年の間、テキストをきちんとしたアニメーションで画面に入れるには、高価なライセンスと数ヶ月の学習曲線という2つのコストがかかっていました。After Effectsは真面目なツールでした—今もそうです。しかし、それもまた守られた扉でした。レイヤー、マスク、エクスプレッション、プリコンポーズを知らなければ、アイデアは頭の中に留まり、他の5000人とまったく同じ見た目のCanvaテンプレートで終わるか、それだけでした。

その扉は開き始めています。そして、その理由の最も明確な例のひとつがHyperFramesです。

HyperFramesとは、一言で

HeyGenによるオープンソースのフレームワークで、HTML・CSS・アニメーションをMP4ファイルに変換します。キャッチコピーがどんな説明よりもよく表しています：「Write HTML. Render video. Built for agents.」

Webページを書きます。各要素がいつ始まり、どれだけ続くかを教える属性をいくつか追加します。コマンドを実行すると動画が出ます。

重要なのは技術的な新しさではありません——Remotionが何年も前からReactで似たことをしているからです。重要なのは、誰のために扉を開くかなのです。HTMLとCSSは地球上で最も教えられている言語です。そしてより重要なことに、AIエージェントが何よりも得意に書く言語でもあるのです。

本当に大事な部分：民主化は自動では起きない

ここで止めたいと思います。こういうツールが現れるたびに毎回陥る罠だからです。

テクノロジーがアクセス可能だということは、私たちを自由にするということではありません。自由になる可能性をくれるということです。違いは、その知識を使いこなすことを学ぶのか、それともツールがデフォルトで出す結果を消費するだけなのか、にあります。

よく知られた例で考えてみましょう。スマホのカメラが良くなったとき、全員がカメラマンになったわけではありません。多くはもっと平凡な写真を、もっと速く撮り始めただけでした。実際にカメラマンになる人は、シャッターへの安いアクセスを使って、構図・光・タイミングという、カメラが決して差し出してくれないものを学んだ人たちです。

エージェントが生成するモーショングラフィックスもまったく同じです。HyperFramesはソフトウェアという障害を取り除きます。しかし、何を伝えたいのか、各カットをどれだけ続けるのか、テキストが多すぎるタイミングはいつか、3秒のトランジションがなぜ15秒の広告の回視率を殺すのか、といった作業は取り除いてくれません。

ツールは実行を民主化するのです。判断力は、依然としてあなたのものであり、珍しいものなのです。

具体的にはどう動くか

HyperFramesのコンポジションはindex.htmlファイルです。それだけです。ブラウザで開くと見えます。以下は公式ドキュメントから取った例です：

<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
  <video class="clip" data-start="0" data-duration="6" data-track-index="0"
         src="intro.mp4" muted playsinline></video>

  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">
    Launch day
  </h1>

  <audio data-start="0" data-duration="6" data-track-index="2"
         data-volume="0.5" src="music.wav"></audio>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
    window.__timelines = window.__timelines || {};
    window.__timelines.launch = tl;
  </script>
</div>

動画編集の出身なら、もう一度読んでみてください。すべて分かるはずです。data-track-indexはタイムラインのトラック、data-startはクリップの開始位置、data-durationは長さ。マウスでドラッグする代わりに、プレーンテキストで書かれたタイムラインなのです。

エンジンはそのHTMLをヘッドレスChromeで開き、コマごとに進めながら各フレームをキャプチャし、FFmpegに渡してMP4を作ります。各フレームはリアルタイム再生ではなく時間上の正確な位置を探して生成されるため、結果は決定的（deterministic）です。つまり同じファイルは常にまったく同じ動画を生みます。これが、サプライズなしでレンダリングを自動化できる理由です。

インストール

まず2つの要件があります：Node.js 22以降とFFmpegです。まだなければ先にインストールしてください——Nodeはnodejs.org、FFmpegはffmpeg.orgか、お使いのOSのパッケージマネージャ（Macならbrew install ffmpeg、Windowsならwinget install ffmpeg）で。

それらが整えば、全体の流れは3つのコマンドです：

# 1. 新規プロジェクトを作る
npx hyperframes init my-video
cd my-video

# 2. ブラウザで結果を確認（ライブリロード付き）
npx hyperframes preview

# 3. MP4にエクスポート
npx hyperframes render

グローバルに何もインストールする必要はありません。npxがその場でダウンロードして実行します。起動時になにか失敗したら、npx hyperframes doctorが環境をチェックして不足しているものを教えてくれます。

AIエージェントにフレームワークの使い方を教えるスキルをインストールするには——HTMLを手書きしたくないならおすすめの道——：

npx skills add heygen-com/hyperframes --full-depth

何もプリセレクトされていないセレクタが開きます。必要なのはCore Skillsグループだけで、/hyperframesルーターがリクエストごとに各ワークフローをインストールします。--full-depthは省かないでください。このフラグなしだと、数時間古い可能性のあるレジストリのバージョンがダウンロードされます。

あとでインストールを最新にするには：

npx hyperframes skills update

最後に、既存プロジェクトへカタログの既製ブロックを追加するには：

npx hyperframes add flash-through-white   # シェーダー・トランジション
npx hyperframes add instagram-follow      # SNSオーバーレイ
npx hyperframes add data-chart            # アニメーション・グラフ

非プログラマーの本当の道：スキル

ここが、開発者だけでなくコンテンツ・クリエイターにとっても面白い点です。

HyperFramesは20のスキル——指示パッケージ——を公開しており、AIエージェント（Claude Code、Cursor、Codex、Gemini CLI）にフレームワークで動画を作る方法を教えます。前のステップでインストール済みなので、これ以降のあなたの作業はHTMLを書くことではなく、動画を説明することです。

/hyperframesを使って、フェードインで現れるタイトル、背景動画、穏やかな背景音楽のある10秒の商品イントロを作ってください。

エージェントは構造を計画し、HTMLを書き、アニメーションをつなぎ、音声を追加し、エラーを確認してレンダリングします。あなたは確認して修正します。これは監督と編集者の完全に同じ作業モデルです。あなたが決め、別の者が実行し、最終品質は、依頼時の正確さと結果を評価するうまさにかかっています。

スキルを名前で覚える価値があります。本質的にフォーマットのメニューだからです：

/hyperframes — ルーター。常に最初に読むもの。作りたい作品の種類を特定し、正しいワークフローを呼び出します。
/product-launch-video — 商品・サイトのプロモ。最長約3分（最適は30〜90秒）。
/faceless-explainer — カメラも商品もなしに、ゼロから作ったビジュアルで概念を説明。
/motion-graphics — ナレーションなしの短い作品（10秒未満）：キネティック・タイポグラフィ、アニメーションするデータ、ロゴスティング、ローワーサード。MP4または透明オーバーレイで出力。
/embedded-captions — 既存のカメラ映像の上にデザインした字幕を載せる。
/talking-head-recut — インタビューやポッドキャストを、ローワーサード、データコールアウト、プルクオート、PiPでパッケージ化。
/music-to-video — 音声トラックのビートに同期した動画。
/slideshow — リビールとナビゲーション付きの操作可能なプレゼンテーション。レンダリング動画ではない。
/general-video — その他すべて：長時間版、マルチシーン、シズルリール。

そして、クリエイターにとっておそらく最も役立つのが/media-useです。背景音楽・効果音・画像・アイコン・ロゴ・声の検索を解決し、ローカルファイルにダウンロードして、どこで何を使ったかを記録します。制作の退屈な部分が自動化されるのです。

本当の用途（そして用途ではないもの）

HyperFramesが光るところ：

ボリュームのある広告。 同じ作品を9:16、1:1、16:9で、3種類のコピーと2種類のオファーで出さなければならないなら、これはカテゴリが変わる話です。コンポジションはテキストファイルなので、変数を変えて20バージョンをレンダリングできます。手作業のエディターではそれに対抗できません。

定期的でデータ駆動のコンテンツ。 週次メトリクスまとめ、毎月のランキング動画、更新されるアニメーション・インフォグラフィック。フォーマットが固定で数字だけが変わるなら、一度自動化すれば、あとは自走します。

支援アセット。 ローワーサード、トランジション、アニメーションするカウンター、ティッカー、おなじみのエディタに入れる透明オーバーレイ。編集を置き換えるのではなく、編集を支えるのです。

デザインされた字幕のSNS。 プラットフォームのアルゴリズムが生成するものではなく、見栄えの良い字幕。

無理に使う価値がないところ：

独自で再現不可能なビジュアルに価値がある作家性の高い作品。
キャラクターアニメーション、リギング、本格的な3Dが必要なもの。
反復が探索的で、再現性よりインスタントな結果確認が重要なプロジェクト。

ライセンスはApache 2.0で、レンダリングごとの課金も商用しきい値もありません。これは重要です：クライアントワークで二度考えずに使えます。

コンテンツ・クリエイター向けのヒント

まず時間を書く。 エージェントに動画を頼むときの最大の間違いは、時間を固定しないことです。「短いイントロ」は何でも作ります。「8秒：0-2秒ロゴ、2-6秒タイトル、6-8秒CTA」は、あなたの望んだものを作ります。説明ではなく秒で考えましょう。

シーンごとに一つのメッセージ、例外なし。 HTMLでは6つのアニメ要素を1つの画面に載せられます。それをやらないこと。かつてアニメーションする労力が課していた制約を、今度は自分で課すしかありません。

最初に音なしでデザインする。 聴衆のかなりの部分はミュート視聴します。動画がミュートでも伝わらなければ機能していません。音楽は補強であって、支えではありません。

frame.mdを大事に保存する。 HyperFramesは、エージェントがコンポーズする前に読むデザインシステム（色・フォント・スケール・ルール）を使います。自分のブランド・アイデンティティで一度書けば、毎回頼まなくても、すべての作品は一貫して出来上がります。それが「ブランドがある」と「バラバラの動画がある」の違いです。

バラバラの作品ではなくライブラリを作る。 うまくいったコンポジションは増えたテンプレートとして保存しましょう。3ヶ月後には自分専用のカタログができ、生産時間は急落します。そこでようやく本当に利益が出るのです。

最初のレンダリングは公開しない。 絶対に。3回見てください：タイミングで1回、可読性で1回、スマホで1回。エージェントに判断力はありません。あなたにはあります。

編集者向けのヒント

プロジェクト全体ではなく、まずアセットから。 最もなだらかな入り口は、アルファチャンネルのオーバーレイをHyperFramesで作り、Premiere、Resolve、Final Cutに入れることです。フローを変えずにスピードを得られます。
属性は3つだけでよい。 data-start、data-duration、data-track-index。それだけで、エージェントが渡すどんなコンポジションも読めて修正できます。プログラミングを知る必要はありません。タイムラインの編集ができれば十分です。あなたはもうできます。
バージョンをバージョンとして扱う。 プロジェクトはプレーンテキストなのでGitが機能します。カット1とカット2の間で何が変わったかを1行単位で正確に見て、恐れずに戻れます。あなたの動画エディタではできないことです。
決定性が安全網です。 プロジェクトファイルは常に同じ動画を作ります。配信で何か起きても、正確な問題を再現できます。「私のマシンでは見えてたのに」はもう終わりです。
ゼロから作る前にカタログを活用する。 トランジション、アニメーション・グラフ、SNSオーバーレイ、字幕の既製ブロックがあり、npx hyperframes addで全部インストールできます。そこから始めて修正しましょう。白紙から始めないこと。

居心地の悪い結論

HyperFramesはあなたをモーションデザイナーにはしません。そうでない言い訳を取り除くだけです。

そして、その違いこそが技術民主化のすべての物語です。WordPressは作家を作りませんでした。誰でも公開できるようにしたのです。そして、すでに言いたいことがあった人たちが聴衆を見つけました。DAWはミュージシャンを作りませんでした。スタジオを開いたのです。耳の良い人は、部屋からレコードを出すようになりました。

このようなツールは、試みのコストをほぼゼロまで下げます。向こう側に残るもの——判断力、センス、何を話し、いつ黙るかを知ること——はnpxでダウンロードできません。それはいつもと同じだけかかり続けます。時間、注意、そして自分の作品を正直に見る規律です。

自由はツールと一緒には来ません。使い方を学ぶことから来るのです。

リソース

リポジトリ： github.com/heygen-com/hyperframes
ドキュメント： hyperframes.heygen.com/introduction
何もインストールせずに試すプレイグラウンド： hyperframes.dev
リミックス可能な完成作品のショーケース： hyperframes.heygen.com/showcase
デザイン・テンプレート（frame.md）： hyperframes.dev/design

HTMLを書いて動画を作る：HyperFramesがAfter Effectsを開いたこともない人にモーショングラフィックスを開く方法

目次