動画 · トレンド
HyperFrames で Claude の動画を MP4 に書き出す: 実際に試した手順
今週、Claude Opus 5.5 の動画についての投稿では、HyperFrames や Remotion といったレンダラーの名前がよく挙がります。Claude が動画をコードとして書き、レンダラーがそれを MP4 にする、という仕組みです。HyperFrames は HeyGen が公開しているオープンソースのレンダラーです。2026年9月28日の時点で、Google Trends の 90 日間の表示では、HyperFrames は Remotion に関連して最も急上昇している検索語の一つでした。
私たちは、小さなお店が使うのと同じやり方で試しました。2026年9月28日、Opus 5.5 で動く Claude Code のセッションに、claude.ai で使ったのと同じカフェの Reel の依頼と、HyperFrames のコマンドラインを渡しました。Ciyo は Claude Opus 5.5 を提供していません。写真は Ciyo で作り、それ以外はすべて MacBook の上で動かしました。
HyperFrames がすること
HyperFrames は、要素にタイミングの属性がついた HTML ページを読み込み、ヘッドレスの Chrome でフレームごとに再生し、ffmpeg でそのフレームを MP4 にエンコードします。各フレームはリアルタイムで録画するのではなくページから計算されるので、同じファイルからは毎回同じ動画ができます。
このプロジェクトは Apache 2.0 ライセンスのオープンソースです。GitHub のリポジトリは 2026年3月に作られ、バージョン 0.8.81 は 2026年9月27日にリリースされました。Claude Code 用のプラグインとコマンドラインツールがあります。私たちは npx 経由でコマンドラインを使ったので、グローバルには何もインストールしていません。
| 比較項目 | claude.ai | Claude Code + HyperFrames |
|---|---|---|
| 書き出すのは誰か | チャットのサンドボックスで動く Claude 自身のスクリプト | あなたのコンピューター上の HyperFrames |
| 手元に残るもの | MP4 | MP4 と、編集できる HTML のコンポジション |
| 一行だけ変えるには | もう一度頼む。書き出し直してくれる | HTML を編集して、もう一度書き出す |
| 同じファイルから同じ動画ができるか | 未検証 | できる。私たちのテストではバイト単位で同一 |
依頼と写真
商品写真は Ciyo で 2K で作り、1440 × 2560 ピクセルになりました。Reel に必要な 1080 × 1920 より大きなサイズです。そのうえで、claude.ai で送ったのと同じカフェの依頼を Claude Code に渡し、指示を一つだけ加えました。HyperFrames のコマンドラインを使い、その形式を HyperFrames 自身のドキュメントから学ぶこと、という指示です。
HyperFrames の CLI は npx -y hyperframes@0.8.81 経由で使ってください。コンポジションの形式は npx -y hyperframes@0.8.81 docs（data-attributes、compositions、gsap、rendering）から学んでください。スキル、プラグイン、その他何もグローバルにインストールせず、公開もしないでください。最終的な動画は fernhollow-reel-hyperframes.mp4 として渡してください。Claude が行ったこと（手順ごと）
作業全体にかかったのは 5 分 44 秒でした。Opus はドキュメントを読み、init でプロジェクトの雛形を作り、四つのトラックを持つ HTML ファイルを一つ書きました。写真、見出し、キャンペーンの内容、エンドカードの四つです。それぞれが開始時刻と長さを持つ要素で、その中で起きる動きは GSAP がアニメーションにします。
書き出しの前に、HyperFrames の check コマンドを実行しました。エラーはなく、構造に関する警告が四つ見つかりました。さらに、選んだ時点の静止画を snapshot で撮りました。その静止画では価格がグラスの上部に重なっていたので、ズームの基準点を動かし、タイトルを小さくしました。また、"New for autumn" を大文字にしてしまっていた大文字化のスタイルを外し、文字を書いたとおりに保ちました。
書き出しを測定する
render コマンドは、M1 Max チップを積んだ MacBook Pro で 59 秒かかりました。MP4 は 1080 × 1920、毎秒 30 フレーム、450 フレーム、15.0 秒、16.4 MB で、音声トラックはありません。5 行の文言はすべて正確です。
続けて、同じプロジェクトをもう一度書き出しました。今度は 28 秒で、ファイルはバイト単位で同一でした。SHA-256 のチェックサムが同じで、450 フレーム中 450 フレームが一致しています。これこそが、コードで作る動画がビジネスに役立つ理由です。価格を一つ変えれば、変わるのはその価格だけです。
レンダラーはデザインを直さない
HyperFrames は書き出しを正確にしますが、デザインを良くするわけではありません。この Reel には、Opus が claude.ai で作ったものと同じ癖がありました。最初のフレームには文字がなく、最初の行は 0.5 秒からフェードインし、エンドカードでは写真の上に暗いオーバーレイが重なるので、グラスの明るさは 255 のうち約 43 まで下がります。
良い知らせは、どの修正も一つのファイルの小さな編集で済むことです。最初のフレームに名前を出し、エンドカードで商品を明るく見せるよう Claude に頼めば、1 分もかからずに書き出し直せます。
始める前に知っておくこと
HyperFrames を使うには、コンピューターに Node 22、Chrome、ffmpeg が必要です。doctor コマンドでこれらを確認できます。このプロジェクトは GSAP を CDN から、フォント二つを Google Fonts から読み込み、macOS のシステムフォントも使っていたので、Docker のオプションを使わない限り、別のコンピューターで書き出すと見た目が変わることがあります。また、コマンドラインには匿名の利用状況の送信（テレメトリー）があり、hyperframes telemetry disable でオフにできます。
| コマンド | したこと |
|---|---|
| npx hyperframes docs | コンポジションの形式を表示した |
| npx hyperframes init | プロジェクトのファイルを作った |
| npx hyperframes check | 書き出しの前に、レイアウトとコントラストの問題を見つけた |
| npx hyperframes snapshot | 選んだ時点の静止画を書き出した |
| npx hyperframes render | MP4 を書き出した |
HyperFrames と Claude
HyperFrames とは何ですか
HeyGen が公開しているオープンソースのツールで、HTML、CSS、JavaScript のアニメーションを、ヘッドレスの Chrome でフレームごとに MP4 や WebM に書き出します。
Claude で動画を作るのに必要ですか
claude.ai では必要ありません。そこでは Opus 5.5 が自分のスクリプトで MP4 を書き出しました。自分のコンピューターの Claude Code では、HyperFrames のようなレンダラーが HTML を動画にし、元のファイルも編集できる状態で残ります。
書き出しにはどのくらいかかりますか
私たちの 15 秒、1080 × 1920 の Reel は、M1 Max の MacBook Pro で、1 回目は 59 秒、2 回目は 28 秒かかりました。
Ciyo で HyperFrames や Opus 5.5 を使えますか
いいえ。Ciyo で作ったのは商品写真です。Opus 5.5 と HyperFrames は、手元のコンピューターの Claude Code で動かしました。
動かす価値のある写真から始める
Ciyo で商品の静止画を 2K で生成し、そのまわりの動きはコードに組み立てさせましょう。