Claude Codeで動画生成するコツ7選｜HyperFramesとRemotionを実測比較

Claude Codeで動画生成はできる？仕組みと2つの方式

できます。ただし、Claude Code自身が映像を描くわけではありません。Claude Codeの動画生成とは、Claude Codeがコードや素材を用意し、別の道具がそれを映像ファイルに仕上げる作業です。方式は「コードを1フレームずつ描画する方式」と「生成APIで画像・音声・映像の素材を作る方式」の2つに分かれます。

1つ目のコード描画方式では、Claude CodeがHTMLやReactのコードを書き、画面を持たないブラウザがそれを1フレームずつ撮影し、FFmpegがMP4にまとめます。海外で16万回以上再生された解説動画で、Nate Herk氏は仕組みを次のように説明しています。

「完全に無料です。Claude Codeにこの道具を渡すと、要するにHTMLを書いて、それを動かしてくれます」

"It's completely free and we give Claude Code this tool and it basically writes HTML and animates it."

Nate Herk（YouTube・AI自動化系クリエイター）— 「Opus 5.5 Just Changed Video Editing Forever」0:45〜

2つ目の生成API方式は、Redditで広まったやり方です。投稿者は、複数の生成モデルを呼び出せるサービスのAPIキーに上限額を設定してClaude Codeに渡し、画像生成や音声合成のモデル選びまで任せました。

道具の数も増えています。エージェント向けの動画系スキルやツールを集めたGitHubの一覧には、2026年9月28日時点で183件が10分類で掲載されています。Anthropicのアレックス・アルバート氏は、Opus 5.5がBlenderを操作してクレイアニメを作った例をXで紹介しました。こちらはClaude Codeではなくclaude.ai上の作例ですが、3Dという3つ目の道があることを示しています。Claude Codeの基本はClaude Codeとは（入門ガイド）にまとめています。

HyperFramesとRemotionの違いは？同じ12秒動画で実測比較

最大の違いは書き方です。HyperFramesは素のHTMLにタイミング用の属性を付けて書き、RemotionはReactの部品として書きます。同じ12秒・1080pの動画を両方で作ったところ、レンダリング時間はどちらも2回目以降で約10〜12秒でした。差が出たのは導入の重さ、検証の仕組み、ライセンスです。

「2回の出力が完全に一致」は、コード描画方式の大きな利点です。HyperFramesの公式ドキュメントは同じ入力から同じ映像が出ることを保証の土台としており、手元でも360フレームすべてのハッシュが一致しました。文言を1か所直して再出力しても、他の場面が変わる心配がありません。ただし同ドキュメントは、パソコンが変わるとフォントやブラウザの版の違いで画素単位の差が出るとし、厳密にそろえる場合はDockerでのレンダリングを勧めています。今回確認したのは同じパソコンでの一致だけです。

ライセンスは組織の人数で判断が変わります。HyperFramesはApache 2.0で、レンダリングごとの課金も商用利用の人数制限もありません。Remotionは個人と3人以下の組織は無料ですが、4人以上の営利組織は有料で、制作者向けが1席あたり月25ドル（約3,900円）、自動生成向けが1レンダー0.01ドルで月100ドル（約1万5,700円）からです。円換算は1ドル＝157円（2026年9月29日の欧州中央銀行の参照レート）で計算しています。

当研究所の見解では、プログラミング経験のない方にはHyperFramesが始めやすい選択です。出来上がるのが素のHTMLなのでブラウザで開いて確認でき、次の章で使うcheckコマンドがレイアウトの崩れを教えてくれます。すでにReactで作った画面部品がある開発チームなら、それを動画に使い回せるRemotionに利点があります。

動画生成プロンプトの書き方：尺・ビート・文言を固定する方法

動画生成のプロンプトは、尺、ビート（場面ごとの秒数）、画面に出す文言の3つを先に固定すると、やり直しが減ります。HyperFramesの公式ガイドは、プロンプトを6つの要素に分けて書く方法を示しています。音声を入れる場合は、ナレーションを先に作って尺を決めます。

