HyperFramesとは？使い方とClaude Codeで動画を作る手順

【早見表】HyperFramesとは？提供元・料金・必要な環境まとめ

HyperFramesとは、HTML・CSS・アニメーションで組んだ画面を、MP4などの動画ファイルに書き出すオープンソースのフレームワークです。動画編集ソフトのタイムラインの代わりに、HTMLファイルが動画の設計図になります。

ここでは、HyperFramesの基本情報を1枚の表で紹介します。

※2026年10月時点・HyperFrames公式ドキュメント、公式GitHubより

HyperFramesは無料で始められますが、バージョンが1.0未満で更新が続いているため、使う前に公式ドキュメントで最新の手順を確認しましょう。

HyperFramesとは？HTMLで動画を作る仕組み

HyperFramesは、Webページを作る技術で動画を作れる点が特徴です。HTMLに「何秒目から何秒間表示するか」を書き込み、ブラウザで1コマずつ撮影して動画にします。

ここでは、HyperFramesの仕組みを3つの視点で解説します。

HTMLとデータ属性で動画のタイミングを決める

HyperFramesでは、HTMLの要素に付けるデータ属性で、表示する時間と重なり順を決めます。動画編集ソフトのタイムラインにあたる情報を、HTMLの中に直接書く設計だからです。

HyperFramesでよく使う主な属性は、以下のとおりです。

• data-start：表示を始める秒数
• data-duration：表示する長さ（秒）
• data-track-index：重なり順（トラック番号）
• class="clip"：時間で出し入れする要素の目印

たとえば、見出しに「data-start="1" data-duration="4"」と書くと、1秒目から4秒間だけ見出しが表示されます。ただし、属性の書き方を間違えると要素が出っぱなしになるため、後述のlintコマンドで確認すると安心です。

ヘッドレスChromeとFFmpegで1フレームずつ書き出す

HyperFramesの書き出しは、画面のないChrome（ヘッドレスChrome）でフレームごとに時刻を指定して撮影し、FFmpegで動画にまとめる方式です。再生しながら録画するのではなく、各フレームを狙って描くため、パソコンの処理が遅くても場面が抜け落ちないからです。

公式ドキュメントでは、同じ入力からは同じ動画が書き出される点を特徴に挙げています。アニメーションはGSAP・CSSアニメーション・Lottie・Three.js・Anime.js・Web Animations APIなどに対応しています。

ただし、時計の時刻やランダムな値に頼るアニメーションは、書き出すたびに結果が変わる原因になります。HyperFramesのルールに沿ったアニメーションの書き方は、AIエージェント用のスキルが補ってくれます。

AIエージェントが扱いやすい理由

HyperFramesは、AIエージェントが動画を作る用途を前提に設計されています。AIエージェントはHTMLを書くことに慣れており、HyperFramesのCLIも対話なしで動くためです。

HyperFramesがAIエージェント向きといえる理由は、以下のとおりです。

• ビルド不要：index.htmlをそのままブラウザでプレビューできる
• 公式スキル：HyperFramesのルールをAIエージェントに教えるスキルが公開されている
• 編集できる成果物：結果がプロジェクトフォルダで残り、あとから人もAIも直せる

上記の仕組みにより、Claude Codeに日本語で頼むだけで、動画の元になるHTMLの作成から書き出しまでを任せられます。

HyperFramesでできること｜作れる動画の種類

HyperFramesで作れる動画は、文字・図・画面の動きが中心の動画です。公式のスキルには、入力素材と目的に合わせた制作の手順（ワークフロー）が用意されています。

ここでは、HyperFramesの公式スキルが対応する動画の種類を表で紹介します。

※2026年10月時点・HyperFrames公式GitHubのスキル一覧より

HyperFramesは、グラフ・地図・コードの差分のように、正確な文字や数字を動かす表現が得意です。一方、実写のような映像をゼロから生み出す用途は、映像生成のAIなど別のツールの役割です。作りたい動画の中身で使い分けると、HyperFramesの強みを生かせます。

あわせて読みたい
AIクリエイターとは？仕事内容と、未経験からなるための学び方

HyperFramesの料金とライセンス｜無料で使える範囲

