Loading...

コーディングAI向け動画ツール · HyperFrames

コーディングAIに動画まで任せたら、製品プロモーションから機能紹介、講演のイントロまで作ってきた

HeyGenが無料で公開したHyperFramesをClaude CodeやCodexに入れると、AIが自分のサイトやコードを読み、シーンを組み立ててMP4の動画に書き出してくれます。成果物がプロジェクトフォルダとして残るので、文言1つ、シーン1つを後から直せます。JetBrainsから個人開発者、韓国のYouTuberまで、実際に使った事例を集めました。

2026年10月6日·事例 4件

JetBrainsが公式アカウントに投稿したKotlinのプロモーション動画です。出典：JetBrains X
JetBrains：Claude Opus 5.5とHyperFramesスキルで作ったKotlinのプロモーション動画（2026-09-22）heygen-com/hyperframes — Write HTML. Render video. Built for agents.（10月6日時点でスター57,380）npm hyperframes：9月28日の週のダウンロード数813,101（過去最多）

一番上の動画は、JetBrainsが9月22日に公式Xアカウントに投稿したKotlinのプロモーション動画です。JetBrainsは"This product video was generated entirely by Claude Opus 5.5.（この製品動画は、すべてClaude Opus 5.5が生成しました）"と書いています。社員がOpus 5.5にHyperFramesのスキルを渡し、kotlinlang.orgを指し示しただけだそうです。

Opus 5.5で作ったプロモーション動画が次々に出回るなか、その裏で使われていたHyperFramesにも改めて注目が集まっています。GitHubのスターは10月に入って1日500個ほどのペースで増えて5万7千を超え、npmのダウンロード数は9月28日の週に81万回と過去最多を記録しました。 10月5日には、AIと同じタイムライン上で動画を直せるデスクトップアプリも登場しています。

HyperFramesは、映像を描き出す生成モデルではありません。AIがシーンをHTMLで組み立てると、HyperFramesがそのページを1フレームずつ止めて撮影し、MP4にまとめます。成果物がプロジェクトフォルダとして残るので、文言1つ、シーン1つを後から直せます。 Opus 5.5でプロモーション動画を作った記事がプロンプト1つで作った1本だったとすれば、ここで紹介する事例は、一度入れたツールを次の動画でも使い回しています。

Reference 01Social SDKを作った15歳の開発者 Leo

シーンごとに何を入れるかを自分で決めて伝えると、AIが作ったローンチ動画はXで12万回以上再生されました

アプリにSNS投稿機能を簡単に組み込めるオープンソースのSocial SDKを公開する際、56秒のローンチ動画をHyperFramesで作りました。動画はXで12万回以上再生されています。 主にOpus 5.5を使い、難しいシーンは別のモデルに時間をかけて任せたとして、作り方のコツを別に投稿しました。"tons of bugs（バグが多い）"という欠点も隠していません。

Leoが投稿した作り方のコツ（7つのうち4つ）
  1. 1DO NOT LET THE AGENT CHOOSE WHAT TO PUT. I told specifically about each part of the video by myself.
  2. 2Give the agent access to your codebase and make the project there. This let's the agent find existing components, and reuse them, or change them for the video.
  3. 3Give your agent a component library of animations.
  4. 4Have a good landing page. This is one of the best references for a launch video your agent can have.

最初のシーンのSlackのような会話も、"I want the first part to have a chat thread like slack"（最初の部分はSlackみたいなチャットにして）と自分で指示した結果です。

Reference 02オープンソースTanStack AIのメンテナー Alem Tuzlak

PRを1つ渡すと、AIがその機能の30秒の紹介動画を作ってきます

TanStack AIは新機能を出すたびに、短い紹介動画を公式アカウントに投稿しています。どうやって作っているのかという質問に、メンテナーのAlem Tuzlak氏は"It uses this skill（このスキルで作っている）"と答え、自作のスキルを公開しました。 スキルはPRとコードを読み、ブランドカラー・フォント・ロゴを探して使い、途中の段階ごとに人の承認を取ります。同氏は、成果物を最初から最後まで見て気に入らないところを伝えると、AIが直して再レンダリングすると説明しています。

