AI動画は​「プロンプト一発」から​「HTMLで​作る」へ​ ──HeyGenの​“HyperFrames”と​いう、​動画を​コードに​する​新しい​潮流

技術ノート ｜ 気になるAIツールを、分かりやすく

「AIで動画を作る」と聞くと、多くの人はこんな絵を思い浮かべる。プロンプトを打ち込むと、数十秒後に動画が出てくる。Veo、Sora、Runway、Kling。生成モデルの進化は確かに速い。けれど、実際に仕事で動画を回そうとすると、最初の生成よりも別のところで困る。直したいときに直せるか。前と同じものを作れるか。ブランドの色やロゴを守れるか。どこを変えたか、後から分かるか。

今回紹介するのは、HeyGen が公開しているオープンソースの動画フレームワーク HyperFrames だ。^[1] 面白いのは、動画を「魔法の出力」ではなく、HTMLとCSSで書く"コード"として扱うところにある。GitHubでは公開から数か月で3万を超えるスターを集めていて、AI界隈でちょっとした話題になっている。^[2]

私たち電脳技巧集団（AI職人ギルド）も、台本から音声・動画までを自動で組み立てる仕組みを自分たちで作ってきた。だから今回は「すごい新ツールが出た」で終わらせず、何ができて、何に向いていて、どこは過信しない方がいいかを、なるべく分かりやすく紹介してみる。なお記事中の数値や機能はHeyGen公式・GitHubの情報に基づくもので、CAGが独自に検証したものではない。

01HyperFramesって、​どんな​もの？

ひとことで言うと、HTML・CSS・画像や音声・アニメーションから、MP4動画を作るためのオープンソースの道具だ。^[1] ライセンスは Apache-2.0、動かすには Node.js 22以上と FFmpeg が必要になる。ふだんWebサイトを作るのと同じHTML/CSSで「動画の見た目」を書き、コマンドでプレビューしたり、MP4に書き出したりできる。

数字も挙げておくと、GitHubでは確認時点で 31,596 スター、npm の最新版は hyperframes v0.7.14（2026年6月27日時点）。^[2] 公開は2026年3月なので、半年たらずでこれだけ注目を集めたことになる。スター数は変動するので、あくまで「いま勢いがある」くらいの目安として見てほしい。

02何が​新しい？​ ──​「一発生成」ではなく​「コードと​して​作る」

生成モデルで動画を作るのは、たとえるなら「お願いして、出てきたものを受け取る」体験だ。速くて手軽だけれど、気に入らない部分だけを直すのは難しい。もう一度プロンプトを変えて投げ直すと、別物が出てくることもある。HyperFramesが取るのは反対のアプローチだ。動画をコードで書くから、Webサイトと同じように扱える。

動画がコードになると、ふだんの開発でやっていることがそのまま使える。変更点を差分（diff）で見る、おかしな書き方を lint で見つける、書き出す前に静止画（snapshot）で見た目を確認する、同じ設定からいつでも同じ動画を作り直す。HyperFramesは「フレームごとに位置を決めて切り出し、つなぐ」やり方で、再現性（同じ入力なら同じ結果）を大事にしている。^[5] 一発生成の手軽さとは別の、"仕事で使える地味な強さ"がここにある。

03AIエージェントが、​制作の​"工程"を​進める

HyperFramesがいまの時代らしいのは、AIコーディングエージェント（Claude Code、Cursor、Codex、Gemini CLI、Copilot CLI など）から使うことを前提にしている点だ。^[3] 人間がすべてのHTMLを手で書くのではなく、agentが制作の工程を読み分けて進める。そのために「skills（スキル）」という形で、工程ごとの手順が用意されている（確認時点で19個）。^[3]

工程が DESIGN.md（デザイン方針）、SCRIPT.md（台本）、STORYBOARD.md（絵コンテ）のように分かれているのがポイントだ。「いい感じの動画を作って」という曖昧な丸投げではなく、各工程を文章とコードに残しながら進む。だから人間は、台本の段階で方向を直したり、絵コンテで構成を決めたりと、要所だけレビューすればよくなる。AIに渡す仕事が、検証できる単位に分かれている。

04Remotionと、​何が​違うの？

