ツール一覧 ／ AI活用ノート ／ AIに書かせたアニメーションが凡庸になる理由と、手で直す3箇所
要素を画面に出すコードまではAIで足ります。差が出るのはイージング・時間差・減速の長さの3つで、ここは今も手で数値を決める仕事です。W3C仕様とMaterial Design、GSAP公式ドキュメントの公開値をもとに、自動化する層と触る層を分けます。
「AIに書かせたアニメーション、なんか安っぽい」——これ、AIの能力の問題ではなく、指示の粒度の問題です。調べたので共有します。
時間で請求しているなら、要素の出し入れの実装はAIに投げて、イージング・時間差・減速の長さの3つだけ手で決める。ここが一番時給が高い。
モーションを勉強中なら、まずAIに書かせて、出てきた ease や duration を1つずつ数値で置き換える練習をする。ゼロから書くより早く形が身につきます。
案件が「動きで差別化したい」系なら、3箇所を触る前提でスケジュールを取る。AI出力そのままだと、他社のAI出力と見分けがつきません。
理由は単純で、既定値が一番安全だからです。
GSAPの公式ドキュメントには「GSAPはデフォルトのイーズとして power1.out を使う」と明記されています。CSSなら ease（W3Cの仕様上は cubic-bezier(0.25, 0.1, 0.25, 1) と等価）が既定です。指示がなければ、AIはこの既定値のまま出します。当然です。既定値は壊れないので。
そして既定値は「どのサイトでも無難に見える」ように設計されています。無難に見えるということは、差がつかないということでもあります。ここを理解しておくと、AIに何を追加で伝えればいいかがはっきりします。
もうひとつ。W3CのCSS Easing Functions Module Level 2（Editor's Draft、2026年2月23日版）で定義されているキーワードは、ease / ease-in / ease-out / ease-in-out の4つと linear、steps()、そしてLevel 2で追加された linear() 関数だけです。キーワードだけでは表現の幅がそもそも狭い。数値を書く覚悟がないと、選択肢が4つしかない世界に閉じ込められます。
一番効くのがここです。同じ距離・同じ時間でも、曲線が違うだけで印象が変わります。
Googleが公開しているMaterial Designのモーションガイドラインには、4つのカーブが具体的な cubic-bezier の値付きで載っています。W3Cのキーワードと並べて比較します。
| 名前 | cubic-bezier の値 | 動きの性格 | 向いている場面 |
|---|---|---|---|
ease-in-out（W3C） |
0.42, 0, 0.58, 1 | 加速と減速が左右対称 | 位置を往復するだけの動き |
| Standard（Material） | 0.4, 0, 0.2, 1 | 素早く加速し、ゆっくり減速 | 画面内の移動全般 |
| Deceleration（Material） | 0, 0, 0.2, 1 | 最高速で入ってきて減速 | 画面外から入ってくる要素 |
| Acceleration（Material） | 0.4, 0, 1, 1 | 加速したまま画面外へ | 退場する要素 |
| Sharp（Material） | 0.4, 0, 0.6, 1 | 対称に加速・減速 | 戻ってくる可能性のある要素 |
← 表は横にスクロールできます →
注目すべきは、W3Cの ease-in-out が左右対称（0.42 と 0.58）なのに対し、MaterialのStandardは非対称（0.4 と 0.2）だという点です。減速側の制御点を手前に寄せることで、止まるときにゆっくり効かせている。この非対称こそが「気持ちいい動き」の正体で、CSSのキーワードには存在しません。
GSAP側で言うと、公式ドキュメントに載っている power0〜power4 は指数の強さの違いで、.in / .out / .inOut の接尾辞で「どちら側に効かせるか」を切り替えます。既定の power1.out から power2.out や power3.out に上げるだけで、減速の粘りが変わります。これはAIへの指示を1行足すだけで済む変更です。
弱点も書いておきます。 カーブを強くしすぎると、今度は「もったいぶった動き」になります。power4.out あたりは最初の数十msでほぼ移動を終えて、残り時間を微小な減速に使うので、スクロール量の多いページでは待たされている感覚が出ます。強い曲線はヒーロー1箇所に絞るのが安全です。
カードが5枚同時にふわっと出るのと、0.08秒ずつずれて出るのとでは、まったく別物に見えます。ここもAIは指示がないと0にします。
GSAPの公式ドキュメントによれば、stagger は複数ターゲットの開始時刻をずらす機能で、stagger: 0.1 は「各トゥイーンの開始時刻の間に0.1秒の間隔ができる」という意味です。オブジェクト形式にすると細かく指定できます。
| プロパティ | 何を決めるか | 使いどころ |
|---|---|---|
each |
要素1つあたりの間隔（秒） | 枚数が固定のとき |
amount |
全体で使い切る合計時間 | 枚数が可変のとき。伸びすぎを防げる |
from |
どこから始めるか（start / center / edges / end / random / 添字） |
中央から広がる、外側から寄る等 |
grid |
[行, 列] または "auto" |
カードグリッドを斜めに走らせる |
axis |
グリッドで "x" か "y" に絞る |
横方向だけの波にしたいとき |
ease |
開始時刻の分布自体にカーブをかける | 最初は間隔が広く、後半で詰まる |
← 表は横にスクロールできます →
実務で効くのは each と amount の使い分けです。CMS連携で件数が変わるリストに each を使うと、20件になった瞬間に全体が2秒かかるようになります。amount なら合計時間が固定されるので、件数が読めない案件ではこちらが安全。この判断はAIには渡っていない情報（この一覧が何件になり得るか）に依存するので、人間が決める場所です。
弱点。 stagger は気持ちよく見えるので、つい全セクションに入れたくなります。全部にかけるとページ全体が「常に何かが遅れて出てくるサイト」になり、読みに来た人の体感速度が落ちます。1画面に1つまで、が現実的な線です。
3つの中で一番、公開値を参照する価値があるのがここです。
Material Designのモーションガイドラインには、モバイル基準で以下の数値が示されています。
| 場面 | 推奨時間 |
|---|---|
| 基準 | 300ms |
| 大きい・複雑な遷移 | 375ms |
| 画面に入ってくる要素 | 225ms |
| 画面から出ていく要素 | 195ms |
| 上限の目安 | 400msを超えない |
| タブレット | モバイルの約1.3倍（300ms→390ms） |
| デスクトップ | 150〜200ms（モバイルより速く単純に） |
| ウェアラブル | モバイルの約0.7倍（300ms→210ms） |
← 表は横にスクロールできます →
ここで見落とされがちなのが入場225ms／退場195msという非対称です。同ガイドラインは「画面から出ていく要素は注意を払う必要が少ないため、短い時間でよい」と説明しています。AIに「フェードインとフェードアウトを付けて」と頼むと、まず同じ数値が両方に入ります。片方を30ms削るだけで、閉じる操作のキレが変わります。
数値の出どころについて1点補足します。Material Design 3側にも motion.duration.short1 のようなトークン表が公開されていますが、そのページは本文がJavaScriptで描画されるため今回は中身を確認できませんでした。ここで挙げた数値は、静的に読めるMaterial Design 1の「Duration & easing」ページの公開値です。世代が違うので、M3準拠を求められる案件では、必ず現行のトークン表を自分で確認してください。
WCAG 2.1の達成基準2.3.3「インタラクションによるアニメーション」（レベルAAA）は、「インタラクションによって引き起こされるモーションアニメーションは、無効化できる」ことを求めています。W3C WAIの解説文書は、その意図を「前庭障害（内耳の障害）による反応——めまい、吐き気、頭痛——を防ぐため」と説明し、スクロール時のパララックス効果を代表例として挙げています。
達成方法として挙げられているのが prefers-reduced-motion メディアクエリです。W3CのMedia Queries Level 5（Working Draft、2026年2月19日版）ではこの特性を「ページ上のモーションを減らしたいという要望」を検出するものと定義し、値は no-preference と reduce の2つです。設定はOS側で行われ、ブラウザがページに伝えます。
AIは頼まないとこれを書きません。「スクロールでふわっと出るアニメーションを」と頼めば、素直にアニメーションだけ返ってきます。テンプレートとしてプロンプトに常駐させておくのが早いです。
@media (prefers-reduced-motion: reduce) {
.reveal { animation: none; transition: none; }
}
注意点として、W3C WAIの解説は「色や不透明度の変化のうち、知覚される大きさ・形・位置に影響しないものはモーションアニメーションに当たらない」としています。opacityだけのフェードは対象外という整理です。とはいえ動きを止める分岐は用意しておいたほうが、後で指摘を受けたときの手戻りが小さくて済みます。
GSAPは2026年9月3日時点で、商用利用を含めて無料です。GSAPの標準ライセンスページには発効日2025年4月30日（最終更新2025年5月30日）と記載があり、FAQには「本当に何も払わずに商用プロジェクトでGSAPを使えるのか？ ——はい、本当です」とあります。SplitTextやMorphSVGといった以前は有料会員限定だったプラグインも商用利用可です。
ただし制限はあります。同ライセンスは、GSAPを使って「Webflowのビジュアルアニメーション構築機能と競合する製品の作成を助長・誘引・実質的に支援するような、コードなしでアニメーションを作れるツール」に組み込むことを禁じています。競合製品を作る目的でのリバースエンジニアリングも禁止です。制作会社が案件で使う分には引っかかりませんが、ノーコードのアニメーションビルダーを自社製品として出す計画があるなら、条文を読んでおく必要があります。
コードそのものについては、料金より責任の所在のほうが実務では効きます。Anthropicの消費者向け利用規約（発効日2025年10月8日）は、出力について「当社の権利・権原・利益（もしあれば）をすべてお客様に譲渡する」と定める一方で、「独立して正確性を確認せずに出力や動作に依拠すべきではない」とも明記しています。つまり、納品物の動作保証はこちら側に残ります。生成されたコードをそのまま入れて、iOSのSafariでスクロール位置がずれたときに責任を取るのは制作者です。
なお、AI生成物と著作権の全般的な整理については、文化庁が「AIと著作権に関する考え方について」（2024年3月15日公表）と「AIと著作権に関するチェックリスト＆ガイダンス」（2024年7月31日公表）を公開しています。学習段階と生成・利用段階を分けて論じているので、クライアントから聞かれたときの説明の土台になります。ここでは自分の解釈を書きません。一次資料に当たってください。
まとめると、こういう分担になります。
| 工程 | 担当 | 具体的にやること |
|---|---|---|
| 骨組み | AI | 要素取得、ScrollTrigger設定、破棄処理、reduced-motion分岐の雛形 |
| 何を動かすか | AI | opacity / y / scale の割り当て |
| イージング | 手 | 既定値から離れる。数値を書く |
| 時間差 | 手 | each か amount か、件数の上限を見て決める |
| 長さ | 手 | 入場と退場を別の数値にする |
| 実機確認 | 手 | 実端末で見る。OSのモーション低減設定をONにしても見る |
← 表は横にスクロールできます →
プロンプトに「イージングと時間差と長さは指定するので、そこは空欄で骨組みだけ書いて」と入れておくと、往復が減ります。
Q. AIに cubic-bezier の数値を直接指定すれば、手で触る必要はなくなりませんか？
数値を指定できている時点で、それはもう手で決めています。この記事で言う「手で決める」は、エディタで打つかどうかではなく、数値を選ぶ判断を誰がしたかという話です。
Q. CSSのtransitionだけで足りますか。GSAPは要りますか。
単発のホバーや開閉ならCSSで足ります。W3CのLevel 2で linear() 関数が入り、キーワードだけでは書けなかった曲線もCSSで表現できるようになりました。複数要素の時間差、途中での再生制御、スクロール連動が絡むならライブラリのほうが早い、という線引きが実用的です。
Q. どこから数値を触ればいいか分かりません。 まず退場の時間を入場より短くする、の1点だけ試してください。Material Designの公開値なら225msと195msです。1行で終わり、効果が体感しやすいので、感覚の基準点をつくるのに向いています。
Q. prefers-reduced-motion に対応すると、動きが売りのサイトで見栄えが落ちませんか。
動きをゼロにする必要はありません。達成基準2.3.3が求めているのは無効化できることで、位置移動をopacityの変化に置き換える、移動距離を縮める、といった縮退のさせ方も取れます。OS設定を明示的にONにしている人にだけ適用される分岐なので、通常の閲覧者の見え方は変わりません。
Q. この記事の数値は試したものですか。 いいえ。すべて末尾に挙げた公式ドキュメントと仕様書の記載です。実際に課金して検証したツールもありません。数値はあくまで出発点なので、案件のトーンに合わせて上下させてください。