プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にスタッキングカード(Stacking Cards)を追加してください。スティッキースタッキングカード(sticky stacking cards)、カードスタックスクロール(card stack scroll)とも呼ばれます。
スクロールすると各カードが上部付近に固定され、次のカードがその上に滑り込み、下のカードは少しずつ縮んで、きれいな束が積み上がるようにしてください。
前のカードの端が細く見えるように残し、セクションが終わる前に最後のカードが所定の位置まで届く余白を確保してください。似ているモーション
ABCD
クリックしてください
Card Stack (カードスタック)
別名 Stacked cards, Cards effect
カードが少しずつずれて重なり、一番上のカードがどいて次のカードが現れます。
使いどころ
お客様の声、スワイプ式カード
[適用する場所]にカードスタック(Card Stack)を追加してください。スタックドカード(stacked cards)とも呼ばれます。
カードを少しずつずらして後ろへ重ね、押すたびに一番上のカードが横へ振れて一番後ろに回り込み、残りのカードが一段前に出るようにしてください。なめらかで、軽く素早い感じで。
キーボードで操作できるようにし、スクリーンリーダーが順番にすべてのカードに届くようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はシンプルなフェードにしてください。ABC
A
B
C
中をスクロールしてください
Pinning (ピン留め)
別名 Pinned Section, Sticky Section, Scroll Pin
一定のスクロール区間のあいだ要素がその場に固定され、そのあいだにほかのコンテンツやアニメーションが進みます。
使いどころ
スクロール連動のストーリーテリング、機能紹介
[適用する場所]にピン留め(Pinning)のスクロール効果を追加してください。ピン留めセクション(pinned section)、スティッキーセクション(sticky section)とも呼ばれます。
横のコンテンツがスクロールで流れていく間、1つのパネルはその場に固定し、読んでいるステップに合わせて切り替え、セクションが終わったら固定を外してください。
スクロールを乗っ取るのではなくネイティブのsticky配置を優先し、小さな画面では固定パネルがなくても各ステップが読みやすいようにしてください。A
B
C
D
中をスクロールしてください
Scroll Snap (スクロールスナップ)
別名 Scroll Snapping, Snap Scrolling
スクロールがスライドやセクションなど、決められたスナップ位置にぴたりと止まります。
使いどころ
カルーセル、全画面セクション、ギャラリー
[適用する場所]にスクロールスナップ(Scroll Snap)を追加してください。スクロールスナッピング(scroll snapping)、スナップスクロール(snap scrolling)とも呼ばれます。
スクロールが止まったら、中途半端な位置で止まらず、最も近いセクションの端にきれいに揃うようにしてください。
ホイール・タッチ・キーボードのスクロールがそのまま使えるようブラウザ標準のスナップを使い、画面より高いコンテンツも最後まで読めるようにしてください。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)にしている場合は静止させてください。A
中をスクロールしてください
Zoom on Scroll (スクロールズーム)
別名 Scroll Zoom, Scale on Scroll, Spatial Scroll Zoom
スクロールに合わせて、要素やシーンが拡大・縮小します。
使いどころ
ヒーローのイントロ、画像の拡大表示
[適用する場所]にスクロールズーム(Zoom on Scroll)の効果を追加してください。scroll zoom、スケールオンスクロール(scale on scroll)とも呼ばれます。
セクションが画面に留まっている間、要素が小さなカードからスクロールに合わせてなめらかに大きくなって画面全体を埋め、上へ戻すと再び縮むようにしてください。
周りのレイアウトを押し動かさずに拡大し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はズームせず最終サイズで表示してください。