Claude Code と HyperFrames で、HTML から動画を作る

動画編集アプリを使わず、プロンプトだけで動画を作る。HyperFrames は、HTML と CSS で書いたページを1コマずつ撮って MP4 にするフレームワーク。動画の中身がふつうの HTML なので、SUP や WRG で Web ページを作ったときと同じように Claude Code に頼める。

本記事は応用編。WRG で Node.js を入れてある前提で進める。

本記事のゴール

空のフォルダを Claude Code で開き、プロンプトを送れば MP4 が出てくる状態を作る。4つのテーマで、少しずつ凝った動画にしていく。

1. 動くタイトル：テキストが中央でふわっと出てくる3秒の動画
2. 複数シーンの動画：タイトル、動物のあいさつ、エンディングの3シーンを、滑らかにつなぐ
3. しゃべる動画：Mac の say コマンドで音声を作り、字幕と口の動きを音声に合わせる
4. 撮った映像に字幕を重ねる：スマホで撮った動画の上に、タイトルと字幕を出す

どのテーマも、プロンプトを送ってから MP4 ができるまで、Claude Code が進める。読者がするのは、コマンドの実行を許可することと、できた動画を見ること。

1. HyperFrames とは

HTML で動画を作るフレームワーク。動画を作る会社 HeyGen がオープンソースで公開している。作れるのは、文字や図形を動かすモーショングラフィックスの動画。撮った映像を入れて、字幕やタイトルを重ねることもできる。

• 動画の1シーンは、1枚の HTML ページ。文字や画像に data-start（何秒目から）と data-duration（何秒間）を付けると、その時間だけ画面に出る
• 動きは、アニメーション用のライブラリ GSAP（JavaScript）などで付ける
• 書き出すときは、画面の無いブラウザ（Chrome）でページを開き、時間を1コマずつ進めて撮る。撮った絵を ffmpeg（動画を扱うツール）でつないで MP4 にする
• 公式サイト：hyperframes.heygen.com

動画生成 AI（Seedance など）とは作り方が違う。動画生成 AI は、AI が映像そのものを描く。HyperFrames で Claude Code が書くのは HTML で、映像は HyperFrames がその HTML から1コマずつ撮って作る。

• 同じ HTML からは、毎回同じ動画ができる。直したいところだけ、HTML の文言や秒数を直せばよい
• 文字は、HTML に書いたとおりに出る
• 書き出しは手元の Mac でするので、何度作り直しても書き出しの料金はかからない（Claude Code の利用分は別）
• 実写のような映像を一から描くことはできない。得意なのは、文字・図形・決まった動きを正確に出すこと。撮った映像や、別に用意した画像・音を素材として入れることはできる

テーマ①で Claude Code が書いた HTML は、次のような形になる（抜粋）。読めるようになる必要はなく、「ふつうの Web ページに秒数が付いている」ことがわかれば十分。

<h1 id="title" class="clip" data-start="0" data-duration="3">ふわっと、こんにちは</h1>

<script>
  const tl = gsap.timeline({ paused: true });
  tl.fromTo("#title",
    { opacity: 0, y: 30, filter: "blur(12px)" },
    { opacity: 1, y: 0, filter: "blur(0px)", duration: 1.4 }, 0.3);
</script>

0.3秒目から1.4秒かけて、ぼかしが取れながら文字が浮かび上がる、という指定。

同じように Claude Code で動画を作るツールに Remotion がある（→ RMT）。Remotion は React（JavaScript のライブラリ）で書く。HyperFrames は素の HTML で書くので、React を知らなくても、Claude Code が書いたものを開いて読める。違いは 9-1 にまとめた。

2. ライセンス

ライセンスは Apache 2.0。個人でも会社でも無料で使える。公式の README には「書き出しごとの料金や、商用利用の上限はない」とある。

Remotion は、従業員が4人以上の会社で使うと有料のライセンスが要る（→ RMT 2）。HyperFrames にはこの条件が無い。

3. 準備

3-1. 必要なもの

もの	用意のしかた
Node.js（v22 以上）	WRG 1-1 で入れたものでよい
ffmpeg	自分で入れる（次の 3-2）
Chrome	不要。初めて書き出すときに、HyperFrames が書き出し用の Chrome を自動で取ってくる

3-2. ffmpeg を入れる

ffmpeg は Homebrew で入れる。Homebrew が無ければ、先に HBS で入れておく。ターミナルで次を打つ。

