カウントダウンタイマー
Countdown timerセール終了や予約締切など、特定の期限までの残り時間を刻々と減っていく数値で表示するUI。
「+30秒」を押すと締切を延長できます（デモ用の操作です）。毎秒の値更新を逐一読み上げるとノイズになるためaria-live="off"にし、残り1分・10秒・終了などの節目だけ別領域で通知します。
05:00
終了しました
○ 使う場面
- セールの終了時刻や予約の締切など、実在する明確な期限をユーザーに伝えたいとき
- 期限切れ後に表示や導線を自動的に切り替えたいとき（在庫確認・再入荷通知への誘導など）
× 避ける場面
- 実際には存在しない、または裏側で頻繁にリセットされる演出上の期限（誠実性を欠く「偽の緊急性」になる）
- 処理の進捗（あとどれだけで完了するか）を示したいだけのとき（→進捗バー）
別名
カウントダウンタイマー、残り時間表示
近縁種との比較
秒数がゼロへ向かって減っていく演出は、1929年のドイツ映画『月世界の女』でロケット打ち上げ前の緊迫感を高めるために考案され、のちに実際のロケット発射でも採用されるようになったとされる、映画発の演出手法である。なお、期限訴求は「希少性」を用いた説得的デザインの一種として語られることもあるが、本図鑑では実在する期限を正確に表示するための表示部品としての側面のみを扱う。
| 近縁種 | 違い・使い分け |
|---|---|
| 進捗バー | 「あと何秒・何分」という残り時間を表示する点で近縁だが、進捗バーが処理の完了度合い（0〜100%の割合）を示すのに対し、カウントダウンタイマーは実時刻に紐づく期限までの残量を示すという対象の違いがある。 |
| バナー通知 | どちらもEC・LPで持続的に表示され続ける点が似ているが、バナー通知が状態や注意喚起を静的に伝えるのに対し、カウントダウンタイマーは値そのものが毎秒更新され続ける動的表示である点で異なる。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション