HyperFrames vs Remotion：8種類の動画を Claude Code で32回作って比較

HyperFrames は、HTML を動画に変換する HeyGen のオープンソースフレームワークで、AI エージェントでの利用を前提に作られています。2026年3月に公開され、11月12日時点で GitHub スター数は 83,246。Remotion の 72,708 を上回っています（GitHub の HyperFrames、GitHub の Remotion）。どちらもやることは同じで、ヘッドレスブラウザでページを開き、全フレームをキャプチャして動画にエンコードします。では、AI エージェントに任せるなら、より良い動画を作れるのはどちらでしょうか。

HeyGen 自身の比較では、ローンチ動画1本をそれぞれ1回ずつ作っただけでした（HyperFrames vs Remotion）。私たちは差が実際どこから生まれるのかを知りたかったので、よく作られる種類の動画から8つの制作タスクを選び、Claude Code に両フレームワークで作らせたうえで、それぞれに現実的な修正も依頼しました。Claude Opus 5.5 で合計32回の実行です。すべての動画をフレーム単位で確認し、表示順を入れ替えた2通りのブラインド評価にかけました。

開示：iArt は Remotion をベースにしているため、利害関係があります。そのため全プロンプトを公開しており、誰でも同じテストを再実行できます。

テスト方法

• エージェント：Claude Code 2.1.322 と Claude Opus 5.5。HeyGen が自社比較で使ったのと同じモデルです。各プロンプト以外の指示は与えていません。
• Remotion 4.0.542：npx create-video --blank --skills で作成した空のプロジェクト。Remotion 公式のエージェント用スキルがインストールされます。
• HyperFrames 0.9.33：空のフォルダに npx skills add heygen-com/hyperframes で HeyGen 公式スキルを追加。
• 8つのタスクは、AI モーショングラフィックスでよく作られるものから選びました。キネティックタイポグラフィ、SVG ファイルからのロゴリビール、データチャート、プロダクト UI デモ、仕組みの解説アニメーション、OBS 用の透過ロワーサード、ルートマップ、テキストメッセージ動画です。どのプロンプトも最後は「Render the final MP4 to out.mp4 in this folder. Don't ask me questions; make the choices yourself.」（最終 MP4 をこのフォルダの out.mp4 に書き出すこと。質問はせず、判断は自分で行うこと）で締めています。
• 各タスクに修正依頼を1回、同じセッション内で行いました。内容はタスクごとに異なる現実的な変更で、いずれも最初のファイルは残すよう指示しています：
  • キネティックタイポグラフィ：アクセント色を #2B5BFF に、2秒短縮
  • SVG からのロゴリビール：縦型 1080×1920
  • アニメーション棒グラフ：2つの値を変更
  • プロダクト UI デモ：ダークモード、タスク文言の変更
  • ヒートポンプの仕組み：締めのシーンを追加
  • 透過ロワーサード（OBS）：名前・肩書き・色を変更
  • ルートマップ（リスボン→ベルリン）：プラハを追加し、距離を更新
  • テキストメッセージ動画（9:16）：WhatsApp 風の見た目、メッセージを1件追加
• チェック項目：全ファイルの解像度・長さ・コーデック、2つの WebM オーバーレイのアルファチャンネル、修正後も最初のファイルが変更されていないか、コンタクトシートでの全フレーム確認、そしてブラインド評価（Gemini にプロンプトと「動画 A」「動画 B」だけを渡す）です。ブラインド評価はペアごとに順序を入れ替えて2回実施し、両方の順序で結果が一致した場合のみ勝ちとしました。
• マシン：Apple M3 MacBook（16 GB）、パスの通った FFmpeg 環境。負荷条件をそろえるため各ペアは同時に実行しました。手作業での修正は一切していません。

結果

時間は MP4 が書き出されるまでの実時間です。32回すべてが指定どおりのサイズと長さでファイルを出力し、両側とも8件の修正すべてが依頼どおりに反映され、元のファイルに手を加えたものはありませんでした。

8つのタスクを並べて比較

以下の各タスクでは、実際に使ったプロンプト、両方の初回版、私たちの判定、続いて修正依頼とそれぞれの対応を示します。

1. キネティックタイポグラフィ