brew install ffmpeg

入っているかどうかは、Claude Code に確かめてもらえる。作業フォルダ（次の 3-3）を開いたあとで頼めばよい。

プロンプト

Node.js と ffmpeg が使えるか確認して

Remotion は ffmpeg を自動で取ってくるが、HyperFrames は取ってこない。ffmpeg が無いまま書き出そうとすると、「FFmpeg not found」と出て止まり、brew install ffmpeg を実行するよう案内される。プロジェクトを作るところと、途中のコマを画像にして確かめるところまでは、ffmpeg が無くても進む。

Claude Code に頼んだ場合は、書き出しの前で止まって「ffmpeg を brew install ffmpeg で入れてよいですか?」と選択肢つきで聞いてくる（2026-10-22 に Sonnet 5.5 で試したとき）。選択肢の 入れてよい には「brew install ffmpeg を実行し、そのまま MP4 を書き出す」と説明が付いている。やめておく を選ぶと、プロジェクトを作ったところで止まる。

3-3. 作業フォルダを作って開く

Finder で、空のフォルダ ~/claude/my-video を作る。Claudeデスクトップアプリを起動して、左上の </> のアイコン（Code）→ 新規 → 作業フォルダにこのフォルダを指定する。

フォルダは、作ったばかりの空のものを使う。HyperFrames のプロジェクトを作るツールは、中に何か入っているフォルダでは止まる。

4. テーマ①：動くタイトル

4-1. プロンプトを送る

開いたフォルダで、次のように頼む。プロジェクトを作るところから、書き出しまでを1回で頼む。

プロンプト

HyperFrames でこのフォルダに動画のプロジェクトを作って、
テキストが中央でふわっと出てくる3秒の動画を MP4 に書き出して。

Claude Code は次の順に進める（2026-10-22 に Sonnet 5.5 で試したとき）。

1. Node.js と ffmpeg が入っているかを確かめる
2. npx hyperframes --help を打って、使い方をその場で読む
3. このフォルダにプロジェクトを作る
4. index.html に文字と動きを書き、check（書き方の検査）を通す
5. 途中のコマを何枚か画像にして、自分で見て確かめる
6. MP4 に書き出す

コマンドを実行するたびに許可を求められる。内容を見て、常に許可 の右の矢印から 一度だけ許可 を選ぶ（常に許可 は、このフォルダの設定に保存されて次から聞かれなくなる）。頼んでから MP4 ができるまで、約2分。

許可の画面。見出しはコマンドの要約で、英語で出ることが多い

書き出した MP4 は、ファイルの一覧から開くとアプリの中で再生できる

MP4 は renders/ フォルダにできる。3秒・1920×1080 で 198KB。文字は「ふわっと、こんにちは」で、Claude Code がプロンプトから決めた。

同じプロンプトでも、プロジェクトをフォルダの直下ではなく、中に1つフォルダ（例：fade-text/）を作ってそこに置くことがある。その場合、index.html や renders/ もそのフォルダの中にできる。

4-2. できたフォルダの中身

ファイル	中身
index.html	動画の本体。1章の HTML はここにある
CLAUDE.md・AGENTS.md	AI エージェント向けの HyperFrames の説明書。Claude Code はこれを読んで作業する
package.json	書き出しなどのコマンドの登録
hyperframes.json・meta.json	HyperFrames の設定とプロジェクト名
renders/	書き出した MP4

文言・色・長さを変えたいときは、続けて頼めばよい。

プロンプト

文字を「Vibe Coding」にして、背景をオレンジにして、もう一度書き出して

書き出しのあと、Claude Code が「0秒目が背景だけになる、という警告が1件ある」と説明することがある。check が、最初のコマに何も映っていないことを知らせているもの。ふわっと出す演出なので、そのままでよい。SNS のサムネイルに0秒目が使われる場合は、最初から文字を薄く出しておく手もある。

5. テーマ②：複数シーンの動画

5-1. プロンプトを送る

①は文字が1つだけだった。②では、シーンを3つ並べて、間を滑らかにつなぐ。新しい空のフォルダを作って開き、次のように頼む。

プロンプト