Alemが公開したスキル（PRをプロモーション動画に）

https://github.com/AlemTuzlak/skills/tree/main/skills/hyperframes-video

スキルの1行目は"Turn a PR into a rendered short-form promo video with a hook, code moments, and CTA, using HyperFrames."です。PRを1つ、フック、コードの見せ場、行動喚起（CTA）で構成した短いプロモーション動画に変える、という意味です。

Reference 03ビットコイン系YouTuber ネッタルバ · 登録者2.7万人

講演の翻訳動画の冒頭に、ウォンの価値のグラフが動く韓国語のイントロを付けました

Saifedean Ammous氏のソウルでの講演を翻訳して公開する際、動画の冒頭1分30秒を、HyperFramesで作った韓国語のモーショングラフィックスにしました。本人はXに"클로드 + 하이퍼프레임 = 비트코인 강연 영상（Claude＋HyperFrames＝ビットコイン講演動画）"と書き、Claudeをしごいて引き出したのかという返信には"계속 패고 있습니다（ずっとしごき続けています）"と答えています。

イントロの一場面。「₩0.974」という数字の横に、年々小さくなるウォンの価値の棒グラフが並んでいる

視聴者はHyperFramesには触れず、"네딸바님 영상 퀄리티가 점점 높아지네요（ネッタルバさんの動画のクオリティがどんどん上がっていますね）"とコメントしています。

Reference 04エミー賞受賞の映像制作者 Sam Wasserman

アプリの操作を録画した映像に、ステップカードと単語ごとの字幕を重ねてチュートリアルを作りました

AI映画を撮る前に動線とカメラを設計しておく自作のオープンソースアプリBlockoutを公開した翌日、3分26秒の使い方動画を投稿しました。実際のアプリ画面の録画に、ステップカード、パネル名、単語ごとに強調される字幕が重なっています。本人は、HyperFramesがこの動画作りを手伝った（help make）と書いています。

使った人の声

Remotionのような、ほかの動画用コードツールから乗り換えた人たちは、仕上がりと直しやすさを歓迎しています。不満は、バグと遅いレンダリング、プレビューと違うレンダリング結果、似たり寄ったりに見える動画に集まりました。

よかったという声

  • “I just found hyperframes better in the last few months of constant usage, although remotion code animations do seem nicer because of all the plugins etc.”

    TanStackの動画で数か月使ってみて、HyperFramesのほうがいいと感じたそうです。ただ、プラグインが豊富なRemotionのコードアニメーションのほうが見栄えはいい、とも付け加えています。

    Alem Tuzlak · Xx.com

  • “15분쯤 지났을 때 결과가 기존 리모션보다 자막 싱크와 전환이 더 좋아서 바로 갈아타기로 결정했습니다.”

    15分ほどたったところで、これまで使っていたRemotionより字幕の同期もトランジションもよかったので、すぐに乗り換えると決めました。Remotionを2か月使っていた韓国のYouTuberで、同じ動画を2つのツールで書き出すと、ファイルサイズが21.6MBから14.5MBに減ったそうです（本人の計測）。

    コーディングできない文系開発者 · YouTubeyoutube.com

  • “It was so great to have a studio UI for the last-mile video fine-tuning.”

    子ども向け絵本プラットフォームの創業者が、予算なしで会社紹介動画を作る際、最後の仕上げを編集画面で自分でできたのがよかったそうです。

    Feifei Qiu · Xx.com

  • “i tried it and edited my reel without any 3rd party paid service and results are seriously shocking”

    有料のサービスを使わずにリールを編集したところ、結果に本当に驚いたそうです。

    @fahadmughal9795 · YouTubeコメントyoutube.com

