「サイトに少し動きをつけたいけれど、CSSアニメーションを一から書く時間がない」——中小企業のWeb担当者の方から、よく聞くお悩みです。外注すると1箇所で数万円、自分で書こうとすると@keyframesの調整で半日が消えてしまう。そんな状況は、生成AIをうまく使えばかなり短縮できます。
この記事では、AIにアニメーションのコードを作らせ、それを自分のサイトで動く状態まで仕上げる流れを、実際のプロンプト例つきで解説します。
AIでWebアニメーションを作る全体の流れ
作業は大きく4ステップです。
1. どう動かしたいかを日本語で言語化する 2. AI（ChatGPT / Claude / Gemini など）にコードを生成させる 3. ローカルのHTMLに貼って動作確認する 4. 「速すぎる」「動きすぎる」を対話で詰める
ポイントは3と4で、1回目の出力をそのまま採用しないことです。AIは「それっぽく動くコード」は得意ですが、速度やイージングの好みまでは当てられません。
ステップ1：伝わるプロンプトの書き方
曖昧な指示だと曖昧なコードが返ってきます。以下の5要素を入れると精度が上がります。
| 要素 | 悪い例 | 良い例 |
|---|---|---|
| 対象 | 「ボタン」 | 「お問い合わせボタン（a要素）」 |
| きっかけ | 「動かす」 | 「マウスホバー時」 |
| 動き | 「かっこよく」 | 「左から光沢が斜めに通過」 |
| 時間 | 指定なし | 「0.6秒、ease-out」 |
| 技術制約 | 指定なし | 「外部ライブラリなし、CSSのみ」 |
実際のプロンプト例です。
お問い合わせボタン（<a class="btn">）にホバーした時、
左から右へ斜めの光沢が0.6秒で通過するCSSアニメーションを書いてください。
条件:
- 外部ライブラリは使わない（純粋なHTML+CSSのみ）
- transformとopacityのみでアニメーションする
- prefers-reduced-motion: reduce の場合は動きを止める
- コードはHTMLとCSSを分けて、コメント付きで出力
最後の「prefers-reduced-motion」は、動きが苦手なユーザーへの配慮として実装すべきもので、指定しないとAIは省略しがちです。
実際に動くとこうなります。ボタンの上にカーソルを乗せてみてください。
ステップ2：スクロール連動は「何を」「いつ」を分ける
スクロールに合わせて要素が出てくる演出は、Intersection Observerを使うのが定番です。プロンプトではトリガー条件を数値で指定します。
カードが縦に3枚並んだセクションで、
各カードが画面下から20%入った時点でフェードイン＋Y軸20px上昇するコードを
Intersection Observerで書いてください。
条件:
- カードは0.15秒ずつ遅れて順番に出る
- 一度表示したら再度隠さない（unobserveする）
- jQuery不使用、バニラJS
「一度表示したら再度隠さない」を書かないと、スクロールのたびに再生される落ち着かない挙動になることがあります。
スクロール連動の実物はこちらです。下にスクロールすると、カードが順番に現れます。
ステップ3：よくある不具合とAIへの修正依頼文
生成コードが思い通りでない時は、感想ではなく症状を伝えます。
- カクつく →「transform以外のプロパティ（widthやtop）をアニメーションさせているなら、transformに書き換えてください」
- スマホで横スクロールが出る →「アニメーション中に要素が画面外にはみ出しています。親要素に
overflow: hiddenを入れた版に直してください」 - 動きが派手すぎる →「移動距離を40pxから16pxに、duration を0.8秒から0.4秒に変更してください」
- 既存CSSと干渉する →「クラス名にすべて
ma-の接頭辞をつけて、他のスタイルと衝突しないようにしてください」
数値を指定して直させるのがコツです。「もう少し控えめに」だと、AIは毎回違う解釈をします。
ステップ4：採用前のチェックリスト
- [ ] Chrome / Safari / スマホ実機の3環境で確認したか
- [ ] アニメーション中にテキストが読めなくなっていないか
- [ ] JSエラーがコンソールに出ていないか
- [ ] 1ページに動く要素を詰め込みすぎていないか（目安：ファーストビュー＋各セクション1つまで）
完成形のイメージが湧かない時は
AIへの指示でいちばん難しいのは「どんな動きが欲しいか」を言葉にする段階です。参考になる実例をいくつか見てから書くと、プロンプトの精度が一気に上がります。動く状態で確認できるパーツ集としてはmotionAETHERがあり、約500点のWebパーツが実際に動く状態で無料閲覧できます。「この動きの名前は何というのか」を知るだけでも、AIへの指示は格段に通りやすくなります。
まとめ
AIでのアニメーション作成は、具体的な数値と技術制約を書く → 動かす → 症状ベースで直すの繰り返しです。まずは自社サイトのボタン1つから、今日のプロンプト例をそのままコピーして試してみてください。30分あれば1箇所は確実に仕上がります。