Claude CodeとHyperFramesで10秒動画を作る：Skillの入れ方から修正・音・MP4書き出しまで | Recurrent Hub
Claude CodeとHyperFramesで10秒動画を作る：Skillの入れ方から修正・音・MP4書き出しまで 依頼文1回でHTMLとプレビューまで、MP4はコマンド1つ。直すときは「何秒の何を」で頼み、checkで崩れを見つける 文字と図形が動く短い動画を作りたいとき、動画編集ソフトのタイムラインを触らずに、Claude Codeへ「10秒の動画を作って」と頼めたら便利です。そのための道具が、HeyGenが公開しているオープンソースのHyperFrames です。HTMLとCSSで画面を作り、時刻ごとにブラウザで撮影して、MP4に書き出します。
この記事では、Claude CodeにHyperFramesのSkillを入れ、この記事の内容を10秒で紹介する動画を実際に作ります。依頼文1回でHTMLとプレビューを作らせ、コマンド1つでMP4に書き出すところから、「何秒の何を」と指定して直す、Studioの画面で文字を直す、APIキーなしでBGMと効果音を付ける、までを順に説明します。
検証環境 ：Windows 11 / Node.js 24.22.0 / FFmpeg 2025-05-12 / HyperFrames 0.8.179 / Claude Code 2.1.304（Opus 5.5、Claude Proプラン）。2026-10-20に、記事のコマンドと依頼文をこの環境で実行して確認しました。コマンドはGit Bashで実行しています（PowerShellで書き方が変わるところは併記します）。Node.js・FFmpegのインストールコマンド、macOSでの手順、プラグインでの導入、ナレーション（音声合成）は試していません。
HyperFramesでできること
HyperFramesは、動画を生成するAIではありません。HTMLとCSSで作った画面を、決まった時刻ごとにブラウザで撮影して、動画ファイルにする仕組みです（公式リポジトリ ）。
向いているもの 向いていないもの タイトルカード、図解、文字が主役の短い紹介動画 実写の映像そのものを作ること（撮影・生成した素材を読み込んで組み合わせる） 文言や色、表示する時刻をあとから直したい動画 手で細かく動きを付けたいアニメーション
画面がコードなので、「6.5秒から出す」「この文字を水色にする」のような修正をClaude Codeに頼めます。ローカルでの書き出しに、HeyGenのクレジットは要りません。
1. 準備する
Node.jsとFFmpegを入れる HyperFramesのnpmパッケージはNode.js 22以上が必要です（npm view hyperframes enginesで{ node: '>=22' }と確認）。書き出しにはFFmpegも使います。どちらもnpmでは入りません。
Windowsなら、wingetで入れられます。パッケージがあることはwinget showで確認しましたが、筆者の環境にはすでに入っていたので、インストールのコマンドそのものは実行していません。
winget install -- id OpenJS . NodeJS . LTS
winget install -- id Gyan . FFmpeg
macOSならHomebrewのbrew install node ffmpegが一般的です（筆者は試していません）。入れたらターミナルを開き直し 、次の2つが表示されることを確かめます。FFmpegはPATHに入っていないと書き出しで止まります。
HyperFramesをプロジェクトに入れる 作業用のフォルダを作り、その中で実行します。npx hyperframes ...はインストールしなくても動きますが、HyperFramesは更新が速く、2026-09-29に0.8.92だったnpmの版は、3週間後の2026-10-20には0.8.179になっていました。この記事と同じ版で試すなら、版を指定してプロジェクトに入れます。--save-exactを付けないと、package.jsonには^0.8.179のような範囲で記録され、入れ直したときに0.8系の新しい版が入ることがあります。
npm init -y
npm install -D --save-exact hyperframes@0.8.179
npx hyperframes --version
Skillをプロジェクトだけに入れる Skillは、Claude CodeにHyperFramesの決まりごとを教える説明書です。入れないまま頼むと、Claude Codeは一般的なWebページの書き方で作り、HyperFramesで書き出せない形になりやすくなります。Skillそのものの仕組みはClaude Code Skills 実践バイブル を参照してください。
作業フォルダだけに入れるなら、同じフォルダで次を実行します。選択画面は出ません。
npx -y skills add heygen-com/hyperframes --agent claude-code --skill '*' -y
npx hyperframes skills check
Location ...\.claude\skills (claude-code)
✓ 21 current
フォルダの.claude/skills/に21個のSkillが入りました（Skillはnpmの版とは別に更新されるので、数と中身は2026-10-20時点のものです）。どれを使うかはClaude Codeが依頼から選ぶので、自分で選ぶ必要はありません。主なものは次のとおりです（各SKILL.mdの説明から要約）。
Skill 使われる場面 hyperframes入口。依頼を読み、下の目的別のSkillへ振り分ける motion-graphics文字や図形の動きが主役の短い動画（今回使われた） slideshowスライド形式の発表資料 faceless-explainer記事やメモから、人が出ない解説動画を作る product-launch-video製品のURLや原稿から紹介動画を作る media-useBGM・効果音・画像などの素材を用意する（今回の音で使われた） hyperframes-core・hyperframes-cli動画の書き方の決まりと、CLIの使い方
公式のnpx hyperframes skills updateは、入っているSkillを最新にするコマンドで、入れる場所を選ぶオプションがありません（0.8.179の--helpで確認）。プラグインとして入れる方法もありますが（公式の導入ガイド ）、筆者は試していません。
プロジェクトの設定を置く 作業フォルダの.claude/settings.jsonに、次の設定を置きます。
{
"env" : {
"HYPERFRAMES_SKIP_SKILLS" : "1"
} ,
"permissions" : {
"allow" : [
"Bash(npx hyperframes *)" ,
"PowerShell(npx hyperframes *)" ,
"Bash(npm run *)" ,
"PowerShell(npm run *)"
]
}
}
1つ目のenvは、npx hyperframes initがユーザー全体のフォルダにSkillを入れるのを止める設定です。筆者は最初これを置かずに試し、ユーザー全体にSkillが入ってしまいました（つまずいたポイント で説明します）。この設定を置くと、Claude Codeの中から実行したinitでも、ユーザー全体のフォルダは変わりませんでした。
2つ目のpermissions.allowは、HyperFramesのコマンドを毎回確認せずに実行させる設定です。筆者のWindows環境では、Claude CodeはコマンドをPowerShellで実行したので、PowerShell(...)の行が効きました。Bash(...)の行はmacOS・Linux向けに入れたもので、筆者は試していません。この設定がないとき、最初の1本で承認を9回求められました。設定を置いたあとの作業では、承認は1〜3回に減りました。残った承認は、cdを含む複数のコマンドをまとめたものや、nodeでスクリプトを実行するものでした。
動かせる状態か確かめる ✓ Node.js v24.22.0 (win32 x64)
✗ Memory 15.6 GB total · 1.3 GB available
✗ whisper-cpp Not found (optional — needed for transcription)
✗ TTS (Kokoro) Not installed (optional — local voice fallback)
✗ BGM (MusicGen) Not installed (optional — local music fallback)
✓ FFmpeg ffmpeg 2025-05-12-git-8ce32a7cbb-full_build-www.gyan.dev
✓ FFprobe ffprobe 2025-05-12-git-8ce32a7cbb-full_build-www.gyan.dev
✓ Chrome ...
✗ Docker Not found
◇ Some checks failed — see hints above
最後に「Some checks failed」と出ますが、✗が付いた文字起こし（whisper-cpp）、ローカルの読み上げ（Kokoro）、ローカルの作曲（MusicGen）は「optional」で、Dockerはコンテナで書き出すときだけ使います。空きメモリの✗（1.3GB）が出ていても、この記事の書き出しはすべて成功しました。Node.js、FFmpeg、FFprobe、Chromeに✓が付いていれば 、この記事の手順で書き出せました。
2. Claude Codeを起動して頼む 作業フォルダでClaude Codeを起動します。筆者は、Skillと設定ファイルを置いてから新しい会話で始めました。Claude Codeの公式ドキュメントによると、起動中の会話でもSkillの追加は反映されますが、起動したときに.claude/skills/のフォルダがまだなかった場合は、/reload-skillsを実行するまで読み込まれません（筆者は起動中に入れる方法は試していません）。迷ったら、Skillを入れてから起動するのが確実です。
依頼文は、次の4つを埋める形にすると、Claude Codeが質問せずに作り始められます。
/hyperframes を使い、[秒数]・[比率]の[種類]を作ってください。
題材は[何について]です。
[0〜3秒]で[見せるもの]、[3〜7秒]で[見せるもの]、[7〜10秒]で[見せるもの]を見せます。
[読みやすさや色の条件]。外部の画像・音声は使いません。
完成したらプロジェクトの場所を教え、プレビューを開いてください。
/hyperframes を使い、10秒・16:9の解説動画を作ってください。題材は「Claude CodeとHyperFramesで動画を作る始め方」という記事です。0〜3秒で「HTMLで画面を作り、MP4に書き出す」という見出し、3〜7秒で「Claude Codeが作る → プレビューで確かめる → MP4に書き出す」の3段階を矢印でつないだ図、7〜10秒で「まずは音なしの10秒から」という締めの一文を見せます。日本語を読みやすくし、背景と文字のコントラストを確保してください。外部の画像・音声は使いません。完成したらプロジェクトの場所を教え、プレビューを開いてください。
Claude Codeがしたこと
/hyperframesのSkillが依頼を読み、motion-graphicsのSkillを選んだ。npx hyperframes init videos/claude-code-hyperframes-intro --non-interactive --example=blank --skill=motion-graphicsで、videos/の下に動画のプロジェクトを作った。index.htmlに3つの場面を書いた。checkと、指定した時刻の静止画を撮るsnapshotで自分の出力を見直した。「Claude Codeが作る」のカードだけ番号の位置がずれていたので、2行に分けて揃えた。npx hyperframes preview --backgroundでプレビューを起動し、ブラウザで開いた。 依頼から完了の報告までは3分26秒でした（このときは、前の章の設定を置いていません）。作られたプロジェクトの中身は次のとおりです。
videos/claude-code-hyperframes-intro/
├─ index.html ← 動画の中身（HTML・CSS・動き）
├─ hyperframes.json
├─ meta.json
├─ package.json
├─ CLAUDE.md ← AI向けの説明書（initが作る）
└─ AGENTS.md
3. できたHTMLを読む index.htmlは普通のHTMLです。締めの場面（6.5〜10秒）の部分を抜き出します。読み方を説明するための抜粋で、貼り付けてそのまま動かすコードではありません。また、5章の修正と6章の音・文言の変更を終えたあとの版なので、最初にできたHTMLとは締めの一文と<audio>の行が違います（data-hf-id属性とほかの場面は省いています）。
< div id = " root " data-composition-id = " main " data-start = " 0 " data-duration = " 10 " data-width = " 1920 " data-height = " 1080 " >
< section id = " s3 " class = " clip scene " data-start = " 6.5 " data-duration = " 3.5 " data-track-index = " 0 " >
< div id = " s3-content " class = " scene-content " >
< p class = " closing " >
< span id = " s3-l1 " class = " line " > まずは < em id = " s3-em " > 10秒 </ em > の </ span >
< span id = " s3-l2 " class = " line " > 1本から </ span >
</ p >
< div id = " s3-rule " class = " rule " > </ div >
< p id = " s3-sub " class = " sub " > Claude Code と HyperFrames で動画を作る始め方 </ p >
</ div >
</ section >
< audio id = " sfx-closing " src = " .media/audio/sfx/sfx_002.mp3 " data-start = " 6.5 " data-duration = " 2.5 " data-track-index = " 3 " data-volume = " 0.6 " > </ audio >
</ div >
< script >
window . __timelines = window . __timelines || { } ;
const tl = gsap . timeline ( { paused : true } ) ;
tl . fromTo ( "#s3-l1" , { autoAlpha : 0 , y : 48 } , { autoAlpha : 1 , y : 0 , duration : 0.7 , ease : "power3.out" } , 6.65 ) ;
tl . fromTo ( "#s3-l2" , { autoAlpha : 0 , y : 48 } , { autoAlpha : 1 , y : 0 , duration : 0.7 , ease : "power3.out" } , 6.95 ) ;
window . __timelines [ "main" ] = tl ;
</ script >
いつ出すか は属性で書きます。class="clip"の要素にdata-start（開始の秒）とdata-duration（長さの秒）を付けると、その時間だけ表示されます。<audio>も同じ書き方で、何秒から鳴らすかを決めます。どう動くか はアニメーションのライブラリ（GSAP）で書きます。tl.fromTo(...)の最後の数字（6.65）が、その動きを始める秒です。一時停止したtimelineを登録しておくと、HyperFramesが時刻ごとに再生位置を合わせて撮影します。 「6.5秒から出す」と頼むと、Claude Codeはこのdata-startと、tl.fromToの最後の数字を書き換えます。自分で数字を直してもかまいません。
4. 確かめてMP4に書き出す Claude Codeが教えたプロジェクトのフォルダで、構造の点検（lint）、ブラウザでの実行・配置・コントラストの確認（check）、書き出し（render）を実行します。
cd videos/claude-code-hyperframes-intro
npx hyperframes lint
npx hyperframes check
npx hyperframes render --output final.mp4
lintはエラー0件、警告3件でした。警告はどれもnested_structure_needs_subcompositionで、場面ごとに別のファイルへ分けるとStudioの時間軸が見やすくなる、という提案です。今回は見た目とMP4の書き出しに問題がないことを確かめられたので、そのままにしました。
Runtime
◇ 0 errors, 0 warnings
Layout
◇ 0 issues across 9 sample(s)
Motion
◇ 0 errors, 0 warnings
Contrast
◇ 15/15 text checks pass WCAG AA
...
◇ Check passed
935.4 KB · 10.0s video · rendered in 38.3s
--outputを付けなければ、プロジェクトのrenders/<名前>.mp4に書き出されます（npx hyperframes render --helpで確認）。書き出したファイルはffprobeで中身を確かめられます。
ffprobe -v error -show_entries format = duration,size:stream = codec_name,width,height,r_frame_rate -of compact final.mp4
stream|codec_name=h264|width=1920|height=1080|r_frame_rate=30/1
format|duration=10.000000|size=957898
できた動画です（次の章の修正を入れたあとの版です。記事用に幅720px・12fpsのGIFへ変換しています。元は1920×1080・30fpsのMP4です）。
最後は、プレビューではなく書き出したMP4そのもの を再生して、冒頭、場面の切り替わり、末尾を確かめます。
5. 「何秒の何を」で直す コードで作った動画は、直す場所を時刻と対象で伝えられます。新しい会話で次のように頼みました。
/hyperframes videos/claude-code-hyperframes-intro の動画を直してください。7〜10秒の締めの一文を、7秒ではなく6.5秒から表示してください。あわせて、締めの一文の「10秒」の色を、黄色から水色に変えてください。ほかの場面は変えないでください。直したら check を実行して、結果を教えてください。
Claude Codeは1分18秒で2か所を直し、checkの結果を報告しました。そのとき、次の問題も見つけています（報告からの要約）。
締めの一文を6.5秒に早めた一方で、3〜7秒の場面は6.7秒まで消え始めない。
そのため、6.75秒と6.875秒の時点で「動画ができるまでの3ステップ」と締めの一文の1行目が重なる（checkのLayoutで警告1件）。
「ほかの場面は変えない」という指示があるので、3〜7秒の場面の消え始めを6.2秒に早める案だけを示し、まだ変えていない。
重なりをなくしたいので、3〜7秒の場面の消え始めを6.2秒に早めてください。直したら check をもう一度実行してください。
24秒で直り、checkのLayoutは問題なしになりました。もう一度書き出した動画の、6.4秒・6.8秒・7.3秒の画面を比べます。
ある場面の時刻だけを動かすと、隣の場面と重なることがあります。プレビューで再生しているだけでは気づきにくい1秒未満の重なりでしたが、checkが時刻つきで見つけてくれました。時刻を変える修正を頼むときは、「直したら check を実行して」まで依頼文に入れておくと安心です。
6. APIキーなしでBGMと効果音を付ける 音声合成や作曲のサービスを使わなくても、音は付けられます。新しい会話で次のように頼みました。
/hyperframes videos/claude-code-hyperframes-intro の動画に音を付けてください。全体に静かなBGMを流し、3段階の図のカードが出るたびと、締めの一文が出る6.5秒に短い効果音を鳴らします。有料のサービスやAPIキーが必要なものは使わず、HyperFramesに同梱の効果音か、コードで作った音にしてください。直したら check を実行して、結果を日本語で教えてください。
2分14秒で終わり、Claude Codeは次のように音を用意しました（会話の記録から要約）。
時刻 音 用意の仕方 0〜10秒 和音がゆっくり鳴り続けるBGM Node.jsのスクリプト（scripts/make-bgm.mjs）を書き、WAVファイルを作った 3.4秒・4.3秒・5.2秒 「ポン」という短い音 media-useのSkillで、同梱の効果音から選んだ（npx hyperframes media-use resolve --type sfx --intent "soft pop" --project . --local-only）6.5秒 やわらかいチャイム 同じく同梱の効果音（--intent "soft chime"）
media-useのSkillの説明によると、効果音は通常、アカウント不要の素材サイト（Openverse）から探し、オフラインなら同梱の21個から選びます。--local-onlyは、ネットワーク上の探し先をすべて飛ばす指定です。BGMは効果音より小さく鳴るよう音量が下げられ、最初のcheckで出た「同じトラックで効果音が重なる」という警告も、効果音の長さを書き足して消していました。前の章の設定を置いていたので、承認を求められたのは3回でした。
報告の最後に、Claude Codeは「締めの一文が『まずは音なしの10秒から』のままで、音が付いた内容と合わない」と指摘してきました。「まずは10秒の1本から」に変えるよう頼むと、33秒で直りました。
stream|codec_name=h264|codec_type=video|width=1920|height=1080
stream|codec_name=aac|codec_type=audio|sample_rate=48000|channels=2
format|duration=10.000000|size=1191962
ただし、書き出しの時間は音なしより長く、ばらつきもありました。同じ内容を2回書き出して、3分18秒と1分35秒でした（音なしは38.3秒と42.6秒）。どちらも、ほとんどが画面の撮影（capture）の時間でした。
ナレーション（音声合成）は、media-useのSkillの説明では、HeyGenのCLIにログインして使う方法（無料枠がある。APIキーで使うとクレジットを消費する）か、ローカルの読み上げ（doctorのKokoro。別途インストールが必要）を使います。ログインや追加のインストールが要るので、この記事では試していません。
7. Studioの画面で直接直す npx hyperframes previewで開く画面（Studio）では、動画を再生しながら確かめられます。上に動画、下に場面と音の時間軸が並びます。
動画の中の文字をクリックすると、右の欄に文言、フォント、サイズなどが表示されます。文言の欄を書き換えると、その場で動画に反映され、index.htmlにもすぐ書き込まれました。
文言の差し替えのような小さな修正は、Claude Codeに頼むよりStudioで直すほうが早く済みます。時刻の調整や、場面をまたぐ修正はClaude Codeに頼み、checkを通してもらうのが確実です。Studioで直したあとも、書き出しはrenderで行います（右上の「Export」ボタンは試していません）。
つまずいたポイント
initがユーザー全体にもSkillを入れる 1章の設定を置く前に試したとき、Skillをプロジェクトだけに入れたのに、あとで調べると、ユーザー全体のSkillフォルダ（~/.claude/skills、~/.agents/skills、~/.kilocode/skills）にもhyperframesなど10個のSkillが入っていました。作られた時刻は、Claude Codeがnpx hyperframes initを実行した時刻と同じでした。
空のフォルダでinitだけを実行し直したところ、--skillを付けなくても同じように入りました。init --helpを見ると、--skip-skillsは「temporarily ignored」で、止めたい場合は環境変数HYPERFRAMES_SKIP_SKILLS=1を使うよう書かれています。1章の.claude/settings.jsonがこの対策です。ターミナルで自分でinitを実行する場合は、次のように付けます。
HYPERFRAMES_SKIP_SKILLS = 1 npx hyperframes init my-video --non-interactive --example = blank
PowerShellでは$env:HYPERFRAMES_SKIP_SKILLS = "1"を実行してからinitします。どちらの形でも、ユーザー全体のSkillフォルダは変わりませんでした。
すでに入ってしまったものは、npx -y skills remove --global <Skill名> -yで~/.claude/skillsと~/.agents/skillsからは外せました。~/.kilocode/skillsのものはこのコマンドでは消えなかったので、フォルダを直接削除しました。
書き出しの時間がばらつく 音なしは40秒前後でしたが、音を付けたあとは1分35秒〜3分18秒でした。急ぐときは、まずcheckとsnapshotで見た目を確かめ、書き出しは最後に1回にすると待ち時間が減ります。
報告が英語で返ることがある 最初の依頼では、日本語で頼んだのに完了の報告が英語で返ってきました。その後の依頼では日本語でした。気になる場合は、依頼文に「結果を日本語で教えて」と書き添えてください。
かかった費用の目安 HyperFramesのローカルでの書き出しと、同梱の効果音・コードで作ったBGMに費用はかかりません。Claude Codeは、Claude Proプランの範囲で使いました。会話の記録に残っている出力トークンは、最初の作成が約9,700、時刻の修正（2回の依頼）が約4,900、音と文言の修正（3回の依頼）が約8,400でした。プランの使用量に占める割合は、確かめていません。
まとめ
HyperFramesは、HTMLで作った画面を時刻ごとに撮影してMP4にする道具です。Claude Codeに作らせるなら、先にSkillを入れ、.claude/settings.jsonを置いて、新しい会話で始めます。
秒数・比率・文言・場面の役割を決めて頼むと、依頼文1回で10秒の動画のHTMLとプレビューまでできました。MP4はrenderコマンド1つで書き出せます。
直すときは「何秒の何を」で頼み、checkまで実行してもらうと、時刻をずらしたことで生まれた重なりのような崩れも見つかります。文言の差し替えはStudioで直接直せます。
BGMと効果音は、APIキーなしでも、コードで作った音と同梱の効果音で付けられました。
まずは音なしの10秒を1本書き出し、文言か時刻を1か所直して書き出し直してみてください。直しやすさを確かめてから、音や場面を足していくと迷わずに済みます。
