カウントダウンタイマー
Countdown timer
別名: カウントダウンタイマー、残り時間表示、Countdown timer、Countdown clock
生態（さわってみる）
「+30秒」を押すと締切を延長できます（デモ用の操作です）。毎秒の値更新を逐一読み上げるとノイズになるためaria-live="off"にし、残り1分・10秒・終了などの節目だけ別領域で通知します。
05:00
終了しました
一言定義
セール終了や予約締切など、特定の期限までの残り時間を刻々と減っていく数値で表示するUI。
分類
使う場面
- セールの終了時刻や予約の締切など、実在する明確な期限をユーザーに伝えたいとき
- 期限切れ後に表示や導線を自動的に切り替えたいとき（在庫確認・再入荷通知への誘導など）
避ける場面
- 実際には存在しない、または裏側で頻繁にリセットされる演出上の期限（誠実性を欠く「偽の緊急性」になる）
- 処理の進捗（あとどれだけで完了するか）を示したいだけのとき（→プログレスバー）
近縁種との比較
カウントダウンタイマーは「あと何秒・何分」という残り時間を表示する点でプログレスバーと近縁だが、プログレスバーが処理の完了度合い（0〜100%の割合）を示すのに対し、カウントダウンタイマーは実時刻に紐づく期限までの残量を示すという対象の違いがある。バナー通知とは、どちらもEC・LPで持続的に表示され続ける点が似ているが、バナー通知が状態や注意喚起を静的に伝えるのに対し、カウントダウンタイマーは値そのものが毎秒更新され続ける動的表示である点で異なる。なお、期限訴求は「希少性」を用いた説得的デザインの一種としてしばしば語られるが、ソーシャルプルーフなど他の説得パターン全般の是非は本図鑑の収録範囲外であり、ここでは実在する期限を正確に表示するための表示部品としての側面のみを扱う。
実例リンク
アクセシビリティ
- role
- role="timer"を付け、aria-live="off"にする（毎秒の値更新をスクリーンリーダーに逐一読み上げさせると妨げになるため）。残り1分・終了などの節目だけ別途aria-live="polite"の領域で通知する
- キーボード操作
- 通常は操作を伴わない表示専用要素。期限日時は<time datetime>等でも機械可読に表しておくと扱いやすい
- 補足
- 「希少性演出」自体の是非（ソーシャルプルーフ等の説得的パターン全般の倫理）は本図鑑の収録スコープ外として扱う。カウントダウンタイマーは実在する期限を機械的に表示するUI部品としてのみ収録し、期限を偽装する行為そのものの是非判断はここでは行わない