物足りなかったという声

  • “I tried it. It takes forever to render and the result is so mid. I could've just edited by myself and save so much more time”

    レンダリングにいつまでもかかるうえ結果は平凡で、自分で編集したほうがずっと時間がかからなかった、という声です。

    @miltonnolan · YouTubeコメントyoutube.com

  • “I've found hyperframes is too prescriptive and restrictive for Opus 5.5. It gets better outputs by itself”

    Opus 5.5にとってはHyperFramesのルールが窮屈すぎて、モデル単独で作ったほうが結果がよかったそうです。一方HeyGenは、ルールを与えたほうがレンダリング回数とトークン費用が減ったという自社実験を出しています。

    @adityah8717 · YouTubeコメントyoutube.com

  • “In the browser preview every caption was there. The audio was fine. The render said success.”

    31秒の動画をレンダリングしたら、プレビューにあった字幕が1つもなかったそうです。レンダラーは動画を再生せずにフレームごとに飛ばしながら撮るためだとして、アニメーションの開始値と終了値を両方書く方法で直したといいます。

    Ayo · Xx.com

  • “I have been testing HyperFrames with AG and Codex, but no avail so far as it just doesn't suit me for anything other than graphs and overlays.”

    複数のエージェントで試したものの、グラフとオーバーレイ以外は自分の作業に合わなかったそうです。

    u/Little-Specialist286 · Redditreddit.com

始め方

  1. 1

    Node.js 22以降とFFmpegを入れ、Claude CodeかCodexを開きます

    HyperFrames自体は無料のオープンソースで、自分のコンピューターでレンダリングすればHeyGenのクレジットもかかりません。費用がかかるのはコーディングAIのプランです。Claude Code、Codex、Cursor、Gemini CLIなどのコーディングエージェントで使えます。

    HyperFramesのリポジトリ ↗
  2. 2

    動画を作るフォルダで、公式の依頼文を貼り付けます

    AIがスキルをインストールし、方向性を提案して、足りないものを尋ねたうえで動画を作ります。

    HyperFrames公式ドキュメントの最初の依頼

    Set this folder up for HyperFrames and make me a video. 1. If the HyperFrames plugin is installed, use its bundled skills and launcher. Otherwise run: npx hyperframes skills update 2. Then, using /hyperframes, make a 10-second product intro for https://example.com 3. Open the local preview when it is done and tell me the project folder.

    https://example.comの部分を、自分のサービスのURLに置き換えます。

  3. 3

    最初の版を最後まで見て、直したいところを伝えます

    公式ドキュメントも、最初の成果物は完成版ではないとして、ストーリー、事実、文字、音を一通り確認するよう勧めています。10月5日に出たデスクトップアプリHyperFrames Studio（macOS・Linux、HeyGenアカウントでログイン）では、画面を指したり描いたりして、直したい箇所を伝えられます。

    HyperFrames Studioのダウンロード ↗

縦型のローンチ動画を作った依頼

生産性ツールのまとめサイトを運営するShushant Lakhyani氏は、気に入ったローンチ動画を1本参考として添付し、この依頼を書きました。プロンプトを丸ごと公開した数少ない事例です。

Shushant Lakhyaniが書いた依頼

/hyperframes use the hyperframes skill. I've attached a good launch video here. I want you to go through it perfectly and completely and take inspiration from it perfectly and completely and create a new better and different launch video in 9:16 aspect ratio perfectly and completely for my best productivity resources directory website: https://bestproductivityresources.com/ Make it fast paced for best and high audience retention. Add transitions, effects, SFX, VFX, and background music as required and wherever required.

サイトのURLを自分のものに替え、参考にしたいローンチ動画のファイルを一緒に添付します。

必要なもの

  • Node.js 22以降、FFmpeg
  • Claude Code・CodexなどのコーディングAI
  • 自分のサービスのサイトかコードのフォルダ

このリファレンスを共有

このリファレンスは役に立ちましたか？

毎週厳選されたリファレンスをメールでお届けします