ゲージメーター
スピードメーター風の半円ゲージ。針が0から目標値までアニメで動き、中央に数値がカウントアップで表示される。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- スコア・稼働率など 0〜100 の単一値
- 速度計の比喩が自然な指標
- ヒーロー的に 1 つの数字を見せる画面
- 避ける場面
- しきい値や範囲の意味が無い値（数字だけで足りる）
- 複数値の比較
- 構成要素
- 目盛りラベル
- トラック弧
- 塗り弧
- 針と中心円
- 中央の数値
- 再生ボタン
- 持っている状態
- 通常
- ホバー
- キーボード
Tab で再生ボタンへ、Enter／Space で再生
- 支援技術
svg は role=meter＋aria-label「スコア」＋aria-valuenow／min／max（目標値を即時に持つ）。中央の数値は aria-hidden の見た目用。reduced-motion で弧・針・カウントを止め最終値を即表示
- 動き
針の回転と弧の伸長が 1.3s ease-out で同期し、数値もカウントアップ。目標値へ到達する過程を示す
デザインの要点
- 針の回転と弧の伸長を同じ 1.3s・同じイージングにする。片方が先に着くと針が弧の先端から外れて見える
- 針の transform-origin は中心円の座標（100,105）に固定する。既定の要素中心だと針が滑る
- 目盛りは 0・50・100 の 3 つだけ。viewBox に余白を持たせ、両端と頂点の文字が見切れないようにする
- 再生時は transition:none でリセット→2 段 rAF で再開する。同フレームで戻して進めると遷移が起きない
コード（コピーして使えます）
<div class="gm-wrap">
<svg class="gm-svg" viewBox="-20 -14 240 148" role="meter" aria-label="スコア" aria-valuemin="0" aria-valuemax="100" aria-valuenow="76" aria-valuetext="76pt">
<!-- 目盛りラベル(viewBoxに余白を持たせ、両端と頂点が見切れないように配置) -->
<text class="gm-tick-lbl" x="4" y="128" text-anchor="middle">0</text>
<text class="gm-tick-lbl" x="100" y="4" text-anchor="middle">50</text>
<text class="gm-tick-lbl" x="196" y="128" text-anchor="middle">100</text>
<!-- トラック(背面弧) -->
<path class="gm-track" d="M 20 105 A 80 80 0 0 1 180 105"/>
<!-- 塗り弧 -->
<path class="gm-fill" d="M 20 105 A 80 80 0 0 1 180 105"/>
<!-- 針 -->
<line class="gm-needle" x1="100" y1="105" x2="100" y2="35"/>
<!-- 中心円 -->
<circle cx="100" cy="105" r="6" fill="#2b50c7"/>
<circle cx="100" cy="105" r="3" fill="#fbf6ec"/>
</svg>
<div class="gm-center" aria-hidden="true">
<span class="gm-val">0</span><span class="gm-unit">pt</span>
</div>
<div class="gm-footer">
<button class="gm-btn" type="button" aria-label="アニメーションを再生">再生</button>
</div>
</div>