HyperFrames でこのフォルダに動画のプロジェクトを作って、
3つのシーンでできた12秒くらいの動画を MP4 に書き出して。
シーン1は、ゆっくり色が変わる背景に「Vibe Coding」のタイトルが弾むように出て、
少し遅れて小さく「Claude Code × HyperFrames」。
シーン2は、白い背景に猫と犬の絵文字を左右に大きく並べる。
下に「こんにちはネコです」と出ている間は猫だけが揺れて、
「こんにちはイヌです」に変わったら犬だけが揺れる。
シーン3は、中央に「おわり」。
シーンの切り替えは、パッと変えずに滑らかに。

書き出した動画から、2秒・5.5秒・7.5秒・10.7秒のコマ

12秒・1920×1080・音声なしで 1.7MB。試したときは、頼んでから約3分半でできた。書き終えると、会話の中にも動画のプレーヤーが出て、その場で再生できる。

5-2. シーンのつなぎ方

試したときの Claude Code は、シーンを次のように並べた。

シーン	時間	中身
1	0〜4.5秒	背景が青、赤紫、オレンジの順にゆっくり変わる。タイトルが上から弾んで落ち、1.6秒目にサブタイトル
2	4〜9秒	猫と犬。6.5秒目に字幕が変わり、揺れる側も入れ替わる
3	8.5〜12秒	「おわり」

時間が重なっているところが切り替え。前のシーンを薄くしながら次のシーンを濃くして、0.5秒かけて入れ替えている（クロスフェード）。シーンごとに data-start と data-duration が付くので、重ねたいだけ時間をずらして書けばよい。

書き出す前に、Claude Code は check を通し、5か所のコマを画像にして、切り替えの途中や猫と犬が入れ替わるところを自分で見て確かめていた。check が「日本語のフォントを宣言して」とエラーを出したときは、自分で直してから先へ進んだ。

一度で思いどおりにならなければ、「猫の揺れをもっと大きく」「シーン2を少し長く」のように続けて頼んで直していく。

6. テーマ③：しゃべる動画

6-1. プロンプトを送る

テキストから音声を作り、字幕と口の動きを音声に合わせる。続けて同じフォルダで頼んでもよいが、新しい空のフォルダで始めると比べやすい。

プロンプト

HyperFrames でこのフォルダに動画のプロジェクトを作って、
しゃべる動画を MP4 に書き出して。
音声は Mac の say コマンドで、声は Kyoko。台詞は下の4つ。
画面の中央に丸い黄色い顔を出して、しゃべっている間だけ口を動かす。
画面の下に、いましゃべっている台詞の字幕を出す。
音声と字幕がずれないように、
秒数は自分で決めずに音声ファイルの長さを測って合わせて。
====
こんにちは
クロードコードとハイパーフレームズのデモです
しゃべります。字幕も出ます
よろしくお願いします

書き出した動画から、台詞ごとに1コマ（0.9秒・3秒・6.3秒・8.6秒）

10秒・音声つきで 461KB。試したときは、頼んでから約4分でできた。

6-2. 音声の長さを測って、そのまま HTML に書く

Claude Code は、次のように進めた。

1. 台詞ごとに say -v Kyoko で音声ファイルを作る
2. 音声ファイルの長さを1つずつ測る
3. 測った長さで、音声・字幕・口の動きの開始と長さを決めて、index.html に書く
4. 書き出した MP4 から、無音のところとしゃべっているところのコマを取り出し、字幕と口を確かめる

1〜3 は、Claude Code が build.mjs というスクリプトにまとめて、それを動かして進めた。

3 でできた音声の部分は、次の形になる。

<audio id="voice1" src="assets/line1.wav" data-start="0.5" data-duration="0.796"></audio>
<audio id="voice2" src="assets/line2.wav" data-start="1.796" data-duration="3.188"></audio>

字幕にも同じ data-start と data-duration が付く。HyperFrames では、いつ鳴らすか・いつ出すかが HTML に数字で書いてあるので、「測って合わせて」と頼めば、測った数字をそのまま書く形になる。

台詞を変えたいときも、頼めば測り直してくれる。build.mjs の中の台詞を書き換えて動かせば、音声を作り直して index.html も書き直す。

口は、声の大きさを1/30秒ごとに測って、その大きさで開き具合を変えている。別の回に試したときは、しゃべっている間だけ一定のテンポで開け閉めする作りだった。同じプロンプトでも、作り方は毎回同じとは限らない。

6-3. 音声を作る

Mac には、文字を読み上げる say コマンドが最初から入っている。API キーも料金も要らない。テーマ③のプロンプトで「Mac の say コマンドで」と頼んだのは、これを使ってもらうため。

say -v Kyoko -o line1.aiff "こんにちは"

