全体を 100 パーセントとして、その内訳を扇形の大きさで示すチャートです。流入チャネルの構成、売上の内訳、回答の分布のように、全体のうちどれくらいを占めるかを伝えたいときに使います。
この記事を読むと、円グラフを選んでよいデータの条件、扇形をいくつまで置けるか、並び順の決め方、値を凡例ではなく図の中に書く理由が自分でできるようになります。
1. UI例（Preview / Live）
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
円グラフは、円全体を 100 パーセントとみなし、各項目の割合を扇形の中心角に写すチャートです。読者が受け取るのは「全体のうち、これがこれくらい」という関係です。実数そのものではなく、あくまで割合を伝えます。
棒グラフとの違い：棒グラフは長さを比べます。長さは目で正確に比べられます。円グラフは角度と面積を比べさせるため、近い大きさの扇形どうしは判別できません。順位を決めさせたいなら棒グラフが向きます。
ドーナツチャートとの違い：円の中央をくり抜いたものがドーナツチャートです。空いた中央に合計値や主要な数字を置けるのが違いで、それが要らないなら円グラフで足ります。
積み上げ棒との違い：積み上げ棒は複数のまとまりの内訳を横に並べて比べられます。円グラフは 1 つのまとまりの内訳しか扱えません。
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- 1 つの全体の内訳を見せる：ある月の流入チャネル、ある予算の費目
- 区分が 5 つ以下：それを超えるなら、下位をまとめるか棒グラフにします
- 1 つの区分が過半を占める：「大半がこれ」という主張は、円グラフが最も速く伝えます
- 正確な順位より、おおまかな比率を伝えたい：報告資料の要約など
3.2 When NOT to use
- 合計に意味が無い：店舗別の売上、担当者別の件数のように、足しても読めない数字
- 項目が排他でない：複数回答のアンケートのように、合計が 100 を超えるもの
- 順位を決めさせたい：近い大きさの扇形は判別できません。棒グラフを使います
- 時間の推移を見せたい：円グラフを何枚も並べても読めません。積み上げ棒か折れ線を使います
- 2 つの全体を比べたい：円を 2 つ並べても、扇形どうしの比較はできません
3.3 代替UI（Alternatives）
- 順位を決めさせたい : Bar Chart（棒グラフ）
- 中央に合計を置きたい : Donut Chart（ドーナツチャート）
- 複数のまとまりの内訳 : Stacked Bar Chart（積み上げ棒グラフ）
- 内訳の推移 : Line Chart（折れ線グラフ）
- 正確な値を読ませたい : Table（テーブル / 表）
4. 設計判断の核（Decision Principles）
円グラフの核は「合計に意味があること」。全体という言葉が読者にとって具体的でないなら、そのデータは円グラフに向いていない。
判断の優先順位：1. 合計が意味を持つか、2. 区分の数、3. 並び順、4. 値をどこに書くか。
- 合計に意味があるか、を先に決める：円グラフは「これで全部です」と宣言する図です。流入チャネルなら、1 件の訪問はどれか 1 つに属し、足すと訪問の総数になります。店舗別の売上を円グラフにすると、5 店舗の合計という数字に読む意味が無いのに、あるかのように見えてしまいます。複数回答のアンケートも同じで、合計が 100 を超えるデータを 100 パーセントの円に押し込むと、数字が書き換わります。
- 扇形は 5 つまでにする：人は角度の差を正確には比べられません。上のデモで 8 区分に切り替えると、下位 4 つはどれも同じ細さに見えます。区分が多いときは、上位 4 つを残して残りを「その他」にまとめます。「その他」の中身は、別の表かドリルダウンで見られるようにします。
- 並び順は 12 時から時計回りに、大きい順：円には始まりと終わりがありません。だから読み始める位置を決める約束が要ります。12 時から時計回りに大きい順で並べると、読者は最初に最大の区分に当たります。順序に意味があるデータ（評価の 5 段階など）なら、大きさではなく、その順序に従います。
- 値は図の中に書く。凡例だけにしない：凡例は「色と名前の対応」を覚えてから図に戻る作業を強います。上のデモで凡例だけに切り替えると、「メールは何パーセントか」に答えるには扇形の角度を目で測ることになります。GUNJO（群青）は UIXHERO が作っているデザインシステムです。その
PieChartのshowLegendは名前と割合の両方を出すので、割合を落とさないでください。 - 扇形の区別を色だけに載せない：隣り合う扇形の色が近いと、境目が消えます。区切りに背景色の細い線を入れ、名前と割合を文字で添えます。色を見分けにくい読者にとって、円グラフは最も情報が失われやすい図です。これはAI が作ったUIの失敗 29 件の 28 番目「状態の違いが、色だけに乗る」と同じ崩れ方です。
5. 状態設計（States）
5.1 必須状態（Required）
- データあり：扇形と、名前と割合がそろっている
- データなし：全項目が 0 件。灰色の円だけを残さず、理由を書く
- 読み込み中：円の大きさを確保し、描画後にレイアウトが動かないようにする
5.2 条件付き状態（Conditional）
- 1 区分だけ：円が 1 色になる。この場合は数字をそのまま出すほうが速く読めます
- 極端に小さい区分：1 パーセント未満の扇形は線にしか見えません。「その他」に含めます
- ホバー / フォーカス：その扇形の名前、値、割合を出す
- エラー：取得に失敗した。前回の円を残したまま最新のように見せない
5.3 State Gallery
| 状態 | 必須 | 何を伝えるか |
|---|---|---|
| データあり | 必須 | 各区分の割合と、全体の中での位置 |
| データなし | 必須 | 集計対象が 0 件である理由 |
| 読み込み中 | 必須 | 取得中であること |
| 1 区分だけ | 条件付き | 内訳が分かれていない（円である必要が無い） |
| 極小の区分 | 条件付き | 1 パーセント未満がまとめられていること |
| ホバー / フォーカス | 条件付き | その区分の名前と値と割合 |
| エラー | 条件付き | 取得に失敗した。数字は信用できない |
6. バリエーション設計（Variants）
大きさと、凡例を出すかどうかで決まります。
| バリアント | GUNJO の指定 | 典型的な用途 |
|---|---|---|
| 標準 | variant="default"（既定） | 単独で置く構成比。凡例つき |
| コンパクト | variant="compact" | カードやサイドパネルの中 |
| 凡例つき | showLegend | 名前と割合を図の外に並べる |
| 値の整形 | valueFormat | 桁区切りや単位をそろえる |
禁止パターン：円を 2 つ並べて「先月と今月」を比べさせること。扇形どうしの比較はできないので、読者は結局どちらが増えたのか判断できません。推移を見せたいならStacked Bar Chart（積み上げ棒グラフ）を正規化して並べます。
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- 合計に意味が無いデータを円にする：足しても読めない数字を「全体」として扱ってしまいます
- 区分が多すぎて順位が読めない：8 区分の円グラフは、下位が全部同じ細さに見えます
- 凡例に名前しか無い：割合を読むために、扇形の角度を目で測ることになります
7.1 Bad（典型3つ）
- 5 店舗の売上を円グラフにしている。読者は「全店の合計に対する比率」を求めていない
- 流入チャネルを 9 区分の円グラフにしており、下位 5 つの順位が読めない
- 凡例に色と名前だけがあり、割合は扇形にホバーしないと出てこない
7.2 Good（対になる3つ）
- 店舗別は横棒グラフにして、値の大きい順に並べる
- 上位 4 チャネルを残し、残りを「その他」にまとめる。中身は表で見られるようにする
- 凡例に名前と割合の両方を出す。扇形が大きければ、図の中にも直接書く
7.3 How to fix（手順）
- 合計を声に出して読んでみる。読む意味が無ければ、円グラフをやめて棒グラフにする
- 区分を数える。6 つ以上なら、上位 4 つと「その他」にまとめる
- 12 時から時計回りに大きい順へ並べ替える（順序に意味があるデータは除く）
- 凡例に割合を足す。扇形が十分大きいものは、図の中にも名前と割合を書く
<svg>にrole="img"とaria-labelを付け、各区分の名前と割合を読み上げに流す
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
チャートは「色だけで系列を区別する」が起きやすいコンポーネントです。円グラフは扇形の中に模様や線を足しにくいため、文字での提示がとくに効きます。次の 3 点を満たします。
9.1 色だけに頼らない
- 区切り線：扇形どうしの境目に、背景色の細い線を入れる。色が近くても境目が残ります
- 直接ラベル：大きい扇形には、図の中に名前と割合を書く
- 凡例の並び順：凡例を扇形と同じ順（12 時から時計回り）に並べる。色を頼りに探さずに済みます
- 模様：区分が 4 つ以下なら、斜線や点の模様を 1 つか 2 つ混ぜる方法もあります
扇形と背景、扇形どうしのコントラスト比は 3:1 以上を確保します。
9.2 代替テキストか表での提示
<figure>
<svg role="img" aria-labelledby="pie-title pie-desc">
<title id="pie-title">流入チャネルの構成比（2026年8月・母数 3,542 件）</title>
<desc id="pie-desc">
自然検索34パーセント、SNS22パーセント、メール16パーセント、広告12パーセント、
その他16パーセント。自然検索が最も大きい。
</desc>
</svg>
<figcaption>
<table>
<caption>流入チャネルの構成比（母数 3,542 件）</caption>
<thead><tr><th scope="col">チャネル</th><th scope="col">件数</th><th scope="col">割合</th></tr></thead>
<tbody>
<tr><th scope="row">自然検索</th><td>1,204</td><td>34%</td></tr>
<tr><th scope="row">SNS</th><td>779</td><td>22%</td></tr>
</tbody>
</table>
</figcaption>
</figure>
円グラフは区分が 5 つ以下なので、aria-label にすべての区分を並べても長くなりません。母数を書き添えると、割合だけでは分からない規模が伝わります。
9.3 キーボードで区分をたどれる
扇形がクリックできる（そのチャネルの詳細に移るなど）なら、キーボードでも同じことができる状態にします。
Tabでチャートに入り、ArrowLeftとArrowRightで扇形を移動する- フォーカス中の扇形には、色以外にも見える枠を出す（外周を太くする、少し外へずらす）
EnterとSpaceで、クリックと同じ操作が起きる- 扇形がクリックできないなら、フォーカス可能にしません
凡例をリストとして先に読ませる作りにすると、扇形そのものを操作させずに済む場合があります。凡例の各行をボタンにするほうが、扇形を当たり判定にするより確実です。
9.4 Touch / Pointer
細い扇形はタップできません。1 パーセント未満をまとめたうえで、凡例の行もタップできるようにします。凡例の行なら高さ 44 ピクセル以上を確保できます。
10. 実装メモ（Implementation Notes）
- GUNJO の
PieChartはsegments（{ label, value, color }の配列）を受け取り、割合は自動で計算します。パーセントを自分で計算して渡す必要はありません formatValueは関数を渡す prop のため、クライアントコンポーネントからのみ渡せます。サーバーコンポーネントから桁区切りを指定したいときは、シリアライズできるvalueFormatを使いますvariant="compact"はカードの中で使う小さめの寸法です。小さくすると扇形の判別はさらに難しくなるため、区分は 4 つ以下に抑えます- 扇形の境目には背景色の細い線を引きます。色が近い区分が隣り合っても、境目が残ります
- 実装は GUNJO の PieChart（gunjo.jp を新しいタブで開く） にあります。標準、凡例つき、コンパクト、区分が多い場合の見本が置かれています
11. 関連リンク
- 関連するUIデザイン原則: 比較のしやすさ (Comparison Support), 色に依存しない設計 (Color Independence), 選択肢の削減 (Choice Reduction)
- 用語集（定義）: 認知負荷 (Cognitive Load), カラーユニバーサルデザイン (Color Universal Design)
- 関連するUIコンポーネント（横）: Donut Chart（ドーナツチャート）, Bar Chart（棒グラフ）, Stacked Bar Chart（積み上げ棒グラフ）
12. まとめ
円グラフの設計でいちばん効くのは、使う前に「合計に意味があるか」を確かめることです。迷ったら 4. 設計判断の核 に戻り、「足した数字を読む意味があるか」「扇形は 5 つ以下か」「割合が文字で書かれているか」の 3 点を確かめてください。
順位を決めさせたい場面では、円グラフは棒グラフに勝てません。人は長さは比べられますが、角度は比べられないからです。円グラフが向くのは「大半がこれです」という 1 つの主張を、速く伝えたいときです。
