複数の軸のスコアを、中心から放射状に取って多角形で結ぶチャートです。評価の 6 項目、スキルの内訳、製品の特性のように、全体としてどういう傾向かをひとまとまりの図で見せたいときに使います。
この記事を読むと、軸の順序で図が変わる理由、単位の違う軸を同じ外周に載せるときの根拠、重ねられる系列の数、面積を読ませてはいけない理由が自分でできるようになります。
1. UI例（Preview / Live）
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
レーダーチャートは、中心から放射状に伸びた複数の軸にそれぞれ値を取り、その点を線で結んで多角形にするチャートです。クモの巣グラフとも呼ばれます。読者が受け取るのは、個々の値ではなく多角形の形です。
棒グラフとの違い：棒グラフは軸を 1 本だけ持ち、値を正確に比べられます。レーダーは複数の軸を持てる代わりに、正確な比較を捨てています。中心からの距離を目で測るのは、棒の長さを比べるより難しいためです。
性質として知っておくこと：軸の並び順を変えると、同じ数字でも多角形の形と面積が変わります。上のデモで順序を入れ替えると確かめられます。だからレーダーで語ってよいのは「バランスが取れているか、偏っているか」までで、「面積が広いほど優れている」とは言えません。
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- 同じ尺度の項目が 5 つから 8 つある：100 点満点の評価軸など、単位も向きもそろっているもの
- 偏りを見せたい：どこが強くてどこが弱いか、全体の傾向をひとまとまりで伝えたいとき
- 現在と目標を重ねる：2 つの多角形の開きが、伸ばすべき方向を示します
- 軸の並びが固定されている：評価シートの項目のように、順序があらかじめ決まっているもの
3.2 When NOT to use
- 値を正確に比べたい：中心からの距離は目では測れません。棒グラフを使います
- 単位や向きが違う軸を混ぜたい：正規化の根拠を書けないなら、別々のチャートに分けます
- 軸が 4 つ以下：三角形や四角形になり、レーダーの利点が出ません。棒グラフのほうが読めます
- 軸が 9 つ以上：軸ラベルが重なり、多角形も円に近づいて差が読めなくなります
- 系列が 3 つ以上：多角形が重なり、どの線がどれか追えなくなります
3.3 代替UI（Alternatives）
- 値を正確に比べたい : Bar Chart（棒グラフ）
- 2 つの軸での位置づけ : Table（テーブル / 表）
- 単一の値の良否 : Gauge Chart（ゲージチャート）
- 項目ごとの推移 : Line Chart（折れ線グラフ）
4. 設計判断の核（Decision Principles）
レーダーの核は「軸の順序を変えると、同じ数字でも形と面積が変わる」こと。だからレーダーで語れるのは傾向までで、面積の広さを優劣として語ってはいけない。
判断の優先順位：1. 同じ尺度と向きにそろっているか、2. 軸の数と順序、3. 重ねる系列の数、4. 面積を読ませない書き方。
- すべての軸を同じ尺度、同じ向きにそろえる：100 点満点で大きいほど良い、という基準にそろえます。離脱率のように「小さいほど良い」軸を混ぜると、外周に近い多角形が良く見える図の中で、その軸だけ逆の意味になります。混ぜるなら、離脱率を「継続率」に置き換えるなど、向きをそろえてから載せます。単位が違う軸を正規化して載せるなら、何を 100 としたかを図の近くに書きます。
- 軸の順序を決めて、固定する：順序に理由が無いと、図の形に意味が無くなります。評価シートの項目順、業務の流れの順、あらかじめ合意した分類の順のいずれかで決め、同じ画面のすべてのレーダーで同じ順序を使います。上のデモで順序を入れ替えると、同じ数字が別の図に見えます。この性質があるので、順序を変えられる操作（並べ替えボタンなど）は付けないでください。
- 軸は 5 つから 8 つに収める：4 つ以下だと三角形や四角形になり、棒グラフのほうが読めます。9 つを超えるとラベルが重なり、多角形が円に近づいて差が消えます。軸が多いなら、分類してレーダーを 2 枚に分けるほうが読めます。
- 重ねる多角形は 2 つまで：GUNJO（群青）は UIXHERO が作っているデザインシステムです。その
RadarChartはseriesで複数の面を重ねられますが、3 つ以上になると線が交差して追えません。現在と目標、自社と業界平均のように、2 つの対比に絞ります。塗りの不透明度は低く保ち、後ろの多角形が透けるようにします。 - 面積を優劣として語らない。軸ごとの数字を添える：面積は軸の順序で変わるので、比較の根拠になりません。図のそばに軸ごとの値を並べた一覧を置き、「速度が 64 で最も低い」のように数字で語れる状態にします。系列の区別は、色に加えて線の種類（実線と破線）でも示します。これはAI が作ったUIの失敗 29 件の 28 番目「状態の違いが、色だけに乗る」と同じ崩れ方を防ぐ手当てです。
5. 状態設計（States）
5.1 必須状態（Required）
- データあり：多角形、軸、ラベル、軸ごとの値がそろっている
- データなし：評価が 1 つも無い。空のクモの巣だけを残さない
- 読み込み中：図の大きさを確保する
5.2 条件付き状態（Conditional）
- 一部の軸が未評価：0 として点を打たない。未評価と分かるようにする
- 全軸が同じ値：正多角形になる。「バランスが良い」のか「まだ評価が入っていない」のかを区別できるようにする
- ホバー / フォーカス：その軸の名前と値、系列ごとの差を出す
- エラー：取得に失敗した。前回の多角形を残したまま最新のように見せない
5.3 State Gallery
| 状態 | 必須 | 何を伝えるか |
|---|---|---|
| データあり | 必須 | 軸ごとのスコアと、全体の偏り |
| データなし | 必須 | 評価が入っていない理由 |
| 読み込み中 | 必須 | 取得中であること |
| 一部の軸が未評価 | 条件付き | その軸は 0 点ではなく、評価が無い |
| 全軸が同じ値 | 条件付き | 実際に均等なのか、初期値のままなのか |
| ホバー / フォーカス | 条件付き | その軸の名前と値 |
| エラー | 条件付き | 取得に失敗した。数字は信用できない |
6. バリエーション設計（Variants）
大きさ、軸ラベル、重ねる系列の組み合わせです。
| バリアント | GUNJO の指定 | 典型的な用途 |
|---|---|---|
| 標準 | variant="default"（既定） | 単独で置く評価の図。軸ラベルつき |
| コンパクト | variant="compact" | カードやサイドパネル。軸ラベルは外に置く |
| ラベルなし | showLabels={false} | 隣の一覧で軸が分かる場合のみ |
| グリッドなし | showGrid={false} | 密度の高いパネル。目盛りは別に添える |
| 2 系列 | series に 2 件 | 現在と目標、自社と平均の対比 |
禁止パターン：showLabels={false} と showGrid={false} を同時に指定して、軸も目盛りも無い多角形だけを置くこと。読者は何の図なのか判断できず、形の印象だけが残ります。
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- 向きの違う軸を混ぜる：「小さいほど良い」軸が 1 本混ざるだけで、図全体の読み方が壊れます
- 面積を優劣として語る：軸の順序で面積が変わるので、比較の根拠になりません
- 系列を 3 つ以上重ねる：線が交差して、どれがどれか追えなくなります
7.1 Bad（典型3つ）
- 売上（円）、離脱率（パーセント）、対応時間（分）を同じ外周に載せている
- 「面積が広いほど総合力が高い」と書いている。軸の順序を変えれば面積は変わる
- 4 部署の評価を 4 つの多角形として重ねている。中央が塗り重なって読めない
7.2 Good（対になる3つ）
- すべて 100 点満点の評価スコアに変換し、大きいほど良い向きにそろえる
- 面積には触れず、軸ごとの数字を隣の一覧に並べて「速度が 64 で最も低い」と書く
- 部署ごとに小さなレーダーを 4 枚並べ、それぞれ 1 系列にする
7.3 How to fix（手順）
- 軸の単位と向きを並べて書き出す。そろっていない軸は変換するか、別のチャートに分ける
- 軸の順序を決め、その理由を 1 行で書く。並べ替えできる操作は外す
- 軸を数える。4 つ以下なら棒グラフに、9 つ以上なら 2 枚に分ける
- 重ねる系列を 2 つまでに減らす。系列は線の種類でも区別する
- 軸ごとの値を並べた一覧を図のそばに置く。図には
role="img"とaria-labelを付ける
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
チャートは「色だけで系列を区別する」が起きやすいコンポーネントです。レーダーは多角形が重なるため、色の差だけでは判別できません。次の 3 点を満たします。
9.1 色だけに頼らない
- 線の種類：現在を実線、目標を破線にする。白黒印刷でも区別が残ります
- 点の記号：系列ごとに点の形を変える（丸と四角）
- 軸ごとの値の一覧：図のそばに数字を並べる。これが最も確実です
- 塗りの濃さ：塗りを薄くし、線の太さで前後を分ける
線と背景、線どうしのコントラスト比は 3:1 以上を確保します。
9.2 代替テキストか表での提示
レーダーは軸の数だけ値があるので、表との相性が良い図です。
<figure>
<svg role="img" aria-labelledby="radar-title radar-desc">
<title id="radar-title">6軸の評価スコア（2026年8月・100点満点）</title>
<desc id="radar-desc">
品質84が最も高く、リスク42が最も低い。売上48と速度64も平均を下回る。
目標との開きが最も大きいのは売上で22点。
</desc>
</svg>
<figcaption>
<table>
<caption>6軸の評価スコア（100点満点・大きいほど良い）</caption>
<thead><tr><th scope="col">軸</th><th scope="col">現在</th><th scope="col">目標</th><th scope="col">差</th></tr></thead>
<tbody>
<tr><th scope="row">到達</th><td>72</td><td>78</td><td>6</td></tr>
<tr><th scope="row">品質</th><td>84</td><td>86</td><td>2</td></tr>
<tr><th scope="row">売上</th><td>48</td><td>70</td><td>22</td></tr>
</tbody>
</table>
</figcaption>
</figure>
aria-label には最大、最小、開きが大きい軸を書きます。すべての軸を読み上げると、聞き手は順序を覚えていられません。差の列を表に入れると、読者が引き算をせずに済みます。
9.3 キーボードで軸をたどれる
軸や点が操作できる（その評価の根拠を開くなど）なら、キーボードでも同じことができる状態にします。
Tabでチャートに入り、ArrowLeftとArrowRightで軸を移動する- 系列が 2 つあるなら、
ArrowUpとArrowDownで系列を切り替える - フォーカス中の軸は、軸線を太くするなど色以外でも見えるようにする
- 移動のたびに「売上、現在48点、目標70点」のように読み上げへ流す
軸ごとの値の一覧をリストとして先に置き、その各行をボタンにするほうが、多角形の頂点を当たり判定にするより確実です。
9.4 Touch / Pointer
頂点は小さく、指では狙えません。軸ラベルをタップ対象にして、高さ 44 ピクセル以上を確保します。図のそばに置いた値の一覧も、そのまま操作の入口として使えます。
10. 実装メモ（Implementation Notes）
- GUNJO の
RadarChartは、1 系列ならdata（{ label, value }の配列）、複数系列ならseriesを受け取ります。maxを明示しないと、データの最大値で正規化されて満点の位置が変わります maxは満点を表す値に固定します。固定しないと、全員のスコアが低い月に「全員が外周近く」という図が出ますfillOpacityは 0.15 以下を目安にします。2 つ重ねると塗りが足し合わされ、実際より濃く見えますshowLabels={false}にするなら、軸の名前を図の外の一覧で読める状態にします- 実装は GUNJO の RadarChart（gunjo.jp を新しいタブで開く） にあります。標準、2 系列の重ね、コンパクト、グリッドなしの見本が置かれています
11. 関連リンク
- 関連するUIデザイン原則: 比較のしやすさ (Comparison Support), 色に依存しない設計 (Color Independence), 視覚的階層 (Visual Hierarchy)
- 用語集（定義）: 認知負荷 (Cognitive Load), 視覚的バランス (Visual Balance)
- 関連するUIコンポーネント（横）: Bar Chart（棒グラフ）, Gauge Chart（ゲージチャート）, Table（テーブル / 表）
12. まとめ
レーダーチャートの設計でいちばん効くのは、すべての軸を同じ尺度と同じ向きにそろえることです。迷ったら 4. 設計判断の核 に戻り、「軸の単位と向きはそろっているか」「軸の順序に理由があるか」「面積で優劣を語っていないか」の 3 点を確かめてください。
軸の順序を変えれば面積は変わります。この性質を知っていれば、レーダーは「どこが弱いか」を見つける図として使えます。優劣を決める場面では、軸ごとの数字を並べた表のほうが正確です。
