この記事で得られること3つ
-
JavaScript／CSS のアニメーションをAIに正確に伝えるためのプロンプト改善法
-
曖昧な指示を具体化し、ズレた出力を防ぐ「Before / After」実例
-
すぐ使えるプロンプトテンプレート＋応用時の注意点
思い通りに動かない、あのモヤモヤはなぜ？
あなたもこんな経験、ありませんか？
「ChatGPT に CSS アニメーションを書いてもらったけど、なんか想像と違う動きになった…」 「JavaScript でボタンをふわっと表示させたいのに、出てきたコードはガクッとした動きに…」
最近は AI にコード生成を任せる機会も増えてきましたが、「思い通り」に動いてくれないと、かえって手間が増えることもあります。特にフロントエンドでは、アニメーションやインタラクションの“細かいニュアンス”が結果に大きく影響します。
この記事で解決できること： AI が思い通りのコードを生成してくれないとき、何が原因なのかを明らかにし、プロンプトの改善によって希望通りの結果を得る方法を、実例とともに具体的に解説します。
なぜ AI は思い通りにコードを書けないのか？
AI に「ふわっと表示させたい」「自然なスクロールアニメーションが欲しい」と伝えても、思ったようなコードが出てこない──それには理由があります。
AI がコードを書くときの仕組みは、「自然言語 → 構文理解 → 出力コード」という流れになっています。このとき、入力するプロンプト（指示文）が曖昧だったり、開発者の意図が AI に正確に伝わっていなかったりすると、AI はそれを「過去の学習データから“それっぽいもの”を生成する」しかありません。
とくに JavaScript や CSS アニメーションのような“見た目の動き”を扱うケースでは、開発者の頭の中にあるイメージと、AI の理解にズレが生じやすいのです。
たとえば、「ゆっくりフェードインさせたい」という言葉一つとっても、人によって「何秒かけて？」「透明度の変化具合は？」「他の要素との関係は？」といった前提が異なります。この“前提の曖昧さ”が、コード出力のブレに直結します。
また、AI は「意味」よりも「文脈のパターン」に基づいて出力するため、「人間が当たり前だと思うような前提」は省略せずに明示的に伝える必要があります。たとえば：
-
✗「自然に表示させて」→ どんな自然さ？
-
✓「1.5 秒かけて透明度 0 → 1 に変化、Easing に ease-in を使う」
このように、“技術的に定義できる単位”に分解することで、AI との認識ギャップを埋めることができます。
ズレた動きにどう対応する？AI に“聞き返す”という発想
AI が出したコードに対して「違うんだよなあ…」と感じたとき、多くの人はそのまま修正を指示してしまいます。でも、ちょっと待ってください。その前にやってほしいのが、「AI がどんな動きを想像してこのコードを出したのか」を聞いてみることです。
たとえば、以下のようにプロンプトを工夫してみましょう。
-
「このアニメーションはどんな動きを想定してる？」
-
「この CSS の効果を具体的に説明して」
-
「今のコードで何秒くらいかけてどの順番で動く？」
これにより、AI の中でどう解釈されたかが明らかになり、「なるほど、そっちの解釈だったか」とズレを可視化できます。
次に、そのズレを埋めるための修正ポイントを明確にしていきます。たとえば、「ふわっと表示」と言ったつもりが「0.3 秒の一瞬のフェードイン」になっていたら、「2 秒かけて透明度を徐々に変化」と具体的な数値で指示するようにします。
ここで役立つのが、動き・構造・タイミングを分けて考える視点です。
-
動き： フェードイン／スライドイン／スケール変化など
-
構造： どの要素に、どの順番で適用するか
-
タイミング： 秒数／遅延／Easing カーブなど
さらに、「◯◯のような感じ」といった比喩や、視覚的イメージを交えると、AI の解釈精度が大きく上がります。
-
「Instagram のストーリー切り替えのような動き」
-
「モーダルがぬるっと浮き上がるような感じ」
ここまでのポイントを押さえるだけで、AI に「思い通り」の動きを伝える精度がぐっと高まります。
次は、修正のやり取りを繰り返すうちに、かえっておかしな挙動になるときの対処法を紹介します。
Before / After｜曖昧なプロンプトと改善例
Before（曖昧なプロンプト）
ボタンがゆっくり現れるようにして。After（改善されたプロンプト）
ボタン要素に対して、ページロード後 0.5 秒遅れて、1.5 秒かけて透明度 0 → 1 に変化。Easing は ease-in-out を使用し、下から 10px 浮き上がるように。【使用タイミング】初期表示時の注目コンテンツ導入に最適
失敗例：delay を指定し忘れるとタイミングが不自然になりがち
プロンプトも設計サイクル。修正より“再構築”が鍵
AI に何度も修正指示を出しているうちに、コードの挙動がどんどんおかしくなっていく──そんな経験をしたことはありませんか？
実は、これはよくある落とし穴です。修正指示を積み重ねることで、AI の内部状態（チャット履歴や前提）が歪み、本来の意図から外れた結果になってしまうのです。
この問題を解決するためには、「完成形のプロンプト」を一度作り直し、新しいチャットで再依頼するという方法が効果的です。
なぜ新しいチャットが効くのか？
AI はチャット履歴を踏まえて応答を生成します。つまり、誤った前提が積み重なった状態では、いくら修正してもズレが直らない可能性が高いのです。一方、新しいチャットではゼロからのスタートなので、明確なプロンプトで意図が正しく伝わりやすくなります。
再構築のポイント
-
修正を繰り返すより、最初から「意図を言語化したプロンプト」を作る
-
出したい動作・構造・タイミングを項目立てで整理
-
ビジュアルの比喩や、似た UI の例を添える
これはまさに、UI 実装と同じで「設計 → 実装 → 検証 → 改善」というサイクルに近いものです。プロンプトづくりも開発と同じように、“やり直し”を恐れず、構造的に考える視点が求められます。
この記事のまとめ
-
AI のコード出力がズレるのは、曖昧なプロンプトと前提のズレが原因
-
まずは「AI がどう理解しているか」を聞き返してみる
-
動き・構造・タイミングの三要素に分けて明確に指示する
-
修正の繰り返しで迷走したら、プロンプトを再設計して新しいチャットへ
-
プロンプトづくりも開発と同じ、「設計サイクル」で捉えることが大切
すぐ使えるプロンプトテンプレ3選（用途＆注意点付き）
フェードインアニメーション
要素に 2 秒かけて透明度 0 → 1 へ変化するアニメーション。Easing は ease-out。-
使用場面：導線を静かに強調したいとき
-
注意：他要素との被りでフェードが見えにくくなることがある
スライドアップ表示
ボタンをページロード後に 0.5 秒遅れて、下から 15px 上へスライドしながらフェードイン。-
使用場面：ファーストビューのボタン提示
-
注意：viewport 外からの動きは SP 画面でトリガー条件に注意
連続アニメーション
3 つのアイコンが 0.3 秒ずつ順番にフェードインするように設定。全体で 1.5 秒程度のタイミング。-
使用場面：サービス紹介やステップ表示
-
注意：表示順が逆になる場合は keyframe を手動調整
あなたの「なんか違う…」というモヤモヤが、少しでも晴れたなら嬉しいです。
【外部リンク】
MDN Web Docs: Web Animations API
【内部リンク】
Web制作で使えるCSSアニメーション10選｜サンプルコード＆使い方解説
CSSアニメーションの仕組みを徹底解説！初心者でもわかる動きの作り方
AI × JavaScript｜AI活用で開発が10倍速くなる技術＆プロンプト10選
