Component & Layout

ヘッダーを切り替えると、コンテンツのパネルがなめらかに全体の高さまで広がるか、ゼロまで縮みます。

[適用する場所]にアコーディオン開閉(Accordion Expand-Collapse)の効果を追加してください。コラプス(collapse)、ディスクロージャー(disclosure)とも呼ばれます。
ヘッダーを押すとパネルが中身の高さいっぱいまでなめらかに広がり、もう一度押すと完全に閉じるようにし、ヘッダーの矢印もそれに合わせて回転させてください。素早くなめらかに、弾みはなしです。
固定の推定値ではなく中身の実際の高さまでアニメーションさせ、ヘッダーは開閉状態を伝える本物のボタンにして、キーボードでも操作できるようにしてください。

オーバーレイの背後に半透明の暗いレイヤーがフェードインし、ページを暗くします。

[適用する場所]にバックドロップスクリムフェード(Backdrop Scrim Fade)を追加してください。オーバーレイフェード(overlay fade)、スクリム(scrim)とも呼ばれます。
オーバーレイが開くと、背後のページの上に半透明の暗いレイヤーがやわらかくフェードインし、オーバーレイ本体より少しゆっくり現れて、閉じるとまたフェードアウトするようにしてください。
ライトテーマでもダークテーマでもスクリムは暗いままにし、表示中は背後のページがスクロールしたりクリックを受けたりしないようにしてください。

パネルが下端からスライドして現れます。ドラッグでき、決まった高さに吸着することもよくあります。

[適用する場所]にボトムシートスライドアップ(Bottom Sheet Slide-Up)を追加してください。ボトムドロワー(bottom drawer)、シート(sheet)とも呼ばれます。
背後のページが暗くなると同時に、パネルが下端からスライドして上がり、なめらかに減速して弾まずに所定の位置に収まるようにしてください。
シートを開くたびに一度だけ再生し、閉じるときは下へスライドして戻し、開いている間はキーボードフォーカスをシートの中に保ってください。

スライドは位置を変えず、横に動く代わりに互いに溶け合うように切り替わります。

[適用する場所]にカルーセルクロスフェード(Carousel Crossfade)を追加してください。フェードスライドショー(fade slideshow)、カルーセルフェード(carousel fade)とも呼ばれます。
スライドは位置を変えずにゆっくり溶け合うように切り替え、前のスライドがフェードアウトすると同時に次がフェードインし、数秒止まってから次の切り替えに移るようにしてください。
最後から最初のスライドへ途切れなくループさせ、マウスを乗せたときやフォーカス時は一時停止し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は自動で進めないでください。

スライドが表示枠の中を横に移動し、1枚ずつぴたりと位置に収まります。

[適用する場所]にカルーセルスライド(Carousel Slide)を追加してください。スライダー(slider)、スワイプカルーセル(swipe carousel)とも呼ばれます。
1ステップごとに列を横にスライドさせ、次のスライドが中央にぴたりと収まるようにしてください。なめらかに減速し、両端には隣のスライドが少しのぞき、位置を示すドットも一緒に動きます。
1枚ずつ移動させ、ボタンと矢印キーに加えてタッチのスワイプにも対応し、操作ボタンにはスクリーンリーダー用のラベルを付けてください。

カードが詳細画面いっぱいまで広がり、一つの見えるコンテナが形を変えながら新しい内容を見せます。

[適用する場所]にコンテナトランスフォーム(Container Transform)のトランジションを追加してください。カードから詳細への展開(card expand to detail)、エクスパンダブルカード(expandable card)とも呼ばれます。
カードを開くと同じコンテナが詳細画面いっぱいまでなめらかに広がり、元の内容はすばやくフェードアウトし、広がりきる直前に新しい内容がフェードインするようにしてください。閉じるときは逆再生です。
別々の二つの箱をクロスフェードするのではなく一つの連続したコンテナとして見せ、開いたら詳細画面にフォーカスを移してください。

項目をドラッグすると、ほかの項目がすっとよけて新しい順番に落ち着きます。

[適用する場所]にドラッグ並べ替えリスト(Drag-to-Reorder List)を追加してください。ソータブルリスト(sortable list)とも呼ばれます。
ドラッグ中の項目はポインターに直接付いて少し浮き上がり、ほかの項目はなめらかにスライドしてよけるようにしてください。離したら最寄りの位置にすばやく収まります。
マウスだけでなくタッチにも対応し、キーボードで項目を移動できる方法も用意して、新しい位置をスクリーンリーダーに読み上げさせてください。

サイドパネルが左・右・上の端からスライドして入り、コンテンツを押し出すか上に重なります。

[適用する場所]にドロワースライド(Drawer Slide)を追加してください。オフキャンバス(off-canvas)、サイドシート(side sheet)とも呼ばれます。
背後のページが暗くなると同時に、パネルが横の端からコンテンツの上にスライドして入り、すばやくなめらかに減速するようにしてください。閉じるときは同じ動きで出ていきます。
開いている間はキーボードフォーカスをドロワーの中に保ち、Escapeキーや暗くなった部分のクリックで閉じられるようにし、閉じたら開いたボタンにフォーカスを戻してください。

レイアウトが変わったあと、要素が新しい位置と大きさへなめらかに移動します。

[適用する場所]にFLIPレイアウトアニメーション(FLIP Layout Animation)を追加してください。レイアウトアニメーション(layout animation)、First-Last-Invert-Playとも呼ばれます。
レイアウトが変わったら、各要素がぱっと飛ぶのではなく元の位置から新しい位置へすべるように移動し、最初は速く、最後はやさしく収まるようにしてください。
毎フレームでレイアウトの再計算が起きないよう transform だけでアニメーションし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに新しいレイアウトに切り替えてください。

