中央をくり抜いた円で構成比を示すチャートです。ダッシュボードのカードで、合計と内訳を 1 つの図にまとめたいときに使います。空いた中央には、合計値や最重要の数字を置けます。
この記事を読むと、中央に何を置くかの決め方、円グラフとの使い分け、リングの太さが読みやすさに与える影響、中央の数字を読み上げに乗せる書き方が自分でできるようになります。
1. UI例（Preview / Live）
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
ドーナツチャートは、円グラフの中央をくり抜いたチャートです。扇形が円環（リング）になり、中央に空白ができます。読み方は円グラフと同じで、リングの長さが構成比を表します。
円グラフとの違い：くり抜いた中央に、合計値や主要な数字を置けることが唯一の違いです。中央に置くものが無いなら、くり抜く理由もありません。
ゲージチャートとの違い：ゲージは 1 つの値を範囲の中で示します。ドーナツは複数の区分の構成比を示します。区分が 1 つで「達成率 72 パーセント」を見せたいなら、ドーナツではなくゲージか進捗バーが向きます。
分布バーとの違い：横一本の帯に構成比を並べたものが分布バーです。場所を取らず、複数行に並べて比べられます。中央に数字を置く必要が無く、横に並べて比べたいなら分布バーのほうが向きます。
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- 合計と内訳を 1 つのカードにまとめる：ダッシュボードで「契約 3,542 件、うちコアが 46 パーセント」を 1 枚で見せる
- 中央に置きたい数字がある：合計、最重要の指標、期間の表示など
- 区分が 5 つ以下：円グラフと同じ制約です
- カードの中に置く：正方形に近い領域に収まりやすい図です
3.2 When NOT to use
- 中央に置くものが無い：円グラフで足ります。くり抜きは目的ではありません
- 合計に意味が無い：足しても読めない数字を「全体」として扱うことになります
- 順位を決めさせたい：リングの長さは、棒の長さほど正確には比べられません
- 区分が 1 つだけ：達成率のような単一の値なら、ゲージか進捗バーを使います
- 横に並べて比べたい：ドーナツを 2 つ並べても、区分どうしの比較はできません
3.3 代替UI（Alternatives）
- 中央に数字が要らない : Pie Chart（円グラフ）
- 単一の値の達成率 : Gauge Chart（ゲージチャート）, Progress Bar（プログレスバー）
- 複数のまとまりの内訳 : Stacked Bar Chart（積み上げ棒グラフ）
- 順位を決めさせたい : Bar Chart（棒グラフ）
- 正確な値を読ませたい : Table（テーブル / 表）
4. 設計判断の核（Decision Principles）
ドーナツの核は「中央の空白に何を置くか」。置くものが決まらないなら、それは円グラフでよい図であり、くり抜く理由が無い。
判断の優先順位：1. 中央に置く値があるか、2. 中央とリングが別のことを言っているか、3. リングの太さ、4. 区分の数と並び順。
- 中央に置く値が決まってからドーナツを選ぶ：くり抜きは装飾ではなく、置き場所を作る操作です。上のデモで中央を空にすると、くり抜いた中央に意味が無いことがすぐ分かります。中央に置く候補は、合計値、母数、期間、最重要の 1 指標のどれかです。どれも無いなら円グラフに戻します。
- 中央とリングで、同じことを 2 回言わない：中央に「コア 46 パーセント」と書き、リングにも 46 パーセントの区分がある状態は、同じ情報の重複です。中央には、リングからは読めないもの（合計値、母数、前期比）を置きます。デモで「最大区分の割合」に切り替えると、この重複が見えます。
- リングの太さは、中央の文字とのつり合いで決める：細いリングは小さい区分を線にしてしまい、太いリングは中央に置ける文字を小さくします。GUNJO（群青）は UIXHERO が作っているデザインシステムです。その
DonutChartのthicknessはピクセル単位で指定します。中央に 2 行（数字とラベル）を置くなら、標準の太さから始めて、区分が読めるところまで調整します。 - 中央の数字は SVG の中に閉じ込めない：中央の数字は、その図でいちばん重要な情報であることが多いのに、SVG の中に描くと読み上げから落ちやすくなります。中央の数字は SVG の外側の要素として重ね、図そのものには
role="img"とaria-labelを付けます。こうすると文字の拡大にも耐えます。 - 区分の区別を色だけに載せない：リングは扇形より細いため、色の違いがさらに読み取りにくくなります。凡例に名前と割合の両方を出し、区分どうしの境目に背景色の細い線を入れます。これは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" | サイドパネルや小さなカード |
| 中央に値 | centerValue + centerLabel | 合計や母数を添える |
| リングの太さ | thickness | 視認性と中央の文字量のつり合いを取る |
| 凡例つき | showLegend + totalLabel | 名前、割合、元の値をまとめて出す |
禁止パターン：中央に何も置かないドーナツ。円グラフと同じ情報量なのに、区分が細くなるぶん読みにくくなります。
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- 中央が空：くり抜く理由が無く、円グラフより読みにくい図になります
- 中央とリングが同じことを言っている：情報が重複し、中央の場所を無駄にします
- 中央の数字が読み上げから落ちる：図全体を
aria-hiddenにすると、いちばん重要な数字が消えます
7.1 Bad（典型3つ）
- 中央が空のまま、リングだけのドーナツを 4 枚並べている
- 中央に「コア 46%」と書き、凡例にも「コア 46%」がある
- 図を画像として書き出し、中央の数字も画像に焼き込んでいる。文字を拡大しても大きくならない
7.2 Good（対になる3つ）
- 中央に合計値（3,542 件）を置く。置くものが無いなら円グラフに変える
- 中央には母数と期間を置き、割合はリングと凡例に任せる
- 中央の数字を SVG の外側の要素として重ね、図には
role="img"とaria-labelを付ける
7.3 How to fix（手順）
- 中央に置く値を 1 つ決める。決まらないなら円グラフに変える
- 中央の値がリングから読めるものでないか確かめる。読めるなら、合計や母数に差し替える
- 中央の数字を、SVG ではなく重ねた要素として置き直す
- リングの太さを調整し、最小の区分が線に見えないところまで太くする
- 凡例に名前と割合と元の値を出し、
<svg>にrole="img"とaria-labelを付ける
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
チャートは「色だけで系列を区別する」が起きやすいコンポーネントです。ドーナツはリングが細いぶん、円グラフよりさらに色に頼りやすくなります。次の 3 点を満たします。
9.1 色だけに頼らない
- 凡例に文字を置く：名前と割合を並べる。色見本は補助であって、主役にしない
- 区切り線：区分どうしの境目に背景色の線を入れる。色が近くても境目が残ります
- 並び順をそろえる：凡例をリングと同じ順（12 時から時計回り）に並べる
- 中央の数字：中央には文字があるので、色を見分けられなくても主要な情報は届きます
リングと背景、リングどうしのコントラスト比は 3:1 以上を確保します。
9.2 代替テキストか表での提示
中央の数字は本文として置き、リングは role="img" で要約します。
<figure class="donut">
<div class="donut__chart">
<svg role="img" aria-labelledby="donut-title donut-desc">
<title id="donut-title">契約の構成比（2026年8月）</title>
<desc id="donut-desc">
コア46パーセント、成長28パーセント、継続18パーセント、拡張8パーセント。
</desc>
</svg>
<!-- 中央の数字は SVG の外。読み上げにも文字の拡大にも乗る -->
<p class="donut__center"><strong>3,542</strong><span>契約数（合計）</span></p>
</div>
<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,629</td><td>46%</td></tr>
<tr><th scope="row">成長</th><td>992</td><td>28%</td></tr>
</tbody>
</table>
</figure>
中央の数字を <p> として置くと、読み上げの順番は「中央の数字、そのあと図の要約」になります。いちばん重要な数字が先に届きます。
9.3 キーボードで区分をたどれる
リングの区分がクリックできるなら、キーボードでも同じことができる状態にします。
Tabでチャートに入り、ArrowLeftとArrowRightで区分を移動する- フォーカス中の区分には、色以外にも見える枠を出す（リングを少し外へ広げる）
EnterとSpaceで、クリックと同じ操作が起きる- リングを直接操作させるより、凡例の各行をボタンにするほうが確実です。行なら当たり判定を大きく取れます
9.4 Touch / Pointer
細いリングはタップできません。凡例の行をタップ対象にして、高さ 44 ピクセル以上を確保します。中央の数字が操作の起点になる場合（詳細を開くなど）は、中央全体を当たり判定にします。
10. 実装メモ（Implementation Notes）
- GUNJO の
DonutChartはsegments（{ label, value, color }の配列）を受け取り、割合を自動で計算します。centerValueとcenterLabelで中央の表示を指定します thicknessはくり抜き幅をピクセルで指定します。区分が 5 つあるなら、最小の区分がリング上で読める太さから決めますformatValueは関数を渡す prop のため、クライアントコンポーネントからのみ渡せます。サーバーコンポーネントからは、シリアライズできる指定を使います- 中央の数字をどうしても SVG の中に描く場合は、
<text>に読み上げが届くか実機で確かめます。aria-hiddenを図全体に付けると、中央の数字も一緒に消えます - 実装は GUNJO の DonutChart（gunjo.jp を新しいタブで開く） にあります。標準、凡例つき、コンパクト、太いリング、値の整形の見本が置かれています
11. 関連リンク
- 関連するUIデザイン原則: 比較のしやすさ (Comparison Support), 色に依存しない設計 (Color Independence), 視覚的階層 (Visual Hierarchy)
- 用語集（定義）: 認知負荷 (Cognitive Load), カラーユニバーサルデザイン (Color Universal Design)
- 関連するUIコンポーネント（横）: Pie Chart（円グラフ）, Gauge Chart（ゲージチャート）, Card（カード）
12. まとめ
ドーナツチャートの設計でいちばん効くのは、中央に置く値を先に決めることです。迷ったら 4. 設計判断の核 に戻り、「中央に置くものがあるか」「中央とリングが同じことを言っていないか」「中央の数字が読み上げに乗るか」の 3 点を確かめてください。
中央に置くものが決まらないまま見た目だけドーナツにすると、円グラフより読みにくい図が残ります。くり抜きは装飾ではなく、合計と内訳を 1 枚にまとめるための場所づくりです。
