本文へスキップ
ひとりAIラボ

ガイド

Claude Codeで短いモーション動画を作る（HyperFrames）

書いた人
あわじま
確認日

何ができるか

HyperFrames は、HeyGen が公開しているオープンソースの道具で、HTML で書いた画面を MP4 の動画にします。[1]Claude Code に入れると、「こういう動画を」と頼むだけで、HTML を書いてレンダーまでしてくれます。[3]

HyperFrames + Claude Codeで実際にレンダーしたサンプル（5秒・720×1280）

きっかけは X の @prayag_sonar さんの投稿です。[7]手順の流れはその投稿にならい、ひとりAIラボの作業用PCで2026年11月3日に試しました。

元の投稿との違い

投稿の流れは「フォルダを作る → hyper-frame とモーションデザインのスキルを入れる → 細かいプロンプトで頼む → レンダー → /コマンドにする → くり返してつなぐ」です。投稿者のプロンプトそのものは DM でだけ配られていて、公開されていません。「モーションデザインのスキル」も名前が書かれていないので、ここでは HyperFrames 公式のプラグインを使いました。下のプロンプトはあわじまが書いたものです。

設定手順

✅検証済みは2026年11月3日に実際に動かしたもの、📄ドキュメントのみは公式ドキュメントで読んだだけのものです。

短いモーション動画を作るまでの6つの手順
#やること確認
1Node.js 22以上・FFmpeg を用意するnode -v で22以上か確かめ、npx hyperframes doctor で足りないものを見る（わたしの試しでは Chrome も探していました）。[1][3]✅検証済み
2Claude Code にプラグインを入れるマーケットプレイスを足してから hyperframes を入れ、新しいセッションを開くか /reload-plugins。[4]✅検証済み
3作業フォルダで、動画を細かく頼む長さ・縦横・色・文字・動きを1文ずつ書いて頼む。5秒の縦動画が約85秒でできた。✅検証済み
4自分で見る・書き出すnpx hyperframes preview で確かめ、npx hyperframes render --output final.mp4 で書き出す。[3]📄ドキュメントのみ
5使い回せる /コマンドにするできた動画を、文字だけ差し替えられる /title-card にしてもらう。2本目は約13秒。✅検証済み
6何本かつなげるffmpeg の concat で1本にまとめる。解像度・fps・コーデックがそろっているときだけ。✅検証済み
1・2 準備とプラグインのコマンド

Node.js 20 だと「requires Node.js >= 22」で止まりました。npx hyperframes doctor で Chrome と FFmpeg が見つかるか確かめます。Docker には ✗ が付きましたが、なくてもレンダーできました。

プラグインを入れる（✅検証済み）

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

入れたら新しいセッションを開くか /reload-plugins。プラグインには hyperframes・hyperframes-cli・media-use などのスキルが入っています。[4]

別の入れ方（📄ドキュメントのみ）：npx skills add heygen-com/hyperframes で Core Skills を選ぶと、スキルだけ入ります。呼び名は /hyperframes です。[5]

3 頼み方（実際に使ったプロンプト）

English（✅検証済み・約85秒で5秒の縦動画）

Using /hyperframes:hyperframes, make a 5-second vertical 720x1280 motion-graphics title card: warm paper-beige background, dark ink text "今週からAIに任せる" sliding up, a thin accent line drawing in below, small subtitle "HyperFrames + Claude Code サンプル". Render to ./sample.mp4 with npx hyperframes render.

文字・色・動きを入れ替えれば、そのまま使い回せます。上のサンプル動画はこの1文でできたものです。

4 自分で見る・書き出す

プレビューと書き出し（📄ドキュメントのみ）

npx hyperframes preview
npx hyperframes render --output final.mp4
5 /コマンドにする

1本できたあとに頼む（✅検証済み）

convert this clip into a reusable Claude Code slash command at .claude/commands/title-card.md that takes the main text as $ARGUMENTS

できたら /title-card 来週も続ける のように打つだけで、新しい MP4 が約13秒でできました。1行に入るのは全角10文字くらいまでです。

6 何本かつなげる

list.txt に1行ずつ file 'a.mp4' と書いてから：

つなげる（✅検証済み）

ffmpeg -f concat -safe 0 -i list.txt -c copy out.mp4

解像度・fps・コーデックがそろっていないとつながりません。同じ /コマンドで作ったものどうしなら大丈夫です。

注意点

プラグインを入れたら「Git LFS」の警告が出たとき

入れたときに、Git LFS のポインタファイルが84個あるという警告が出ました。直すなら次のコマンドです。わたしの試しでは、直さなくても動きました。

LFSのファイルを取ってくる

git -C ~/.claude/plugins/marketplaces/hyperframes lfs pull

向いている人・場面

向いている場面と、向いていない場面
向いている向いていない
お知らせ・新メニュー・イベント告知の数秒のタイトル動画人が話す動画や、実写の映像そのものを作ること
同じ型で文字だけ変える動画を毎週作る人ターミナルを開くのがどうしてもつらい人
Claude Pro などをもう契約していて、動画の道具を増やしたくない人長い動画を1回で仕上げたい人

画面の動きの言い方はプロンプト事典のHTMLアニメーションを、頼むときの参考にどうぞ。

見本やスタイル集

