ガイド：CSSで作る動き（アニメーション・インタラクション）

JSライブラリに頼らず、モダンCSSで動きを付けるテクニックと、AIに動きを指示するときのコツです。共通の注意：prefers-reduced-motion で止められるようにし、情報を探すためのサイトではむやみに動かさない。

ページ・要素の出し入れ

• CSSだけでページ遷移にアニメーション（MPAのView Transition） CSSだけでページ遷移にアニメーションを付ける（MPAのView Transition）
• display: none の表示・非表示をアニメーションさせる（allow-discrete と @starting-style） display: none の表示・非表示もCSSでアニメーションできる
• モーダルはJSで作り込まず <dialog> ＋ showModal() ＋ ::backdrop を使う モーダルはJSで開閉を作り込まず、HTMLの <dialog> 要素を使う

スクロール

• スクロール連動のパララックスやセクションの演出をCSSだけで作る スクロール連動アニメーションをCSSだけで作る（パララックス・セクションの演出）
• AIに頼むときは決まった用語（Scroll-triggered / Parallax / Pin / Stagger…）で指示する スクロールアニメーションは「10の用語」で指示する
• 用語を知らなくても「何が・いつ・どう動くか」で伝えれば作れる AIにLPの動きを頼むときは「何が・いつ・どう動くか」の3点で伝える

ナビゲーション・インタラクション

• JSなしで、グローバルナビのインジケーターを Anchor Positioning で動かす JSなしのグローバルナビのアニメーションを、Anchor Positioningで作る（非対応環境へのフォールバック付き）
• カーソルとの距離で要素を少しずつ拡大する（近接インタラクション、数行のJS） ホバーの「オン・オフ」だけでなく、カーソルとの距離で要素を少しずつ拡大する（近接インタラクション）
• カーソルを目で追うキャラクター（向きごとの画像を切り替え） カーソルを目で追うキャラクターのLPは「Figma→向きごとの画像→動き→Claude Codeで追従」の4つの道具をつないで作る
• スマホのカルーセルは scroll-snap でJSなしに止める スマホのカルーセルは、JSのライブラリを入れずに CSS の scroll-snap でピタッと止める

品質チェック

• アニメーションの監査は高性能モデルに、修正は安いモデルに任せる アニメーション等の品質チェックは高性能モデルにさせ、修正作業は安いモデルに任せる