Coverflow (カバーフロー)
別名 Cover flow carousel
中央のアイテムは正面を向き、両側のアイテムは奥へ角度をつけて並びます。
使いどころ
アルバム、メディアのカルーセル
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にカバーフロー(Coverflow)カルーセルを追加してください。カバーフローカルーセル(cover flow carousel)とも呼ばれます。
中央のアイテムは正面を向き、両側のアイテムは奥へ向きを変えて並ぶようにしてください。横にドラッグすると列が動き、離すといちばん近いアイテムになめらかに止まるようにしてください。
ドラッグに加えて矢印キーとスワイプにも対応し、タッチ端末でもページの縦スクロールができるようにしてください。似ているモーション
ABCDEF
クリックしてください
3D Carousel (3Dカルーセル)
別名 Rotating ring carousel
リング状に並んだパネルが3D空間で縦軸を中心に回転します。
使いどころ
ギャラリー、製品ショーケース
[適用する場所]に3Dカルーセル(3D Carousel)を追加してください。回転リングカルーセル(rotating ring carousel)とも呼ばれます。
パネルを遠近感のあるリング状に並べ、「次へ」を押すたびにリング全体が縦軸を中心になめらかに回って次のパネルが正面に来るようにしてください。
操作はキーボードでも行えるようにし、現在のパネルをスクリーンリーダーに伝え、ユーザーがモーションを減らす設定(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
Carousel Crossfade (カルーセルクロスフェード)
別名 Fade slideshow, Carousel fade
スライドは位置を変えず、横に動く代わりに互いに溶け合うように切り替わります。
使いどころ
ヒーローのスライドショー、お客様の声
[適用する場所]にカルーセルクロスフェード(Carousel Crossfade)を追加してください。フェードスライドショー(fade slideshow)、カルーセルフェード(carousel fade)とも呼ばれます。
スライドは位置を変えずにゆっくり溶け合うように切り替え、前のスライドがフェードアウトすると同時に次がフェードインし、数秒止まってから次の切り替えに移るようにしてください。
最後から最初のスライドへ途切れなくループさせ、マウスを乗せたときやフォーカス時は一時停止し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は自動で進めないでください。3D & Depthのほかのモーション
ABCD
クリックしてください
Cube Rotate (キューブローテート)
別名 3D cube, Cube transition
コンテンツを載せた立方体が回転し、次の面を見せます。
使いどころ
スライダーの切り替え、機能の切り替え
[適用する場所]にキューブローテート(Cube Rotate)のトランジションを追加してください。3Dキューブ(3D cube)、キューブトランジション(cube transition)とも呼ばれます。
遠近感のある立方体の側面にコンテンツを配置し、「次へ」を押すたびに立方体が縦軸を中心になめらかに回って次の面が正面に来るようにしてください。
キーボードとスクリーンリーダーが届くのは正面の面だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はシンプルなフェードにしてください。A
ポインターを動かしてください
Glare / Holographic Card (グレア/ホログラフィックカード)
別名 Glare hover, Glare card, Magic card, Glare
明るいハイライトが反射光のようにポインターを追ってカードの表面を動きます。
使いどころ
プレミアムカード、コレクションカード
[適用する場所]にグレア/ホログラフィックカード(Glare / Holographic Card)エフェクトを追加してください。グレアカード(glare card)、グレアホバー(glare hover)とも呼ばれます。
やわらかく明るいハイライトが、光の反射のようにポインターを追ってカードの表面を動き、カードはポインターの方へわずかに傾くようにしてください。ポインターが離れたらどちらも消えます。なめらかで控えめに。
クリックは光のレイヤーを通り抜けるようにし、その下のコンテンツは読みやすく保ち、タッチ端末では光なしでカードを表示してください。