Toast Slide-In (トーストスライドイン)
別名 Snackbar, Toast notification, Toast stack
短いメッセージが画面の端からスライドまたはフェードで現れ、しばらく表示されてから消えます。重なったトーストは場所を空けるようにずれます。
使いどころ
保存完了の通知、エラー、元に戻すの案内
バリエーション
- slide from edge
- stacked toasts
- swipe to dismiss
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にトーストスライドイン(Toast Slide-In)を追加してください。スナックバー(snackbar)、トースト通知(toast notification)とも呼ばれます。
各メッセージは画面の端からスライドアップしながらフェードインし、なめらかに減速させてください。新しいトーストが来たら、表示中のものがなめらかにずれて場所を空けるようにしてください。
フォーカスを奪わずにスクリーンリーダーへメッセージを伝え、読めるだけの時間表示し、ホバーやフォーカス中は自動で閉じるのを一時停止してください。似ているモーション
A
Slide In (スライドイン)
別名 Slide In Up, Slide In Down, Slide In Left, Slide In Right
要素がコンテナの端の外側から定位置まで、フェードせずにすべり込みます。
使いどころ
ドロワー、サイドパネル、バナー
[適用する場所]にスライドイン(Slide In)の登場アニメーションを追加してください。slide in left、slide in right、slide in up、slide in down とも呼ばれます。
要素がコンテナの端の外側から定位置まですべり込み、その間ずっと完全に不透明のままにしてください。素早く、弾まずになめらかに減速させてください。
外にある間は隣の要素に重なったりスクロールバーが出たりしないようコンテナの端で切り取り、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初からその位置に表示してください。A
マウスを乗せてください
Tooltip Fade (ツールチップフェード)
別名 Tooltip reveal
少しホバーしたあと、小さなラベルが要素の横に少しずれながらフェードインします。
使いどころ
アイコンの説明、省略されたテキスト
[適用する場所]にツールチップフェード(Tooltip Fade)を追加してください。ツールチップリビール(tooltip reveal)とも呼ばれます。
少しホバーしたあと、ラベルが要素の横に少しずれながらフェードインし、ポインターが離れたら待たずにすぐ消えるようにしてください。
キーボードフォーカスでも表示し、Escape キーで閉じられるようにして、スクリーンリーダーが読み上げられるよう要素と関連付けてください。A
Bottom Sheet Slide-Up (ボトムシートスライドアップ)
別名 Bottom drawer, Sheet
パネルが下端からスライドして現れます。ドラッグでき、決まった高さに吸着することもよくあります。
使いどころ
モバイルのアクション、共有メニュー、フィルター
[適用する場所]にボトムシートスライドアップ(Bottom Sheet Slide-Up)を追加してください。ボトムドロワー(bottom drawer)、シート(sheet)とも呼ばれます。
背後のページが暗くなると同時に、パネルが下端からスライドして上がり、なめらかに減速して弾まずに所定の位置に収まるようにしてください。
シートを開くたびに一度だけ再生し、閉じるときは下へスライドして戻し、開いている間はキーボードフォーカスをシートの中に保ってください。A
Fade In Directional (ディレクショナルフェードイン)
別名 Fade In Down, Fade In Left, Fade In Right
要素が片側から少しだけ移動して最終位置に収まりながらフェードインします。
使いどころ
読み込み時やスクロールで現れるセクション、カード
[適用する場所]にディレクショナルフェードイン(Fade In Directional)の登場アニメーションを追加してください。フェードインレフト(fade in left)、フェードインライト(fade in right)、フェードインダウン(fade in down)とも呼ばれます。
要素が片側から少しだけ移動して最終位置に収まりながらフェードインするようにしてください。素早く滑らかに、着地で減速し、弾みはなしで。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。Component & Layoutのほかのモーション
- A
- B
- C
クリックしてください
Accordion Expand-Collapse (アコーディオン開閉)
別名 Collapse, Disclosure, Expandable section
ヘッダーを切り替えると、コンテンツのパネルがなめらかに全体の高さまで広がるか、ゼロまで縮みます。
使いどころ
FAQ、設定のグループ、サイドバーのツリー
[適用する場所]にアコーディオン開閉(Accordion Expand-Collapse)の効果を追加してください。コラプス(collapse)、ディスクロージャー(disclosure)とも呼ばれます。
ヘッダーを押すとパネルが中身の高さいっぱいまでなめらかに広がり、もう一度押すと完全に閉じるようにし、ヘッダーの矢印もそれに合わせて回転させてください。素早くなめらかに、弾みはなしです。
固定の推定値ではなく中身の実際の高さまでアニメーションさせ、ヘッダーは開閉状態を伝える本物のボタンにして、キーボードでも操作できるようにしてください。A
Backdrop Scrim Fade (バックドロップスクリムフェード)
別名 Overlay fade, Scrim
オーバーレイの背後に半透明の暗いレイヤーがフェードインし、ページを暗くします。
使いどころ
モーダル、ドロワー、シートの背後
[適用する場所]にバックドロップスクリムフェード(Backdrop Scrim Fade)を追加してください。オーバーレイフェード(overlay fade)、スクリム(scrim)とも呼ばれます。
オーバーレイが開くと、背後のページの上に半透明の暗いレイヤーがやわらかくフェードインし、オーバーレイ本体より少しゆっくり現れて、閉じるとまたフェードアウトするようにしてください。
ライトテーマでもダークテーマでもスクリムは暗いままにし、表示中は背後のページがスクロールしたりクリックを受けたりしないようにしてください。