-v で声を、-o で出力するファイルを指定する。日本語の声は Kyoko のほかにもあり、say -v '?' で一覧が見られる。声を変えれば、2人の掛け合いも作れる。

say は Mac にしかない。無料の音声合成ソフト VOICEVOX なら、Mac でも Windows でも使える。ずんだもんなどのキャラクターの声で読み上げられ、プロンプトで声の指定を替えるだけで切り替えられる（→ 8-1）。

7. テーマ④：撮った映像に字幕を重ねる

7-1. プロンプトを送る

スマホで撮った動画の上に、タイトルと字幕を重ねる。新しいフォルダを作り、使う動画を入れてから Claude Code で開く。

試したときは、iPhone で撮った12秒の動画（目黒川の桜とカヌー）を使った。元は 25MB あったので、先に 1280×720・3MB に小さくしてから入れた。動画に映り込んだものを載せたくない場面は、使う範囲を秒数で指定して外す。今回は最後に走っている人が映るので、8.5秒までにした。

プロンプト

このフォルダの動画（meguro.mp4）を使って、HyperFrames で動画を作って。
動画は最初から8.5秒までだけ使い、音は消して。
最初に1秒タイトルを出してから動画を流し、画面の中央に字幕を3つ順に出して。
サイトに載せるので、ファイルは小さめに書き出して。
====
タイトル：目黒川の桜
字幕：
桜の季節、目黒川を歩いた
川にカヌーの人がいた
こちらへゆっくり進んでくる

タイトル1秒と映像8.5秒で9.5秒、1280×720・音声なしで 2.3MB。試したときは、頼んでから約2分でできた。

7-2. 動画も、HTML の部品の1つ

撮った動画は、index.html の中で <video> として置かれる。タイトルや字幕と同じく、data-start と data-duration で出す時間を決める。

<video id="footage" class="clip" src="assets/meguro.mp4" muted
  data-start="1" data-duration="8.5"></video>

1秒目から8.5秒間、動画を流す、という指定。muted で音を消している。この上に、タイトルと字幕の <div> を重ねて置く。

書き出す前に、Claude Code は途中のコマを5枚撮って1枚に並べ、自分で見て確かめた。HyperFrames の snapshot というコマンドで、Claudeデスクトップアプリの会話の中にもこの画像が出る。

Claude Code が書き出す前に作って確かめたコマの一覧（HyperFrames の snapshot）

• 字幕の位置は、人が決めて伝える。最初に「画面の下に」と頼んだときは、手前に来たカヌーに字幕が重なったまま書き出された。字幕で隠したくないものがある素材では、位置も指定したほうがよい
• 「小さめに書き出して」と頼んだときは、画面の大きさを 1280×720 にしたり、画質を少し落としたりして小さくした。「小さめに」を付けずに頼んだときは（音つき・13秒）、1920×1080 で 34MB になった
• 使う範囲の切り方は、回によって違った。動画ファイルを先に8.5秒で切ってから置いた回と、元の動画のまま <video> の属性で範囲を決めた回があった。どちらの回も、頼んだとおりの範囲になった

8. 動画を仕上げる

できた動画に、声や BGM を足したり、中身を確かめて手で直したりする。

8-1. ずんだもんの声でしゃべらせる

テーマ③の say の代わりに、無料の音声合成ソフト VOICEVOX の声も使える。

VOICEVOX は、インストールしただけではまだ声を作れない。初めて起動すると「エンジンのセットアップ」の画面が出るので、「インストール（1.85 GB）」を押して、音声合成エンジン（VOICEVOX Engine）をダウンロードする。ハンズオンで使うなら、会場の回線で大勢がダウンロードすると時間がかかるので、ここまで済ませてから来る。

Mac の VOICEVOX（Ver. 0.26.2）を初めて起動したときの画面

VOICEVOX を起動しておき、新しい空のフォルダ（3-3 と同じように作る）で次のように頼む。6-1 のプロンプトの3行目を、ずんだもんの2行に替えたもの。テーマ③を飛ばして、ここから始めてもよい。

プロンプト

HyperFrames でこのフォルダに動画のプロジェクトを作って、
しゃべる動画を MP4 に書き出して。
音声は VOICEVOX のずんだもん（ノーマル）で作って。
VOICEVOX のアプリは起動してある。台詞は下の4つ。
画面の中央に丸い黄色い顔を出して、しゃべっている間だけ口を動かす。
画面の下に、いましゃべっている台詞の字幕を出す。
音声と字幕がずれないように、
秒数は自分で決めずに音声ファイルの長さを測って合わせて。
====
こんにちは
クロードコードとハイパーフレームズのデモです
しゃべります。字幕も出ます
よろしくお願いします