HyperFramesの本体は無料で、自分のパソコンで作って書き出すまでは料金がかかりません。費用が発生するのは、組み合わせて使うAIエージェントやクラウドのサービスです。

ここでは、HyperFramesで無料になる範囲と、費用がかかる可能性があるものを分けて解説します。

ローカルでの制作・書き出しは無料（Apache 2.0）

HyperFramesは、Apache 2.0ライセンスで公開されたオープンソースです。公式GitHubでは、書き出しごとの料金や商用利用の上限がないと明記されています。

たとえば、自分のパソコンで作った動画を、仕事の納品物や自社の広告に使うことも、ライセンス上は可能です。公式ドキュメントでも、ローカルでの書き出しはHeyGenのクレジットを使わないと説明されています。

ただし、動画に入れる画像・音楽・フォントには、それぞれの素材のライセンスが適用されます。HyperFramesが無料でも、使う素材の利用条件は個別に確認しましょう。

費用がかかる可能性があるもの

HyperFramesを使う際に費用がかかるのは、AIエージェントの利用料と、HeyGenのアカウントを使う任意のサービスです。公式ドキュメントでも、AIエージェントや音声・アバター・生成素材のサービスには、それぞれの費用がかかる場合があると案内されています。

HyperFramesの周辺で費用が発生しうるものを、表にまとめます。

※2026年10月時点・HyperFrames公式ドキュメントより。クラウドレンダリングとMCPコネクタの具体的な金額は、公式ドキュメントでは確認できませんでした

はじめて試す段階なら、ローカルで書き出す方法を選ぶと、AIエージェントの利用料以外はかかりません。

HyperFramesの使い方｜Claude Codeで動画を作る手順【5STEP】

HyperFramesの使い方は、環境を用意してClaude Codeにプラグインを入れ、日本語で依頼して書き出すという流れです。公式のクイックスタートも、AIエージェントに依頼する方法を最初に案内しています。

ここでは、Claude Codeを使ってHyperFramesで最初の動画を作る手順を5STEPで解説します。全体の流れは、以下のとおりです。

※2026年10月時点・HyperFrames公式ドキュメントより

【STEP1】Node.js 22以上とFFmpegを用意する

HyperFramesを使う前に、Node.jsのバージョン22以上と、動画を書き出すためのFFmpegをインストールします。HyperFramesのCLIはNode.jsで動き、書き出しの最後にFFmpegで動画ファイルを作るためです。

たとえば、Macでは「brew install ffmpeg」、Ubuntuでは「sudo apt install ffmpeg」でFFmpegを入れられます。インストール後に「npx hyperframes doctor」を実行すると、Node.js・ブラウザ・FFmpegがそろっているかをまとめて確認できます。

ただし、Windowsでは公式サイトからFFmpegをダウンロードし、PATHを通す作業が必要です。Claude Codeに「HyperFramesを使う準備をして」と頼み、手順を確認しながら進める方法もあります。

【STEP2】Claude CodeにHyperFramesのプラグインを入れる

Claude Codeでは、HyperFramesのプラグインを入れると、動画制作のスキル一式をまとめて使えます。プラグインに入っているスキルが、HyperFramesの書き方のルールをClaude Codeに教えるためです。

ターミナルで実行するコマンドは、以下のとおりです。

1. claude plugin marketplace add heygen-com/hyperframes
2. claude plugin install hyperframes@hyperframes
3. Claude Codeを新しく起動するか、/reload-plugins を実行する

プラグインの自動更新は、初期設定でオフです。/plugin のMarketplacesで「hyperframes」を選んで自動更新を有効にすると、最新のスキルを使えます。プラグインではなくスキルだけを入れたい場合は、「npx skills add heygen-com/hyperframes」でCore Skillsを選びます。

【STEP3】作りたい動画を日本語で依頼する

プラグインを入れたら、Claude Codeに作りたい動画を日本語で依頼します。HyperFramesのスキルが依頼を読み取り、動画の種類に合ったワークフローを選んで制作を進めるからです。

依頼文は、長さ・目的・素材を1文に入れます。たとえば、「/hyperframes:hyperframes を使って、https://example.com の10秒の製品紹介動画を作って」のように頼みます。Claude Codeは方向性を提案し、足りない情報があれば質問してきます。