コツ1：6つの要素に分けて書く

HyperFramesの公式ガイド「Anatomy of a prompt」が挙げる6要素は次のとおりです。

どこまで細かく書くかについて、同じ公式ガイドはこう説明しています。

「指定の密度が左右するのは、結果があなたの想像からどれだけずれるかであって、動くかどうかではありません」

"Spec density controls how far the result drifts from what you imagined — not whether it works."

HeyGen — HyperFrames公式ガイド「The specification dial」

雰囲気の言葉だけで任せる、色コードや書体まで指定する、すべての要素の形・色・位置・時刻を指定する、の3段階があり、会社のブランドに合わせる動画なら2段階目以上が必要です。今回の題材を6要素に当てはめると、次のようになります。

/hyperframes 12秒・1920x1080・30fpsの社内お知らせ動画を作ってください。

ビート1（0〜3.6秒）：小見出し「総務部からのお知らせ」、見出し「経費精算の締め日が変わります」
ビート2（3.6〜8.6秒）：左のカード「これまで 毎月25日」、矢印、右のカード「これから 毎月20日」
　　　　下に「2026年11月分の申請から適用します」
ビート3（8.6〜12秒）：「申請は20日 18時まで」「社内ポータル ＞ 経費精算 から申請してください」

画面の文言は「」の中をそのまま使い、言い換えないでください。
配色：背景 #F7F5F2、文字 #1E1919、強調 #D04A10。
フォントは Noto Sans JP を assets/fonts に同梱してください。
使わないもの：ナレーション、写真、他社のロゴ。

完成したら check を実行し、情報扱いの指摘もすべて読んでください。
各ビートの中間時点のスナップショットを確認してから報告してください。

コツ2：文言は引用符で囲み、数字は確定値を渡す

公式ガイドによれば、引用符で囲まない文言は言い換えられることがあります。お知らせ動画で締め日や金額が言い換えられると、そのまま事故になります。日付・金額・部署名・制度名は「」で囲み、「そのまま使う」と明記します。また、最後の状態で止めたいときに「止める」と書くと静止したフレームになるため、ゆっくり拡大するなどの小さな動きを指定するよう、同ガイドは勧めています。

Redditで広まったプロンプトも、要素に分けると同じ構造です。尺（30〜60秒）、絵柄、音声の有無、素材と音声合成の選定を任せること、席を外すので質問せずに最後まで進めること、そしてAPIの上限額（10ドル）が書かれていました。任せる範囲が広い分、上限額という歯止めを最初に置いている点が参考になります。

コツ3：ナレーションを先に作り、尺は音声から決める

手元検証で最もはっきり数字に出たのがこの点です。12秒の映像を作ったあとに、各場面のナレーション原稿を読み上げ音声にしたところ、合計18.85秒になりました。映像の尺に音声がまったく収まりません。

音声に合わせて映像を20秒に組み直すと、レンダリングは15.1秒で終わり、検査も合格しました。Nate Herk氏が動画編集の5つの工程の最初に「まず文字起こし」を置いているのも、同じ理由です。映像の切り替えは音声の時刻に合わせるものなので、音声が先に決まっている必要があります。原稿は1秒あたり5〜6字を目安に、場面ごとの字数から尺を逆算してください。

音量も測っておくと安心です。今回の音声は、FFmpegのloudnormフィルターで測ると−25.2 LUFSと小さめでした。目標を−16 LUFSにして正規化すると−15.9 LUFSになりました。目標値は配信先の基準に合わせてください。なお、HyperFramesには手元で動く音声合成（日本語対応）もありますが、今回は未導入のため検証していません。

なぜ自己検証ループが必要なのか：checkが見つけた不具合と見逃した不具合

動画は1フレームでも文字が重なれば作り直しになるため、Claude Code自身に検証させる仕組みが品質を左右します。手元検証では、HyperFramesのcheckコマンドが、仕込んだ見た目の不具合3種をすべて検出しました。一方で、日本語1文字の行落ちは検出されず、画像を目で見て初めて分かりました。

