行と列の交点にあたるセルを、値の大きさに応じた濃さで塗るチャートです。曜日と時間帯の混み具合、コホートごとの継続率、機能ごとの利用状況のように、どこに山があるかを先に見つけさせたいときに使います。
この記事を読むと、濃淡で読めるものと読めないものの線引き、色の段階の切り方、行と列の並び順が模様を作る理由、値を数字でも出す判断が自分でできるようになります。
1. UI例（Preview / Live）
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
ヒートマップは、行と列で作った格子の各セルを、値の大きさに応じた濃さで塗るチャートです。読者はまず全体の模様を見て、濃い場所（山）と薄い場所（谷）を探します。
濃淡が伝えられるのは順序まで：人は色の濃さから「こちらのほうが濃い」は判断できますが、「こちらは 1.4 倍」は判断できません。ヒートマップは大小の順序を伝える図で、量を正確に伝える図ではありません。
表との違い：同じデータを表で出すと、値は正確に読めますが、山の場所を見つけるには全セルを読む必要があります。ヒートマップは逆で、山はすぐ見つかりますが値は読めません。両方が要るなら、セルに数字を書くか、表を添えます。
棒グラフとの違い：棒グラフは 1 次元（項目ごとの値）を扱います。ヒートマップは 2 次元（行と列の交点）を扱えます。この 2 次元性が、曜日と時間帯のような組み合わせを見せられる理由です。
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- 2 つの軸の組み合わせを見せる：曜日と時間帯、コホートと経過月、機能とプラン
- 山や谷を探させたい：どこが混むか、どこで落ちるかを先に見つけてほしいとき
- セルが多い：30 から 300 くらいのセルなら、表より模様のほうが速く読めます
- 値の大小の順序が分かれば足りる：正確な数字は次の画面で見せる作りにできるとき
3.2 When NOT to use
- 正確な値を比べたい：濃淡では読めません。表を使うか、セルに数字を書きます
- セルが 20 以下：模様が生まれません。表か棒グラフのほうが読めます
- 行や列の並びに意味が無い：模様が偶然のものになり、読者が意味を読み取ってしまいます
- 系列が 1 次元しかない：棒グラフを使います
3.3 代替UI（Alternatives）
- 正確な値を読ませたい : Table（テーブル / 表）
- 1 次元の比較 : Bar Chart（棒グラフ）
- 時系列の傾向 : Line Chart（折れ線グラフ）
- 密度の高い一覧 : Density Patterns（密度パターン）
4. 設計判断の核（Decision Principles）
ヒートマップの核は「濃淡が伝えられるのは順序まで」。だから濃淡は山を探させるために使い、正確な値は数字で別に渡す。
判断の優先順位：1. 濃淡で足りるか、2. 色の段階と方向、3. 行と列の並び順、4. 欠損の扱い。
- 濃淡で足りるか、値が要るかを決める：「どこが混むか」を探させたいなら濃淡で足ります。「木曜の 12 時は何人か」に答えさせたいなら、セルに数字を書くか、ツールチップと表を添えます。上のデモで値を出すと、濃淡が探すための地図で、数字が答えであることが見えます。両方を出すのが最も親切ですが、セルが小さいと数字が入りません。そのときはツールチップと表に任せます。
- 色は連続ではなく段に切る：連続したグラデーションは、凡例と見比べても「だいたいこのあたり」までしか決まりません。5 段から 7 段に切ると、凡例の段と見比べて「この範囲だ」と決められます。段の境目は切りのよい数字にします。GUNJO（群青）は UIXHERO が作っているデザインシステムです。その
HeatmapChartはmaxで正規化の基準を指定できるので、複数のヒートマップを並べるときは同じmaxを渡してスケールをそろえます。 - 色の方向は、データの性質で決める：「多いほど良い」でも「少ないほど良い」でもない中立のデータ（来店数など）なら、1 色の濃淡（単極）で足ります。プラスとマイナスの両方に意味があるデータ（前期比、目標との差）なら、中央を薄い色にして両方向へ伸ばす配色（双極）にします。単極のデータに双極の配色を使うと、中間の値が「ちょうど良い」に見えます。
- 行と列の並び順が、模様そのものを作る：曜日の順に並べると「平日の昼」と「週末の夜」という 2 つの山が模様として出ます。混雑の順に並べ替えると山は左に寄りますが、「週末が空いている」という読み方は消えます。上のデモで並べ替えると確かめられます。並び順は、読者に何を見つけさせたいかで決めます。並べ替えできる操作を付けるなら、既定の並びが何であるかを画面に書きます。
- 濃淡だけに意味を載せない：ヒートマップは、意味のすべてを色に載せてしまう図の代表です。凡例に段の範囲を数字で書き、セルの値をツールチップで出し、可能なら表を添えます。これはAI が作ったUIの失敗 29 件の 28 番目「状態の違いが、色だけに乗る」と同じ崩れ方で、ヒートマップでは最も起きやすくなります。
5. 状態設計（States）
5.1 必須状態（Required）
- データあり：セル、行と列の見出し、凡例がそろっている
- データなし：期間内に記録が無い。空の格子だけを残さない
- 読み込み中：格子の大きさを確保する
5.2 条件付き状態（Conditional）
- 欠損セル：値が無いセル。0 として最も薄い色で塗らず、斜線や記号で「値が無い」と示す
- 全セルが同じ：模様が生まれない。データが取れているのか確認できるようにする
- ホバー / フォーカス：そのセルの行、列、値を出す
- 選択中：ドリルダウンの起点として選んだセルを、色以外の枠でも示す
- エラー：取得に失敗した。前回の模様を残したまま最新のように見せない
5.3 State Gallery
| 状態 | 必須 | 何を伝えるか |
|---|---|---|
| データあり | 必須 | 山と谷の場所、全体の模様 |
| データなし | 必須 | 期間内に記録が無い理由 |
| 読み込み中 | 必須 | 取得中であること |
| 欠損セル | 条件付き | ここは 0 ではなく、値が無い |
| 全セルが同じ | 条件付き | 実際に均一なのか、取得できていないのか |
| ホバー / フォーカス | 条件付き | そのセルの行と列と値 |
| 選択中 | 条件付き | いまドリルダウンの対象になっているセル |
| エラー | 条件付き | 取得に失敗した。数字は信用できない |
6. バリエーション設計（Variants）
セルの密度と、添える情報の組み合わせです。
| バリアント | GUNJO の指定 | 典型的な用途 |
|---|---|---|
| 標準 | variant="default"（既定） | 単独で置く。曜日と時間帯など |
| コンパクト | variant="compact" | カードやサイドパネル。セルの高さを抑える |
| 値表示 | showValues | 濃淡では読めない差を数字で補う |
| 列サマリー | summary | 列ごとのピーク値を上部のバーで並べる |
| 選択セル | selectedCell + onCellSelect | ドリルダウンの起点を示す |
禁止パターン：凡例を出さないヒートマップ。濃淡が何を意味するのか、どの範囲がどの濃さなのかが分からなくなります。凡例が無い模様は、装飾と区別がつきません。
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- 濃淡から正確な値を読ませる：人は色の濃さから量を読み取れません
- 連続したグラデーションで凡例を作る：段の境目が無く、どの範囲かを決められません
- 欠損を最も薄い色で塗る：「値が無い」と「値が 0」が同じ見え方になります
7.1 Bad（典型3つ）
- 濃淡だけのヒートマップに「木曜の 12 時が最も多い」とだけ書き、値をどこにも出していない
- 凡例が連続したグラデーションの帯で、目盛りの数字が付いていない
- データが取れていないセルを最も薄い色で塗り、「その時間帯は 0 人」と読まれている
7.2 Good（対になる3つ）
- 濃淡で山を探させ、ホバーで値を出し、下に数値の表を折りたたんで添える
- 凡例を 5 段に切り、それぞれの範囲を「0 から 14」のように数字で書く
- 欠損セルは斜線で塗り、凡例に「データなし」の項目を置く
7.3 How to fix（手順）
- 「読者はこの図で何に答えるか」を 1 行で書く。値が要るなら、数字を渡す経路を用意する
- 凡例を 5 段から 7 段に切り、各段の範囲を数字で書く
- データが単極か双極かを確かめ、配色をそろえる
- 行と列の並び順の理由を書く。並べ替えできるなら、既定の並びを画面に書く
- 表として組み、
<th scope="col">と<th scope="row">で見出しを結ぶ
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
チャートは「色だけで系列を区別する」が起きやすいコンポーネントです。ヒートマップは意味のほぼすべてを色に載せる図なので、代替の経路がとくに重要です。次の 3 点を満たします。
9.1 色だけに頼らない
- セル内の数字：セルの高さが足りるなら、値を直接書く。これが最も確実です
- 凡例の数字：段ごとの範囲を数字で書く。色見本だけの凡例にしない
- 欠損の記号：斜線や「-」で「値が無い」ことを示す
- 明度差：段どうしの差を明度で作る。色相だけを変えると、色を区別しにくい読者には同じ濃さに見えます
セルの背景と、その上に載る数字のコントラスト比は 4.5:1 以上を確保します。濃い段では文字を白に切り替えます。
9.2 代替テキストか表での提示
ヒートマップは表として組めます。表として組むと、読み上げが行と列の見出しをそのまま読んでくれます。
<table>
<caption>曜日と時間帯ごとの来店数（単位は人・2026年8月）</caption>
<thead>
<tr>
<td></td>
<th scope="col">月</th><th scope="col">火</th><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">12:00</th>
<td style="background:var(--heat-4)">62</td>
<td style="background:var(--heat-5)">66</td>
<td style="background:var(--heat-4)">64</td>
<td style="background:var(--heat-5)">71</td>
<td style="background:var(--heat-4)">58</td>
<td style="background:var(--heat-3)">34</td>
<td style="background:var(--heat-2)">26</td>
</tr>
</tbody>
</table>
読み上げは「12:00、木、71」と読みます。色は視覚的な補助になり、値そのものはセルの内容として届きます。<svg> で描く場合は、role="img" と aria-label に要約（最大のセル、最小のセル、山の場所）を書き、同じ数字を読める表を近くに置きます。
セル数が多いときは、aria-label にすべてを並べません。「最も多いのは木曜12時の71人。平日の昼と週末の夜に山がある」のような要約を書きます。
9.3 キーボードでセルをたどれる
セルがクリックできる（その時間帯の詳細を開くなど）なら、キーボードでも同じことができる状態にします。
Tabで格子に入り、ArrowLeft/ArrowRight/ArrowUp/ArrowDownでセルを移動する- フォーカス中のセルには、色以外にも見える枠を出す
EnterとSpaceで、クリックと同じ操作が起きるHomeとEndで行の端へ、PageUpとPageDownで列の端へ移動できると、大きな格子でも移動が短くなります- 移動のたびに「木曜、12時、71人」のように読み上げへ流す
格子全体を 1 つのタブ位置にして、中は矢印キーで動く作りにします。セルの数だけタブ位置があると、次の要素へ移るまでに何十回も Tab を押すことになります。
9.4 Touch / Pointer
セルは小さくなりがちです。タップできる作りにするなら、セルの高さを 44 ピクセル以上にするか、行または列を選ぶ操作に置き換えます。狭い画面では、格子を横スクロールさせるより、行ごとのリストに組み替えるほうが操作しやすくなります。
10. 実装メモ（Implementation Notes）
- GUNJO の
HeatmapChartはdata（{ x, y, value }の配列）とxLabels/yLabelsを受け取ります。dataのxとyは、ラベルの文字列と一致させます maxを明示しないと、そのデータの最大値で正規化されます。複数のヒートマップを並べて比べるなら、同じmaxを渡しますsummaryは列ごとのピーク値を上部のバーとして出します。列どうしの比較を、濃淡ではなく長さで扱えるようになりますselectedCellとonCellSelectでセルの選択を扱えます。選択の表示はリングなので、色以外の手がかりとして機能します- 実装は GUNJO の HeatmapChart（gunjo.jp を新しいタブで開く） にあります。標準、列サマリーつき、値表示、選択セル、コンパクトの見本が置かれています
11. 関連リンク
- 関連するUIデザイン原則: 色に依存しない設計 (Color Independence), 情報密度の最適化 (Information Density), 比較のしやすさ (Comparison Support)
- 用語集（定義）: ヒートマップ (Heat Map), カラーユニバーサルデザイン (Color Universal Design)
- 関連するUIコンポーネント（横）: Table（テーブル / 表）, Bar Chart（棒グラフ）, Density Patterns（密度パターン）
12. まとめ
ヒートマップの設計でいちばん効くのは、濃淡に何を期待するかを決めることです。迷ったら 4. 設計判断の核 に戻り、「濃淡で足りるか、値が要るか」「凡例は段に切ってあるか」「行と列の並び順に理由があるか」の 3 点を確かめてください。
濃淡は山を探すための地図で、答えそのものではありません。表として組み、セルに値を書き、凡例に段の範囲を数字で置けば、色を区別しにくい読者にも、読み上げを使う読者にも、同じ結論が届きます。
