差分の桁だけ回る数字
桁ごとに 0〜9 を縦に並べた帯をずらして表示する数字スロット。値を更新すると変わった桁だけが回り、変わらない桁は静止するので、どこが動いたかが一目で分かる。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- KPI・処理件数などライブ更新される数値
- どの桁が変わったかを読ませたい表示
- 繰り上がりを見せたいカウンター
- 避ける場面
- 価格・残高など正確な値を即読ませる数字
- 毎秒何度も更新される値（回りっぱなし）
- 構成要素
- キャプション
- 桁ごとの帯
- カンマ
- 回った桁数の文
- 加算ボタン
- 持っている状態
- 通常
- フォーカス
- キーボード
Tab で +1／+10／+1,000／ランダム へ、Enter／Space で値を更新する
- 支援技術
桁の帯は aria-hidden、値は sr-only の aria-live=polite＋aria-atomic に桁区切りで書き込み通知。回った桁数を文で併記し、変化桁は色＋動きで示す。reduced-motion で即時
- 動き
変わった桁だけ帯を translateY 600ms ease-out(.16,1,.3,1)。上位桁ほど 40ms ずつ遅らせ、繰り上がりが右から左へ伝わる
原則認知負荷
デザインの要点
- 全桁を回すと「数字が変わった」しか伝わらない。変わった桁だけ回すと「どの桁がどれだけ変わったか」が読める
- 上位桁ほど遅く（+40ms ずつ）止めると、繰り上がりが右から左へ伝わって見える。全桁同時だと機械の表示板になる
- 帯は translateY で動かし、font-variant-numeric: tabular-nums で桁幅を固定する。幅が揺れると隣の桁まで動いて見える
コード（コピーして使えます）
<div class="ns-wrap">
<div class="ns-card">
<p class="ns-cap">本日の処理件数</p>
<!-- 帯（0〜9 の連なり）は読ませず、値は sr-only の live 領域で通知する -->
<div class="ns-num" id="nsNum" aria-hidden="true"></div>
<span class="ns-sr" id="nsSr" aria-live="polite" aria-atomic="true"></span>
<p class="ns-read" id="nsRead">回った桁: —</p>
</div>
<div class="ns-bar">
<button class="ns-btn" type="button" data-add="1">+1</button>
<button class="ns-btn" type="button" data-add="10">+10</button>
<button class="ns-btn" type="button" data-add="1000">+1,000</button>
<button class="ns-btn ns-btn--ghost" type="button" data-add="random">ランダム</button>
</div>
</div>