Anthropicは公式動画で、検証をClaudeに任せるときの原則をこう述べています。

「チェックが測定できるものであるほど、合格したかどうかをClaudeが判断しやすくなります」

"The more measurable a check is, the easier it is for Claude to tell whether it's passed or not."

Anthropic — YouTube「Claude」チャンネル「Building verification loops in Claude Code」1:31〜

Nate Herk氏も、検証ループを5つの工程のうち「おそらく最も重要」と位置づけています。エージェントが出力を自分で見て直すことを繰り返すので、人の手元に届くのは5〜6回目の版になる、という説明です。

コツ4：checkとスナップショットを必ず通す

検証ツールがどこまで見つけてくれるかを確かめるため、完成した動画にわざと不具合を仕込みました。フォントの定義を消す、カードの中の文字を長くしてはみ出させる、文字色を背景に近い薄い色にする、2つの場面の時刻を重ねる、の4種類です。

注意点が2つあります。1つ目は、文字のはみ出しが「エラー」ではなく「情報」として報告されたことです。エラーの件数だけを見て合格と判断すると、画面の外に文字が切れた動画が出来上がります。Claude Codeには「情報扱いの指摘もすべて読む」と指示してください。2つ目は、修正後のcheckは6.1秒で合格を出しましたが、合格は見た目の検査に通ったという意味でしかないことです。日付や金額が正しいかどうかは、人が確認する必要があります。

コツ5：日本語はフォントの同梱と行落ちの目視を決まりにする

日本語の動画で起きやすい問題は2つありました。1つはフォントです。フォントの定義を消した版では、HyperFramesがGoogle Fontsから9つの書体ファイルを自動で取得して補いました。便利ですが、レンダリングが外部との通信に依存することになります。当研究所の見解では、使う文字だけを抜き出したフォントファイルをプロジェクトに同梱するのが確実です。今回は54文字分で、1書体あたり約17KBでした。

もう1つは行落ちです。「毎月25日」の「日」だけが次の行に落ちる崩れは、英語にはない日本語特有のもので、検査には引っかかりません。日付や金額のような短い語句は途中で改行しない指定にし、各場面の中間時点のスナップショットを必ず目で見る、という手順を決まりにしておくと防げます。

Claude Codeの動画生成にかかる費用と時間は？

コード描画方式なら、レンダリング自体に費用はかからず、かかるのはClaude Codeの利用分だけです。生成APIを使う方式では、Redditの報告で30〜60秒の動画1本あたり生成APIが3〜4ドル、所要時間が約1時間20分〜2時間でした。いずれも2026年9月時点の報告値です。

時間は作り込みで大きく変わります。当研究所が9月27日に作った15秒の紹介動画は、動きのぶれを表現するために1フレームを4〜12回重ねて撮影する作りにしたため、900フレームのレンダリングに856秒かかりました。今回の12秒のお知らせは約10秒です。同じ週には、動画ではなく操作できる作品の例ですが、8時間でトークン約1,874.40ドル（約29万円）を使ったという報告もありました。

コツ6：上限額とeffortを先に決める

Redditの2つの事例は、どちらも生成APIのキーに10ドル（約1,600円）の上限を設定してからClaude Codeに渡しています。席を外して任せるなら、上限額は必須です。Claude Code側の消費は、モデルと考える量の設定（effort）で変わります。Nate Herk氏は作例の大半をeffortをhighにして実行したと述べています。Opus 5.5のAPI料金は入力が百万トークンあたり4ドル、出力が20ドルです。effortの選び方はeffortの使い分けガイドで実測値とともに解説しています。

コツ7：うまくいった演出はskillに残す

2本目以降の時間を縮めるのがskillです。Claude Codeの公式ドキュメントによれば、skillは手順や決まりを書いたファイルで、本文は使うときだけ読み込まれます。Nate Herk氏は、気に入った動画をClaude Codeに分析させて演出の決まりをskillにし、作るたびに良かった点と悪かった点を書き足していく運用を紹介しています。