VOICEVOX:ずんだもん

試したときは、Claude Code が起動中の VOICEVOX に台詞を渡して音声ファイルを作り、そのあとはテーマ③と同じく、長さを測って字幕と口に合わせた。頼んでから約2分半で書き出せた。

• VOICEVOX は英語を読み違えることがある。台詞の中の「Claude Code」は「クロードコード」のように、カタカナで書いておく
• VOICEVOX で作った音声を公開するときは、クレジットを書く。VOICEVOX 本体の利用規約に加えて、声ごとにも規約がある。ずんだもんの声は音源利用規約で、クレジットを書けば商用・非商用どちらでも使える

以前ずんだもんの声で作った動画を YouTube に上げたときは、概要欄に次のように書いた。

音声: VOICEVOX（ずんだもん）
https://voicevox.hiroshiba.jp/

音源利用規約には、VOICEVOX:ずんだもん という書き方が例として載っている。

8-2. BGM を付ける

HyperFrames には、BGM を作る機能は入っていない。曲を選ぶには HeyGen のアカウントが必要で、作曲させるには数GBの追加の道具が要る。手元で手軽に作るなら、Claude Code に音を合成してもらう。外から曲を借りないので、使ってよいかを規約で確かめる手間が無い。

テーマ④でできたフォルダを開いて、次のように頼んだ。

プロンプト

meguro-video の動画に BGM を付けて書き出して。
BGM は外から借りずに、Python の標準ライブラリだけで音を合成して作って。
明るく軽快だけど、じゃまにならない曲で、長さは動画に合わせ、最後は1秒でフェードアウト。
音量は控えめに。サイトに載せるので、ファイルは小さめに書き出して。

試したときは、頼んでから約1分半でできた。Claude Code は、曲を作る Python のスクリプト（scripts/make_bgm.py）を書いた。和音を C→G→Am→F と進め、軽い分散和音・ベース・薄い伴奏を重ねた、120 BPM の曲。試した曲は、電子音の素朴な音だった。

• このときは、HyperFrames で書き出し直さず、書き出し済みの MP4 に ffmpeg で音を重ねた。index.html には BGM が入らないので、Studio には出てこない。HTML の中に入れたいときは「index.html に BGM の audio を足してから書き出して」と頼む（別の回では、頼まなくてもそうした）
• 曲を変えたいときは「もっとゆったり」「もう少し静かに」のように続けて頼む。スクリプトが残っているので、そこを直して作り直す

8-3. Studio で中身を確かめる

HyperFrames には、作った動画を再生しながら中身を確かめる画面（Studio）がある。6章のテーマ③に続けて、同じ会話で次のように頼んだ。

プロンプト

Studio でプレビューを開いて

Claude Code は Studio を起動し、Claudeデスクトップアプリの中のブラウザで開いた。アドレスは http://localhost:3002/ で始まる。同じアドレスを Chrome などで開けば、広い画面で見られる。

Chrome で開いた Studio。下のタイムラインに、顔・字幕・音声の帯が並ぶ

• 真ん中で動画を再生できる。書き出さなくても見られる
• 下のタイムラインに、字幕（Sub1〜4）と音声（Voice1〜4）の帯が並ぶ。テーマ③で測って合わせたとおり、字幕と音声の帯が同じ位置にそろっている
• index.html が書き換わると、Studio は自動で読み込み直す

Studio では、見るだけでなく編集もできる。試したときは、BGM の音声ファイルをタイムラインにドロップして足し、右上の Export から MP4 に書き出せた。Studio での変更は index.html に書き込まれる。BGM は、プロンプトで頼んで足してもらうこともできる（→ 8-2）。

Studio は止めるまで動き続ける。使い終わったら「Studio を止めて」と頼めばよい。

右上の Install the desktop app は、HyperFrames の別のアプリを入れるボタン。本記事の手順では使わない。

9. 補足

9-1. Remotion との違い

	HyperFrames	Remotion（→ RMT）
