---
title: "動画をHTMLで書く｜Premiere Pro・Remotion・HyperFramesを全部試した結論"
excerpt: "AIで動画を作る3方式を同一目的で比較し、HyperFramesを採用しました。約60秒の動画を縦横2本、HTMLを1行も書かずClaude Codeへの日本語指示だけで制作しています。8場面をAIが並列生成する挙動、未登場要素でレイアウトがずれる罠、字幕が自動同期しない前提までまとめています。"
author: "AI活編集部"
author_username: ai-katsu-editorial
published_at: 2026-07-08T00:00:00+00:00
verified_at: 2026-07-08T00:00:00+00:00
models: ["Claude Code"]
tools: ["Remotion", "ElevenLabs"]
tasks: ["資料作成・デザイン", "ツール検証"]
domain: "マーケティング"
canonical_url: https://ai-katsu.jp/articles/hyperframes-video-generation
---
# 動画をHTMLで書く｜Premiere Pro・Remotion・HyperFramesを全部試した結論

「AIで動画を作る」と言っても、やり方は一つではありません。編集ソフトにAIを組み込む方法、コードで組み立てる方法、コードから丸ごと生成する方法。**どれが実務で使えるのかは、実際に3つとも動かしてみないと判断できません。**

この検証では、**Premiere Proプラグインの自作・Remotion・HyperFrames の3方式を同一の目的（紹介動画の制作）で試し、最終的に HyperFrames を採用しました。**約60秒の動画を縦型・横型の2本、**HTMLを1行も書かずに Claude Code への日本語指示だけ**で制作しています。

## この検証の概要

| 項目 | 内容 |
| --- | --- |
| 検証時期 | 2026年7月 |
| 比較対象 | **①Premiere Proプラグイン自作　②Remotion（React）　③HyperFrames** |
| やりたかったこと | 編集ソフトの手作業に戻らずに、伝わる動画を量産できる状態にする |
| 制作物 | 約60秒の紹介動画を**縦型（9:16）・横型（16:9）の2本** |
| 結果 | **③HyperFrames を採用。**Premiere Pro のサブスクは一旦解約 |
| 制作コスト | **ほぼ音声代のみ**（画面の組み立てと書き出しはローカル完結で追加料金なし） |

