カテゴリごとの量を、棒の長さで比べるチャートです。店舗別の売上、曜日別の来店数、チャネル別の獲得数のように、並んだ項目のどれが多くてどれが少ないかを一目で決めさせたいときに使います。
この記事を読むと、縦軸をゼロから始める理由、並び順の決め方、縦棒と横棒の選び分け、しきい値の超過を色だけで示さない書き方が自分でできるようになります。
1. UI例（Preview / Live）
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
棒グラフは、カテゴリごとの量を棒の長さに写して並べるチャートです。棒の始まりがそろっているため、読者は長さの差をそのまま量の差として読み取ります。この「長さ＝量」という対応が、棒グラフの正確さと危うさの両方を作っています。
折れ線グラフとの違い：折れ線は点と点をつなぐことで「その間にも値が続いている」と主張します。棒グラフはつながないので、項目どうしが独立していてよく、順序が無くてもかまいません。曜日別の来店数のように、独立した項目を並べるなら棒グラフが向きます。
円グラフとの違い：円グラフは全体を 100 パーセントとした構成比を示します。棒グラフは実数をそのまま示すので、合計に意味が無いデータ（各店舗の売上など）でも使えます。
縦棒と横棒：向きが変わっても読み方は同じです。違うのはラベルの置き場所と、扱える項目数です。
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- カテゴリ別の量を比べる：店舗別、チャネル別、担当者別の実績を並べて多い順を決めたいとき
- 少数の時点を比べる：四半期ごとの売上のように、点が数個しか無く、間の値に意味が無いとき
- 上限や目標との距離を見せる：しきい値の線を重ねて、超えた項目を名指ししたいとき
- ランキングを見せる：値の大きい順に並べた横棒は、順位表としてそのまま読めます
3.2 When NOT to use
- 連続した時系列の傾向を見せたい：点が多いと棒が細くなり、傾向線が読めなくなります。折れ線を使います
- 構成比を見せたい：合計に対する割合が主題なら、円グラフかドーナツチャート、または積み上げ棒を使います
- 項目が 20 を超える：棒の判別が難しくなります。上位だけを出して残りを「その他」にまとめるか、表にします
- 値が 1 つしか無い：棒 1 本のチャートは、数字をそのまま大きく出したほうが速く読めます
3.3 代替UI（Alternatives）
- 連続した傾向 : Line Chart（折れ線グラフ）
- 内訳の比較 : Stacked Bar Chart（積み上げ棒グラフ）
- 構成比 : Pie Chart（円グラフ）
- 正確な値を読ませたい : Table（テーブル / 表）
- カード内の小さな推移 : Sparkline Chart（スパークライン）
4. 設計判断の核（Decision Principles）
棒グラフの核は「棒の長さが量そのものである」こと。だから縦軸をゼロから始めない棒グラフは、数字を変えずに差を誇張する。
判断の優先順位：1. ゼロ基線、2. 並び順、3. 縦か横か、4. 基準線としきい値の見せ方。
- 縦軸はゼロから始める：棒は長さで量を比べる図です。基線を途中から始めると、1 割の差が 3 倍の差に見えます。上のデモで基線を 55 に上げると、数字は 1 つも変えていないのに順位の印象が変わります。差が小さくて読み取れないときは、軸を切るのではなく、差そのものを別の値（前月比、目標との差）で出すか、折れ線に切り替えます。
- 並び順は「読者が答えたい問い」で決める：どれが一番多いかを決めさせたいなら、値の大きい順に並べます。曜日別や月別のように順序に意味があるなら、値ではなく時間の順に並べます。同じ画面で並び順を毎回変えると、読者は毎回並びを読み直すことになります。
- 項目名が長いなら横棒にする：縦棒でラベルが入らないと、文字を斜めにするか省略するかの選択になります。どちらも読む速度を落とします。横棒ならラベルは 1 行で左に置けて、項目が 7 つを超えても読み続けられます。
- 基準線は「その線が何か」を書く：GUNJO（群青）は UIXHERO が作っているデザインシステムです。その
BarChartはaverageValueで平均線、thresholdで上限線を引けます。線だけでは何の線か伝わらないので、averageLabelとthresholdLabelに意味の分かる名前を入れます。「Average」のような既定値のまま出さないでください。 - しきい値の超過を色だけに載せない：
thresholdを超えた棒はthresholdTone（既定は destructive）で塗られます。色が変わったこと自体は、色を区別しにくい読者には届きません。showValuesで値を出し、超過した項目には文字でも印を付けます。これはチャートで最も繰り返し起きる粗さで、AI が作ったUIの失敗 29 件の 28 番目「状態の違いが、色だけに乗る」と同じ崩れ方です。
5. 状態設計（States）
5.1 必須状態（Required）
- データあり：通常表示。棒、軸、ラベルがそろっている
- データなし：項目が 0 件。空の座標軸ではなく、理由と次の操作を出す
- 読み込み中：高さの決まった枠を確保し、描画後にレイアウトが動かないようにする
5.2 条件付き状態（Conditional）
- 一部欠損：ある項目だけ値が取れていない。0 として棒を描かず、「データなし」と分かる見せ方にする
- ホバー / フォーカス：その棒の正確な値をツールチップで出す
- 選択中：ドリルダウンの起点として、選んだ棒を強調する
- エラー：取得に失敗した。古い数字を残したまま新しい数字のように見せない
5.3 State Gallery
| 状態 | 必須 | 何を伝えるか |
|---|---|---|
| データあり | 必須 | 各項目の量と、その差 |
| データなし | 必須 | 表示するデータが無い理由と、次にできること |
| 読み込み中 | 必須 | 取得中であること。高さは確保済み |
| 一部欠損 | 条件付き | この項目だけ値が無い（0 ではない） |
| ホバー / フォーカス | 条件付き | この棒の正確な値 |
| 選択中 | 条件付き | いまドリルダウンの対象になっている項目 |
| エラー | 条件付き | 取得に失敗した。表示中の数字は信用できない |
6. バリエーション設計（Variants）
向き、値表示、補助線の 3 つの組み合わせで決まります。
| バリアント | GUNJO の指定 | 典型的な用途 |
|---|---|---|
| 縦棒 | variant="vertical"（既定） | 時点の比較。項目名が短い |
| 横棒 | variant="horizontal" | ランキング。項目名が長い |
| 値表示あり | showValues | 正確な数字も読ませたい。印刷や共有される図 |
| 補助線なし | showGrid={false} | カード内の小さな図。周辺の文脈で桁が分かる |
| ラベルなし | showLabels={false} | 見出しや凡例で項目が分かっている場合のみ |
| 平均線つき | averageValue + averageLabel | 平均との距離が主題のとき |
| しきい値つき | threshold + thresholdLabel | 上限や目標の超過を名指しするとき |
禁止パターン：showLabels={false} と showValues={false} を同時に指定して、値も項目名も無い棒だけを置くこと。輪郭しか残らず、読者は何を見ているのか分かりません。飾りとして図が要るだけなら、Sparkline Chart（スパークライン）を使います。
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- 縦軸を途中から始めて差を誇張する：数字は正しいのに、読者が受け取る結論が変わります。悪意が無くても、既定の自動スケールに任せると起こります
- しきい値の超過を色だけで示す：色を区別しにくい読者と、読み上げを使う読者の両方に届きません
- 並び順に理由が無い：データベースが返した順のまま出すと、読者は毎回すべての棒を読み直すことになります
7.1 Bad（典型3つ）
- 縦軸の下限を自動計算に任せた結果、55 から始まる棒グラフになり、2 割の差が 3 倍に見えている
- 上限を超えた棒だけを赤くしており、値も上限のラベルも出していない
- 12 店舗の売上を、店舗コードの昇順で並べている。読者が知りたいのは「どこが伸びているか」なのに、順位が読めない
7.2 Good（対になる3つ）
- 縦軸をゼロから始める。差が小さくて読めないなら、前月比や目標との差を別の棒グラフとして出す
- 上限線に「上限 66」とラベルを付け、超過した棒には斜線を掛け、値の横に「（超過）」と書く
- 値の大きい順に並べ、上位 8 件を出して残りを「その他」にまとめる
7.3 How to fix（手順）
- 縦軸の下限を確認する。ゼロでなければ、ゼロに変えるか、比較する指標そのものを差分に変える
- 並び順の根拠を 1 行で言えるか確かめる。言えないなら、値の大きい順か時間の順にそろえる
- 色で意味を出している箇所を数える。それぞれに、色以外の手がかり（文字、模様、位置）を 1 つ足す
<svg>にrole="img"とaria-labelを付け、同じ数字を読める表を近くに置くか、開閉できる要素として添える- 項目名が入りきっていないなら
variant="horizontal"に変える
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
チャートは「色だけで系列を区別する」が起きやすいコンポーネントです。次の 3 点を満たします。
9.1 色だけに頼らない
同じ図の中で意味の違いを示すとき、色に加えて手がかりをもう 1 つ載せます。
- 模様：超過した棒に斜線、予測値の棒に薄い塗り
- ラベル：棒の上か横に値を出す。超過には「（超過）」のような文字を添える
- 位置：しきい値の線と、その線に付けたラベル
色と背景のコントラスト比は 3:1 以上を確保します。隣り合う棒どうしの色も、明度で見分けられるところまで離します。
9.2 代替テキストか表での提示
図そのものを読み上げられる状態にするか、同じ数字を表で提示します。どちらか一方があれば要件を満たします。
<figure>
<svg role="img" aria-labelledby="bar-title bar-desc">
<title id="bar-title">店舗別の来店数（2026年8月）</title>
<desc id="bar-desc">
渋谷62、新宿71、池袋59、上野64、品川68。上限は66で、新宿と品川が超過。
</desc>
<!-- 棒の描画。装飾用の要素には aria-hidden="true" -->
</svg>
<figcaption>
<details>
<summary>数値を表で見る</summary>
<table>
<caption>店舗別の来店数（2026年8月・単位は人）</caption>
<thead><tr><th scope="col">店舗</th><th scope="col">来店数</th><th scope="col">上限との差</th></tr></thead>
<tbody>
<tr><th scope="row">渋谷</th><td>62</td><td>-4</td></tr>
<tr><th scope="row">新宿</th><td>71</td><td>+5（超過）</td></tr>
</tbody>
</table>
</details>
</figcaption>
</figure>
aria-label に数字を全部並べると読み上げが長くなります。項目が 6 つを超えるなら、aria-label には要約（最大と最小、傾向）を書き、正確な数字は表に置きます。
9.3 キーボードで棒をたどれる
棒がクリックできる（ドリルダウンする）なら、キーボードでも同じことができる状態にします。
Tabでチャートに入り、ArrowLeftとArrowRightで棒を移動する- フォーカス中の棒には、色以外にも見える枠（フォーカスリング）を出す
EnterとSpaceで、クリックと同じ操作が起きる- 棒がクリックできないなら、フォーカス可能にしません。止まるだけの要素を増やさないためです
ツールチップはホバーだけでなくフォーカスでも出します。マウスを使わない読者にも正確な値が届きます。
9.4 Touch / Pointer
棒がタップできるなら、タップ領域は 44 ピクセル四方以上を確保します。棒が細いときは、棒そのものではなく、その列全体を透明な矩形で覆って当たり判定にします。
10. 実装メモ（Implementation Notes）
- GUNJO の
BarChartはdata（{ label, value, color }の配列）を受け取り、maxを指定しなければデータの最大値で正規化します。maxを明示すると、複数のチャートでスケールをそろえられます formatValueは関数を渡す prop のため、クライアントコンポーネントからのみ渡せます。サーバーコンポーネントから桁区切りを指定したいときは、シリアライズできるvalueFormatを使いますthresholdを指定すると上限線が引かれ、超えた棒がthresholdTone（既定は destructive）で塗られます。色が変わるだけなので、showValuesとthresholdLabelを組み合わせて、文字でも超過が読めるようにします- 棒の本数が可変のときは、コンテナの高さを先に決めておきます。描画のたびに高さが変わると、その下のコンテンツが飛びます
- 実装は GUNJO の BarChart（gunjo.jp を新しいタブで開く） にあります。props の一覧と、縦棒、横棒、しきい値の見本が置かれています
11. 関連リンク
- 関連するUIデザイン原則: 比較のしやすさ (Comparison Support), 色に依存しない設計 (Color Independence), 情報密度の最適化 (Information Density)
- 用語集（定義）: 認知負荷 (Cognitive Load), シグナル・ノイズ比 (Signal-to-Noise Ratio)
- 関連するUIコンポーネント（横）: Line Chart（折れ線グラフ）, Stacked Bar Chart（積み上げ棒グラフ）, Table（テーブル / 表）
12. まとめ
棒グラフの設計でいちばん効くのは、縦軸をゼロから始めることと、並び順に理由を持たせることです。迷ったら 4. 設計判断の核 に戻り、「基線はゼロか」「並び順を 1 行で説明できるか」「色以外の手がかりがあるか」の 3 点を確かめてください。
しきい値を扱うチャートでは、超過を色だけで示す崩れ方が繰り返し出ます。色、模様、文字の 3 つがそろっていれば、色を区別しにくい読者にも、読み上げを使う読者にも、同じ結論が届きます。項目名が長くて縦棒に収まらないと感じたときは、文字を斜めにする前に横棒を試してください。
