3D Carousel (3Dカルーセル)
別名 Rotating ring carousel
リング状に並んだパネルが3D空間で縦軸を中心に回転します。
使いどころ
ギャラリー、製品ショーケース
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]に3Dカルーセル(3D Carousel)を追加してください。回転リングカルーセル(rotating ring carousel)とも呼ばれます。
パネルを遠近感のあるリング状に並べ、「次へ」を押すたびにリング全体が縦軸を中心になめらかに回って次のパネルが正面に来るようにしてください。
操作はキーボードでも行えるようにし、現在のパネルをスクリーンリーダーに伝え、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はシンプルなフェードにしてください。似ているモーション
ABCDE
ドラッグしてください
Coverflow (カバーフロー)
別名 Cover flow carousel
中央のアイテムは正面を向き、両側のアイテムは奥へ角度をつけて並びます。
使いどころ
アルバム、メディアのカルーセル
[適用する場所]にカバーフロー(Coverflow)カルーセルを追加してください。カバーフローカルーセル(cover flow carousel)とも呼ばれます。
中央のアイテムは正面を向き、両側のアイテムは奥へ向きを変えて並ぶようにしてください。横にドラッグすると列が動き、離すといちばん近いアイテムになめらかに止まるようにしてください。
ドラッグに加えて矢印キーとスワイプにも対応し、タッチ端末でもページの縦スクロールができるようにしてください。A
B
C
クリックしてください
Carousel Slide (カルーセルスライド)
別名 Slider, Swipe carousel, Scroll-snap carousel
スライドが表示枠の中を横に移動し、1枚ずつぴたりと位置に収まります。
使いどころ
ヒーローバナー、商品ギャラリー
[適用する場所]にカルーセルスライド(Carousel Slide)を追加してください。スライダー(slider)、スワイプカルーセル(swipe carousel)とも呼ばれます。
1ステップごとに列を横にスライドさせ、次のスライドが中央にぴたりと収まるようにしてください。なめらかに減速し、両端には隣のスライドが少しのぞき、位置を示すドットも一緒に動きます。
1枚ずつ移動させ、ボタンと矢印キーに加えてタッチのスワイプにも対応し、操作ボタンにはスクリーンリーダー用のラベルを付けてください。ABCD
クリックしてください
Cube Rotate (キューブローテート)
別名 3D cube, Cube transition
コンテンツを載せた立方体が回転し、次の面を見せます。
使いどころ
スライダーの切り替え、機能の切り替え
[適用する場所]にキューブローテート(Cube Rotate)のトランジションを追加してください。3Dキューブ(3D cube)、キューブトランジション(cube transition)とも呼ばれます。
遠近感のある立方体の側面にコンテンツを配置し、「次へ」を押すたびに立方体が縦軸を中心になめらかに回って次の面が正面に来るようにしてください。
キーボードとスクリーンリーダーが届くのは正面の面だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はシンプルなフェードにしてください。3D & Depthのほかのモーション
3D Globe (3Dグローブ)
別名 Interactive globe
マーカーや弧を載せた3Dの地球が、レイアウトの中で回転します。
使いどころ
グローバル展開を示すビジュアル
[適用する場所]に3Dグローブ(3D Globe)を追加してください。インタラクティブグローブ(interactive globe)とも呼ばれます。
表面にいくつかのマーカーを置いた地球儀が、マーカーごと軸を中心にゆっくり一定の速さで回るようにしてください。穏やかに、途切れなく。
装飾として扱い、示している情報にはテキストの代替を用意し、画面外では一時停止し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を止めてください。A
マウスを乗せてください
3D Pin (3Dピン)
別名 Pin hover 3D
ホバーするとカードが奥へ傾き、ピンと光がこちらへ浮かび上がります。
使いどころ
リンクプレビューカード
[適用する場所]に3Dピン(3D Pin)のホバーエフェクトを追加してください。ピンホバー3D(pin hover 3D)とも呼ばれます。
ポインターがカードに乗ったら、カードが奥へ傾き、根元にやわらかな光のあるピンが中央から浮かび上がるようにし、離れたらすべて元に戻してください。なめらかに、弾まずに。
レイアウト上のカードの占める領域は変えず、キーボードフォーカスでも同じ効果を出してください。A
ポインターを動かしてください
3D Tilt (3Dチルト)
別名 Perspective tilt, 3D card effect, Tilt card, Tilt on hover, Parallax tilt
カードがポインターの方向へ立体的に傾き、重なった中身が表面から浮き上がります。
使いどころ
製品カード、料金カード
[適用する場所]に3Dチルト(3D Tilt)エフェクトを追加してください。パースペクティブチルト(perspective tilt)、チルトカード(tilt card)とも呼ばれます。
ポインターの動きに合わせてカードがその方向へ立体的に傾き、内側のレイヤーがそれぞれ違う深さで表面から浮き上がり、ポインターが離れたらなめらかに平らへ戻るようにしてください。なめらかで控えめに。
文字が読みやすいよう傾きは小さくし、タッチ端末とユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はカードを平らなままにしてください。