スクロールアニメーションは「10の用語」で指示する
作りたい動きを言葉にできないときは、決まった用語でAIに伝える。さらに「表で提案→承認→実装→スクショ確認」の順で進めさせる。
どんな問題を解決するか / いつ使うか
LPやポートフォリオに動きを足したいが、AIへの説明があいまいで意図と違う動きになるとき。
やり方
10の用語（意味は投稿の説明を要約）
| 用語 | 動き |
|---|---|
| Scroll-triggered | 要素が画面に入ったとき1回だけ再生（フェードイン、スライドアップ） |
| Scroll-linked | スクロール量に進行が連動し、戻すと逆再生 |
| Parallax | 前景と背景が違う速さで動き、奥行きが出る |
| Sticky | ある位置で要素が画面に貼り付く（ナビ、見出し） |
| Pin | セクション全体が固定され、スクロールに合わせて中身が段階的に変わる |
| Scroll Snap | 止めたとき、近くの画面やカードにぴったり揃う |
| Horizontal Scroll | 縦にスクロールすると内容が横に動く |
| Stagger | カード群が1つずつ時間差で入ってくる |
| Text Reveal | 文章が単語ごとに浮かび上がる |
| Progress Bar | 上部の線がスクロールに合わせて伸びる（読了率） |
指示の流れ（再構成）
- 「どのセクションに・どの効果を・なぜ」を表で提案させる。合わないセクションも列挙させ、効果を入れるためだけに入れない。迷う場合はプレビュー用ページで試させる。
- 承認するまで変更させない。既存のアニメーションライブラリがあればそれを使い、なければCSS優先。動かすのは
transformとopacityだけ。Scroll Snapはページ全体ではなくコンテナ内だけに使う。 - スマホでは横スクロールを縦積みにし、パララックスを弱める。
prefers-reduced-motionがオンの人や非対応ブラウザでは、アニメーションなしで内容だけ表示する。 - 完了後、デスクトップとスマホ幅で上から下までスクロールし、内容が隠れたり横にはみ出したりしていないかスクショで確認させる。
注意点・対応状況
- 効果の入れすぎは読みにくさ・酔いの原因になる。1ページ2〜3種類までが目安。
- CSSの
animation-timeline: scroll()/view()はブラウザ対応状況を確認し、非対応時の表示を必ず用意する。
出典
- 投稿者: @Voxyz_ai (Vox)
- 投稿: @Voxyz_ai · 2026-10-09
- 収集日: 2026-10-09（JST）