ラピットくん 
頼んだのは、数行だけでした
先日、会社紹介のムービーを作りました。15秒。1920×1080の60fps。BGMと効果音つきです。
頼んだのは、ほぼこれだけです。
ショーリールのような、ダイナミックな15秒のモーショングラフィックスを、全力で。
テーマは「未来を見せて、始める。」。デザインはブランドガイドを参考に。
相手は Claude Code。モデルは Opus 5.5 です。エフォートも最大にしてください。
しばらくして、MP4が1本出てきました。再生して、ひさびさに声が出ました。「おぉ」って。
写真は使っていません。動画素材も、音源も。編集ソフトも開いていない。全部、コードから書き出された動画です。
で、これがどういう理屈でできているのか。人に説明しようとしたら、思ったよりシンプルだったので書いておきます。
動画は、1秒60枚の絵でしかない
動画ファイルの中身は、パラパラ漫画です。60fpsなら1秒に60枚。15秒なら900枚。
なので、「時刻を渡すと、その瞬間の絵を1枚描く」プログラムを書けば、それが動画になります。0秒、60分の1秒、60分の2秒……と900回呼んで、並べるだけ。
絵を描いているのは、ブラウザの Canvas です。Webページに図形や文字を描く、ごく普通の機能。それを画面を持たないブラウザで900回動かして撮り、ffmpeg で MP4 に固めています。書き出しは約2分でした。
動きは、全部「式」
ここが面白いところでした。
文字が下からスッと立ち上がる動き。あれは、うちのトップページの見出しと同じ加速カーブ（cubic-bezier）をそのまま使っています。サイトで見慣れた動きが、動画でも同じ気持ちよさで出る。
カードがポンと弾むのは、バネの式です。3枚のカードが裏返るところは遠近法の計算で描いていて、ワープの光の線は、奥から飛んでくる点を毎コマ画面に写しているだけ。
乱数も、厳密には使っていません。番号を入れると必ず同じ値が出る「決まった乱数」です。なので、何回書き出しても同じ絵になる。これがあとで効いてきます。
動きのブレ（モーションブラー）も計算です。1コマ描くときに、時刻をほんの少しずつずらして6〜14回描き、平均を取る。カメラのシャッターが開いている間に被写体が動くのと、同じことをしています。
15秒という長さは、曲から決まっている
BPM128で8小節。計算すると、ちょうど15.0秒です。
場面の切り替えも、文字が出るタイミングも、全部この拍の上に置いてあります。3枚のカードが落ちてくるのは5拍目。FolderOS の場面は、曲が盛り上がる9拍目から。
音も、コードで作っています。キック、ベース、和音、効果音。全部、波形を計算して合成したもので、音源ファイルは1つも入っていません。
で、いちばんうまいと思ったのがここです。
効果音は、映像のほうが持っている時刻表を読んで、自動で置かれます。「3.78秒にフォルダが飛び出す」と映像側に書いてあれば、その時刻に「ポッ」が鳴る。絵のタイミングを直すと、音もついてくる。
ズレ直し、という作業が存在しない。
ブランドガイドが、動画でも効いた
「デザインはブランドガイドを参考に」と渡したのは、先月作った ブランドガイドライン のページです。AIに渡す用に、同じ中身を DESIGN.md という1ファイルにもしてあります。
中身は、けっこう厳しい決まりです。色は #1f5b8c と #38bdf8 の2色だけ。影は付けない。書体は Space Grotesk と Noto Sans JP。
これが、そのまま効きました。
色を足したくなっても足せないし、影でごまかすこともできない。なので、動きで見せるしかない。結果として、どの場面を切り出しても「うちの絵」になっています。
正直、ガイドを作ったときは資料とスライドのことしか考えていませんでした。動画まで揃ったのは、うれしい誤算です。
直すのは、数字だった
できあがった動画に、僕が出した修正は3つです。
- 0:09 の3つのアイコンが、丸い枠にきれいに収まっていない。大きい四角でもいい
- 最後のロゴの「al」が、少しくっついて見える
- 最後に、右下に小さくラピットくんを出したい
どれも、数分で直った動画が戻ってきました。
面白かったのは「al」です。僕は「なんか詰まって見える」くらいのことしか言っていません。そうしたら、文字と文字のすき間を実際に測ってきました。
「a」と「l」の間だけ、-3.7px。重なっていました。ほかの文字どうしは 8〜16px あります。
原因は、書体（Space Grotesk）の癖でした。aの右の縦線と、lの縦線が近すぎる。なので、その組み合わせだけ0.08文字分あける。
ついでに「配布しているロゴのSVGも、同じように接していますよ」と教えてくれました。ここは、まだ直していません。直すかどうか、考え中です。
ラピットくんは、手元にあった既存のイラストをそのまま使っています。ガイドに「キャラクターの比率を変えない」と書いてあるので、びよーんと伸び縮みはさせていない。下から顔を出して、少し傾くだけです。そこまで守ってくるとは思っていませんでした。
聴けないのに、音を仕上げていた
ひとつ、正直に書いておきます。
AIは、自分が作った音を聴けません。
じゃあどうやって仕上げたのかというと、数字で見ていました。音の大きさは、配信でよく使われる -14 LUFS に揃える。ピークは -1dB を超えない。低音から高音まで、どの帯域にどれだけ音があるかも測る。
実際、最初の版は低音が強すぎて、スマホやノートPCだとこもって聞こえる配分だったそうです。高音を5dBほど持ち上げて直した、と報告がありました。
最後に耳で聴いて「これでいい」と決めたのは、僕です。ここは、まだ人の仕事でした。
動画が「編集」から「計算」になった
今回いちばん変わったと思うのは、直すコストです。
動画は普通、編集ソフトで「編集」します。一度作ると、直すのが重い。途中を1秒のばせば、後ろの字幕も効果音も全部ずれます。
今回のは、計算で作っています。直すのは数字です。字間を0.08あける。カードの形を変える。時刻を1拍ずらす。書き出し直すと、音も含めて全部ついてくる。
なので、たとえば縦型のSNS版がほしくなっても、一から作り直す話にはなりません。
研修や開発の相談で「AIで動画も作れるんですか？」と聞かれることがあります。いまの僕の答えはこうです。
作れます。ただ、「何を見せたいか」と「これはうちっぽくない」を決めるのは、まだこっちです。
今回それを決めていたのは、先月作ったブランドガイドと、僕の「なんか詰まって見える」のひと言でした。
「うちの会社でも、こういう形で何か作れないか」という相談は、いつでも受けています。動くものを先に見せるのが、うちのやり方です。
▼関連リンク
『30分無料プロトタイプ提案』の相談
手を動かして学ぶ DX-NoCodeBootCamp®
まとめ
- 動画は1秒60枚の絵。時刻を渡すと絵を返すプログラムを書けば、動画になる
- 動きは全部、式で決まる。同じ入力なら、何度書き出しても同じ絵になる
- 長さは曲から決めた（BPM128×8小節＝15秒）。効果音は映像の時刻表を読んで自動で置かれる
- ブランドガイドは、動画でも「制約」として効いた
- 修正は数字を直して書き出し直すだけ。数分で戻ってくる
- 音の最終判断と、「うちっぽさ」の判断は、まだ人がやっている
本記事の内容は2026年9月25日時点のものです。
