本文へ移動

§14-05Commerce

Usage meter

契約上限に対する利用量をバーで示す。

残りの枠を事前に把握させ、上限到達の驚きを防ぐ。容量や API 回数など、超過が課金や停止につながる場面で効く。

実装のポイント

閾値(例: 75%、90%)で色を変え、色以外に数値と残量テキストも出す。各バーは role=meter か progressbar に aria-valuenow を付けて読み上げられるようにする。

特徴
  • CSS のみ
  • アクセシビリティ
デモで使っているもの
  • lucide-react

このパターンが効く目的