頼み方や見た目に迷ったときに見るGitHubのリポジトリです。X の @theozguratillay さんの投稿で知りました。[8]中身はここに写さず、リンクだけ置きます。★の数とライセンスは2026年11月3日に GitHub API で確かめました。

コスト表

HyperFrames は無料で、かかるのは Claude Code の利用料です。[3]Claude の料金は公式ページで2026年11月確認。税と為替で実際の請求額は変わります。

短いモーション動画を作るのにかかるお金
もの・プラン料金
HyperFramesオープンソース（Apache-2.0）レンダーは自分のPCの中で行われます。無料[2]
ClaudePro年払いなら月$17相当（$200を前払い）。Claude Code を含みます。月$20（月払い）[6]
ClaudeMaxProの5倍の利用量。月$100分のAPIクレジット付き（条件は公式の注記を確認）。月$100[6]
ClaudeAPI: Sonnet 5.5使ったトークンのぶんだけ。入力 $2 / 出力 $10（100万トークンあたり）[6]

どのプランにするかは無駄な契約を省く組み合わせにまとめています。

出典

確認日 2026年11月3日。それぞれ、何が書いてあって、この記事のどこの根拠かを添えました。

出典の一覧を見る（14件）
  1. 1.GitHub heygen-com/hyperframes の README：入れ方と、Node.js 22以上・FFmpeg が要ること（設定手順・注意点の根拠）https://github.com/heygen-com/hyperframes（外部サイト、新しいタブで開く）
  2. 2.HyperFrames の LICENSE：Apache License 2.0（無料で使えることの根拠）https://raw.githubusercontent.com/heygen-com/hyperframes/main/LICENSE（外部サイト、新しいタブで開く）
  3. 3.HyperFrames 公式ガイド「with Claude Code」：Claude Code での使い方、preview と render、使用量は Claude のアカウントに付くこと（手順4・コスト表の根拠）https://hyperframes.heygen.com/guides/with-claude-code（外部サイト、新しいタブで開く）
  4. 4.HyperFrames 公式ガイド「Plugins」：プラグインの入れ方・更新のしかたと、中に入っているスキル（手順2の根拠）https://hyperframes.heygen.com/guides/plugins（外部サイト、新しいタブで開く）
  5. 5.HyperFrames 公式ガイド「Skills」：プラグインを使わずにスキルだけ入れる方法（手順2の別の入れ方の根拠）https://hyperframes.heygen.com/guides/skills（外部サイト、新しいタブで開く）
  6. 6.Claude の公式料金ページ：Pro・Max・API の料金（コスト表の根拠、2026年11月確認）https://claude.com/pricing（外部サイト、新しいタブで開く）
  7. 7.X の @prayag_sonar さんの投稿：この手順のきっかけ（フォルダ→スキル→細かいプロンプト→レンダー→/コマンド化→くり返してつなぐ）https://x.com/prayag_sonar/status/2116747536157548806（外部サイト、新しいタブで開く）
  8. 8.X の @theozguratillay さんの投稿：「見本やスタイル集」のリポジトリを知ったきっかけhttps://x.com/theozguratillay/status/2117165062125215871（外部サイト、新しいタブで開く）
  9. 9.GitHub lemomo-ai/lemo-opuscar：見本やスタイル集の1つ。ライセンス・★の数は GitHub API（api.github.com/repos/lemomo-ai/lemo-opuscar）で確認https://github.com/lemomo-ai/lemo-opuscar（外部サイト、新しいタブで開く）
  10. 10.GitHub Vincentwei1021/mg-styles-15：見本やスタイル集の1つ。ライセンス・★の数は GitHub API（api.github.com/repos/Vincentwei1021/mg-styles-15）で確認https://github.com/Vincentwei1021/mg-styles-15（外部サイト、新しいタブで開く）
  11. 11.GitHub joeseesun/opus-video-prompts：見本やスタイル集の1つ。ライセンス・★の数は GitHub API（api.github.com/repos/joeseesun/opus-video-prompts）で確認https://github.com/joeseesun/opus-video-prompts（外部サイト、新しいタブで開く）
  12. 12.GitHub yihui-dev/awesome-opus5-5-videos：見本やスタイル集の1つ。ライセンス・★の数は GitHub API（api.github.com/repos/yihui-dev/awesome-opus5-5-videos）で確認https://github.com/yihui-dev/awesome-opus5-5-videos（外部サイト、新しいタブで開く）
  13. 13.GitHub athemeroy/awesome-claude-5-5-videos：見本やスタイル集の1つ。ライセンス・★の数は GitHub API（api.github.com/repos/athemeroy/awesome-claude-5-5-videos）で確認https://github.com/athemeroy/awesome-claude-5-5-videos（外部サイト、新しいタブで開く）
  14. 14.GitHub JohnHeibel/ClaudeAnimationBase：見本やスタイル集の1つ。ライセンス・★の数は GitHub API（api.github.com/repos/JohnHeibel/ClaudeAnimationBase）で確認https://github.com/JohnHeibel/ClaudeAnimationBase（外部サイト、新しいタブで開く）

今週の一歩

  1. node -v で22以上か確かめて、プラグインを入れる。[4]
  2. 上のプロンプトの文字だけ自分の告知に変えて、1本書き出す。
  3. 気に入ったら /コマンドにして、来週の分を作る。