オドメーター数字ロール
各桁が縦に回転して数字が切り替わる、スロット／走行距離計のようなカウンタ。KPIや売上の更新を“動いて”見せる、count-upの上位版。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 売上・累計など更新を印象づけたい KPI
- カウントアップより「動いた」感を出したい数字
- 桁数が固定の数値
- 避ける場面
- 桁数が変わる値・カンマや小数を含む値
- 正確な値を即座に読ませたい業務画面
- 構成要素
- カウンタ枠
- 桁の窓
- 数字の帯
- ロールボタン
- 持っている状態
- 通常
- キーボード
Tab でロールボタンへ、Enter／Space で再ロール
- 支援技術
枠は role=img で aria-label に実値（カウンタ 12,345）を持ち、更新のたびに書き換える。帯の数字は aria-hidden で読まれない。reduced-motion で帯の回転を止め即時に止まる
- 動き
各桁の帯が 900ms ease-out で縦に回って止まる。数値の更新を動きで示す
デザインの要点
- 桁ごとに 0〜9 の帯を作り translateY で目的の数字へずらす。文字を差し替えるより「回った」感が出る
- 帯の高さ（46px）と窓の高さを同じにして overflow:hidden で切る。1px ずれると隣の数字がのぞく
- 桁数は固定して 0 埋めする。桁が増減すると帯の本数が変わり、レイアウトが跳ねる
- 実値は role=img の aria-label に持たせる。帯には 0〜9 が全部並んでいるので、そのまま読ませると意味を成さない
実装メモ
桁ごとに 0〜9 を縦に並べた帯を translateY でずらしています。桁数は固定(下の桁数pad)。カンマ区切りや小数を入れる場合はDOM構築を拡張してください。タップ／クリックで再ロールします。
コード（コピーして使えます）
<div class="odo-wrap">
<div class="odo" data-value="0" role="img" aria-label="カウンタ 0"></div>
<button class="odo-btn" type="button">ロール</button>
</div>