別名 Rotating ring carousel
リング状に並んだパネルが3D空間で縦軸を中心に回転します。
使いどころ
ギャラリー、製品ショーケース
[適用する場所]に3Dカルーセル(3D Carousel)を追加してください。回転リングカルーセル(rotating ring carousel)とも呼ばれます。
パネルを遠近感のあるリング状に並べ、「次へ」を押すたびにリング全体が縦軸を中心になめらかに回って次のパネルが正面に来るようにしてください。
操作はキーボードでも行えるようにし、現在のパネルをスクリーンリーダーに伝え、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はシンプルなフェードにしてください。別名 Interactive globe
マーカーや弧を載せた3Dの地球が、レイアウトの中で回転します。
使いどころ
グローバル展開を示すビジュアル
[適用する場所]に3Dグローブ(3D Globe)を追加してください。インタラクティブグローブ(interactive globe)とも呼ばれます。
表面にいくつかのマーカーを置いた地球儀が、マーカーごと軸を中心にゆっくり一定の速さで回るようにしてください。穏やかに、途切れなく。
装飾として扱い、示している情報にはテキストの代替を用意し、画面外では一時停止し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を止めてください。別名 Pin hover 3D
ホバーするとカードが奥へ傾き、ピンと光がこちらへ浮かび上がります。
使いどころ
リンクプレビューカード
[適用する場所]に3Dピン(3D Pin)のホバーエフェクトを追加してください。ピンホバー3D(pin hover 3D)とも呼ばれます。
ポインターがカードに乗ったら、カードが奥へ傾き、根元にやわらかな光のあるピンが中央から浮かび上がるようにし、離れたらすべて元に戻してください。なめらかに、弾まずに。
レイアウト上のカードの占める領域は変えず、キーボードフォーカスでも同じ効果を出してください。別名 Perspective tilt, 3D card effect, Tilt card, Tilt on hover, Parallax tilt
カードがポインターの方向へ立体的に傾き、重なった中身が表面から浮き上がります。
使いどころ
製品カード、料金カード
[適用する場所]に3Dチルト(3D Tilt)エフェクトを追加してください。パースペクティブチルト(perspective tilt)、チルトカード(tilt card)とも呼ばれます。
ポインターの動きに合わせてカードがその方向へ立体的に傾き、内側のレイヤーがそれぞれ違う深さで表面から浮き上がり、ポインターが離れたらなめらかに平らへ戻るようにしてください。なめらかで控えめに。
文字が読みやすいよう傾きは小さくし、タッチ端末とユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はカードを平らなままにしてください。別名 Flip card, Card flip 3D, 3D flip on hover
カードが軸を中心に半回転し、裏面を見せます。
使いどころ
チーム紹介カード、単語カード、料金の詳細
[適用する場所]にカードフリップ(Card Flip)エフェクトを追加してください。フリップカード(flip card)、カードフリップ3D(card flip 3D)とも呼ばれます。
ポインターがカードに乗ったら、カードが縦軸を中心に立体的に裏返って裏面を見せ、離れたら元に戻るようにしてください。なめらかに、一定の速さで。
各面の裏側は隠して表裏が透けて重ならないようにし、キーボードフォーカスやタッチ端末のタップでも裏返るようにしてください。別名 Stacked cards, Cards effect
カードが少しずつずれて重なり、一番上のカードがどいて次のカードが現れます。
使いどころ
お客様の声、スワイプ式カード
[適用する場所]にカードスタック(Card Stack)を追加してください。スタックドカード(stacked cards)とも呼ばれます。
カードを少しずつずらして後ろへ重ね、押すたびに一番上のカードが横へ振れて一番後ろに回り込み、残りのカードが一段前に出るようにしてください。なめらかで、軽く素早い感じで。
キーボードで操作できるようにし、スクリーンリーダーが順番にすべてのカードに届くようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はシンプルなフェードにしてください。別名 Cover flow carousel
中央のアイテムは正面を向き、両側のアイテムは奥へ角度をつけて並びます。
使いどころ
アルバム、メディアのカルーセル
[適用する場所]にカバーフロー(Coverflow)カルーセルを追加してください。カバーフローカルーセル(cover flow carousel)とも呼ばれます。
中央のアイテムは正面を向き、両側のアイテムは奥へ向きを変えて並ぶようにしてください。横にドラッグすると列が動き、離すといちばん近いアイテムになめらかに止まるようにしてください。
ドラッグに加えて矢印キーとスワイプにも対応し、タッチ端末でもページの縦スクロールができるようにしてください。別名 3D cube, Cube transition
コンテンツを載せた立方体が回転し、次の面を見せます。
使いどころ
スライダーの切り替え、機能の切り替え
[適用する場所]にキューブローテート(Cube Rotate)のトランジションを追加してください。3Dキューブ(3D cube)、キューブトランジション(cube transition)とも呼ばれます。
遠近感のある立方体の側面にコンテンツを配置し、「次へ」を押すたびに立方体が縦軸を中心になめらかに回って次の面が正面に来るようにしてください。
キーボードとスクリーンリーダーが届くのは正面の面だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はシンプルなフェードにしてください。別名 Glare hover, Glare card, Magic card, Glare
明るいハイライトが反射光のようにポインターを追ってカードの表面を動きます。
使いどころ
プレミアムカード、コレクションカード
[適用する場所]にグレア/ホログラフィックカード(Glare / Holographic Card)エフェクトを追加してください。グレアカード(glare card)、グレアホバー(glare hover)とも呼ばれます。
やわらかく明るいハイライトが、光の反射のようにポインターを追ってカードの表面を動き、カードはポインターの方へわずかに傾くようにしてください。ポインターが離れたらどちらも消えます。なめらかで控えめに。
クリックは光のレイヤーを通り抜けるようにし、その下のコンテンツは読みやすく保ち、タッチ端末では光なしでカードを表示してください。