Odometer (オドメーター)
別名 Rolling Numbers, Animated Number, AnimateNumber, Slot-Machine Digits
数値が変わると、各桁が縦に回転して新しい値になります。
使いどころ
リアルタイムカウンター、価格表示
バリエーション
- digit roll
- slide with fade
- themed odometer
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にオドメーター(Odometer)の数字アニメーションを追加してください。ローリングナンバー(rolling numbers)、スロットマシン数字(slot-machine digits)とも呼ばれます。
値が変わったら、各桁が常に前方向へ縦に回転して新しい数字になり、桁ごとに少し時間差をつけ、最後に小さく落ち着くようにしてください。
数値全体がずれないようすべての桁を同じ幅にし、スクリーンリーダーには最終値だけを伝えてください。似ているモーション
- %
Number Ticker (カウントアップ)
別名 Count Up, Animated Counter, Number Counter, countUp
数字が見えた時点で、開始値から目標値までカウントします。
使いどころ
統計、KPIブロック
[適用する場所]にカウントアップ(Number Ticker)を追加してください。カウントアップ(count up)、アニメーテッドカウンター(animated counter)とも呼ばれます。
数字が画面に入ったら、ゼロから目標値までカウントし、最初は速く、着地にかけて穏やかに減速するようにしてください。
周りががたつかないよう等幅の数字を使い、カウントは一度だけにし、スクリーンリーダーとモーションを減らす設定(prefers-reduced-motion)のユーザーには最終値をすぐに示してください。H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
Split-Flap Text (スプリットフラップテキスト)
別名 Text Flipping Board, Flip Board, Vestaboard display
空港の発車案内板のように文字がパタパタとめくれ、目的の文字で止まります。
使いどころ
ステータスボード、レトロな表示
[適用する場所]にスプリットフラップテキスト(Split-Flap Text)のエフェクトを追加してください。テキストフリッピングボード(text flipping board)、フリップボード(flip board)とも呼ばれます。
各文字のパネルがアルファベットを素早くめくっていき目的の文字で止まり、パネルは左から右へ順番に止まっていくようにしてください。
テキストが表示されたり変わったりするたびに一度だけ実行し、スクリーンリーダーには最終的なテキストだけを読み上げさせ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はめくらずに最終テキストを表示してください。ABDEFGHIJKLDEFMN
Word Rotate (ワードローテート)
別名 Rotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
文中の一語が、スライド・フリップ・フェードでリストの次の単語に入れ替わります。
使いどころ
ヒーローのキャッチコピー
[適用する場所]にワードローテート(Word Rotate)エフェクトを追加してください。ローテーティングワード(rotating words)、フリップワード(flip words)とも呼ばれます。
行の中の一語が上へすべって消え、リストの次の単語が下から入ってくるようにし、次の切り替えの前に各単語で少し止めてください。
単語の幅が違っても行の残りが跳ねないようにし、スクリーンリーダーに毎回の切り替えを読み上げさせず、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は切り替えを止めてください。Data & Numbersのほかのモーション
Animated Map Arcs (マップアークアニメーション)
別名 World Map Animated Lines, Globe Arcs
地図や地球儀の上で、地点と地点の間を線や点が動きます。
使いどころ
グローバル展開を示すビジュアル
[適用する場所]にマップアークアニメーション(Animated Map Arcs)を追加してください。グローブアーク(globe arcs)とも呼ばれます。
ドットの地図上で地点と地点の間に曲線が一本ずつ描かれ、その後目的地へ向かって縮み、目的地では柔らかなリングが脈打つようにしてください。落ち着いて一定のリズムで。
アークが同時に動かないようタイミングをずらし、ループは継ぎ目なくし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は一時停止してください。Bar Chart Grow (バーチャートグロウ)
別名 Animated Bar Chart, Bar Chart Entrance
棒が高さゼロからデータの値まで伸び上がります。
使いどころ
ダッシュボード、レポート
[適用する場所]にバーチャートグロウ(Bar Chart Grow)アニメーションを追加してください。アニメーテッドバーチャート(animated bar chart)、バーチャートエントランス(bar chart entrance)とも呼ばれます。
各バーが基準線から値まで素早く時間差をつけて順番に伸び、落ち着くときに滑らかに減速するようにしてください。
グラフが画面に入ったときに一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は完成したグラフをすぐに表示してください。A
B
C
D
Bar Chart Race (バーチャートレース)
別名 Racing Bar Chart
値の変化に合わせて、横棒の順位が時間とともに入れ替わります。
使いどころ
時系列データのストーリーテリング
[適用する場所]にバーチャートレース(Bar Chart Race)を追加してください。レーシングバーチャート(racing bar chart)とも呼ばれます。
時間とともに値が変わるにつれて横棒が伸び縮みし、順位が変わるたびに滑らかにすれ違うようにして、各バーのラベルは付いたままにしてください。
入れ替わりが飛ばずに滑るよう、マークアップを並べ替えるのではなくtransformでバーを動かし、ユーザーが一時停止できるようにしてください。