デザイナーは、そろそろ“コードで動くデザイン”をAIに作らせた方がいい

【デザイナー、ディレクター、クリエイター向けに書きます】

こんちゃす。wantyou.です。

Antigravity 2.0 × Gemini 3.1 Proで、縦型の歌詞ショート動画用アニメーションを試作しました。

そう言うわけで記事化しました。

音源と方向性を指示して、歌詞の出方、隙間、配置、余韻を含めたタイポグラフィアニメーションを、コードベースで作る。

これまでAfter Effects主流だったのを変えちゃおうって話です。

AIに、コードで“動くデザイン”を作らせる。

ここが今回のポイント。

動画①
実際に作成した縦型歌詞動画

動画②
２０種類別演出バリエーション

...

文字が出るタイミング。
消えるタイミング。
余白の取り方。
画面の中で、どこにどう感情の影響をデザインするか。

ただ文字を表示するのではなくて、“映像として気持ちいいか”を推論している。

正直、最初に見たときに驚いたのは、「自然さ」でした。

もちろん、完成品として納品できるかは、ディレクションの腕次第。

でも、ラフを作る速度。
演出案を増やす速度。
「この方向性、ありかも」を見つける速度。

圧倒的に変わります！

これは「AIで動画を作った」話ではない

今回の話は、よくあるAI動画生成とは全く違います。

✖️画像を動かす。
✖️動画を生成する。
✖️雰囲気のある映像を出す。

これらの話ではありません。

正しくは、

HTML / SVG / CSS / JavaScript で、動くデザイン素材を作ることです。

コードで描画するので、文字、図形、余白、動き、タイミングをかなり細かく制御できる。

そして
軽い&制御設計をAIが作る。

とっても大きいメリットです？

デザイナーが見るべきなのは「コードを書けるか」ではない

ここで大事なのは、

「あなたがコードを書けるか」ではありません。

求めるアニメーションやデザインを「どう見せたいか」言語化できるか。

たとえば、

・文字は一気に出すのか
・一文字ずつ出すのか
・余韻を長めに取るのか
・静かな曲なのか、焦燥感のある曲なのか
・画面の中央に置くのか、余白で見せるのか
・動きは気持ちよくするのか、不穏にするのか

AIが勝手に良いものを作らない。
人間が「どの方向に気持ちよくしたいか」を決めればAIは力になってくれる。

その上で、AIに量産と実装を任せる。

この分担を目指しましょう。

今回できたこと

今回の試作では、縦型ショート動画用に、歌詞のタイポグラフィアニメーションを作りました。

たまたま知人から「AIで歌詞動画作れないか？」と相談を受けたところ、日本語の映像内描画はまだまだめちゃくちゃ弱い（2026年６月時点)

でも、"コードベースアニメなら「Gemini 3.1 Pro」が得意やん"ということで実際に試して見たわけです。

ざっくりした指示から、複数パターンの演出案を出して、最終的にmp4として見られる状態まで持っていく。

自分の環境では、単発の指示から、20パターンくらいの演出バリエーションを一気に作ってくれた。神がかって優秀。

映像制作で時間がかかるのは、「最初の1案を作ること」ではないですよね。

むしろ大変なのは、

どの演出が気持ちいいかを比較すること。

1案だけだと、判断しづらい。
でも20案あると、見えてくる。

・これいいね！
・こっちちょっと重いね！
・こっちは文字が読みにくいね！
・こっちは曲の雰囲気に合っているね！

そんな比較ができますね。

この時点で、AIは時短ツールじゃなく、演出の補助＊探索ツールに変身します。

使いどころは、歌詞動画以外にもある

今回はリリックビデオ寄りの実験でした。

でも、応用範囲はかなり広いですよ。

・Webサイトのトップページアニメーション
・LPのファーストビュー演出
・SNS用の短尺モーション
・ブランド向けの軽いモーショングラフィックス
・イベント告知用の縦型動画
・YouTube Shorts / TikTok / Reelsの文字演出
・サービス紹介動画の一部パーツ

特に、WebやLPとの相性はかなり良いと思います。既にwantyouも検証済みです。

なぜなら、最初からコードで作っているので、動画素材としても使えるし、Web上のアニメーションとして再利用できる可能性もある。

つまり、

映像素材にもなるし、Web演出のプロトタイプにもなる。

しかも、品質抜群。
数学的に推論を走らせデザインしてくれるから強いのだ。

制作費の考え方も変わる

今まで、こういう細かいモーション表現は、ちゃんと作ろうとするとそれなりにコストがかかりました。

数十万円、場合によっては数100万円は普通。発注側もカッコよく動画入れたくても断念するなんて事も多発してます。


ただ、初期提案。
ラフ制作。
演出バリエーションの探索。
簡易なSNS用素材。

このあたりは、低コスト化できる世界線に我々は突入しています。既に。

デザイナーやディレクター側からすると、提案できる量が増える。

クライアント側からすると、「見る前に判断する」ではなく、「見てから選ぶ」がしやすくなる。
コストもさがる。

かなり実務的な変化が訪れていますね。
春ですね。

最後は人間のディレクション

誤解してはダメなポイントもあります。
「AIに投げれば勝手に良いものができる」わけではありません。

むしろ差が出るのは、人、そうヒューマン、役職で言えばディレクターです。

・何を良いとするか
・どこを直すか
・どの案を捨てるか
・どの動きを残すか
・どういう感情に想起させるか

この判断は、人間の役目です。

これから重要になるのは、「手を動かすスキル」よりも、

見る力。
選ぶ力。
指示する力。
演出を言語化する力。
審美眼。
無駄と余白。

この辺である可能性絶大です。

ここから先は実際の作り方です

ここまでが、考え方の話です。
ここから先では、実際に僕がどう作ったかをご紹介します。

・なぜGeminiアプリ単体ではやりづらいのか
・Antigravityのようなコーディングエージェントを使う理由
・必要な素材
・プロンプト例
・20パターン出すときの指示の考え方
・mp4化まで持っていく流れ
・失敗しやすいポイント
・実務で使うならどこを見るべきか

このあたりを、具体的にまとめました。