プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]に横スクロールセクション(Horizontal Scroll Section)を追加してください。horizontal scrolling、scroll-jacked horizontal galleryとも呼ばれます。
セクションが上端に来たら固定され、下へのスクロールでパネルの列が横に動き、最後のパネルが見えたら固定が外れるようにしてください。
横の動きはスクロール位置に直接連動させて戻すと逆に動くようにし、小さな画面やユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は、普通にスワイプできる横並びに切り替えてください。似ているモーション
A
B
C
クリックしてください
Carousel Slide (カルーセルスライド)
別名 Slider, Swipe carousel, Scroll-snap carousel
スライドが表示枠の中を横に移動し、1枚ずつぴたりと位置に収まります。
使いどころ
ヒーローバナー、商品ギャラリー
[適用する場所]にカルーセルスライド(Carousel Slide)を追加してください。スライダー(slider)、スワイプカルーセル(swipe carousel)とも呼ばれます。
1ステップごとに列を横にスライドさせ、次のスライドが中央にぴたりと収まるようにしてください。なめらかに減速し、両端には隣のスライドが少しのぞき、位置を示すドットも一緒に動きます。
1枚ずつ移動させ、ボタンと矢印キーに加えてタッチのスワイプにも対応し、操作ボタンにはスクリーンリーダー用のラベルを付けてください。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)にしている場合は静止させてください。A
B
C
D
中をスクロールしてください
Scroll Snap (スクロールスナップ)
別名 Scroll Snapping, Snap Scrolling
スクロールがスライドやセクションなど、決められたスナップ位置にぴたりと止まります。
使いどころ
カルーセル、全画面セクション、ギャラリー
[適用する場所]にスクロールスナップ(Scroll Snap)を追加してください。スクロールスナッピング(scroll snapping)、スナップスクロール(snap scrolling)とも呼ばれます。
スクロールが止まったら、中途半端な位置で止まらず、最も近いセクションの端にきれいに揃うようにしてください。
ホイール・タッチ・キーボードのスクロールがそのまま使えるようブラウザ標準のスナップを使い、画面より高いコンテンツも最後まで読めるようにしてください。ABC
A
B
C
中をスクロールしてください
Pinning (ピン留め)
別名 Pinned Section, Sticky Section, Scroll Pin
一定のスクロール区間のあいだ要素がその場に固定され、そのあいだにほかのコンテンツやアニメーションが進みます。
使いどころ
スクロール連動のストーリーテリング、機能紹介
[適用する場所]にピン留め(Pinning)のスクロール効果を追加してください。ピン留めセクション(pinned section)、スティッキーセクション(sticky section)とも呼ばれます。
横のコンテンツがスクロールで流れていく間、1つのパネルはその場に固定し、読んでいるステップに合わせて切り替え、セクションが終わったら固定を外してください。
スクロールを乗っ取るのではなくネイティブのsticky配置を優先し、小さな画面では固定パネルがなくても各ステップが読みやすいようにしてください。Scrollのほかのモーション
A
B
C
D
中をスクロールしてください
Parallax (パララックス)
別名 Parallax Scrolling, Parallax Layers, Parallax scroll, Depth parallax, Parallax hero
スクロールに合わせてレイヤーが異なる速さで動き、奥行きを感じさせます。
使いどころ
ヒーローの背景、ランディングページ
[適用する場所]にパララックス(Parallax)のスクロール効果を追加してください。パララックススクロール(parallax scrolling)、パララックスレイヤー(parallax layers)とも呼ばれます。
ページをスクロールすると背景レイヤーがコンテンツよりゆっくり動き、遠いレイヤーほど動きを小さくして、控えめな奥行きを出してください。
遅れなくスクロール位置に連動させ、テキストは通常速度のレイヤーに置き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は効果をオフにしてください。中をスクロールしてください
Scroll Progress Indicator (スクロールプログレスインジケーター)
別名 Reading Progress Bar, Progress Bar
ページや記事をスクロールするにつれて、バーやリングが満たされていきます。
使いどころ
記事、長いページ
[適用する場所]にスクロールプログレスインジケーター(Scroll Progress Indicator)を追加してください。読書進捗バー(reading progress bar)とも呼ばれます。
上端の細いバーが、読み進めた量に合わせて左から右へ伸び、最後まで来たら全幅になるようにしてください。
イージングの遅れなしでスクロール位置に直接連動させ、コンテンツを覆わないようにしてください。