ただし、最初から長い動画を頼むと、修正の手間が増えます。5〜10秒のタイトルや短い紹介動画から始めると、HyperFramesの流れをつかみやすくなります。

【STEP4】プレビューとStudioで確認・修正する

制作が終わると、Claude Codeがプロジェクトフォルダを作り、ブラウザのプレビューを開きます。HyperFramesの成果物は動画ファイルではなく編集できるHTMLのプロジェクトのため、何度でも直せるからです。

プレビューを確認するときの観点は、以下のとおりです。

• 話の流れ：伝えたい順番になっているか
• 事実：製品名・数字・URLが正しいか
• 文字：テロップが読める大きさと長さか
• 音：BGMやナレーションの音量が合っているか

あとから開き直すときは、プロジェクトフォルダで「npx hyperframes preview」を実行します。画面上で直接編集したい場合は、HyperFrames Studio（ブラウザ版、またはMac・Linux向けのアプリ）も使えます。

【STEP5】MP4などに書き出す

確認が終わったら、プロジェクトフォルダで「npx hyperframes render」を実行して動画に書き出します。Claude Codeに「MP4で書き出して」と頼んでも、同じコマンドを実行してくれます。

書き出しの形式は、用途に合わせて選べます。用途ごとの形式の目安は、以下のとおりです。

※2026年10月時点・HyperFrames公式ドキュメントより

試作の段階では画質を下げて書き出すと、待ち時間を短くできます。プレビューと書き出し結果の見た目が違う場合は、Dockerを使った書き出し（--docker）で環境をそろえる方法が公式で案内されています。

HyperFramesをClaude Codeなどのエージェントで使うコツ

HyperFramesの仕上がりは、AIエージェントへの頼み方で大きく変わります。HyperFramesのスキルは多くの判断を自動で補いますが、目的や雰囲気は依頼する側にしか決められないためです。

ここでは、Claude CodeでHyperFramesを使うときの依頼のコツを2つと、Claude Code以外から使う方法を紹介します。

最初の依頼に入れる項目を決める

最初の依頼では、動画の目的と条件を先に伝えると、やり直しが減ります。条件が少ないほど、AIエージェントが雰囲気や構成を推測で決める部分が増えるためです。

依頼文に入れておきたい項目は、以下のとおりです。

• 長さと縦横比（例：15秒、縦9:16）
• 使う場所と見る人（例：自社サイトのトップ、新規のお客さま向け）
• 入れる文字と素材（例：キャッチコピー、ロゴ、製品のURL）
• 雰囲気（例：白地で落ち着いた動き、明るくテンポよく）
• 入れたくないもの（例：派手な切り替え、BGM）

公式ドキュメントのプロンプトガイドでも、指定を細かくするほど完成形が想像に近づくと説明されています。

修正は「変えること」と「変えないこと」を分けて伝える

修正を頼むときは、変えたい部分と、そのまま残したい部分を分けて伝えます。HyperFramesのプロジェクトは1つのHTMLに複数の場面が入っているため、指示があいまいだと関係のない場面まで書き換わることがあるからです。

たとえば、「2つ目の場面のテロップを2行に分けて。色・BGM・ほかの場面は変えないで」のように伝えます。修正のたびにプレビューで確認し、良い状態になったらGitなどで保存しておくと、元に戻しやすくなります。

ただし、修正を重ねても直らない場合は、エラーや症状をそのままClaude Codeに貼り、原因の説明から頼むほうが早く解決します。

Claude Code以外から使う方法

HyperFramesは、Claude Code以外のAIエージェントや、AIチャットからも使えます。公式がエージェントごとのプラグインや、インストール不要の接続方法を用意しているためです。

Claude Code以外の主な入口を、表で比較します。

※2026年10月時点・HyperFrames公式ドキュメントより

AIチャットから使う方法は手軽ですが、プロジェクトフォルダやローカルでの書き出しは使えず、制作物はHeyGenのアカウントに残ります。あとから何度も直す動画なら、Claude Codeなどのエージェントから使う方法が向いています。