Make a 12-second 1920x1080 kinetic typography video for the line "Ship small. Ship often. Learn fast." Each phrase gets its own distinct motion, and the video ends holding the full line on screen for at least two seconds. Dark background, one accent colour. No voice.

どちらのエージェントも、各フレーズに専用のシーンを与えてから全文を組み上げました。HyperFrames は文字を大きく組み、エコーする「often.」が読みやすくなっています。Remotion 版はビートの間に完全に空白のフレームが1枚あります。ブラインド評価：両順序とも HyperFrames。私たちの判定：わずかに HyperFrames。

修正依頼：

Change the accent colour to electric blue #2B5BFF and make the whole video 2 seconds faster (10 seconds total), keeping the final hold. Render to out-edit.mp4 and keep out.mp4 as it is.

どちらも指定どおりの青に変更し、最後の静止を残したまま 10秒に短縮しました。

2. SVG からのロゴリビール

Make an 8-second 1920x1080 logo reveal for a fictional coffee brand using the logo in logo.svg in this folder. Use the logo's own paths (don't redraw or replace it); the mark draws or assembles itself, then the wordmark appears, and the finished logo holds for at least 2 seconds. Warm, premium feel. No voice.

どちらも SVG 自身のパスを使っています。円が描かれ、波が続き、最後にワードマークが現れます。また、どちらもロゴの下に頼まれていないタグラインを勝手に付け加えました。ブラインド評価：2つの順序で結果が割れました。私たちの判定：引き分け。

修正依頼：

Make a vertical 1080x1920 version for Instagram Stories. Same reveal, re-laid out for the tall frame. Render to out-edit.mp4 and keep out.mp4 as it is.

ここでは差が出ました。Remotion のエージェントは縦長の画面に合わせてロゴを組み直し、マークをワードマークの上に配置しました。HyperFrames のエージェントは横長のロゴをそのまま縮小しただけで、画面の大部分が空いたままです。

3. アニメーション棒グラフ

Make a 15-second 1920x1080 animated bar chart titled "Daily screen time by age (demo data)". Exact values in hours: 13–17: 8.5, 18–24: 7.2, 25–34: 6.1, 35–44: 5.0, 45–54: 4.3, 55+: 3.4. Bars grow in one after another, each value counts up as its bar grows, and the finished chart holds for at least three seconds. Clean, light, editorial style. No voice.

どちらも数値は正確です。Remotion のグラフは正しく、シンプルです。HyperFrames のグラフは 13–17 のバーを強調して残りをグレーにし、注釈を1つ（「Teens log 2.5× the daily screen time of the 55+ group」。8.5 ÷ 3.4 で正しい値）と出典表記を加えています。いずれもプロンプトでは求めていないものです。ブラインド評価：両順序とも HyperFrames。私たちの判定：HyperFrames。

修正依頼：

The data changed: 25–34 is now 6.6 and 55+ is now 2.9. Update the chart and render to out-edit.mp4. Keep out.mp4 as it is.

どちらも2つの値を更新しました。HyperFrames は自分で付けた注釈も 2.9× に再計算しています。

4. プロダクト UI デモ

Make a 15-second 1920x1080 product micro-demo for a fictional to-do app called Tally. Show the app window; a cursor clicks "Add task", types "Send invoice", presses enter, then checks the task off. The list then shows an "All done for today" state with a small confetti burst. Clean light UI, realistic cursor movement. No voice.

レイアウトもカーソルの動きも紙吹雪も同じです。HyperFrames の文字は小さいサイズでも読みやすく、さらにプロンプトにないスローガン（「Count it done.」）入りのエンドカードを追加しました。Remotion は完了したリストのままフェードアウトします。ブラインド評価：両順序とも HyperFrames。私たちの判定：引き分け。

修正依頼：

Make it dark mode, and change the task text to "Book flights". Render to out-edit.mp4 and keep out.mp4 as it is.

どちらもダークモードに切り替え、「Book flights」と入力しました。

5. ヒートポンプの仕組み

Make a 20-second 1920x1080 explainer animation of how a heat pump heats a house in winter. Show the outdoor unit pulling heat from cold outside air, the refrigerant loop carrying it indoors (compressor makes it hot, it releases heat inside, expansion valve cools it again), and the warm room. Label the four parts: evaporator, compressor, condenser, expansion valve. Keep it clear and diagrammatic, flat style, cold blues outside and warm oranges inside. The flow of heat must be easy to follow. No voice.

