ファーストビューのアニメーションをAIに頼む方法｜表示順を直した実例

広告（PR）

CBAの木が育つ演出を、旧デザインと段階別の実画面で紹介。表示順、動く位置、タイトルを出すタイミングを、AIへの指示にする方法を説明します。

運営・編集：CBA編集部監修者について公開日: 2026-09-30 最終更新日: 2026-09-30

ファーストビューのアニメーションで、最初に何を見せたいか決める

ファーストビューは、サイトを開いて最初に見える範囲です。このCBAでは、サイトを作って育てていく過程を、木が芽生えて大きくなる動きで表したいと考えました。

最初の案には、写実的な木と複数のサイトへの案内がありました。色や余白、ヘッダーは残したい。でも、木の姿と見せ方は違う。その修正前の実画面がこちらです。

CBAの旧制作画面。写実的な木が複数あり、タイトルとサイトの案内が同時に表示されている — 旧デザインの保存画面。木の見た目、案内の配置、表示の順番をまとめて見直しました。原寸画像を見る

「木を動かして」だけでは、完成した木が揺れるのか、芽から育つのか、文字も一緒に出すのかが決まりません。そこで、最初は土だけを見せ、見る人が芽と成長を追える順番にしました。

AIへのアニメーション指示を、成長・移動・文字表示に分ける

今回の修正では、出したいものを次の六段階へ分けました。大事なのは秒数を先に細かく決めることより、何が終わったら次を始めるかをそろえることです。

土だけを見せる。タイトルや案内はまだ出さない。
画面中央の下から芽を出す。
中央で木を大きく育てる。
育った木を右へ寄せながら少し縮める。
空いた場所へタイトルをゆっくり出す。
説明文、ボタン、ヘッダーなどを表示する。

以下は、制作中の実際の演出を段階ごとに保存した画面です。動きの内容を説明するための記録で、読者の反応を測った比較ではありません。

CBAの演出開始時。深緑の背景と中央下の土だけが見える — 1：土だけの開始画面。最初に目を向けてほしい場所を一つにしました。原寸画像を見る

中央下の土から小さな芽が出たCBAの制作画面 — 2：中央下に芽が現れます。完成した木を初めから小さく置く見せ方とは異なります。原寸画像を見る

サイトの画面と言葉で葉ができたデジタルの木が、中央で大きく育っている — 3：中央で成長した木。本文のタイトルはまだ見せず、成長を見る時間を残します。原寸画像を見る

成長した木が中央から右側へ動き、縮小し始めているCBAの画面 — 4：木が右へ移動しながら縮みます。文字を置く空間を、この移動で作ります。原寸画像を見る

右側に移った木の隣で、Grow your ownと日本語のタイトルが現れ始める — 5：タイトルの表示中。説明やヘッダーは、このあとに現れます。原寸画像を見る

順番を分けたことで、修正も「木はそのままで、タイトルを出すところだけ少し遅くする」のように頼めます。木そのものの造形と、見せるタイミングを一度に評価しなくてよくなります。

ファーストビューの動く位置と、残したいデザインを伝える

CBAでは、木を右へ置くだけでなく、中央で成長させてから移動することが指定されました。右へ寄せたあとに少し縮めるのも、タイトルと重ならないようにするためです。「右に木」という完成図だけでは、この途中の動きは伝わりません。

木の見た目も、写実的な植物から、サイトの画面や言葉が葉になるデジタルの表現へ変えています。採用版はWebGLというブラウザの立体描画の仕組みを使っています。ただ、依頼するときに先に必要だったのは、その名前より「中央で育ち、右へ寄り、言葉が現れる」という見たい場面でした。

次の例は、実際の依頼と採用内容を整理し直したものです。気に入っている色や字体まで変えてしまわないよう、残す部分も一緒に指定します。

［トップページURL］の最初のアニメーションを直してください。
今の背景色、余白、日本語と英語の字体、ヘッダーのデザインは保ってください。

1. 最初は土だけ。タイトル・説明・ヘッダーは非表示。
2. 画面中央の下に芽を出し、その中央で木を成長させる。
3. 成長した木を、右へ寄せながら少し縮める。
4. 木と重ならない場所へタイトルをゆっくり表示する。
5. そのあと説明、ボタン、ヘッダーを表示する。

木の葉には、［自分のサイトの画面や言葉］を使いたいです。
まず各段階の画面を見せて、位置と順番を確認できるようにしてください。
スマホで文字や木が切れないかも確認してください。

スマホのアニメーションは、文字の重なりと待つ時間も確認する

PCで右側に空間があっても、縦長のスマホでは同じ位置に置けません。CBAの採用実装では、移動後の木をPCより大きく縮小し、文字と重ならないようにしています。始まりと完成形だけでなく、移動の途中も確認します。

もう一つは待つ時間です。今回の演出は全体で約16秒あります。世界観を見せる案として作った長さなので、料金や予約先をすぐ知りたい店舗サイトへ、そのまま同じ待ち時間を持ち込むのは避けたいところです。演出を短くするか、案内を先に使えるようにするかを目的に合わせて決めます。

CBAには、スクロールやEscapeキーで演出を飛ばす操作、停止と再生、動きを抑える設定での静止表示があります。AIへは「動いたか」に加えて、「急いでいる人が記事へ進めるか」も確認するよう頼みます。

中央で育つ間、タイトルが先に重なって出てこないか。
右へ動く途中で、木の上や土の下が切れないか。
スマホでも文字と案内ボタンが見つかるか。
演出を飛ばしたあと、記事やメニューへ進めるか。
動きを止めた表示でも、何のサイトか分かるか。

アニメーションの修正は、段階ごとの画面から一つずつ頼む

「なんとなく違う」と感じたら、どの段階でそう見えたのかを選びます。中央の成長は好きだが、移動後の木が大きい。文字を出すタイミングはよいが、最後の説明が遅い。画面を分けておくと、こうした違いを伝えられます。

実際の動きはCBAのトップページで見られます。画像比較から分かるのは表示の変化です。滞在時間や問い合わせが増えたかは、公開後に別に確かめます。

自分の演出を頼むときは、まず「最初」「変化の途中」「文字が出るとき」「操作できる完成形」の四枚を言葉にしてみてください。絵が描けなくても、何がどこに見えていればよいかを書けば、AIと見比べる基準になります。