何で書くか	HTML と CSS（動きは GSAP など）	React
ライセンス	Apache 2.0。会社でも無料	従業員4人以上の会社は有料
ffmpeg	自分で入れる	自動で取ってくる
プロジェクトの作り方	プロンプト1つで、作成から書き出しまで	ターミナルで作成ツールを実行し、質問に答える
音声と字幕を合わせる	試したときは「長さを測って合わせて」で足りた	使う仕組みまで指定したプロンプトが必要だった

React で書きたい人、Remotion の仕組みを使いたい人は RMT を参照。

9-2. HyperFrames のスキルについて

HyperFrames のプロジェクトを作るツールは、ふつうに実行すると、HyperFrames の使い方をまとめたスキルを4つ、ホームフォルダの ~/.claude/skills/ などに入れる。プロジェクトのフォルダの中ではなくホームに入るので、ほかのフォルダで Claude Code を開いても読み込まれる。Claude Code 以外の AI エージェント用のフォルダ（~/.cursor/ など）にも、31個分のリンクが張られる。

本記事のプロンプトで試したときは、多くの回で Claude Code が自分から「スキルを入れない」指定（HYPERFRAMES_SKIP_SKILLS=1）を付けてプロジェクトを作った。許可の画面にこの指定が出ていたら、そのまま許可してよい。スキルが無くても、本記事の4テーマは作れた。

ただし、この指定を付けずにプロジェクトを作り、スキルが入った回もあった（試した回のうち2回）。許可の画面に --skip-skills という指定だけが出ているときは、スキルが入る。2026年10月の版（0.8.186）では、この指定は効かない。

スキルを入れると、Claude Code は HyperFrames の作法（シーンの分け方、効果音の付け方、書き出す前にプレビューで確かめてもらう、など）に沿って作るようになる。凝った動画を作りたくなったら、入れてみてもよい。

9-3. 作った動画をどこに置くか

本記事で作った程度の短い動画（数百KB〜数MB）なら、SUP で作った Cloudflare Pages にそのまま置ける。本記事の動画も、このサイトに置いて <video> で再生している。

ほかの置き場所との違いは次のとおり（料金と上限は 2026年10月時点の公式ドキュメントから）。

置き場所	上限	料金	向いている場面
Pages・Workers	1ファイル 25MiB	無料	短い動画をページと一緒に置く
R2	1ファイル 約5TiB	10GB まで無料	25MiB を超える動画
Stream	1本 30GB	月 $5 から	長い動画を配信する
YouTube	―	無料	多くの人に見てもらう

• Pages・Workers：ページと一緒に置く形。1プロジェクトに置けるファイルは、Free プランで 20,000 個まで（有料プランは 100,000 個）。合計の容量の上限は、公式ドキュメントには書かれていない。サイトを Git で管理している場合（GitHub と連携してデプロイしているときなど）は、置いた動画もリポジトリに入る。Git は消したファイルも履歴に残すので、動画を何本も置いていくとリポジトリが重くなる
• R2：Cloudflare のファイル置き場。10GB を超えた分は 1GB あたり月 $0.015 で、見られた分の転送料は無料。公開するときは、Cloudflare に足した自分のドメインで公開する。r2.dev で始まる URL は開発用で、アクセスの数に制限がある
• Stream：Cloudflare の動画配信サービス。上げた動画を自動で何段階かの画質に変換し、見る人の回線に合わせて切り替えながら配信する。埋め込み用のプレーヤーが付き、見られる人を絞る仕組み（署名付き URL）もある。保存は 1,000分ぶんで月 $5 の前払いで、1本だけでもここからかかる。見られた分は 1,000分ごとに $1
• YouTube：ページには YouTube のプレーヤーごと埋め込む形になる

短い動画はサイトにそのまま置き、25MiB を超えたら R2、長い動画を本格的に配信したくなったら Stream を考える、という順でよい。

まとめ

• HyperFrames は、HTML に秒数を書いて動画を作る。中身がふつうの Web ページなので、Claude Code に頼みやすい
• 用意するのは Node.js と ffmpeg。Chrome は自動で入る
• 空のフォルダで「プロジェクトを作って、MP4 に書き出して」と頼めば、作成から書き出しまで Claude Code が進める
• 音声と字幕は「音声ファイルの長さを測って合わせて」と頼むだけで、試したときはずれずにそろった
• 撮った動画も <video> として HTML に置ける。使う範囲と字幕の位置を伝えれば、その上に字幕を重ねて書き出す
• BGM は、Python の標準ライブラリだけで合成してもらえば、外から借りずに付けられる
• Apache 2.0 なので、会社でも無料で使える