HyperFramesは、HTML・CSS・画像・音声・アニメーションを組み合わせ、MP4動画へ書き出せるオープンソースの仕組みです。CodexのようなAIコーディングエージェントへ専用スキルを追加すると、動画の設計、HTML作成、検査、プレビュー、レンダーまでを同じ作業フォルダで進められます。
ただし、Macアプリを1つ入れれば終わる種類のツールではありません。Node.js、FFmpeg、HyperFrames CLI、エージェント用スキルの役割を分けて準備する必要があります。
そこで今回は、HyperFramesとFFmpegが入っていない状態から始め、空のプロジェクトを作り、5秒の動画をMP4へ書き出すまでを実際に試しました。さらにブログ掲載用として、「HTML→CHECK→MP4」の流れを8秒で見せるモーショングラフィックも作成しています。
- 検証日：2026年7月27日
- Mac：Apple M1、8コア、メモリ16GB
- Node.js：v25.2.1
- npm / npx：11.6.2
- Homebrew：6.0.12
- FFmpeg：8.1.2
- HyperFrames CLI：0.7.76
- 最小作例：1920×1080px、30fps、5.0秒、draft品質
- ブログ用作例：1920×1080px、30fps、8.0秒、high品質
先に結論を言うと、Codex DesktopからHyperFramesを使うだけなら、通常のターミナルでcodexコマンドが使えなくても今回の作例は完成しました。必要だったのはNode.js 22以上、FFmpeg、HyperFramesのCore Skillsです。
HyperFramesとは：HTMLをフレーム単位で動画へ変換する仕組み
公式READMEでは、HyperFramesはHTML、CSS、メディア、時間を移動できるアニメーションを、決定的なMP4へ変換するオープンソースフレームワークとして説明されています。
動画編集ソフトのタイムラインを直接操作する代わりに、index.htmlへ画面の見た目と表示時間を書きます。レンダー時はヘッドレスChromeが各フレームを描画し、FFmpegが動画へまとめます。
HyperFramesの中心は「AIに動画を丸投げするサービス」ではなく、AIと人が読み直せるHTMLを原稿にして動画を作ることです。出力前にLint、レイアウト、動き、コントラストをCLIで検査できます。
公式の必要環境はNode.js 22以上とFFmpegです。HyperFramesはApache 2.0 Licenseで公開されています。機能やコマンドは更新される可能性があるため、実行前に公式READMEも確認してください。
インストール前に必要なものを確認する
ターミナルで次を順番に実行します。
node --version
npm --version
npx --version
brew --version
ffmpeg -versionNode.jsが22未満、またはcommand not foundになる場合は、先にNode.js公式配布かHomebrewでNode.jsを用意します。今回のMacではNode.jsとHomebrewは導入済みでしたが、FFmpegは入っていませんでした。
FFmpegをHomebrewで入れる
Homebrewを利用しているMacでは、次のコマンドでFFmpegを導入できます。
brew install ffmpeg完了後にバージョンを確認します。
ffmpeg -version
今回入ったパッケージはffmpeg 8.1.2_1で、ffmpeg -versionでは8.1.2と表示されました。
HyperFramesのCore SkillsをCodexへ導入する
公式READMEには、AIコーディングエージェント向けの対話式コマンドとして次が掲載されています。
npx skills add heygen-com/hyperframes --full-depth対話画面では何も選ばれていない状態から始まります。最初は「Core Skills」だけで十分です。Codexだけへ入れたい場合は、表示されたエージェント一覧で対象をよく確認します。
一方、エージェント自身が実行する場合や、選択を固定した非対話実行では、公式READMEが次を案内しています。
npx hyperframes skills update今回の再現テストでは、バージョン情報も保存するため次を実行しました。
npx --yes hyperframes@latest skills update --json導入されたCore Skillsは8件です。
hyperframes
hyperframes-animation
hyperframes-cli
hyperframes-core
hyperframes-creative
hyperframes-keyframes
hyperframes-registry
media-use
今回の環境ではCodex用だけでなく、CLIが検出したAntigravity、Claude、Gemini側にもリンクが作られました。Codexだけへ限定したい人は、対話式のskills addで対象を選ぶほうが確認しやすいです。
Codex側の一覧は次で確認できます。
npx skills list -g --agent codexスキルの安全表示を読み飛ばさない
インストール中、skills CLIは各スキルの安全性に関する自動評価を表示しました。今回、media-useには3件のアラートとCritical Risk表示がありました。
これは直ちに不正なコードだと確定した意味ではありませんが、media-useが画像、音声、生成モデルなど幅広い外部処理を扱うスキルであることを踏まえ、内容を確認してから使うべきサインです。APIキー、顧客データ、未公開素材を含むプロジェクトで、導入直後にすべての機能を試すのは避けました。
CLIは匿名利用情報の送信についても表示します。今回の検証では、永続設定を変えず、対象コマンドと同じ行の先頭に環境変数を付けました。
HYPERFRAMES_NO_TELEMETRY=1 npm run check永続的に無効化したい場合は、CLIが案内するhyperframes telemetry disableの内容を確認してから実行します。
スキルはAIエージェントの作業方針と実行範囲へ影響します。導入元、ライセンス、インストール対象、安全表示を確認し、最初は認証情報のない空プロジェクトで試してください。
空のHyperFramesプロジェクトを作る
作業用フォルダで、空テンプレートを指定して初期化します。
npx --yes hyperframes@latest init first-video \
--example blank \
--non-interactive
cd first-video今回の環境では、次のファイルが作られました。
AGENTS.md
CLAUDE.md
hyperframes.json
index.html
meta.json
package.json
blankテンプレートを初期化した実画面。作成ファイルと、プレビュー・検査・レンダーまでの案内が表示されます。Codex Desktopでは、このfirst-videoフォルダを作業フォルダとして開きます。スキルを導入した直後のタスクで認識されない場合は、新しいタスクを開くかCodexを再起動してから「HyperFramesを使って5秒のタイトル動画を作って」と依頼します。
今回の検証では、同じタスク内で新しいスキルの自動読み込みを前提にせず、公式の空テンプレートをCodexで編集しました。背景、タイトル、サブタイトル、GSAPの登場・退場アニメーションをindex.htmlへ追加しています。
作例のソースは次へ保存しています。
examples/2026-07-27-hyperframes-first-video/npm run checkで動画を検査する
MP4を書き出す前に、プロジェクトフォルダで次を実行します。
HYPERFRAMES_NO_TELEMETRY=1 npm run check最初の検査では、タイムライン上の枠に安定したidがないという警告が1件出ました。id="scene-frame"を付けて再実行した結果、次の項目がすべて合格しました。
- Lint：0 errors、0 warnings
- Runtime：0 errors、0 warnings
- Layout：9サンプルで0 issues
- Motion：0 errors、0 warnings
- Contrast：17/17件がWCAG AA合格
npm run checkで検査した結果。個人パスは~へ置き換えて撮影しています。コードが動いても、文字が読めない、画面外へはみ出す、時間指定が壊れている可能性はあります。Check passedを確認してからレンダーへ進むと、書き出し後のやり直しを減らせます。
MP4を書き出す
今回は動作確認を優先し、draft品質で書き出しました。
HYPERFRAMES_NO_TELEMETRY=1 npm run render -- --quality draft初回だけ、HyperFrames用のヘッドレスChrome約94.5MBが追加でダウンロードされました。回線が不安定な場合は、この工程で止まる可能性があります。
2回目の実測結果は次のとおりです。
| 項目 | 結果 |
|---|---|
| 解像度 | 1920×1080px |
| フレームレート | 30fps |
| 長さ | 5.0秒 |
| 形式 | H.264 MP4 |
| 品質 | draft |
| 容量 | 約339KB |
| レンダー時間 | 約7.4秒 |
この数値はApple M1、8コア、メモリ16GBの今回の作例に限った結果です。動画の長さ、画像・音声素材、エフェクト、品質、Macの性能で変わります。
~へ置き換えて撮影しています。MP4はプロジェクト内のrenders/フォルダへ保存されます。
ブログ掲載用に8秒のモーショングラフィックも作った
最小の5秒作例で基本動作を確認したあと、ブログで実際に再生できる作例として、8秒のモーショングラフィックを追加で作りました。伝える内容は「HTMLで作る」「CHECKで検査する」「MP4へ変換する」の3段階です。
この作例では、最初に制作ブリーフとショット設計を用意し、GSAPのシーク可能なタイムラインで動きを実装しました。レンダー前の最終検査結果は次のとおりです。
- Lint：0 errors、0 warnings
- Runtime：0 errors、0 warnings
- Layout：5地点で0 issues
- Motion：161サンプルで0 issues
- Contrast：73/73件がWCAG AA合格
高品質レンダーの実測結果です。
| 項目 | 結果 |
|---|---|
| 解像度 | 1920×1080px |
| フレームレート | 30fps |
| 長さ | 8.0秒 |
| 形式 | H.264 MP4 |
| 品質 | high |
| 音声 | なし |
| 容量 | 約1.2MB |
| レンダー時間 | 約14.6秒 |
動画はH.264とyuv420pで書き出しています。WordPressへ掲載するときはMP4とポスター画像をメディアへ登録し、SWELLの動画ブロックで同じファイルを指定します。自動再生にはせず、読者が再生ボタンを押せる設定にしました。
実際に起きた3つの注意点
1. doctorがok:falseでも基本レンダーはできた
npx hyperframes doctor --jsonでは、Node.js、FFmpeg、FFprobe、Chromeは合格しました。一方、Whisper.cpp、Kokoro TTS、MusicGen、Dockerがないため、全体はok:falseでした。
これらは文字起こし、音声合成、音楽生成、Docker利用に関係する追加機能です。今回のHTMLから無音MP4を作る基本テストでは使わず、検査とレンダーは完了しました。ok:falseだけで全部失敗と判断せず、どの項目が必須かを分けて読みます。
2. 公式サンプルでも現在の検査に通らないものがあった
CLIに含まれるswiss-gridをそのまま検査すると、caption_transcript_parse_errorが1件出ました。warm-grainではコントラストのエラーが2件出ました。
公式サンプルだから現在の検査へ必ず合格するとは限りません。この記事の作例はblankから始め、警告も0件になるまで修正しました。
3. ENOTFOUND registry.npmjs.orgはネットワーク側を確認する
検査を実行した際、最初はnpmレジストリの名前解決に失敗し、ENOTFOUNDが出ました。HyperFramesのコードエラーではなく、CLIパッケージを取得するためのネットワーク接続が原因です。
少し時間を置き、ブラウザでnpmへ接続できることを確認してから同じコマンドを再実行すると完了しました。会社や学校のネットワークでは、プロキシやファイアウォールの確認が必要な場合もあります。
まとめ：最初はCore Skillsと空プロジェクトで十分
HyperFramesをCodexで試す最短ルートは、次の3段階です。
- Node.js 22以上とFFmpegを確認する
- 公式手順でCore Skillsを入れ、Codex側の一覧を確認する
blankプロジェクトをcheckしてからMP4へrenderする
今回、Codex CLIが通常のターミナルで使えないMacでも、Codex DesktopとHyperFrames CLIの組み合わせで5秒の最小作例と、8秒のブログ用モーショングラフィックを書き出せました。
次に音声、字幕、外部画像を追加する場合も、いきなり本番素材を使わず、この作例のコピーで1機能ずつ試すのが安全です。公式のCore Skillsは更新されるため、実行時のREADME、バージョン、安全表示も一緒に確認してください。
Codexへ別の制作スキルを入れる流れは、HallmarkをCodexにインストールする方法でも実画面付きで紹介しています。Macの作業状況をメニューバーで確認したい場合は、CodexBarをMacにインストールする方法も参考になります。
コメント