Bar Chart Race (バーチャートレース)
別名 Racing Bar Chart
値の変化に合わせて、横棒の順位が時間とともに入れ替わります。
使いどころ
時系列データのストーリーテリング
バリエーション
- ranked with labels
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にバーチャートレース(Bar Chart Race)を追加してください。レーシングバーチャート(racing bar chart)とも呼ばれます。
時間とともに値が変わるにつれて横棒が伸び縮みし、順位が変わるたびに滑らかにすれ違うようにして、各バーのラベルは付いたままにしてください。
入れ替わりが飛ばずに滑るよう、マークアップを並べ替えるのではなくtransformでバーを動かし、ユーザーが一時停止できるようにしてください。似ているモーション
Bar Chart Grow (バーチャートグロウ)
別名 Animated Bar Chart, Bar Chart Entrance
棒が高さゼロからデータの値まで伸び上がります。
使いどころ
ダッシュボード、レポート
[適用する場所]にバーチャートグロウ(Bar Chart Grow)アニメーションを追加してください。アニメーテッドバーチャート(animated bar chart)、バーチャートエントランス(bar chart entrance)とも呼ばれます。
各バーが基準線から値まで素早く時間差をつけて順番に伸び、落ち着くときに滑らかに減速するようにしてください。
グラフが画面に入ったときに一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は完成したグラフをすぐに表示してください。Chart Data Transition (チャートデータトランジション)
別名 Chart Update Animation
データが変わったりデータセットを切り替えたりすると、グラフの要素が古い値から新しい値へ滑らかに補間されます。
使いどころ
リアルタイムのダッシュボード
[適用する場所]にチャートデータトランジション(Chart Data Transition)を追加してください。チャートアップデートアニメーション(chart update animation)とも呼ばれます。
データが変わったら、ゼロから描き直すのではなく、すべてのバーが古い値から新しい値へ同時に、滑らかに落ち着いたペースで移るようにしてください。
素早く2回目の変更が来ても飛ばないよう各更新は画面上の現在の値から始め、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は新しい値を即座に反映してください。- A
- B
- C
- D
- E
- F
クリックしてください
FLIP Layout Animation (FLIPレイアウトアニメーション)
別名 Layout animation, First-Last-Invert-Play
レイアウトが変わったあと、要素が新しい位置と大きさへなめらかに移動します。
使いどころ
絞り込みで変わるグリッド、並びが変わるリスト
[適用する場所]にFLIPレイアウトアニメーション(FLIP Layout Animation)を追加してください。レイアウトアニメーション(layout animation)、First-Last-Invert-Playとも呼ばれます。
レイアウトが変わったら、各要素がぱっと飛ぶのではなく元の位置から新しい位置へすべるように移動し、最初は速く、最後はやさしく収まるようにしてください。
毎フレームでレイアウトの再計算が起きないよう transform だけでアニメーションし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに新しいレイアウトに切り替えてください。Data & Numbersのほかのモーション
Donut Chart Fill (ドーナツチャートフィル)
別名 Pie Chart Sweep, Animated Donut Chart, Radial Chart Draw
リングや円グラフが時計回りにパーセンテージまで塗りつぶされます。
使いどころ
構成比の内訳
[適用する場所]にドーナツチャートフィル(Donut Chart Fill)アニメーションを追加してください。パイチャートスイープ(pie chart sweep)、アニメーテッドドーナツチャート(animated donut chart)とも呼ばれます。
上端から始めて、各セグメントが順番に時計回りに広がり、リングがそれぞれの割合を示すまで進み、終わりに滑らかに減速するようにしてください。
グラフが画面に入ったときに一度だけ再生し、実際の値はスクリーンリーダー向けにテキストとして読めるようにしてください。- %
Number Ticker (カウントアップ)
別名 Count Up, Animated Counter, Number Counter, countUp
数字が見えた時点で、開始値から目標値までカウントします。
使いどころ
統計、KPIブロック
[適用する場所]にカウントアップ(Number Ticker)を追加してください。カウントアップ(count up)、アニメーテッドカウンター(animated counter)とも呼ばれます。
数字が画面に入ったら、ゼロから目標値までカウントし、最初は速く、着地にかけて穏やかに減速するようにしてください。
周りががたつかないよう等幅の数字を使い、カウントは一度だけにし、スクリーンリーダーとモーションを減らす設定(prefers-reduced-motion)のユーザーには最終値をすぐに示してください。