Tab Indicator Slide (タブインジケータースライド)
別名 Sliding underline, Active tab indicator, Segmented control pill
下線やピル型の背景が、前のタブから新しく選んだタブへすべるように移動します。
使いどころ
タブバー、セグメントコントロール
バリエーション
- underline
- pill background
- shared layout indicator
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にタブインジケータースライド(Tab Indicator Slide)を追加してください。スライディングアンダーライン(sliding underline)、アクティブタブインジケーター(active tab indicator)とも呼ばれます。
新しいタブを選んだら、下線が前のタブから新しいタブへ素早く、なめらかに減速しながらすべり、幅が違う場合は新しいタブの幅に合わせて伸び縮みするようにしてください。
矢印キーで操作できる正しいタブのセマンティクスを保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすべらせずにインジケーターを移してください。似ているモーション
ACB
クリックしてください
Shared Layout Animation (シェアードレイアウトアニメーション)
別名 layoutId, Shared element (in-page)
要素が、別の位置にある対応する要素へ移動しながらサイズを変え、同じ1つの要素のように見えます。
使いどころ
選択中のハイライト、サムネイルから拡大表示
[適用する場所]にシェアードレイアウトアニメーション(Shared Layout Animation)を追加してください。ページ内の共有要素(in-page shared element)とも呼ばれます。
選択が変わったら、要素が元の位置から新しい位置へなめらかに移動しながらサイズを変え、やわらかく収まるようにして、2つではなく1つの物に見えるようにしてください。
同時に表示するのは常に1つだけにし、移動中に周りのレイアウトがずれないようにしてください。ABCDEF
ポインターを動かしてください
Card Hover Effect (カードホバーエフェクト)
別名 Sliding highlight card grid
グリッド内でハイライト背景がカードの間をすべるように移動し、ホバーされているカードについていきます。
使いどころ
カードグリッド、機能一覧
[適用する場所]にカードホバーエフェクト(Card Hover Effect)を追加してください。スライディングハイライトカードグリッド(sliding highlight card grid)とも呼ばれます。
ホバーしたカードの背後にやわらかいハイライト背景が現れ、ポインターが次のカードへ移るとそこまでなめらかにすべって移動し、グリッドから離れたらフェードアウトするようにしてください。
キーボードフォーカスでも同じようにハイライトを動かし、カード自体は動かないようにしてください。クリックしてください
Toggle Switch (トグルスイッチ)
別名 Switch, Switch Thumb Slide
丸いつまみがトラック上をスライドし、オフとオンでトラックの色が変わります。
使いどころ
設定、ダークモード
[適用する場所]にトグルスイッチ(Toggle Switch)のアニメーションを追加してください。スイッチ(switch)とも呼ばれます。
オン・オフを切り替えると、丸いつまみがトラックの反対側までなめらかにスライドし、同時にトラックの色が変わるようにしてください。素早くきびきびと、弾みは不要です。
キーボードでも操作できる本物のアクセシブルなスイッチ(checked状態を持つrole="switch")にしてください。ABC
マウスを乗せてください
Underline Reveal (アンダーラインリビール)
別名 Overline Reveal, Reveal
線が下端または上端からスライドして定位置に収まり、要素に下線または上線を引きます。
使いどころ
ナビゲーションリンク、ボタン
[適用する場所]にアンダーラインリビール(Underline Reveal)のホバーエフェクトを追加してください。オーバーラインリビール(overline reveal)、リビール(reveal)とも呼ばれます。
ポインターが要素に乗っている間は、全幅の線が下端のすぐ下から上へスライドして定位置に収まり、離れたら下へスライドして見えなくなるようにしてください。素早くなめらかに。
線は縁で切り取り、フェードや伸びではなくスライドで現れるようにし、キーボードフォーカスでも同じ効果を出してください。Component & Layoutのほかのモーション
A
Toast Slide-In (トーストスライドイン)
別名 Snackbar, Toast notification, Toast stack
短いメッセージが画面の端からスライドまたはフェードで現れ、しばらく表示されてから消えます。重なったトーストは場所を空けるようにずれます。
使いどころ
保存完了の通知、エラー、元に戻すの案内
[適用する場所]にトーストスライドイン(Toast Slide-In)を追加してください。スナックバー(snackbar)、トースト通知(toast notification)とも呼ばれます。
各メッセージは画面の端からスライドアップしながらフェードインし、なめらかに減速させてください。新しいトーストが来たら、表示中のものがなめらかにずれて場所を空けるようにしてください。
フォーカスを奪わずにスクリーンリーダーへメッセージを伝え、読めるだけの時間表示し、ホバーやフォーカス中は自動で閉じるのを一時停止してください。A
マウスを乗せてください
Tooltip Fade (ツールチップフェード)
別名 Tooltip reveal
少しホバーしたあと、小さなラベルが要素の横に少しずれながらフェードインします。
使いどころ
アイコンの説明、省略されたテキスト
[適用する場所]にツールチップフェード(Tooltip Fade)を追加してください。ツールチップリビール(tooltip reveal)とも呼ばれます。
少しホバーしたあと、ラベルが要素の横に少しずれながらフェードインし、ポインターが離れたら待たずにすぐ消えるようにしてください。
キーボードフォーカスでも表示し、Escape キーで閉じられるようにして、スクリーンリーダーが読み上げられるよう要素と関連付けてください。- A
- B
- C
クリックしてください
Accordion Expand-Collapse (アコーディオン開閉)
別名 Collapse, Disclosure, Expandable section
ヘッダーを切り替えると、コンテンツのパネルがなめらかに全体の高さまで広がるか、ゼロまで縮みます。
使いどころ
FAQ、設定のグループ、サイドバーのツリー
[適用する場所]にアコーディオン開閉(Accordion Expand-Collapse)の効果を追加してください。コラプス(collapse)、ディスクロージャー(disclosure)とも呼ばれます。
ヘッダーを押すとパネルが中身の高さいっぱいまでなめらかに広がり、もう一度押すと完全に閉じるようにし、ヘッダーの矢印もそれに合わせて回転させてください。素早くなめらかに、弾みはなしです。
固定の推定値ではなく中身の実際の高さまでアニメーションさせ、ヘッダーは開閉状態を伝える本物のボタンにして、キーボードでも操作できるようにしてください。