> 本記事は、グループ会社である**株式会社バイテックでの検証記録**をもとに、当社の検証レポート形式で再構成したものです。数値・設定値・コマンド・つまずいた内容は、検証時の記録をそのまま記載しています。原文は[note の公開記事](https://note.com/makun_bytech/n/n362e4bcfdaba)（2026年7月8日公開）をご覧ください。

## 結論：3方式は「置き換え」ではなく用途で分かれる

| 方式 | 向いているケース | ハードル |
| --- | --- | --- |
| **①Premiere Proプラグイン** | 既存の素材・プロジェクトを活かした作り込み | プラグインの用意と設定が重く、**要所で手作業が残る** |
| **②Remotion** | **テンプレートを固めて量産する運用** | Reactの知識が前提。最初のテンプレ作りに手間がかかる |
| **③HyperFrames** | **単発の動画を素早く作る** | 初回の環境構築のみ |

②と③はどちらも「コードで動画」の仲間ですが、分岐点は**テンプレを固めて回すのか、1本ずつ作るのか**です。今回は後者だったため③を選んでいます。

## HyperFrames とは：HTMLに「時間」を書き足す

HyperFrames は、**HTMLで動画を組み立てるツール**です。Webページを作るのと同じHTMLに、「この文字は3秒後に出す」「この線は5秒かけて伸ばす」といった時間の指示を書き足せるようにしたもの、と捉えると分かりやすくなります。

```
HTMLで「何を・いつ・どう動かすか」を書く
        ↓
その画面を1コマずつ自動でスクリーンショット
        ↓
コマをつなげて mp4 に書き出す（レンダリング）
```

重要なのは、**このHTMLを書くのは Claude Code だという点です。**依頼側は「こういう動画にしてほしい」と日本語で伝えるだけで、HTMLには触れません。

## 導入手順

### 前提となるツール（初回のみ）

| ツール | 役割 |
| --- | --- |
| **Node.js（v22以上）** | プログラムを動かす土台 |
| **FFmpeg** | コマ画像を mp4 に束ねる変換 |

**この2つのインストールが最大の関門です。**慣れていれば数分ですが、初めてだと「どこから入れるのか」でつまずきます。

### セットアップから書き出しまで

```
# HyperFrames 一式を用意
npx hyperframes init 好きな名前

# 環境チェック
npx hyperframes doctor

# プレビュー
npm run dev

# 書き出し
npm run render
```

これらのコマンドも、**Claude Code に日本語で頼めば代わりに実行されます。**ターミナルを直接触る場面は限定的でした。

ナレーションを付ける場合は、**Claude Code を fal.ai と連携させておく必要があります**（AI音声機能を呼び出すための接続）。これも初回に一度だけの作業です。

## 制作フロー：台本から mp4 まで

| ステップ | 内容 |
| --- | --- |
| 1\. 台本を決める | 伝えたいことを1行に絞り、要素を場面に分解する |
| 2\. ナレーションを作る | AI音声に読み上げさせる。**やり直しが一瞬** |
| 3\. 画面を作ってもらう | 「1場面ずつ、こういう見た目で」と日本語で依頼。Claude Code が場面ごとのHTMLを書く |
| 4\. プレビューで確認 | **指定秒数の画面を静止画で一覧表示し、崩れを目視チェック** |
| 5\. 書き出す | コマンド一つで mp4 化。**約60秒の動画が1分ちょっとで完了** |

できあがったのは縦型（9:16・スマホ向け）と横型（16:9・YouTube／サイト埋め込み向け）の2本で、**ファイルサイズは1本5〜6MB**でした。

## ナレーションはAI音声で作る

音声は人が録らず、すべてAIが読み上げています。

-   **声の選定**：ElevenLabs の「**Sarah**」（落ち着いた女性の声）を使用
-   **読ませ方**：「このセリフを、落ち着いた女性の声で読ませて」と日本語で依頼。声の方向性も言葉で指定できる
-   **尺の測定**：出てきた音声の秒数を測り、それを動画のタイミングの土台にする
-   **BGM**：最後に小さめの音量で重ねる

**声と画面がズレないのは、先に音声の尺を確定させてから画面を合わせているからです。**

### 英単語の読み間違いは台本側で直す

AI音声は英単語を想定外の読み方をすることがあります。「Claude Code」をそのまま渡すと「クラウド…」と読まれるケースがありました。

**対処は、エンジンを替えるのではなく台本の側で「クロードコード」とカタカナで書くことです。**読み方を教えるほうが早く確実でした。

### 字幕は自動では同期しない

見落としやすい前提があります。**HyperFrames も Remotion も、AIが音声の中身を聞き取るわけではありません。**

そのため「この声のこの瞬間に字幕を出す」は自動では起こりません。ナレーションとタイミングは**あらかじめ自分で用意しておくのが前提**です。字幕を自動で合わせたい場合は、Whisper のような文字起こしを別途用意する必要があります。

## 60秒を8場面に分ける

約60秒を8つの場面に分割して流れを作りました。構成の要点は**1つの場面に1つのメッセージだけ**を置くことです。

**静止画を多く見せるより、「1画面＝1メッセージ」で潔く切り替えるほうが伝わります。**あれもこれも詰め込まない、という判断が結果的に効きました。

## つまずいた3点

### 壁①：文字が「カクッ」とずれる

文字を1つずつ順に表示させる場面で、新しい文字が出るたびに上の文字が上方向に動く現象が起きました。

原因は、**HyperFrames がまだ登場していない要素を「そこに無いもの」として扱う**ためです。登場前は場所を取らないので、次の文字が出た瞬間に詰まって全体がずれます。

対処は逆転の発想で、**最初から全要素を配置しておき、表示・非表示だけを制御する**形にしました。これで場所が先に確保され、あとから出ても他が動きません。**この修正は Claude Code に一言頼むだけで全場面に一括反映されました。**

### 壁②：要素が画面からはみ出た

横型で5段階の項目を横一列に並べたところ、**5つ目が右端で見切れていました。**静止画チェックで発見し、カードの幅と間隔を詰めて左右に余白を残すよう調整しています。

### 壁③：文字が別の文字に重なった

下に置いたはずの補足文が、上のメイン文字に重なっていました。原因は壁①と同じ「場所の確保」が一部に効いていなかっただけで、**設定を全体に効かせたら解消**しました。

3点に共通する教訓は明快です。**書き出す前に、必ず静止画で目視チェックする。**原因の当たりさえつけば修正は一瞬ですが、当たりがつかないとここで時間を溶かします。

## 並列生成が効く

この方式で最も差が出たのが、**画面を手分けして同時に作れる**点です。

今回は8場面。人が作るなら1枚ずつ順番ですが、**Claude Code は1場面につき1体のAIを割り当てて8枚を同時並行で組み立てられます。**しかも各AIが自分の画面のスクリーンショットを撮り、正しく表示できているかを自己チェックしてから返してきます。

①②の方式には無かった挙動で、ここが決定的な違いでした。

## 修正コストの低さ

採用の決め手になった要素をもう2つ挙げます。

-   **修正が一瞬で終わる**：たとえば「44レッスン」を「40レッスン」に直したいとき、Claude Code に「40レッスンに直して」と言うだけ。文字も配置も色も言葉で指示できる
-   **何本作っても品質がブレない**：HyperFrames は現在時刻や乱数を使わない前提で動くため、**指示が同じなら結果も同じ（決定論的）**

後者が効いたのは横型を作るときでした。**縦型を作ったあと、中身とナレーションはそのままにレイアウトだけ組み替える作業が非常にスムーズでした。**

## 分かっている弱点

-   **感覚的な微調整は苦手**。「なんとなくオシャレに」といった指示には向かない
-   **モーションブラーのような表現は、After Effects や Premiere といった専用ソフトに一歩譲る**

作り込んだ映像編集が必要な場面では、従来の編集ソフトのほうが依然として強いという判断です。

## コストと適用範囲

制作費は**ほぼ音声代のみ**でした。画面の組み立ても書き出しもローカルで完結するため、追加料金が発生しません。**アバターが話す動画でも1本数百円ほど**です。

この方式は紹介動画専用ではなく、次のような用途にも展開できます。

-   **アバターが話すショート動画**：人物画像とセリフを渡すと口が動く動画になる
-   **画面録画の操作ガイド**：実際のWebサイトを自動操作しながら録画し、ナレーションとテロップを乗せる
-   **リリックビデオ**：AIで作った曲に歌詞を拍に合わせて動かす

共通するのは**ほとんどの工程がローカルで完結し、追加コストがほぼかからない**ことです。

## よくある質問

### プログラミングの知識は必要ですか？

**HyperFrames を使う場合は不要でした。**今回はHTMLを1行も書かず、Claude Code に日本語で指示しただけです。ただし Remotion を選ぶ場合は React の知識が前提になります。

### 導入で一番つまずくのはどこですか？

**Node.js（v22以上）と FFmpeg のインストールです。**慣れていれば数分ですが、初めてだとここで止まります。セットアップさえ済めば、あとは日本語で頼むだけになります。

### Remotion と HyperFrames はどちらを選ぶべきですか？

**単発の動画を素早く作るなら HyperFrames、テンプレートを固めて量産するなら Remotion です。**SNS動画を毎日回すような運用では Remotion のほうが向く場面もあります（最初のテンプレ作りには相応の手間がかかります）。

### 字幕は自動で音声に合いますか？

**合いません。**HyperFrames も Remotion も音声の中身を聞き取らないため、ナレーションとタイミングは事前に用意する必要があります。自動同期させたい場合は Whisper のような文字起こしを別途組み合わせます。

### 編集ソフトは不要になりますか？

**用途によります。**今回は Premiere Pro のサブスクを一旦解約しましたが、モーションブラーのような表現や作り込んだ映像編集が必要になれば専用ソフトのほうが適しています。

## まとめ

-   3方式は置き換え関係ではなく**用途で分かれる**。単発なら HyperFrames、量産なら Remotion、作り込みなら編集ソフト
-   HyperFrames は**HTMLに時間の指示を書き、1コマずつスクショして mp4 に束ねる**仕組み
-   前提ツールは **Node.js（v22以上）と FFmpeg**。ここが唯一の関門
-   約60秒の動画が**1分ちょっとで書き出し**、ファイルは1本5〜6MB
-   **未登場の要素は場所を取らない**ためレイアウトがずれる。全要素を配置して表示だけ制御する
-   **書き出す前に静止画で目視チェック**する。原因の当たりがつけば修正は一瞬
-   音声の中身は解析されないので、**ナレーションと尺は先に確定させる**
-   AI音声の英単語の読み間違いは**台本側をカタカナにして解決**する
-   **8場面を8体のAIが並列で組み立て、各自がスクショで自己チェック**する挙動が他方式との決定的な差
-   制作費は**ほぼ音声代のみ**。ローカル完結で追加料金が出ない

コードで動画を作る方式の価値は、表現力よりも「直しやすさ」と「ブレなさ」に出ます。1本目より2本目、2本目より3本目が速くなる構造かどうかが、量産の可否を決めます。

株式会社AI棒では、こうしたAI活用の検証を日々行い、企業のコンテンツ制作へのAI導入を支援しています。ご相談は[お問い合わせフォーム](/contact)から、継続的な伴走支援については[AI参謀](/ai-sanbo)をご覧ください。