AIで作る短い紹介動画は、BGMの拍（BPM）からカットの切り替え時刻を計算させる

どんな問題を解決するか / いつ使うか

AIに動画の編集まで任せると、場面の切り替えが音楽とずれて間延びしやすい。30秒前後のアプリ紹介動画やSNS用の告知動画を作るときに使う。

やり方（投稿の6手順）

1. 企画を先に決める：30秒・ナレーションなし・6場面、のように長さと場面数を固定する。
2. 素材は本物を使う（投稿では実際のサムネイル55枚）。それっぽい画面を描かせない。
3. 動画全体の目印になる演出を1つ決める（投稿ではドット文字が入れ替わる演出）。
4. 曲の拍に合わせて全カットを切り替える：BGMの静かな区間に冒頭の問いかけ、盛り上がりに場面転換（投稿では2.95秒）を重ね、以降のカットはBPM108の拍から時刻を計算した。1拍は 60 ÷ BPM 秒（BPM108なら約0.556秒）なので、「切り替えは拍の頭、4拍＝約2.22秒ごと」のように数字で指示できる。
5. 途中のコマを書き出して1px単位で確認する（投稿では、ロゴ横の「APP」がわずかに下がっていたのを、ドットを実測して同じ格子で描き直した）。
6. サムネイルは2案作り、実際の表示サイズに縮小して比べる。

注意点

• HyperFrames は HTML のアニメーションを動画に書き出すツール。Remotion など別の書き出し方法でも、拍から時刻を計算する考え方は同じ。
• 本番サイトの録画を素材にする作り方は Webアプリの紹介動画は、Claude Code に「本物の画面をPlaywrightで録画→Remotionで編集」まで1つのプロンプトで作らせる、場面ごとに絵コンテを用意する方法は AIで紹介動画を作るときは、絵コンテをシーンごとに分けて別々に書き出し、1シーンずつ直す を参照。

出典

• @kawai_design post