AIに全部作らせない動画制作。コードでモーショングラフィックスを作って分かったこと
最近、Claude CodeなどのAIコーディングツールを使いながら、モーショングラフィックス動画の制作を試しています。
「AI動画」というと、文章を入力するとAIが映像を丸ごと生成してくれる「Text to Video」を思い浮かべる方も多いかもしれません。
今回私が試したのは、それとは少し違います。
生成AIにすべてを任せるのではなく、
・HTML / CSS / JavaScript
・Three.jsによる3D表現
・Claude Codeを使ったコーディング
・HyperFramesを使ったモーショングラフィックス
・AIで生成した画像素材
・音楽や効果音との同期
などを組み合わせながら、一つずつ画面や動きを作っていく方法です。
実際に異なるテーマで3本の動画を作ってみました。
1. Web・IT・3Dをまとめた自己紹介モーショングラフィックス
最初に制作したのは、私が普段取り組んでいる仕事内容を約1分にまとめたモーショングラフィックスです。
Web制作、ITサポート、Google Workspace、3Dなど、仕事として扱っている分野を映像の中で紹介しています。
今回特に面白かったのが、Three.jsを使った3D表現です。
動画の中に3D空間を作り、
・3Dモデル
・カメラ
・ライティング
・UI
・アニメーション
などをコードで組み立てました。
完成した映像だけを見ると一般的なモーショングラフィックスに見える部分もありますが、内部ではWeb制作とかなり近い考え方で動いています。
普段Webサイト制作で使っている技術が、そのまま映像表現にもつながることを実感しました。
テーマは、
「アイデアを、デジタルで形にする。」
です。
Web × IT × 3Dという、自分が普段取り組んでいる分野を一つの動画にまとめることができました。
2. JPYCを約1分で紹介する解説モーショングラフィックス
2本目は、日本円建てステーブルコイン「JPYC」を紹介する約1分の動画です。
今回重視したのは、
「JPYCって暗号資産なの？」
という疑問を持っている方にも分かりやすく伝えることでした。
そのため、
「JPYCは暗号資産ではなく、電子決済手段」
というポイントを中心に構成しています。
単に文章を表示するだけではなく、文字、図形、背景、画面切り替えなどに動きを付けることで、短い時間でも内容を理解しやすくなるよう工夫しました。
また、こうした解説動画では、映像の格好良さ以上に「情報を正しく伝えること」が重要です。
そこで公開前には、内容についてJPYC関係者の方にも確認していただいた上で公開しました。
今回制作してみて、
「文章だけでは難しい内容でも、動きと図を使うことで伝えやすくなる」
というモーショングラフィックスの強みを改めて感じました。
3. AI生成画像からストリートダンスMV風動画を制作
3本目は、これまでとは少し方向を変えて、ストリートダンスをテーマにした縦型動画を作りました。
まず、AIを使って人物の静止画を作成。
さらにダンス素材を用意し、Claude CodeとHyperFramesを使って縦型MV風に編集しました。
今回試した演出は、
・人物の背景を抜いてポスター風背景と合成
・音楽の171BPMに合わせてテロップや演出を同期
・強拍に合わせたズーム
・映像に合わせたグリッチ表現
・縦型SNSを意識したレイアウト
などです。
特に興味深かったのは、音楽のBPMを基準にして映像のタイミングをコードで制御できることでした。
通常の動画編集ソフトではタイムラインを見ながら調整する部分を、数値やプログラムとして扱えるため、
「何秒後に表示する」
だけではなく、
「何拍目で動かす」
という作り方もできます。
これはコードベースの動画制作ならではの面白さだと思います。
AIに動画を全部作ってもらうのとは少し違う
今回3本を制作して強く感じたのは、
「AIが全部作ってくれる」
というよりも、
「AIと一緒に映像をプログラミングする」
感覚に近いということです。
例えば、
「ここで文字を出す」
「カメラを動かす」
「3Dモデルを回転させる」
「音楽の強拍で画面を拡大する」
といった演出を、一つずつ考えながら組み立てます。
AIはコードを書く作業を大幅に助けてくれますが、
何を見せるのか
どの順番で見せるのか
どのタイミングで動かすのか
どうすれば内容が伝わるのか
という部分は、人が考える必要があります。
その意味では、AIは映像制作者そのものというより、「制作を一緒に進めてくれる非常に強力な技術パートナー」という印象を持ちました。
Web制作と動画制作の境界がなくなってきた
今回の制作で、個人的に一番面白いと感じた部分です。
これまで、
WebサイトはWebサイト
3Dは3D
動画は動画
と、それぞれ別の分野というイメージがありました。
しかし、コードベースでモーショングラフィックスを作ってみると、その境界がかなり曖昧になっていることに気付きます。
例えばThree.jsで作った3Dシーンを映像にしたり、WebのUIデザインをそのまま動画演出にしたりすることもできます。
普段Webサイトで使っている技術や考え方が、そのまま映像制作にも利用できます。
逆に、動画で学んだアニメーションや見せ方をWebサイトへ取り入れることもできます。
これは今後かなり面白い分野になりそうです。
コードを書ける人にとって、動画制作も新しい表現手段になる
私はこれまでWeb制作やWordPress、Google Workspace、3Dなど、さまざまなIT分野に取り組んできました。
今回モーショングラフィックス制作を試したことで、そこに「映像」という新しい表現方法を加えられる可能性を感じました。
特に、
Webサイトのサービス紹介
製品紹介
操作説明
SNS用の短い動画
3D製品紹介
企業やサービスの紹介動画
などとは相性が良さそうです。
まだ試行錯誤している段階ですが、AIとコードを組み合わせることで、これまで専門的な動画制作ソフトが必要だった表現にも挑戦しやすくなってきています。
「コードでここまで動画が作れるのか」
という発見自体が、今回一番大きな収穫でした。
今後もWeb、3D、AI、映像を組み合わせながら、いろいろな表現を試してみたいと思います。