ui
Countdown timer / Urgency timer / Ending-soon countdown
01Demo触って、数値を決める
最後の1分(60s)が定番。オークションの入札のように1回の判断が短いものは60s、予約・購入のように入力が要るものは120〜300sにすると間に合う。短すぎると気付いたときには終わっている。
10sが「最後の秒読み」と読める長さ。5sを切ると赤に気付く前に終わり、20sを超えると赤い時間が長すぎて警告に慣れてしまう。
最後の1分の呼吸の速さ。1.2〜2sで落ち着いた催促になる。最後の数秒はこの半分の周期にする(1.6s→0.8s)。0.8sを切ると最初から点滅に見えて2段目との差が出ない。
明滅の深さ。0.5〜0.65で数字を読めたまま脈打つ。0.3を切ると暗い瞬間に残り秒が読めず、0.8を超えると明滅していることに気付かない。
02Prompt数値はスライダーと連動
03 Vocab この動きを構成する語彙
urgency state — 残り時間のしきい値で切り替える表示の段階。ここでは open → closing(最後の1分) → final(最後の10秒) → ended の4段。
tabular-nums — 数字を等幅にする font-variant-numeric の値。1 と 8 の幅が揃うので、秒が変わるたびに桁が左右に揺れない。
clock skew — サーバーと端末の時計のずれ。締切時刻はサーバーから受け取り、ずれを足して残り秒を計算すると端末ごとに終わる時刻がばらつかない。
role="timer" — 残り時間を表す要素だと支援技術に伝える ARIA ロール。毎秒の読み上げはしない(aria-live を付けない)のが既定。
animation-duration の差し替え — 同じ @keyframes のまま周期だけを変えて段階を表すやり方。is-final でアニメーションを付け替えず duration だけ半分にする。
04 NG → OK 伝え方の差分
NG
言い方: 「締切が近いのが分かるようにタイマーを目立たせて」
なぜNG: 「目立たせて」では、いつから・どれだけ目立たせるのかが決まらない。最初から赤く点滅し続ける時計か、残り時間に関係なく数字がぴょこぴょこ跳ねる実装が返り、2段の切迫(最後の1分＝呼吸、最後の10秒＝速く赤く)が無いので本当に急ぐべき瞬間が伝わらない。
OK
言い方: 「countdown timerで。残り60s以下でis-closing＝時計だけopacity 1→0.55→1を1.6s ease-in-out infinite、10s以下でis-final＝周期を0.8sに縮めて#e0533dに。数字は毎秒書き換えるだけでアニメしない」
なぜOK: 2つのしきい値と、それぞれで変えるもの(明滅の開始／周期と色)を値で指定した。明滅の対象を時計だけに限ったので、一覧の他の行は静かなまま締切の近い札だけが脈打つ。