「同じことを繰り返していると気づいたら、それをskillに入れてください」

"If you ever find yourself repeating something, just throw it in the skill."

Nate Herk（YouTube・AI自動化系クリエイター）— 「Opus 5.5 Just Changed Video Editing Forever」17:48〜

当研究所の見解では、会社の動画用skillに最初に書くべきものは、配色とフォント、文言を言い換えない決まり、使ってはいけない素材、そしてコツ4と5の検証手順です。CLAUDE.mdとの使い分けはCLAUDE.mdとskillsの使い分けを参照してください。

動画生成が向かない場面と、導入前に確認すべきことは？

向かないのは、撮影した実写が主役の動画、実在するサービスの画面を正確に見せる操作説明、そして1本だけを急いで作る場面です。導入前には、スキルがパソコン全体に配置されること、利用状況の送信が既定で有効なこと、他社のロゴや素材の扱いの3点を確認してください。

品質への批判は知っておく

Hacker Newsの議論では、称賛と同じくらい批判も出ています。派手なスライドにすぎない、切り替えが速すぎて各画面の文字を読む時間がない、AIが作ったと分かる見た目はそれだけで素人っぽく見られる、といった指摘です。1回の指示で作り切るのではなく、絵柄の相談、音声の見本、原稿、絵コンテと段階を分けて進めるべきだという助言もありました。

「1プロンプトで完成」という言い方にも注意が必要です。Nate Herk氏は、105GBの素材フォルダから作ったダイジェスト動画について、実際には指示を3回出したこと、不自然な切れ目が残ったことを動画の中で認めています。今回の手元検証でも、最初の版には行落ちがあり、修正が1回必要でした。

実在する画面の再現にも限界があります。コード描画方式ではClaude Codeが画面を描くため、自社サービスの画面を再現させると、実物と細部が違う画面になることがあります。Hacker Newsでは、実際の画面をブラウザの自動操作で録画し、それを素材として組み合わせる方法が紹介されていました。

導入時にパソコン全体へ配置されるもの

手元検証で想定外だったのが、初期化コマンドの動作です。検証用のフォルダの中で初期化を実行したところ、プロジェクトのファイルに加えて、10個のスキルがパソコン全体で有効な場所（ホームフォルダ直下の.claude/skillsなど）に配置され、Claude Code以外のエージェント用のフォルダにもリンクが作られました。READMEには、初期化コマンドがコアのスキルを最新に保つと書かれており、仕様どおりの動作です。

4点目は、Claude Codeの公式ドキュメントが明記している注意です。

「インストールしたClaude Codeのプラグインは、あなたのユーザー権限で、あなたのパソコン上の任意のコードを実行できます」

"A Claude Code plugin you install can execute arbitrary code on your machine with your user privileges."

Anthropic — Claude Code Docs「Plugin security and trust」

HyperFramesはClaudeのマーケットプレイスに「Anthropic verified」の表示付きで掲載されていますが、同じページには、信頼できる開発元のコネクタだけを使うこと、Anthropicは動作を保証できないことも書かれています。顧客情報を扱うパソコンに入れる前に、権限設定のガードレールを先に整えておくことをおすすめします。

素材の権利と、この記事で検証していない範囲

海外の作例には、実在する企業の商品画像やロゴを集めて紹介動画に仕立てたものがあります。当研究所の見解では、日本の実務で同じことをする場合、他社のロゴ、商品画像、人物の写真は権利の確認が前提です。生成APIで作った画像や音声も、各サービスの利用規約に従う必要があります。

最後に、この記事で検証していない範囲を明記します。生成APIを使う方式は手元で試しておらず、費用と時間は投稿者の報告値です。HyperFramesの音声合成と文字起こし、Dockerでのレンダリングも未検証です。仕様と数値は2026年9月30日時点のもので、道具の更新が速い分野のため、導入時には公式ドキュメントで最新の状態を確認してください。

まとめ