「コードで動画を作る」と聞いて、詳しい人は Remotion を思い出すかもしれない。Reactで動画をプログラムする、すでに定評のある道具だ。HyperFrames は Remotion を否定しているわけではなく、公式の比較でもその系譜を認めたうえで、「React中心」ではなく「HTML中心」という別の賭けに出ている。^[4] HeyGenの主張は「AIエージェントにとっては、Reactのcompositionを書くよりHTML＋アニメーションを書く方が扱いやすい」というもの。ただしこれはHeyGen側の立場で、第三者の客観ベンチで裏が取れているわけではない。

観点	Remotion	HyperFrames
書き方	React（JSX/コンポーネント）	HTML / CSS / アニメーション
立ち位置	Reactで動画を作る成熟した基盤	HTML中心・AIエージェント前提の新顔
向いている人	Reactに慣れた開発者	Web標準で書きたい人・agentに任せたい人
関係	どちらかが終わる話ではなく、用途で選ぶ「別の選択肢」[4]

※ 比較はHyperFrames公式ドキュメントの記述に基づく。優劣の断定ではなく、設計思想の違いとして読んでほしい。

05これ、​何に​使えそう？

「面白そうだけど、自分の仕事で何に使うの？」が、いちばん気になるところだと思う。動画をテンプレHTML＋差し替える文言・数値として持てるのが強みなので、同じ型の動画を量産する用途と相性がいい。たとえば、こんな使い方が考えられる。

• リリース紹介動画：変更履歴（CHANGELOG）と画面キャプチャから、30秒の機能紹介をつくる。
• PR説明動画：GitHubの変更内容を渡して、何がどう変わったかを短尺で説明する。
• ニュース要約のショート：毎朝のAIニュースから数本を選び、縦型のショート動画にする。
• 営業・提案動画：既存のLPや提案資料から、90秒くらいの紹介動画に組み直す。
• SNS投稿の素材：1投稿1動画のテンプレを用意し、タイトル・数値・CTAだけ入れ替える。

どれも共通しているのは、「一回作って終わり」ではなく「型を作って回す」用途だということ。毎回ゼロから編集ソフトを開くのではなく、テンプレを用意しておいて、中身を差し替えてまとめて書き出す。動画が"コード資産"だからこそできる回し方だ。

06使う​前に、​知って​おきたい​こと

私たちは以前、台本を流し込むと音声・テロップ・動画まで自動で組み上がるパイプラインを自分たちで作ったことがある。その経験から言うと、この「動画をコードで作る」考え方は、地味だけれど本当に効く。一方で、ワクワクしすぎないための注意点もいくつかある。紹介記事として、正直なところも書いておく。

• 一発で高品質、ではない。HyperFramesの強みは「魔法の一発生成」ではなく「検証できる手順に分解できる」こと。良い動画になるかは、デザイン・台本・素材・レビューの質しだい。^[1]
• 目で見るチェックは必須。lintが通っても「良い動画」とは限らない。最後は人がプレビューを見て判断する工程が残る。
• 環境づくりは少し手間。Node.js 22以上、FFmpeg、フォントの違いなど、動かすまでの準備はそれなりにある。^[1]
• クラウド機能やTTSは別枠。クラウドでの書き出しや音声合成などは、HeyGenのアカウントや有料クレジットが関わる部分がある。完全に無料・ローカルだけの話とは分けて考えたい。^[5]
• 万能ではない。実写の編集や映画的な生成映像には、別のツールの方が向く。すべての動画がHTML化に向くわけではない。

それでも、流れははっきりしている。AI動画の次の主役は、もっと派手な生成モデルだけではなく、動画を"作り直せる制作物"として扱う仕組みの方にもある。HyperFramesは、その方向をとても分かりやすく見せてくれる事例だ。気になった人は、まず10秒のSNS用動画を1本だけ作ってみて、「一発でかっこいいか」ではなく「あとから直せるか」を確かめてみるといい。

動画の作り方	プロンプト一発生成	Video-as-Code（HyperFrames）
手軽さ	速い・すぐ出る	少し手順は増える
修正	作り直しに近い	直したい所だけ直せる
再現性	同じ結果が出にくい	同じ入力で同じ動画
量産	毎回ゼロから	テンプレ＋差し替えで量産
レビュー	どこを変えたか残りにくい	差分・snapshotで確認できる

※ 上表は作り方の傾向の対比であり、特定製品の優劣比較ではない。用途によって最適な手段は変わる。

関連記事 ｜ 私たちの"動画をコードで作る"実例台本を流し込むだけ。AIが音声・テロップ・動画まで作り切る → 関連記事 ｜ agentが"工程"をスキルにする潮流「良いループ」の次は、「手順を残せるAI」だった →