Claude CodeとHyperFramesで動画生成する仕組み｜LyriaでBGMを付ける

サービス名が大きく現れ、音楽に合わせて図や文字が動く。そんな短い紹介動画なら、Claude CodeとHyperFramesを組み合わせる方法があります。

Claude Codeが動画の設計とコードを作り、HyperFramesが動画ファイルに書き出す。BGMはLyriaで用意して渡す。 この記事では、最初の15秒を作るための設定を順に説明します。

手順は2026年9月27日確認の公式資料に基づきます。掲載する指示文は当サイトの試作用で、投稿者のプロンプトを再現したものではありません。

参考作品：この構成で作られた動画

{{tweet:https://x.com/Majin_AppSheet/status/2103497319899693327}}

以下は公開情報をもとにした設定例です。投稿者が使った非公開のプロンプトや制作設定そのものではありません。

HyperFramesとClaude Codeは動画制作の何を担当する？

Claude Codeは制作を進めるアシスタント、HyperFramesはHTMLなどのコードを映像に変える道具です。文字の位置や動きをコードで指定できるため、見出しを後から差し替える動画にも使えます。

Majinさんは、Opus 5.5を使うClaude CodeにHyperFramesを組み合わせ、LyriaのBGMを加えた制作例を公開しています。ここで紹介するのは、その組み合わせを試すための入り口です。本人の投稿

最初に用意するものは、Claude Codeを利用できるアカウント、Node.js 22以降、FFmpegです。Node.jsはコマンドを動かす環境、FFmpegは映像と音を動画ファイルにまとめる道具です。HyperFrames公式

MacでHomebrewを導入済みなら、ターミナルで次を実行できます。WindowsなどのClaude Code導入は公式セットアップからOSに合う方法を選んでください。

brew install --cask claude-code
brew install node ffmpeg
claude --version
node --version
ffmpeg -version

すでに入っているものは導入し直す必要はありません。node --versionが22以上であることを確認し、claudeを起動して契約アカウントでログインします。サブスク枠を使う場合は、API課金のアカウントと取り違えないようにします。

HyperFramesで素材・動き・書き出しを組み立てる

HyperFramesは、プロジェクトを作り、Claudeに中身を制作させ、プレビューから書き出しへ進めます。まずは音なしの1本を作ると、設定の問題と音の問題を分けられます。

ターミナルで次を順に実行してください。my-first-videoは新しく作る作業フォルダです。公式クイックスタート

npx hyperframes init my-first-video
cd my-first-video
npx skills add heygen-com/hyperframes
claude

Skillsの選択画面ではCore SkillsとClaude Codeを選び、案内に従って追加します。Skillsは、動画の作り方をClaudeに渡す手順書です。認識されないときはClaude Codeを再起動します。

Claude Codeに渡す指示文の例です。商品名などは自分の題材に置き換えてください。

/hyperframes
このフォルダに、15秒・横1920×縦1080・
30fpsの紹介動画を作って。
題材は架空のメモアプリ「Memo」。
0〜4秒：「思いつきを、その場でメモ。」
4〜10秒：メモが3枚並び、1枚ずつ整理さ
れる様子。
10〜15秒：「今日のアイデアを残そう。」
紺色の背景、白い文字。文字が読める静止
時間を確保して。
音声・画像・動画の外部生成はまだ使わな
い。
実在しない機能や実績は追加しない。
まず構成を提示し、承認後に制作して。検
査後にプレビューを見せて。

構成を確認して制作を許可したら、プレビューを開きます。別のターミナルで同じフォルダに移動して、以下を実行する方法もあります。

npx hyperframes check
npx hyperframes preview

表示されたURLで、文字の欠けと各場面の切り替わりを確認します。問題なければ、プレビューのコマンドをCtrl+Cで終了し、書き出します。

npx hyperframes render --output out.mp4

作業フォルダのout.mp4を開いて再生できれば、最初の到達点です。生成されたコードの状態によって修正が必要なので、検査エラーが出た場合はエラー文と「どの場面で何が起きたか」をClaudeへ渡します。

LyriaのBGMをHyperFramesの映像に合わせる

LyriaのBGMは、最初はGeminiの画面で作ってMP3を保存し、HyperFramesへ渡す方法が分かりやすいです。APIの自動接続を最初から組む必要はありません。

Geminiを開き、入力欄の「Upload and tools」から「Create music」を選びます。生成後のダウンロードで音声のみのMP3を選びます。利用には年齢・アカウント・アクティビティ設定などの条件があり、画面に機能がなければGoogleの利用条件と操作案内を確認してください。

音楽の指示文の例です。

短いメモアプリの紹介動画に使う、軽快で
落ち着いたインスト曲。
歌声なし。ピアノと控えめな打楽器。
冒頭から拍が分かり、画面の文字を邪魔し
ない雰囲気。

保存した音声を作業フォルダ内のassets/bgm.mp3に置きます。生成曲の長さと動画の長さは一致するとは限らないため、Claudeには使う区間も指定します。

assets/bgm.mp3を使って。最初の15秒を動
画に合わせ、
最後は自然に音量を下げて。文字が現れる
タイミングを拍に合わせる案を出して。
音量と切り替えをプレビューで確認してか
らout.mp4を再書き出しして。
曲の再生成や別サービスへの課金は行わな
いで。

音が出ないときは、まずMP3単体で再生できるか、ファイル名が一致するかを確認します。次に、ブラウザのプレビューだけでなく書き出したMP4も再生してください。

HyperFramesで広告の冒頭だけを変えるには

広告の冒頭だけを変えるなら、変更する文章と、固定する条件をClaudeへ明示します。比較の目的を伝えることで、音楽や後半まで勝手に変わるのを防ぎやすくなります。

今の動画をA版として保存して。B版は0〜4
秒の文だけを
「アイデア、忘れる前に。」へ変更する。
文字の表示位置、映像の長さ、BGM、4秒以
降の内容は同じにする。
AとBの差分を確認し、別名のMP4で書き出
して。

書き出した2本を並べ、冒頭以外が同じかを確認してから広告へ使います。文字数が違うと改行が変わるため、スマートフォンでの読みやすさも確認してください。

HyperFrames本体の利用条件と、ClaudeやLyriaの利用枠は別です。外部素材を追加する場合も、その都度生成費用を確認します。道具による作りやすさと広告成果は別なので、CTRやCPCは配信後に比較します。

別の構成との違いは、Claudeの動画生成6パターンで確認できます。