プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にスムーススクロール(Smooth Scroll)を追加してください。スムーススクローリング(smooth scrolling)、慣性スクロール(inertia scroll)とも呼ばれます。
スクロールやアンカーへのジャンプが、カクカク動かずになめらかに滑ってふわっと止まるようにしてください。重く遅れる感じではなく、軽く反応のよい感触にします。
キーボードスクロール、スクロールバー、ページ内検索などの標準動作は残し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はスムージングをオフにしてください。似ているモーション
A
B
C
D
中をスクロールしてください
Scroll Snap (スクロールスナップ)
別名 Scroll Snapping, Snap Scrolling
スクロールがスライドやセクションなど、決められたスナップ位置にぴたりと止まります。
使いどころ
カルーセル、全画面セクション、ギャラリー
[適用する場所]にスクロールスナップ(Scroll Snap)を追加してください。スクロールスナッピング(scroll snapping)、スナップスクロール(snap scrolling)とも呼ばれます。
スクロールが止まったら、中途半端な位置で止まらず、最も近いセクションの端にきれいに揃うようにしてください。
ホイール・タッチ・キーボードのスクロールがそのまま使えるようブラウザ標準のスナップを使い、画面より高いコンテンツも最後まで読めるようにしてください。A
B
C
D
中をスクロールしてください
Parallax (パララックス)
別名 Parallax Scrolling, Parallax Layers, Parallax scroll, Depth parallax, Parallax hero
スクロールに合わせてレイヤーが異なる速さで動き、奥行きを感じさせます。
使いどころ
ヒーローの背景、ランディングページ
[適用する場所]にパララックス(Parallax)のスクロール効果を追加してください。パララックススクロール(parallax scrolling)、パララックスレイヤー(parallax layers)とも呼ばれます。
ページをスクロールすると背景レイヤーがコンテンツよりゆっくり動き、遠いレイヤーほど動きを小さくして、控えめな奥行きを出してください。
遅れなくスクロール位置に連動させ、テキストは通常速度のレイヤーに置き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は効果をオフにしてください。Scrollのほかのモーション
A
B
C
D
中をスクロールしてください
Stacking Cards (スタッキングカード)
別名 Sticky Stacking Cards, Card Stack Scroll
スクロールするとカードが上部に固定されて次々と重なり、前のカードが少し縮むことが多いです。
使いどころ
機能紹介リスト、ポートフォリオ
[適用する場所]にスタッキングカード(Stacking Cards)を追加してください。スティッキースタッキングカード(sticky stacking cards)、カードスタックスクロール(card stack scroll)とも呼ばれます。
スクロールすると各カードが上部付近に固定され、次のカードがその上に滑り込み、下のカードは少しずつ縮んで、きれいな束が積み上がるようにしてください。
前のカードの端が細く見えるように残し、セクションが終わる前に最後のカードが所定の位置まで届く余白を確保してください。中をスクロールしてください
Sticky Header Shrink (スティッキーヘッダーシュリンク)
別名 Shrinking Header, Shrink on Scroll
下へスクロールすると、固定ヘッダーの高さやサイズが小さくなります。
使いどころ
ナビゲーションバー
[適用する場所]にスティッキーヘッダーシュリンク(Sticky Header Shrink)を追加してください。シュリンキングヘッダー(shrinking header)、シュリンクオンスクロール(shrink on scroll)とも呼ばれます。
ヘッダーは上部に固定したまま、少し下へスクロールしたらロゴを小さくした細いバーへなめらかに縮み、一番上に戻ったら元の大きさに戻るようにしてください。
ヘッダーのサイズが変わる間、下のコンテンツがずれないようにしてください。A B C D E F G H I J K L M N O P Q R S T A B C D E F G H I J K L M N O P Q R S T
A B C D E F G H I J K L M N O P Q R S T A B C D E F G H I J K L M N O P Q R S T
中をスクロールしてください
Text Marquee on Scroll (スクロールテキストマーキー)
別名 Scroll Text Marquee, Text Scroll, Scroll Velocity Text, Scroll Based Velocity
ページを縦にスクロールすると、大きなテキストの行が横方向にスライドします。
使いどころ
ブランドメッセージ、ヒーローセクション
[適用する場所]にスクロールテキストマーキー(Text Marquee on Scroll)を追加してください。scroll text marquee、スクロールベロシティテキスト(scroll velocity text)とも呼ばれます。
ページを下へスクロールすると大きなテキストの行が横へスライドし、1行おきに逆方向へ動き、上へ戻すと元へ戻るようにしてください。
動きはスクロール位置に連動させ、長い行で横スクロールバーが出ないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。