どちらも4つの部品すべてにラベルを付け、熱の流れを追いやすく表現しています。Remotion は小さな文字を多く詰め込み、HyperFrames は大きな文字で1ステップに1つの要点を示し、「It doesn't make heat. It moves heat inside.」で締めています。ブラインド評価：両順序とも HyperFrames。私たちの判定：HyperFrames。

修正依頼：

Add one final 4-second scene with the line "Up to 3× more heat than the electricity it uses" and render the full video to out-edit.mp4. Keep out.mp4 as it is.

どちらも締めのシーンを追加しました。Remotion はアイコンと2つのラベルを使い、HyperFrames は電気1ブロックに対して熱3ブロックを描いて対比させました。

6. 透過ロワーサード（OBS）

Make a 6-second animated lower third for a livestream: name "Maya Chen", title "Head of Product, Northwind". It slides in, holds, and slides out. It must have a truly transparent background so I can put it over my camera in OBS: render it as a WebM with an alpha channel to out.webm (VP9, yuva420p). 1920x1080, positioned in the lower left. Also render an MP4 preview of it over a mid-grey background to out.mp4. No voice.

ここではグレーのプレビュー背景の上で表示しています。2つはほぼ同一で、どちらの WebM ファイルにも本物のアルファチャンネルがあります。ピクセルの 96% が完全に透明で、バー部分は完全に不透明です。ブラインド評価は両順序とも HyperFrames で、理由は「Remotion には退場アニメーションがない」というものでしたが、これは誤りです。実際にはフェードしながら縮んで消えます。私たちの判定：引き分け。

修正依頼：

Change the name to "Daniel Okafor" and the title to "Founder, Riverline", and make the accent colour green #19C37D. Render out-edit.webm (transparent) and out-edit.mp4 (grey preview). Keep the originals.

どちらも透過 WebM とプレビューの両方で、名前・肩書き・アクセント色を変更しました。

7. ルートマップ（リスボン→ベルリン）

Make a 15-second 1920x1080 travel route map animation, Vox / documentary style: a stylised map of western Europe, and a route that draws itself Lisbon → Madrid → Paris → Amsterdam → Berlin, with each city dot and label popping in as the line reaches it, a gentle camera follow along the route, and a small counter of kilometres travelled. Muted paper map colours, one bold route colour. No voice.

どちらもヨーロッパの実際の地形を描き、線が到達するたびに都市を表示し、同じ 3,055 km にたどり着きました。HyperFrames は国名と各都市の下に距離を加え、Remotion はカメラが線をより密に追いかけます。ブラインド評価：両順序とも HyperFrames。私たちの判定：ほぼ引き分け。

修正依頼：

Add Prague as a final stop after Berlin and update the kilometre counter. Render to out-edit.mp4 and keep out.mp4 as it is.

どちらもプラハを追加し、カウンターを 3,405 km に更新しました。

8. テキストメッセージ動画（9:16）

Make a 15-second vertical 1080x1920 text-message conversation video, iMessage style, between "Sam" and "Alex". Messages appear one at a time with a typing indicator before each reply: Sam: "did you finish the deck?" / Alex: "almost 😅" / Alex: "20 min" / Sam: "client call is in 10" / Alex: "…" / Alex: "ok 5 min". Realistic phone chat UI, readable on a phone, end holding the full chat for 2 seconds. No voice.

実質的に同じチャットです。HyperFrames は Sam のメッセージを入力欄にタイプしてから送信しています。どちらもスマホ画面にしては吹き出しが小さめでした。ブラインド評価：割れました。私たちの判定：引き分け。

修正依頼：

Switch it to a WhatsApp-style look (green outgoing bubbles, beige patterned background) and add one final message from Sam: "🙏". Render to out-edit.mp4 and keep out.mp4 as it is.

どちらも WhatsApp 風の見た目に切り替え、🙏 を追加しました。

発見1：同じモデルなら、動画は似通ってくる