項目は追加されるとフェードしながらスライドして入り、削除されるとアニメーションで消え、隣の項目がすき間を詰めます。

[適用する場所]にリストアイテムエンター/イグジット(List Item Enter/Exit)のアニメーションを追加してください。アニメーテッドリスト(animated list)とも呼ばれます。
新しい項目はまず自分の場所を空けてから、フェードしながらスライドして入るようにしてください。削除する項目はまずフェードアウトしてから縮み、隣の項目がなめらかにすき間を詰めます。
削除する項目は退場が終わるまでその場に残し、項目の追加や削除でリストががたつかないようにしてください。

1行のコンテンツが途切れることなく横方向に無限ループで流れ続けます。

[適用する場所]にマーキー(Marquee)を追加してください。横方向に無限に流れる帯で、ティッカー(ticker)とも呼ばれます。
コンテンツが右から左へゆっくり一定の速度で流れ、つなぎ目が見えないように途切れなくループさせてください。
マウスを乗せたら止まり、モーションを減らす設定(prefers-reduced-motion)の場合は動かないようにしてください。

絞り込みや並べ替えをすると、グリッドのタイルが並び替わったり、フェードアウトしたり、新しい位置へスライドしたりします。

[適用する場所]にメイソンリー/グリッドシャッフル(Masonry / Grid Shuffle)の効果を追加してください。フィルタリング可能なグリッドアニメーション(filterable grid animation)とも呼ばれます。
絞り込みをかけると、条件に合わなくなったタイルはその場で縮みながらフェードアウトし、残ったタイルは新しい位置へなめらかにスライドするようにしてください。絞り込みを解除すると逆再生です。
グリッドの高さが変わる間も周りのページががたつかないようにし、フィルターの操作部分はどれが選択中かを伝える本物のボタンにしてください。

暗くなったページの上で、ダイアログが中心から少し拡大しながらフェードインします。

[適用する場所]にモーダルスケールフェードイン(Modal Scale-Fade In)のアニメーションを追加してください。ダイアログオープンアニメーション(dialog open animation)、ズームフェードダイアログ(zoom-fade dialog)とも呼ばれます。
背後のページが暗くなるのに合わせて、ダイアログが中心から少し拡大しながらフェードインするようにしてください。素早く控えめに、弾みはなしです。
ダイアログを開くたびに一度だけ再生し、フォーカスをダイアログに移してその中に保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は単純なフェードだけにしてください。

フローティングメニューが、トリガーのある位置から拡大しながらフェードインします。

[適用する場所]にポップオーバー/ドロップダウンオープン(Popover / Dropdown Open)のアニメーションを追加してください。メニューポップ(menu pop)、ドロップダウンスケールフェード(dropdown scale-fade)とも呼ばれます。
メニューはトリガー横の角から少し拡大しながらフェードインし、素早くキレよく開いて、閉じるときは少し速めにフェードアウトさせてください。
トリガーに固定したまま表示し、Escape キーや外側のクリックで閉じられるようにして、開いている状態をトリガー側でスクリーンリーダーに伝えてください。

要素が、別の位置にある対応する要素へ移動しながらサイズを変え、同じ1つの要素のように見えます。

[適用する場所]にシェアードレイアウトアニメーション(Shared Layout Animation)を追加してください。ページ内の共有要素(in-page shared element)とも呼ばれます。
選択が変わったら、要素が元の位置から新しい位置へなめらかに移動しながらサイズを変え、やわらかく収まるようにして、2つではなく1つの物に見えるようにしてください。
同時に表示するのは常に1つだけにし、移動中に周りのレイアウトがずれないようにしてください。

下線やピル型の背景が、前のタブから新しく選んだタブへすべるように移動します。

[適用する場所]にタブインジケータースライド(Tab Indicator Slide)を追加してください。スライディングアンダーライン(sliding underline)、アクティブタブインジケーター(active tab indicator)とも呼ばれます。
新しいタブを選んだら、下線が前のタブから新しいタブへ素早く、なめらかに減速しながらすべり、幅が違う場合は新しいタブの幅に合わせて伸び縮みするようにしてください。
矢印キーで操作できる正しいタブのセマンティクスを保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすべらせずにインジケーターを移してください。

短いメッセージが画面の端からスライドまたはフェードで現れ、しばらく表示されてから消えます。重なったトーストは場所を空けるようにずれます。

[適用する場所]にトーストスライドイン(Toast Slide-In)を追加してください。スナックバー(snackbar)、トースト通知(toast notification)とも呼ばれます。
各メッセージは画面の端からスライドアップしながらフェードインし、なめらかに減速させてください。新しいトーストが来たら、表示中のものがなめらかにずれて場所を空けるようにしてください。
フォーカスを奪わずにスクリーンリーダーへメッセージを伝え、読めるだけの時間表示し、ホバーやフォーカス中は自動で閉じるのを一時停止してください。

少しホバーしたあと、小さなラベルが要素の横に少しずれながらフェードインします。

[適用する場所]にツールチップフェード(Tooltip Fade)を追加してください。ツールチップリビール(tooltip reveal)とも呼ばれます。
少しホバーしたあと、ラベルが要素の横に少しずれながらフェードインし、ポインターが離れたら待たずにすぐ消えるようにしてください。
キーボードフォーカスでも表示し、Escape キーで閉じられるようにして、スクリーンリーダーが読み上げられるよう要素と関連付けてください。