1 本の棒を系列ごとに区切って積み上げ、グループどうしを比べるチャートです。月ごとの流入内訳、部門ごとの費目、班ごとの作業時間のように、合計とその中身を同時に見せたいときに使います。
この記事を読むと、積み上げ棒で正確に読める部分と読めない部分、系列の並び順の決め方、100 パーセント正規化を選ぶ条件、上限を超えたグループの示し方が自分でできるようになります。
1. UI例（Preview / Live）
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
積み上げ棒グラフは、1 本の棒を系列ごとに区切って積み、棒全体の高さで合計を、区切りの長さで内訳を示すチャートです。1 つの図で「合計」と「その中身」の 2 つを同時に扱えます。
読み取りには非対称があります。最下段の系列は基線がそろっているので長さを比べられます。合計も棒の高さなので比べられます。しかし中間や最上段の系列は、下の段の高さによって開始位置が動くため、グループをまたいだ比較ができません。
通常の棒グラフとの違い：通常の棒グラフは 1 本 1 値です。積み上げ棒は 1 本に複数の値が入ります。系列どうしを正確に比べたいなら、積み上げずに横に並べる（グループ化した棒グラフ）ほうが読めます。
円グラフとの違い：円グラフは 1 つのまとまりの内訳しか扱えません。積み上げ棒は複数のまとまりを横に並べて比べられます。
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- 合計の推移と、その中身を同時に見せる：月別の総流入と、そのチャネル内訳
- 1 つの系列の動きを追いたい：その系列を最下段に置けば、基線がそろって比較できます
- 構成比の変化を見せる：100 パーセントに正規化すれば、割合の変化が読めます
- 系列が 4 つ以下：それを超えると、帯が細くなって色の判別が難しくなります
3.2 When NOT to use
- 中間の系列どうしを正確に比べたい：基線が動くので読めません。系列ごとに折れ線か棒を並べます
- 系列が 6 つ以上：帯が細くなり、値も書けなくなります
- 合計に意味が無い：足しても読めない数字を積み上げると、棒の高さが誤解を生みます
- 負の値が混ざる：積み上げの向きが途中で反転し、読めない図になります
3.3 代替UI（Alternatives）
- 系列どうしの正確な比較 : Bar Chart（棒グラフ）
- 系列ごとの推移 : Line Chart（折れ線グラフ）
- 1 つのまとまりの内訳 : Pie Chart（円グラフ）, Donut Chart（ドーナツチャート）
- 正確な値を読ませたい : Table（テーブル / 表）
4. 設計判断の核（Decision Principles）
積み上げ棒で正確に比べられるのは、最下段の系列と、棒全体の合計だけ。中間の系列は基線が動くので、目では比べられない。
判断の優先順位：1. 合計と構成比のどちらが主題か、2. 系列の並び順、3. 正規化するか、4. 系列の数と値の書き方。
- 主題が合計か構成比かを先に決める：合計の増減が主題なら実数のまま積みます。構成比の変化が主題なら 100 パーセントに正規化します。両方を同時に見せる図は作れません。正規化した瞬間に合計の情報が消えるからです。上のデモで正規化に切り替えると、すべての棒が同じ高さになり、1 月と 4 月の規模の違いが読めなくなります。
- 比べさせたい系列を最下段に置く：これが積み上げ棒で最も効く判断です。最下段だけは基線がそろうので、グループをまたいで長さを比べられます。上のデモで広告を最下段に移すと、18、16、26、21 という動きが目で読めるようになります。最上段に置いたままでは、同じ数字なのに増減が読み取れません。並び順は見た目の都合ではなく、読者に何を比べさせたいかで決めます。
- 正規化するとき、合計を別の場所に残す：100 パーセントの棒だけを並べると、母数が 10 件のグループと 10,000 件のグループが同じ幅で並びます。割合の信頼度がまったく違うのに、図の上では同じに見えます。合計を棒の上か凡例に添えてください。
- 上限の超過は、色以外でも示す：GUNJO（群青）は UIXHERO が作っているデザインシステムです。その
StackedBarChartのthresholdは、各グループの合計に上限線を引き、超えたグループをリングと合計値の色で示します。系列の色は変えません。系列の色にはそれぞれ意味があるからです。この作りは正しいのですが、超過が色でしか出ないままだと届かない読者がいます。合計値の横に「（超過）」のような文字を添えてください。なおthresholdはnormalizeを指定すると無視されます。各グループが 100 パーセントになり、実数の位置が無くなるためです。 - 帯の中に値を書く。書けないほど細い帯は作らない：十分な高さがある帯には、値か割合を直接書きます。書けないほど細い帯が出るなら、系列が多いという合図です。まとめるか、別のチャートに分けます。これはAI が作ったUIの失敗 29 件の 28 番目「状態の違いが、色だけに乗る」と同じ崩れ方を防ぐ手当てでもあります。
5. 状態設計（States）
5.1 必須状態（Required）
- データあり：帯、合計、凡例がそろっている
- データなし：グループが 0 件。空の座標軸だけを残さない
- 読み込み中：高さを確保し、描画後にレイアウトが動かないようにする
5.2 条件付き状態（Conditional）
- ある系列が 0：帯が消える。凡例からも消すか、0 と分かるように残すかを決めておく
- 上限の超過：合計がしきい値を超えた。色と文字の両方で示す
- ホバー / フォーカス：その帯の系列名、値、グループ内の割合を出す
- エラー：取得に失敗した。前回の棒を残したまま最新のように見せない
5.3 State Gallery
| 状態 | 必須 | 何を伝えるか |
|---|---|---|
| データあり | 必須 | 各グループの合計と、その内訳 |
| データなし | 必須 | 集計対象が 0 件である理由 |
| 読み込み中 | 必須 | 取得中であること |
| ある系列が 0 | 条件付き | その系列が「無い」のか「取れていない」のか |
| 上限の超過 | 条件付き | どのグループが上限を超えたか |
| ホバー / フォーカス | 条件付き | その帯の系列名と値と割合 |
| エラー | 条件付き | 取得に失敗した。数字は信用できない |
6. バリエーション設計（Variants）
向き、正規化、上限の 3 つで決まります。
| バリアント | GUNJO の指定 | 典型的な用途 |
|---|---|---|
| 縦積み | variant="vertical"（既定） | 月別の推移。グループが 6 つ以下 |
| 横積み | variant="horizontal" | グループ名が長い。行ごとに比べたい |
| 100% 正規化 | normalize | 構成比の変化が主題。合計は別に添える |
| 上限つき | threshold + thresholdLabel | 容量や工数の上限を超えたグループを名指しする |
| 凡例と値 | showLegend + showValues | 印刷や共有される図 |
禁止パターン：normalize と threshold を同時に指定すること。正規化すると各グループが 100 パーセントになり、上限線を引く位置が無くなります。GUNJO の実装では normalize が優先され、threshold は無視されます。
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- 比べさせたい系列が最上段にある：基線が動くので、読者は増減を判断できません
- 正規化した図に合計が無い：母数 10 件と 10,000 件が同じ幅で並びます
- 帯が細すぎて値が書けない：色だけが残り、凡例との往復が発生します
7.1 Bad（典型3つ）
- 広告費の推移を見せたいのに、広告を最上段に積んでいる。数字は正しいが増減が読めない
- すべての棒を 100 パーセントにそろえた図だけを出し、各月の総数をどこにも書いていない
- 系列が 7 つあり、下位 4 つの帯が 2 ピクセルほどの線になっている
7.2 Good（対になる3つ）
- 広告を最下段に移す。基線がそろい、18 から 26 への増加が目で読める
- 正規化した棒の上に、そのグループの合計（84 件、95 件）を添える
- 系列を上位 3 つと「その他」にまとめ、内訳は表で見られるようにする
7.3 How to fix（手順）
- 「読者に何を比べさせたいか」を 1 行で書く。その系列を最下段に移す
- 主題が合計か構成比かを決める。構成比なら正規化し、合計を棒の上か凡例に添える
- 系列を数える。5 つ以上なら、上位 3 つと「その他」にまとめる
- 帯に値を書けるか確かめる。書けない帯があるなら、系列を減らす
<svg>にrole="img"とaria-labelを付け、同じ数字を読める表を添える
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
チャートは「色だけで系列を区別する」が起きやすいコンポーネントです。積み上げ棒は帯が隣り合うため、色の差がとくに見分けにくくなります。次の 3 点を満たします。
9.1 色だけに頼らない
- 帯の中の文字：高さが足りる帯には、値か割合を直接書く。これが最も確実です
- 境目の線：帯どうしの境目に背景色の細い線を入れる。色が近くても区切りが残ります
- 凡例の値：凡例に名前だけでなく、合計値も出す
- 模様：系列が 3 つ以下なら、斜線や点の模様を混ぜる方法もあります
帯どうし、帯と背景のコントラスト比は 3:1 以上を確保します。同系色の濃淡で 4 系列を分けると、明度差が足りなくなりがちです。
9.2 代替テキストか表での提示
積み上げ棒は数値が多いため、aria-label にすべてを並べると読み上げが長くなります。要約を aria-label に、正確な数字は表に置きます。
<figure>
<svg role="img" aria-labelledby="stack-title stack-desc">
<title id="stack-title">月別の流入内訳（2026年1月から4月）</title>
<desc id="stack-desc">
合計は84、95、92、98で増加傾向。内訳は自然流入、紹介、広告の3系列。
広告は18、16、26、21と推移し、3月に最大。3月と4月は上限100を超過。
</desc>
</svg>
<figcaption>
<table>
<caption>月別の流入内訳（単位は件）</caption>
<thead>
<tr>
<th scope="col">月</th><th scope="col">自然流入</th>
<th scope="col">紹介</th><th scope="col">広告</th><th scope="col">合計</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">1月</th><td>42</td><td>24</td><td>18</td><td>84</td></tr>
<tr><th scope="row">2月</th><td>48</td><td>31</td><td>16</td><td>95</td></tr>
</tbody>
</table>
</figcaption>
</figure>
表には合計の列を入れます。積み上げ棒が伝えているのは内訳と合計の両方なので、表も同じ 2 つを持つ必要があります。
9.3 キーボードで帯をたどれる
帯がクリックできる（その系列の詳細を開くなど）なら、キーボードでも同じことができる状態にします。
Tabでチャートに入り、ArrowLeftとArrowRightでグループを移動するArrowUpとArrowDownで、そのグループの中の系列を移動する- フォーカス中の帯には、色以外にも見える枠を出す
- 移動のたびに「1月、広告、18件、全体の21パーセント」のように読み上げへ流す
系列の数だけフォーカス位置が増えるので、グループ単位で止まり、そこから系列へ降りる 2 段構えにすると移動が短くなります。
9.4 Touch / Pointer
細い帯はタップできません。帯そのものではなく、そのグループの棒全体を当たり判定にして、触れたらグループの内訳を一覧で出す作りにします。棒の幅は 44 ピクセル以上を目安にします。
10. 実装メモ（Implementation Notes）
- GUNJO の
StackedBarChartはdata（グループの配列。各グループがsegmentsを持つ）を受け取ります。系列の順序はsegmentsの並び順で決まるので、比べさせたい系列を配列の先頭に置きます normalizeを指定すると各グループが 100 パーセントにそろい、thresholdは無視されます。両方を有効にしたい要件が出たら、図を 2 つに分ける設計に切り替えますthresholdを超えたグループは、リングと合計値の色で示されます。系列の色は変わりません。これは意図された作りで、系列の色が意味を持つためですformatValueは関数を渡す prop のため、クライアントコンポーネントからのみ渡せます。サーバーコンポーネントからはvalueFormatを使います- 実装は GUNJO の StackedBarChart（gunjo.jp を新しいタブで開く） にあります。縦積み、横積み、正規化、上限つきの見本が置かれています
11. 関連リンク
- 関連するUIデザイン原則: 比較のしやすさ (Comparison Support), 色に依存しない設計 (Color Independence), 情報密度の最適化 (Information Density)
- 用語集（定義）: 認知負荷 (Cognitive Load), シグナル・ノイズ比 (Signal-to-Noise Ratio)
- 関連するUIコンポーネント（横）: Bar Chart（棒グラフ）, Line Chart（折れ線グラフ）, Table（テーブル / 表）
12. まとめ
積み上げ棒グラフの設計でいちばん効くのは、比べさせたい系列を最下段に置くことです。迷ったら 4. 設計判断の核 に戻り、「主題は合計か構成比か」「比べさせたい系列は最下段にあるか」「帯に値を書けているか」の 3 点を確かめてください。
積み上げ棒は 1 つの図に 2 つの情報を載せられる代わりに、読める場所と読めない場所が分かれます。この非対称を分かったうえで並び順を決めれば、同じデータでも読者が受け取る結論が変わります。