8つのタスクを見渡してまず気づくのは、両者がいかに似ているかです。どちらもヨーロッパの実際の地形を描き、ルートの距離も同じ 3,055 km と算出しました。To-Do アプリはどちらもレイアウト、カーソルの動き、紙吹雪まで同じです。ロワーサードは同じサイズ、同じ位置で、どちらも本物のアルファチャンネルを持っていました。フレームワークが決めるのはエージェントが動画をどう書くかであって、何を思い描くかではありません。

これは以前に Claude Sonnet 5.5 で行った同じテストの結果とも一致します。そのときはキネティックタイポグラフィで大きな差が出て、Remotion のエージェントは3行のテキストを隅に積み重ねただけでした。Opus では、どちらのエージェントも各フレーズに専用のシーンを与えています。フレームワークの差が効いてくる前に、モデルの性能がその差の大半を埋めてしまったわけです。

発見2：Remotion が速いのは、Claude がすでに知っているから

Remotion は初回版8本のうち7本を先に仕上げ、合計時間は 25.9分対39.7分、エージェントのステップ数は 96対176 でした。原因はレンダリングではありません。セッションログを読むと、時間の使われ方がわかります：

• Remotion のエージェントが Remotion 公式スキルを開いたのは、8セッション中1回だけでした。Remotion は 2020年から存在しており、Claude は記憶だけで書けます。
• HyperFrames のエージェントは8セッションすべてで HyperFrames のスキルを読み込み、さらにリファレンスファイルを15回読みました。HyperFrames は登場から8か月しか経っておらず、エージェントは毎回学び直す必要があります。
• シェルコマンドの実行回数も2倍以上（154対69）で、その大半は HyperFrames 独自の init、check、lint、snapshot でした。

自分の出力フレームを確認した回数はどちらもほぼ同じ（画像の読み込みが 48回と47回）なので、余分な時間は品質チェックに使われたわけではありません。新しいモデルが HyperFrames を学習するにつれ、この差は縮まっていくはずです。

発見3：HyperFrames の強みはデザインガイドにある

棒グラフ（タスク3）を見ると、ブラインド評価で HyperFrames が好まれた理由がわかります。Remotion のグラフは正しく、シンプルです。HyperFrames のグラフは 13–17 のバーをオレンジで強調して残りをグレーにし、注釈を1つ（「Teens log 2.5× the daily screen time of the 55+ group」。8.5 ÷ 3.4 で正しい値）と小さな出典表記を加えています。どれもプロンプトにはありません。しかし HyperFrames のスキルには、ほぼそのまま書かれています：

Highlight one series, grey the rest.
Build a chart in reading order: the frame and axis, a reference line,
then the data drawing in, then one annotation on the point that matters.
Real data only, from the source, rounded the same way everywhere,
with a small source line on screen.

出典：HyperFrames の data リファレンス。

このスキルはモーションデザイナーのスタイルガイドのような内容で、チャート、キネティックタイポグラフィ、地図、テンポについてのルールが並んでいます。一方、Remotion の公式スキルは技術リファレンスで、プロジェクトの作り方、レンダリング、字幕の追加、地図ライブラリの使い方などが中心です。つまり品質の差はプロンプトの差です。Remotion を使うなら、デザインルールをプロンプトやプロジェクトの指示ファイルに書いておけば、余分なステップなしで同じ振る舞いが得られます。キネティックタイポグラフィでも同様で、HyperFrames のルールは「1シーンあたり英単語3〜7語」です（film リファレンス）。

発見4：どちらも修正は正確、組み直しは Remotion が上手

修正はどれも両側で成功しました。データの変更、配色の変更、経由地の追加、ダークモード、締めのシーンの追加。いずれも元のファイルはそのまま残っています。唯一の本質的な差はレイアウトでした。ロゴリビール（タスク2）の縦型版を頼んだところ、Remotion のエージェントは縦長の画面に合わせてマークをワードマークの上に積み直しましたが、HyperFrames のエージェントは横長のロゴを縮小しただけで、画面の半分が空いたままでした。

もう1つ、両者に共通していたのが、頼まれていない文言の追加です。どちらのロゴリビールもワードマークの下にタグラインを作り出し、HyperFrames の UI デモはスローガン入りのブランドカードで終わりました。文言が重要な場合は、プロンプトの最後に「No other text.」と書いておきましょう。

