キーフレームを、一つも打っていない。AIと言葉で、U-MAのファーストビューができるまで

こんにちは、藤井華丸です。
今日は、u-ma.jp のトップに入った15秒の映像が、どうやってできたかを記録しておきます。
先に言ってしまうと、この映像は、キーフレームを一つも打たずにできています。

はじまりは「黒い背景のゲーム」

最初に私がAIに頼んだのは、映像の話ではありませんでした。

• 黒い背景／シンプルでフーツラ系の小さな文字。／グラフィックデザイナー用のゲームを作りたい

そこから、図形を重ねる、色を混ぜる、黄金比や白銀比、ジャンプ率を当てる――そんなデザイナー向けのパズルができていきました。私は「これはU-MAのファーストビューに入れたい」と思い、白地の版をつくってもらい、そのあと「これはよいので、2ndビューにとっておきましょう」と決めました。

そして空いたファーストビューについて、私はこう書きました。

• topのFVはプロンプトモーションでかっこよく仕上げましょう！

以前は、タイムラインにキーフレームを打っていた

これまで、こうした映像は After Effects でつくるのがふつうでした。タイムラインの上で、文字が動き出す位置、止まる位置、大きさ、透明度……ひとつひとつにキーフレームを打ち、カーブを整え、書き出して、確認して、また直す。

今回は、その作業がありません。手本にしたのは Prompt Motion のショーリールのプロンプトです。動きはすべて、Claude（Anthropic のAI）と日本語でやりとりしながら、コードで組みました。

映像ファイルではなく「コード」なので、とても軽く済みます。参考用に書き出したMP4は約17MBですが、サイトで実際に動いているプログラムは約44KB。画面の大きさに合わせてその場で描くので、どんな画面でもくっきり動きます。

キーフレームの代わりにあるのは、言葉です。「2026ではなく2027に」「もっと小さく」「あと2秒」。私の一言が、そのまま次の版になります。

AIは指示どおりに作る。それでもNGが出る

ここが、この記事でいちばん書いておきたいところです。

AIは、言われたとおりに作ります。速いし、疲れないし、何度でも作り直します。でも、私はなかなかOKを出しませんでした。AIが最初に出してきたファーストビューへの、私の返事はこうです。

• かなりイメージと違います。（白地のパズル版に対して）
• これはヒドイですね。ぜんぜん良くないです（最初の6秒の映像に対して）
• 初心者がプロンプトいじっただけのものはNGです

指示どおりにはできていました。でも、イメージどおりではなかった。デザインの現場では、それはNGです。

デザイナーの目とは「ダメ出し」のことだ、と私は思っています。AIがどれだけ速く作っても、何がダメなのかを見抜き、どこへ向かえばいいかを言える人がいなければ、プロジェクトは前に進みません。

私が実際に入れた指示

では、私は具体的にどんな言葉で直していったのか。このやりとりに残っている言葉を、そのまま並べます。

1. イメージを渡す

• トランジションはダイナミックに、背景もすべて、しっかりハイグレードデザインです
• まず、これを見て！（Prompt Motion のショーリールを指して）
• 画面を覆う、ダイナミックなラインアート
• ダイナミックな有機的な動きをするもの、重くなりすぎない程度にパーティクル（参考画面5枚と一緒に）

2. 違うものは、違うと言う

• UMAのオフィシャルロゴがあるのですが、あなたがつくったものは微妙に違って良くないんです（このあと私が公式ロゴのデータを渡し、映像の中のロゴはすべて公式のものになりました）
• まず、全体が短すぎる
• 重いのはNGです
• 納品物はMP4ではない事は理解していますか？

3. 細部を、数字と場所で直す

• 「2026」が気になりました／2027にしましょう
• SPEED, QUALITY and SURPRISE ! も印象的に見せたい（のちに「あまり目立たなかった」）
• Click me !はもっと小さく／50%くらい
• さいごの ロゴ完成シーンはあと2秒たしましょう／全体の長さを変えずに
• WEB GRAPHIC MUSIC MOVIE SNS／AI バイブコーディング アプリなども英語で入れて！
• 「SCROLL DOWN」は、赤丸のすぐ下に小さく配置してください
• 一番最初のフレームには、スクロールダウンは不要ですよ！

4. 良いものを、見逃さない

• 赤い小さな丸が白い画面にはいっているのが印象的です

この一言で、映像の最初と最後は「白い画面に、赤い丸がひとつ」になりました。クリックすると再生がはじまり、最後はまた赤い丸に戻ります。

並べてみると、指示には型があります。まずイメージを渡す。違えば、違うと言う。細部は、数字と場所で言う。良いものは、良いと言う。的確な修正指示とは、AIへの命令ではなく、デザイナーの頭の中にある絵を、言葉に置き換えることなのだと思います。

公式ロゴのデータを、そのまま動かす

私がAIに渡した公式ロゴのSVGデータには、完成形のロゴのほかに、U・M・A・クリップがばらばらの部品として入っていました。「あなたがアニメーションを創るときの素材としてお渡しした」と伝えました。

そこで、映像の中のロゴは、この部品をそのまま動かしています。一本の赤い線が「!」になり、倒れて、クリップを描き、最後に公式ロゴに切り替わる。ロゴの形を描き直していないので、1ミリも崩れません。

GitHubのしくみ ― WordPressを開かずに、サイトが変わる

もうひとつ、私が求めたのは「いちいちWPの固定画面を更新するのが煩わしい」という悩みの解決でした。そこで使っているのが GitHub です。

GitHub は、コードを置いておく「倉庫」です。倉庫の中には、試しに直すための作業用の場所（ブランチ）と、本番用のmain があります。AIはいくらでも作業用の場所で直せますが、main に入れるのは、私のメッセージに「GO」が入ったときだけ。これは、私がAIと決めているルールです。

main に入ったプログラムは、GitHub Pages というしくみで、自動的にインターネットに公開されます。WordPress の固定ページに入っているのは、それを読みに行くための、たった2行です。

この2行は一度入れたら、もう触りません。映像を直すたびに WordPress を開く必要はなく、「GO」の一言で u-ma.jp のトップが変わります。

2026年10月の今、ここまでできる

私は、バックエンドの専門家でも、プログラマーでもありません。コードは一行も書いていません。それでも、

• クリックで再生する、15秒のモーショングラフィックス
• 約1,400個の粒が、言葉ごとに形を変える場面
• 公式ロゴのデータを崩さずに動かすアニメーション
• スマホでもなめらかに動く軽さ
• WordPressを開かずに本番を更新するしくみ
• 同じコードから書き出した、インスタ用の縦長動画

ここまでが、AIとのやりとりだけでできました。2026年10月の今、AIを使えば、バックエンドやコーディングを知らなくてもここまでできます。

ただし、それは「AIに頼めば、誰でもできる」という意味ではありません。AIが何度作り直しても、どれをNGにし、どれを残すかを決めたのは、私の目でした。

あなたのプロジェクトを成功させるのは、AIを使えるデザイナーだ。
デザイナーの厳しい目で、プロジェクトに最適なクリエイティブをイメージするブレインが必要なのだ。

私は、そう信じています。

藤井華丸（U-MA代表・アートディレクター）