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