Marquee (マーキー)
別名 Ticker, Infinite Scroll Text
1行のコンテンツが途切れることなく横方向に無限ループで流れ続けます。
使いどころ
ロゴウォール、お知らせの帯、キーワードバナー、ニュースティッカー
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にマーキー(Marquee)を追加してください。横方向に無限に流れる帯で、ティッカー(ticker)とも呼ばれます。
コンテンツが右から左へゆっくり一定の速度で流れ、つなぎ目が見えないように途切れなくループさせてください。
マウスを乗せたら止まり、モーションを減らす設定(prefers-reduced-motion)の場合は動かないようにしてください。似ているモーション
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
クリックしてください
Carousel Slide (カルーセルスライド)
別名 Slider, Swipe carousel, Scroll-snap carousel
スライドが表示枠の中を横に移動し、1枚ずつぴたりと位置に収まります。
使いどころ
ヒーローバナー、商品ギャラリー
[適用する場所]にカルーセルスライド(Carousel Slide)を追加してください。スライダー(slider)、スワイプカルーセル(swipe carousel)とも呼ばれます。
1ステップごとに列を横にスライドさせ、次のスライドが中央にぴたりと収まるようにしてください。なめらかに減速し、両端には隣のスライドが少しのぞき、位置を示すドットも一緒に動きます。
1枚ずつ移動させ、ボタンと矢印キーに加えてタッチのスワイプにも対応し、操作ボタンにはスクリーンリーダー用のラベルを付けてください。A
B
C
D
E
中をスクロールしてください
Horizontal Scroll Section (横スクロールセクション)
別名 Horizontal Scrolling, Scroll-jacked Horizontal Gallery
縦スクロールに合わせて、固定されたパネルの列が横に動きます。
使いどころ
ギャラリー、ポートフォリオ、タイムライン
[適用する場所]に横スクロールセクション(Horizontal Scroll Section)を追加してください。horizontal scrolling、scroll-jacked horizontal galleryとも呼ばれます。
セクションが上端に来たら固定され、下へのスクロールでパネルの列が横に動き、最後のパネルが見えたら固定が外れるようにしてください。
横の動きはスクロール位置に直接連動させて戻すと逆に動くようにし、小さな画面やユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は、普通にスワイプできる横並びに切り替えてください。Component & Layoutのほかのモーション
- A
- B
- C
- D
- E
- F
- G
- H
クリックしてください
Masonry / Grid Shuffle (メイソンリー/グリッドシャッフル)
別名 Isotope filter, Filterable grid animation
絞り込みや並べ替えをすると、グリッドのタイルが並び替わったり、フェードアウトしたり、新しい位置へスライドしたりします。
使いどころ
ポートフォリオの絞り込み、ギャラリー
[適用する場所]にメイソンリー/グリッドシャッフル(Masonry / Grid Shuffle)の効果を追加してください。フィルタリング可能なグリッドアニメーション(filterable grid animation)とも呼ばれます。
絞り込みをかけると、条件に合わなくなったタイルはその場で縮みながらフェードアウトし、残ったタイルは新しい位置へなめらかにスライドするようにしてください。絞り込みを解除すると逆再生です。
グリッドの高さが変わる間も周りのページががたつかないようにし、フィルターの操作部分はどれが選択中かを伝える本物のボタンにしてください。A
Modal Scale-Fade In (モーダルスケールフェードイン)
別名 Dialog open animation, Zoom-fade dialog
暗くなったページの上で、ダイアログが中心から少し拡大しながらフェードインします。
使いどころ
確認ダイアログ、オーバーレイ内のフォーム
[適用する場所]にモーダルスケールフェードイン(Modal Scale-Fade In)のアニメーションを追加してください。ダイアログオープンアニメーション(dialog open animation)、ズームフェードダイアログ(zoom-fade dialog)とも呼ばれます。
背後のページが暗くなるのに合わせて、ダイアログが中心から少し拡大しながらフェードインするようにしてください。素早く控えめに、弾みはなしです。
ダイアログを開くたびに一度だけ再生し、フォーカスをダイアログに移してその中に保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は単純なフェードだけにしてください。A
クリックしてください
Popover / Dropdown Open (ポップオーバー/ドロップダウンオープン)
別名 Menu pop, Popover pop-in, Dropdown scale-fade
フローティングメニューが、トリガーのある位置から拡大しながらフェードインします。
使いどころ
ドロップダウンメニュー、ポップオーバー、選択リスト
[適用する場所]にポップオーバー/ドロップダウンオープン(Popover / Dropdown Open)のアニメーションを追加してください。メニューポップ(menu pop)、ドロップダウンスケールフェード(dropdown scale-fade)とも呼ばれます。
メニューはトリガー横の角から少し拡大しながらフェードインし、素早くキレよく開いて、閉じるときは少し速めにフェードアウトさせてください。
トリガーに固定したまま表示し、Escape キーや外側のクリックで閉じられるようにして、開いている状態をトリガー側でスクリーンリーダーに伝えてください。