なぜ「ふつうの指示」ではテンプレ感が出るのか
AIに「おしゃれなアニメーションを作って」と頼むと、だいたい同じような結果が返ってきます。中央揃えの見出しとボタン、フェードインだけの出現、紫からピンクへの虹色グラデーション。これはAIが悪いわけではなく、指示文に情報が足りないせいです。AIは「何を作るか」だけでなく「何が合格ラインか」を具体的に渡されないと、もっとも無難で、もっとも見慣れた形に寄っていきます。
動くWebパーツを書かせるときは、ふわっとした要望ではなく、見た目の基準・動きの基準・技術的な制約の3つを分けて渡すと、仕上がりが一段階上がります。
指示文に入れるべき4つの要素
1. 誰のための何か、を先に決める
「おしゃれなヒーローセクション」ではなく「和食店の予約ページのヒーロー」「子ども向け英会話教室のトップ」のように、業種と用途を先に渡します。業種が決まれば配色や書体の方向性が自然に絞られ、AIが無難な原色グラデーションに逃げにくくなります。
2. 配色は「選んだ理由」まで指定する
「いい感じの色で」は禁句です。地色・文字色・アクセント色を1色ずつ、できれば16進数で指定しましょう。たとえば「地は生成り寄りの白、文字は濃紺、アクセントは藍色1色だけ」のように伝えると、原色の虹グラデーションや紫→ピンクのような量産型配色を避けられます。アクセントは1色、多くても発光用の第2色までに絞るよう明記するのも効果的です。
3. 動きは「導入→展開→余韻」で振り付ける
「スクロールで動くようにして」だけでは、要素がふわっと浮かび上がるだけの単発演出になりがちです。代わりに「読み込み直後の1.2秒で見出しが1文字ずつ現れる→スクロールに連動して3段階のシーンが切り替わる→止まっても背景の光がゆっくり漂い続ける」のように、時間軸で区切って指示します。たとえば配色やカード構成だけでなく、以下のようなパーツを見れば「導入・展開・余韻」の分け方が掴みやすいはずです。
このパーツは、メニューの価格表示に湯気のような層を重ねたり、数字が桁ごとに回って定位置に収まる演出(オドメーター)を使ったりしています。カードが単に並んでいるだけでなく、スクロールに合わせて積み重なっていく点も指示文の参考になります。
4. 技術的な「やってはいけないこと」を明文化する
AIは放っておくと、画面外でも動き続けるループ処理や、390px幅で横スクロールが出てしまうレイアウトを平気で書きます。次のような制約は、最初から指示文に入れておくと手直しが大幅に減ります。
prefers-reduced-motionが有効なときは動きを止めるか大幅に減らす- モバイル幅(390px)で横スクロールが出ないようにする(
overflow-x: clipなど) - 要素が画面外にある間はアニメーションループを止める(
IntersectionObserverを使う) setIntervalを使う場合は、タブが非表示になったら止める処理を必ず入れる
カーソル追従やパーティクルを頼むときのコツ
「カーソルに追従する演出を入れて」だけだと、ただ要素が指先にピタッと張り付くだけの、硬い動きになりやすいです。「バネ係数0.1程度でわずかに遅れて追従する」「触れたところだけ光の粒子が流れる」のように、物理的な手触りの言葉を添えると質感が変わります。粒子表現を頼むときの参考として、こちらのような流れ場の演出も見ておくと指示のイメージが湧きやすくなります。
このパーツのように、粒子の数や速度、残像の濃さをどの程度にするかまで言葉で指定できると、AIは「なんとなく動く背景」ではなく、意図のある演出を書きやすくなります。
直してもらうときの言葉の選び方
一発で完成品が出ることは稀です。修正を頼むときは「もっと良くして」ではなく、ズレている箇所を具体的に指摘しましょう。
- 「見出しが大きすぎてスマホで折れている」→
clamp()の下限値を下げてほしい、という意味だと伝わる - 「動きが途中で止まって見える」→ 放置時にも動き続ける自動デモ(アイドルアニメーション)を入れてほしい、という指示になる
- 「色が多すぎてごちゃごちゃする」→ アクセントを1色に絞ってほしい、という指示になる
感覚的な言葉を使うときほど、どのプロパティ・どの要素を指しているかを一言添えると、AIは的確に直してくれます。
まとめ
AIにアニメーションを書かせるときは、「何を作るか」に加えて「誰のためか」「配色の理由」「動きの時間軸」「技術的な禁止事項」を分けて渡すことが、テンプレ感を抜け出す近道です。プロンプトを書くことは、結局は完成イメージを言葉で設計する作業そのものです。具体的な数値と理由をセットで渡す癖をつけると、同じAIでも出てくるコードの質が大きく変わります。