手元に残るもの

タイミングモデルは1つに絞らなくていい

HyperFrames の売りはシーク方式です。通常の GSAP タイムラインを書き、レンダラーがそれを各フレームへジャンプさせます。同じことは Remotion の中でもできます。タイムラインを一時停止状態で作り、現在のフレームから時間をセットするだけです。

const Title = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const ref = useRef(null);
  const tl = useRef(null);
  useLayoutEffect(() => {
    tl.current = gsap.timeline({ paused: true })
      .from(ref.current, { y: 40, opacity: 0, duration: 0.5, ease: "power3.out" });
  }, []);
  useLayoutEffect(() => { tl.current?.totalTime(frame / fps); }, [frame, fps]);
  return <h1 ref={ref}>Ship small.</h1>;
};

iArt もこの方式でレンダリングしています。エージェントが GSAP タイムラインを書き、Remotion がクロック・プレビュー・書き出しを担い、エージェントへの指示にデザインルールを持たせています。これこそが今回のテストの本当の教訓です。レンダラーよりも、エージェントに何を伝えるかのほうが重要なのです。

どちらを使うべきか

このテストの限界

タスクは8つ、各フレームワークで1回ずつの実行、モデルもマシンも1種類です。1回の実行だけでは個々のタスクについてほとんど何も言えないため、私たちが報告しているのは8タスク全体を通したパターンです。ブラインド評価は AI モデルによるもので、少なくとも1回は誤っていました（Remotion のロワーサードに退場アニメーションがないとしましたが、実際にはあります）。そのため、私たち自身のフレーム単位の判定を併記しています。テストは両者とも Claude Code とコマンドラインツール経由で行い、HyperFrames Studio、Remotion Studio、各クラウドレンダラーは使っていません。全プロンプトを上に掲載しているので、誰でも再実行できます。

FAQ

HyperFrames は Remotion より優れていますか？

AI エージェントが単独で作業する場合、今回のテストでは HyperFrames のほうがわずかに完成度の高い動画を作りました。ブラインド評価では8タスク中6つで HyperFrames が選ばれ、Remotion が一貫して選ばれたことは一度もありません。一方、Remotion は1タスクを除くすべてでより速く、エージェントのステップ数も約半分でした。品質差の大部分は HyperFrames のデザインガイドによるもので、同じガイドは Remotion のエージェントにも渡せます。

なぜ Claude Code は HyperFrames だと遅いのですか？

HyperFrames は新しいため、エージェントは毎セッションでスキルを読み込み、ドキュメントを読みます。今回の実行では8タスクすべてでそうしていました。一方、Remotion のスキルを開いたのは8回中1回だけで、あとは既存の知識で書いていました。さらに HyperFrames のコマンドラインによるチェックが、レンダリングのたびにステップを増やします。

Remotion で GSAP は使えますか？

はい。一時停止した GSAP タイムラインを作り、レンダリングのたびに Remotion の現在のフレームから時間をセットします。これは HyperFrames が採用しているシーク方式を Remotion の中で再現したものです。iArt もこの方法でアニメーションをレンダリングしています。

どちらも OBS 用の透過動画を書き出せますか？

はい。今回のテストでは、どちらも本物のアルファチャンネルを持つ VP9 WebM を出力しました。ピクセルの 96% が完全に透明で、ロワーサード部分は不透明であることをフレーム単位で確認しています。

Remotion は無料ですか？

Remotion は個人、従業員3名までの営利企業、非営利団体であれば無料です。それより大きな企業は有料のカンパニーライセンスが必要です。HyperFrames は Apache 2.0 のオープンソースです。

HyperFrames には FFmpeg のインストールが必要ですか？

はい。HeyGen のホスト型レンダリングを使わない限り、コマンドラインツールには Node.js 22 以降と FFmpeg が必要です。Remotion はバージョン 4.0 以降、レンダラーに FFmpeg を同梱しています。

どちらのフレームワークもセットアップせずに、こうした動画を作れますか？

はい。iArt は Remotion と GSAP をベースにしたホスト型の動画エージェントです。作りたい動画を普通の言葉で説明すれば、コードの作成からレンダリング、書き出しまで行います。インストールも、Node のバージョン管理も、FFmpeg の管理も不要です。