あわせて読みたい
Claude Codeで動画編集する方法｜HyperFrames・Remotionで動画を作る手順

HyperFramesとRemotionの違い｜選び方の目安

HyperFramesとRemotionは、どちらもブラウザで描いた画面を動画にするツールです。違いは、動画をHTMLで書くか、Reactのコンポーネントで書くかにあります。

ここでは、HyperFramesとRemotionの違いを表で比較し、向いている場面を紹介します。

※2026年10月時点・HyperFrames公式ドキュメント、Remotion公式サイトより

HyperFramesが向いている場面

HyperFramesは、Reactを使わずにAIエージェントへ動画づくりを任せたい場面に向いています。HTMLはAIエージェントが書き慣れた形式で、公式スキルが書き方のルールを補うためです。

たとえば、自社サイトのデザインを生かした製品紹介動画や、Webで作ったアニメーションを動画にしたい場合は、HyperFramesのほうが手間を減らせます。会社の人数が多くてもライセンス費用がかからない点も、HyperFramesの特徴です。

ただし、公式ドキュメントも、Remotionに比べて情報や実績が少ない新しいツールであることを認めています。

Remotionが向いている場面

Remotionは、すでにReactで開発しているチームに向いています。手持ちのコンポーネントやデザインシステム、グラフのライブラリをそのまま動画に使えるからです。

たとえば、Reactで作ったサービスの画面を使って説明動画を量産する場合は、Remotionのほうが書き直しが少なく済みます。クラウドでの大量の書き出しも、Remotion Lambdaとして長く運用されています。

なお、RemotionからHyperFramesに移る場合は、公式の移行用スキル（remotion-to-hyperframes）が用意されています。チームの技術と素材に合うほうを選びましょう。

あわせて読みたい
Remotionとは？使い方・料金とClaude Codeで動画を作る方法

HyperFramesでつまずきやすい点と対処法

HyperFramesでつまずきやすいのは、環境の準備と、アニメーションの書き方のルールです。AIエージェントが書いたHTMLでも、HyperFramesのルールから外れると、動かない・書き出せないといった症状が出ます。

ここでは、HyperFramesの公式トラブルシューティングをもとに、よくある症状と対処法を表で紹介します。

※2026年10月時点・HyperFrames公式ドキュメント「Troubleshooting」より

上記のほかに、HyperFramesは2026年10月時点でバージョン0.8系と開発の途中にあり、記事や動画で紹介された手順が現在の仕様と違う場合があります。

また、検索すると似た名前の別のサイトも表示されます。公式GitHubが案内しているサイトは、hyperframes.heygen.com（ドキュメント）と hyperframes.dev（Studio・Playground）です。手順に迷ったら、公式ドキュメントの日付と内容を優先してください。

HyperFramesの基本はClaude Codeに頼めば試せますが、思いどおりの演出に仕上げる段階や、エラーの原因が分からない段階で手が止まる方もいます。

Librexグループのデジット(DEGIT)では、「ClaudeCode動画制作コース」を開講しています。Claude Codeを土台に、HyperFrames・ffmpegで動画を作る方法を学ぶコースです。2ヶ月プランは178,000円〜で、講師とのオンライン面談は原則月2回です（2026年10月時点・デジット公式サイトより）。

独学で詰まったときに質問できる環境がほしい方は、無料個別カウンセリングで内容を確認できます。

まとめ｜HyperFramesは短い動画をClaude Codeに頼むところから始めよう

HyperFramesの要点は、以下のとおりです。

• HyperFramesは、HeyGenが公開するApache 2.0のオープンソースで、HTMLで書いた画面を動画に書き出せる
• ローカルでの制作・書き出しは無料で、費用がかかるのはAIエージェントやクラウドの任意のサービス
• Node.js 22以上とFFmpegを用意し、Claude Codeにプラグインを入れて日本語で依頼すれば最初の動画を作れる
• Reactで書くRemotionに対し、HyperFramesはHTMLで書くため、AIエージェントやWeb素材と相性がよい
• つまずいたら「npx hyperframes doctor」と「npx hyperframes lint」で原因を確認する

まずはClaude CodeにHyperFramesのプラグインを入れ、5秒のタイトル動画を1本作るところから試してみましょう。