自社サービス「ObotCRAFT（オーボットクラフト）」の30秒プロモ動画を、動画編集ソフトのタイムラインをほとんど触らずに作りました。使ったのは、HeyGen が公開している HyperFrames というフレームワークと、それを操作する Claude Code です。映像は HyperFrames で無音のまま書き出し、ナレーションとテロップと BGM は CapCut で後から入れました。
この記事では、聞き取りから書き出しまでの流れと、どこで人が判断したか、どこでつまずいたかを、実際にやった順番で書きます。「AI に頼めば全部できる」という話ではありません。どこまで任せられて、どこから自分でやる必要があったかを知りたい人に向けた記録です。
動画編集が専門外でも、30秒の動画が必要だった
ObotCRAFT は、競合と現地の検索キーワードを AI が分析し、9言語・15カ国向けの SEO 記事を自動で生成するサービスです。サービスサイトと YouTube に置く短い紹介動画が欲しかったのですが、私は動画編集ソフトに慣れていません。
そこで試したのが HyperFrames です。動画をコードとして作れるなら、Claude Code に頼む普段の作業の延長で進められるのではと考えました。
HyperFrames は、HTMLに時間を書き込むと動画になる
HyperFrames は、HTML と CSS と JavaScript で書いたページを、そのまま MP4 に書き出すフレームワークです。ライセンスは Apache-2.0 で、GitHub（heygen-com/hyperframes）で公開されています。
仕組みは単純です。画面に出す要素に data-start="10.5"（10.5秒目から表示）や data-duration="6.9"（6.9秒間）といった属性を付け、動きは GSAP というアニメーションライブラリで書きます。書き出すときは、ブラウザでページを1コマずつ進めて撮影し、動画につなぎます。
Claude Code 用のスキルも用意されていて、入れると「〇〇のプロモ動画を作りたい」と頼むだけで制作の手順が始まります。私が入れたスキルは13個でした。入口になる hyperframes が要件を聞き取り、今回のような製品紹介なら product-launch-video という手順に振り分けてくれます。
作ったのは「日本だけに灯った点が、15カ国へ広がる」30秒
完成した動画は、16:9、30秒、1920×1080 です。
【動画の埋め込み】
構成は5つの場面に分けました。
| 時間 | 場面 |
|---|---|
| 0:00〜 | 世界地図で日本だけが灯っている。「読まれているのは、日本だけ？」 |
| 0:04〜 | ロゴが出て、日本からアジアへ線が伸び、国が点灯する |
| 0:10〜 | 世界まで引いて、欧米・豪州も点灯。「15カ国・9言語」 |
| 0:17〜 | 製品画面。URLを入れると、6つの工程に順にチェックが付く |
| 0:24〜 | ロゴと「無料診断」のボタンで締める |
地図の上には、その国の言葉で書いた記事タイトルを小さく出しています。スペイン語、英語、韓国語、タイ語などです。1本の記事が各国の言葉で読まれる様子を、言葉で説明する代わりに画面で見せる狙いでした。
制作は、質問に答えるところから始まった
ここからが本題です。実際の流れは5つの工程に分かれていました。
1. 最初に聞かれるのは、目的・配信先・尺
hyperframes スキルを呼ぶと、まず質問が返ってきます。何のための動画か、どこに載せるか（YouTube か、縦型の SNS か）、何秒にするか。私は「YouTube と LP 埋め込み、16:9、30秒」と答えました。
見せ方のイメージは特になかったので、コンセプト案を5つ出してもらいました。その中から選んだのが「世界地図が点灯する」案です。答えた内容は BRIEF.md というファイルに書き残され、以降の工程はすべてこのファイルを基準に進みます。途中で「そもそも何を作るんだっけ」とぶれないのは、この仕組みのおかげだと思います。
2. ブランドの色と書体は、サイトから取り込む
次に、サービスサイト（obot-ai.com/obotcraft）を読み込ませ、ロゴ、スクリーンショット、色、書体を取り出しました。HyperFrames には見た目の型（プリセット）がいくつか用意されていて、その型にサイトの色を当てはめたデザイン仕様書が自動で作られます。今回は白地にブランドのティール（#00B4B4）、文字はほぼ黒の #1A1A1A という組み合わせです。
3. 絵コンテの段階で、構成を決めきる
いきなり動画を作らず、5場面の下書きを1枚のシートにまとめてもらい、それを見て構成を確定しました。
【画像: 絵コンテのシート】
この段階で決めたことの一つが、「テロップは動画に焼き込まず、画面の下17%を空けておく」です。音とテロップを CapCut で入れると決めたので、後から文字を載せる場所を先に確保しました（理由は後で書きます）。
絵コンテで止まって確認できるのは、この手順でいちばん助かった点です。動いている映像を見てから「構成を変えたい」と言うと手戻りが大きいのですが、静止画の段階なら直すのは簡単です。
4. 5つの場面を並行して作り、地図だけは共通の部品にした
制作では、Claude Code が場面ごとに別々の作業担当（サブエージェント）を立てて、5場面を同時に作ります。速いのは利点です。ただ、担当ごとに別々に作るので、場面の切り替わりで地図の位置や大きさがずれるおそれがあります。
そこで地図だけは、全場面で使う共通の部品にしました。d3-geo という地図描画のライブラリで世界地図を SVG にし、「日本に寄った画」「アジア全体」「世界全体」の3つのカメラ位置を数値で決めておきます。各場面はその部品を読み込んで、決まったカメラ位置から決まったカメラ位置へ動かすだけです。場面の切り替わりでは、前の場面の最後のコマと次の場面の最初のコマを画像で比べ、地図の位置が一致しているかを確かめました。
途中で2つの担当が10分間応答しなくなり、作業が止まりました。やり直しを指示すると、2回目は問題なく終わりました。並行作業はこういうことが起きる前提で考えておいた方がよさそうです。
5. 書き出す前に、文字の読みやすさまで検査される
書き出しの前に hyperframes check というコマンドで検査をかけます。1回の実行で、コードの書き方、再生時のエラー、画面からはみ出した要素、動きの不具合、文字と背景のコントラストの5種類をまとめて調べてくれます。
ここで指摘されたのが、ブランド色の #00B4B4 を白地の文字に使っている箇所です。コントラスト比は 2.56:1 で、読みやすさの基準（大きな文字で 3:1 以上）に届いていませんでした。見落としていました。文字とボタンだけを少し濃い #008E8E（約4:1）に変え、地図の点灯色は元のまま残しました。再検査では、51か所すべてが基準を満たしました。
書き出した動画は30.0秒、30fps、8.5MB。無音です。
音とテロップは、あえて CapCut で作成
HyperFrames には、ナレーションの音声合成や BGM を入れる仕組みもあります。それでも今回は、映像を無音で書き出し、音とテロップは CapCut で入れることにしました。
理由は修正のしやすさです。ナレーションの言い回しやテロップの一文字を直すたびに動画を書き出し直すより、CapCut で直接直した方が早い。BGM も Suno で作る予定だったので、音まわりは最初から CapCut に集めました。
その代わり、Claude Code には CapCut に渡すための材料を作ってもらいました。
- テロップの字幕ファイル（SRT形式、13枚）と、書体・色・位置の指定書
- ナレーション原稿と、読み上げ用の字幕ファイル（6行）
- Suno に入れる BGM のプロンプト
- CapCut での作業手順書
ナレーションの字幕ファイルは、ブランド名を「オーボットクラフト」とカタカナで書いてあります。英字のままだと、CapCut の読み上げに英語読みされるおそれがあったためです。画面に出すテロップは英字のまま、読み上げ用だけカタカナにしました。
BGM のプロンプトでは、テンポを BPM 120 に指定しています。BPM 120 は1拍がちょうど0.5秒です。この動画の場面の切り替わりは 4.5秒、10.5秒、17秒、24秒と、どれも0.5秒の倍数なので、すべての切り替わりが拍の頭に乗ります。映像と音楽のタイミングを合わせる作業を、曲を作る前の段階で済ませておけるわけです。
つまずいたのは、日本語フォントと CapCut の操作だった
失敗も書いておきます。
一つ目は日本語フォントです。HyperFrames の書き出し環境には、日本語の書体が入っていない前提になっています。そのため Noto Sans JP のファイルをプロジェクトに同梱しました。動画に使う文字だけに絞り込んだ（漢字359字とかな）ので、ファイルは小さく済んでいます。地図に出す韓国語とタイ語も同じように用意しました。何もしないと日本語が四角い記号（いわゆる豆腐）になるので、日本語の動画を作るなら最初に確認しておきたい点です。
二つ目は CapCut 側です。こちらは HyperFrames の問題ではなく、私が CapCut に慣れていなかったためです。
- 字幕ファイルの読み込み場所がわからず、結局「メディア」からインポートしてタイムラインにドラッグした
- 読み込んだ字幕は白い文字になるので、白い背景の動画の上では見えない。文字色を変える必要がある
- 読み上げは、字幕を選んだときに右側に出る「テキスト読み上げ」タブで作る。上部のメニューを探しても見つからない
- 最後のナレーションが30秒をはみ出した
- 最後の画面を静止させる「フリーズ」の場所が見つからず、最後のコマを画像として書き出し、動画の後ろにつないで代わりにした
最後の件は、ffmpeg で動画の最後のコマを PNG にしてもらって解決しました。CapCut の画面のスクリーンショットを Claude Code に見せながら「どこを押せばいい？」と聞けたので、操作に迷っても止まらずに進められました。
使ってみてわかったこと：判断する場面は減らない
良かった点は三つあります。
一つ目は、構成と見た目の判断に集中できたことです。タイムラインでキーフレームを打つような作業は一度もしていません。映像づくりの段階で私がやったのは、質問に答える、案を選ぶ、絵コンテを見て直してもらう、の三つだけでした。
二つ目は、修正が言葉で済むことです。「文字の色だけ濃くして、地図の色はそのまま」と伝えれば、その通りに直ります。
三つ目は、手順とファイルがそのまま残ることです。同じサービスで縦型の動画や英語版を作るときは、BRIEF.md とデザイン仕様書を使い回せます。
一方で、気になった点もあります。まず、全部おまかせでは終わりません。コンセプト選び、色の修正、CapCut での仕上げは私が判断しました。判断の回数が減るというより、判断以外の手作業が減る、という方が実感に近いです。次に、実写の映像を細かく編集するような用途には向いていません。HTML で描けるもの、つまり図・文字・画面キャプチャが中心の動画でこそ力を発揮します。最後に、更新がとても速い。この記事の手順も、数か月後には変わっているかもしれません。
【制作時間：聞き取りから書き出しまで約30分、CapCut での仕上げに約1時間】
まとめ
HyperFrames と Claude Code の組み合わせは、動画を丸ごと作ってくれる道具とは少し違いました。近いのは、動画の設計図を AI と一緒に書き、その設計図から映像を組み立てる道具です。人が決めるのは、何を伝えるか、どの案を選ぶか、見て違和感がないか。キーフレームの調整や、場面ごとの位置合わせ、コントラストの確認といった作業は任せられます。
音とテロップを CapCut に分けたのも、結果的に正解でした。映像は設計図から作り直せる、音と文字は手元ですぐ直せる。この分担なら、動画編集が専門外でも30秒のプロモ動画は作れます。
次は、同じ設計図を使って、縦型のショート動画と英語版を作ってみるつもりです。
