1 つの値を、決められた範囲の中のどこにあるかとして示す半円のチャートです。スコア、稼働率、容量の使用量のように、その値が良いのか悪いのかをひと目で決めさせたいときに使います。
この記事を読むと、ゲージを選んでよい条件、範囲の両端をどう決めるか、しきい値の帯の設計、良否を色だけで伝えない書き方が自分でできるようになります。
1. UI例（Preview / Live）
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
ゲージチャートは、1 つの値を最小値から最大値までの範囲に置き、半円の弧の長さで位置を示すチャートです。自動車の速度計と同じ読み方で、「いまどのあたりにいるか」を面で伝えます。
進捗バーとの違い：進捗バーは「作業が終わるまでの残り」を示します。ゲージは終わりに向かうものでなくてよく、上がったり下がったりする値（使用率、スコア、負荷）を扱えます。
ドーナツチャートとの違い：ドーナツは複数の区分の構成比を示します。ゲージは 1 つの値だけを扱います。区分が 1 つのドーナツを作りたくなったら、それはゲージです。
数字だけとの違い：ゲージは面積を大きく使います。その面積が払えるのは、範囲の中での位置に意味があるときだけです。位置に意味が無いなら、数字を大きく出すほうが速く読めます。
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- 上限が現実に対応する：CPU（演算装置）の使用率、ディスク容量（0 から契約容量）、座席の稼働率
- 良否の判定を伴う：「注意」「危険」の帯があり、いまどの帯にいるかを知らせたい
- 1 つの値を目立たせたい：ダッシュボードの最上段で、最初に見てほしい指標
- 範囲の両端に説明がつく：最小値と最大値が何を意味するか、1 行で書ける
3.2 When NOT to use
- 上限に根拠が無い：受注件数、売上金額のように、上限を決める理由が無いもの
- 複数の値を比べたい：ゲージを並べても、位置の比較は棒グラフに勝てません
- 推移を見せたい：ゲージは 1 時点の値だけを示します。折れ線かスパークラインを使います
- 画面が狭い：ゲージは面積を使います。カードが小さいなら数字とスパークラインで足ります
3.3 代替UI（Alternatives）
- 作業の進捗 : Progress Bar（プログレスバー）
- 複数の値の比較 : Bar Chart（棒グラフ）
- 値の推移 : Sparkline Chart（スパークライン）, Line Chart（折れ線グラフ）
- 構成比 : Donut Chart（ドーナツチャート）
- 状態の一言表示 : Badge（バッジ）
4. 設計判断の核（Decision Principles）
ゲージの核は「範囲の両端に、現実の意味があるか」。上限を説明できないゲージは、読者に根拠の無い基準で良し悪しを判断させることになる。
判断の優先順位：1. 範囲の両端に意味があるか、2. しきい値の帯の設計、3. 良否を色以外でも示す、4. ゲージが要るか。
- 上限を 1 行で説明できるか確かめる：CPU 使用率なら「これ以上は物理的に無い」、容量なら「契約している上限」と言えます。受注件数を 0 から 100 のゲージにすると、100 という数字に根拠が無いまま「42 は半分にも届かない」という印象だけが残ります。上限を説明できないなら、ゲージではなく数字と前期比を出します。
- しきい値の帯は、境目の数字を出す：「注意」「危険」の帯を色で塗るだけでは、境目がどこだったのか読者に分かりません。目盛りの数字（60、85）を出し、いまの判定を文字でも書きます。上のデモで「色だけ」に切り替えると、針がどの帯にあるかも境目が何だったかも読めなくなります。
- 良否を色だけに載せない：ゲージは色で良否を伝えたくなる図の代表です。GUNJO（群青）は UIXHERO が作っているデザインシステムです。その
GaugeChartのcolorはwarningやdestructiveを受け取れますが、色が変わるだけでは、色を区別しにくい読者に判定が届きません。判定の語（正常、注意、危険）を文字で添え、帯には破線の密度差のような模様も足します。これはAI が作ったUIの失敗 29 件の 28 番目「状態の違いが、色だけに乗る」と同じ崩れ方です。 minが 0 でないときは、両端の数字を出す：GaugeChartはminとmaxで正規化します。minを 40 にすると、40 の値が「空のゲージ」に見えます。範囲を絞ること自体は妥当でも、両端の数字が出ていないと、読者は 0 から始まっていると誤解します。- その面積を払う価値があるか考える：ゲージは半円ぶんの面積を使います。同じ場所に、数字とスパークラインを置けば「いまの値」と「ここ 30 日の動き」の 2 つが入ります。範囲の中での位置に意味が無いなら、そちらのほうが読者の得るものが多くなります。
5. 状態設計（States）
5.1 必須状態（Required）
- データあり：弧、値、範囲の両端がそろっている
- データなし：値が取れていない。空のゲージを 0 として見せない
- 読み込み中：ゲージの高さを確保する
5.2 条件付き状態（Conditional）
- 範囲外：上限を超えた、または下限を下回った。弧を振り切らせるのではなく、超過であることを書く
- 判定の切り替わり：正常から注意へ移った。色だけでなく、判定の語も変える
- ホバー / フォーカス：範囲の両端と、いまの判定を出す
- エラー：取得に失敗した。前回の値を残したまま最新のように見せない
5.3 State Gallery
| 状態 | 必須 | 何を伝えるか |
|---|---|---|
| データあり | 必須 | いまの値と、範囲の中での位置 |
| データなし | 必須 | 値が取れていない（0 ではない） |
| 読み込み中 | 必須 | 取得中であること |
| 範囲外 | 条件付き | 上限を超えている、または下限を下回っている |
| 判定の切り替わり | 条件付き | 正常から注意、注意から危険へ移った |
| ホバー / フォーカス | 条件付き | 範囲の両端と、いまの判定 |
| エラー | 条件付き | 取得に失敗した。数字は信用できない |
6. バリエーション設計（Variants）
大きさと、範囲と色の指定で決まります。
| バリアント | GUNJO の指定 | 典型的な用途 |
|---|---|---|
| 標準 | variant="default"（既定） | ダッシュボードの主要指標 |
| コンパクト | variant="compact" | サイドパネルや小さなカード |
| 容量レンジ | max を実体に合わせる | 「420 / 500ギガバイト」のような使用量 |
| 最小値あり | min を 0 以外にする | 40 から 100 のスコアなど |
| 注意 | color="warning" | 注意の帯に入っている |
| 危険 | color="destructive" | 危険の帯に入っている |
禁止パターン：min を 0 以外にしたうえで、両端の数字を出さないこと。読者は 0 から始まっていると読み、実際より低い値だと受け取ります。
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- 上限に根拠が無い：切りのよい 100 を勝手に上限にして、値の印象だけを作ってしまいます
- 判定が色だけ：色を見分けにくい読者に、正常か危険かが届きません
- 範囲の両端が書かれていない：
minが 0 でないときに、読者が位置を誤解します
7.1 Bad（典型3つ）
- 「今月の受注 42 件」を 0 から 100 のゲージにしている。100 に根拠が無い
- 危険域を赤で塗るだけで、境目の数字も判定の語も出していない
min={40}max={100}のゲージで、目盛りが 1 つも出ていない
7.2 Good（対になる3つ）
- 受注件数は数字で大きく出し、前月比と目標との差を添える
- 帯の境目（60、85）を目盛りとして出し、いまの判定を「注意」と文字で書く
- 弧の両端に 40 と 100 を出し、いまの値が範囲のどこかを読めるようにする
7.3 How to fix（手順）
- 上限を 1 行で説明してみる。説明できないなら、ゲージをやめて数字と前期比にする
- しきい値の帯があるなら、境目の数字を目盛りとして出す
- いまの判定を文字で書く（正常、注意、危険）。色は補助にする
minが 0 でないなら、弧の両端に数字を出すrole="meter"とaria-valuenow/aria-valuemin/aria-valuemax/aria-valuetextを付ける
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
チャートは「色だけで系列を区別する」が起きやすいコンポーネントです。ゲージは判定を色に載せがちなので、とくに注意が要ります。次の 3 点を満たします。
9.1 色だけに頼らない
- 判定の語：「正常」「注意」「危険」を文字で書く。これが最も確実です
- 目盛り：帯の境目の数字を出す。境目が数字で読めれば、色は補助で足ります
- 模様：帯に破線の密度差や斜線を足す
- 針の位置：針や弧の長さそのものが、色を使わない手がかりになります
弧と背景のコントラスト比は 3:1 以上を確保します。薄い黄色の「注意」帯は、明るい画面では背景に溶けます。
9.2 代替テキストか表での提示
ゲージは値が 1 つなので、role="img" より role="meter" が適します。値の意味をそのまま読み上げに渡せます。
<div class="gauge">
<div
role="meter"
aria-labelledby="gauge-label"
aria-valuenow="73"
aria-valuemin="0"
aria-valuemax="100"
aria-valuetext="73パーセント。判定は注意（60以上85未満）。"
>
<svg aria-hidden="true"><!-- 弧・針・帯の描画 --></svg>
</div>
<p id="gauge-label">CPU 使用率</p>
<p class="gauge__judgement"><strong>注意</strong>（正常は60未満、危険は85以上）</p>
</div>
aria-valuetext に判定を入れると、読み上げは「73パーセント。判定は注意」と伝えます。数字だけでは良否が分からないため、この 1 行が効きます。<svg> は aria-hidden="true" にして、二重に読まれないようにします。
role="meter" に対応していない読み上げソフトもあります。判定を本文の要素としても置いておけば、どちらでも情報が届きます。
9.3 キーボードで値をたどれる
ゲージが表示だけなら、フォーカス可能にしません。止まるだけの要素を増やさないためです。
操作できる場合（しきい値を変えるなど）は、次をそろえます。
Tabでフォーカスでき、フォーカスリングが見えるArrowUpとArrowDownで値が変わる。HomeとEndで両端へ移動する- 値が変わるたびに
aria-valuenowとaria-valuetextを更新する - 操作できるなら
role="meter"ではなくrole="slider"を使います。meterは読み取り専用の意味を持ちます
9.4 Touch / Pointer
ゲージが詳細画面への入口になっている場合は、弧ではなくカード全体を当たり判定にします。弧の線は細く、指では狙えません。
10. 実装メモ（Implementation Notes）
- GUNJO の
GaugeChartはvalueとmin/maxで正規化します。labelは値の下の補足、valueLabelはゲージ内に出す表示値です formatValueは関数を渡す prop のため、クライアントコンポーネントからのみ渡せます。サーバーコンポーネントからはvalueFormatを使いますrangeLabelは、読み上げとツールチップで範囲の前に出るラベルです。既定は英語なので、日本語の画面では指定し直しますcolorは弧の色を変えるだけです。判定を伝えるには、labelや周辺のテキストに判定の語を入れます- 実装は GUNJO の GaugeChart（gunjo.jp を新しいタブで開く） にあります。標準、コンパクト、容量レンジ、最小値あり、警告色、高リスクの見本が置かれています
11. 関連リンク
- 関連するUIデザイン原則: 色に依存しない設計 (Color Independence), システム状態の可視性 (Visibility of System Status), 観測性と指標 (Observability & Metrics)
- 用語集（定義）: 見える化 (Visual Management), カラーユニバーサルデザイン (Color Universal Design)
- 関連するUIコンポーネント（横）: Progress Bar（プログレスバー）, Donut Chart（ドーナツチャート）, Status Bar（ステータスバー）
12. まとめ
ゲージチャートの設計でいちばん効くのは、範囲の両端を説明できるか確かめることです。迷ったら 4. 設計判断の核 に戻り、「上限を 1 行で説明できるか」「境目の数字が出ているか」「判定が文字でも読めるか」の 3 点を確かめてください。
上限に根拠が無いゲージは、読者に勝手な基準で良し悪しを判断させます。範囲の中での位置に意味が無い指標なら、半円ぶんの面積は数字とスパークラインに使ったほうが、伝わる情報が増えます。
