時間に沿った値の動きを、点と線で示すチャートです。売上の推移、稼働率の変化、目標との距離のように、上がっているのか下がっているのかを先に決めさせたいときに使います。
この記事を読むと、点をつないでよいデータの条件、縦軸を切るときの断り方、同時に置ける系列の数、凡例より直接ラベルが読みやすい理由が自分でできるようになります。
1. UI例（Preview / Live）
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
折れ線グラフは、横軸に沿って並んだ点をつないで、値の動きを見せるチャートです。線は「点と点の間にも値が続いている」という主張です。この主張が成り立つデータでだけ使えます。
棒グラフとの違い：棒グラフは項目どうしが独立していてよく、並び替えても意味が変わりません。折れ線は横軸の順序が意味を持つため、並び替えると図が別のことを言い出します。
面グラフとの違い：面グラフは線の下を塗ります。塗ると「積み上がった量」に見えるため、合計に意味があるときに向きます。複数系列を重ねて塗ると、後ろの系列が隠れます。
スパークラインとの違い：スパークラインは軸も目盛りも持たない小さな線です。傾向だけを示し、正確な値は隣の数字に任せます。
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- 時系列の傾向を見せる：日次、週次、月次の推移。上昇か下降かを先に決めさせたいとき
- 目標との距離を見せる：実績と目標を 2 本並べ、開きが縮んでいるかを読ませたいとき
- 点が多い：10 点を超えると、棒グラフより折れ線のほうが傾向を追いやすくなります
- 複数の期間を重ねる：今年と去年を重ねて、季節の動きを比べたいとき
3.2 When NOT to use
- 横軸が独立したカテゴリ：都市別、担当者別のように、間に値が存在しないもの。棒グラフを使います
- 構成比を見せたい：割合が主題なら、円グラフか積み上げ棒を使います
- 系列が 6 本を超える：線が交差して追えなくなります。小さなチャートを並べる作りに切り替えます
- 点が 2 つしか無い：2 点を結んだ線は、途中の動きが直線だったという印象だけを残します
3.3 代替UI（Alternatives）
- 独立したカテゴリの比較 : Bar Chart（棒グラフ）
- 内訳の推移 : Stacked Bar Chart（積み上げ棒グラフ）
- カード内の小さな推移 : Sparkline Chart（スパークライン）
- 曜日と時間帯の密度 : Heatmap Chart（ヒートマップ）
- 正確な値を読ませたい : Table（テーブル / 表）
4. 設計判断の核（Decision Principles）
折れ線の核は「線が、点と点の間にも値があると主張している」こと。独立したカテゴリを線でつなぐと、存在しない中間の値を読者に読ませることになる。
判断の優先順位：1. つないでよいデータか、2. 縦軸の範囲と、切ったことの明示、3. 系列の数、4. 凡例か直接ラベルか。
- つないでよいのは、間に値が存在するときだけ：月、週、時刻のように連続していれば、線には意味があります。都市別や担当者別を線でつなぐと、読者は「東京と大阪の間」を読み取ろうとします。上のデモで横軸を都市に切り替えると、同じ線が急に意味を失います。判断は簡単で、「隣り合う 2 点の中間に値を置けるか」を確かめるだけです。
- 縦軸はゼロから始めなくてよい。ただし切ったと分かるようにする：折れ線は長さではなく傾きで読ませるので、棒グラフと違ってゼロ基線は前提ではありません。むしろ変動が小さいデータをゼロから描くと、線が平らになって何も読めません。範囲を絞ったときは、軸の下端の数字を出し、ゼロから始まっていないことを分かるようにします。GUNJO（群青）は UIXHERO が作っているデザインシステムです。その
LineChartには縦軸の範囲を固定する指定があり、複数のチャートでスケールをそろえるときに使います。 - 同時に置く系列は 4 本まで：線が増えるほど交差が増え、どの線を追っていたか分からなくなります。5 本以上を比べたいなら、同じ作りの小さなチャートを並べて、それぞれ 1 本ずつにします。全体の中の 1 本を強調したいなら、対象だけを濃くして残りを薄い灰色にします。
- 凡例より、線の終わりに名前を置く：凡例は「色と名前の対応」を覚えてから図に戻る作業を読者に強います。線の右端に名前を直接置けば、目の往復が消えます。GUNJO の
LineChartにはshowLegendがありますが、系列が 2 本から 3 本なら直接ラベルのほうが速く読めます。 - 系列の区別を色だけに載せない：実線と破線、点の記号、直接ラベルのどれかを足します。色だけで区別した折れ線は、色を見分けにくい読者に届かず、白黒で印刷した瞬間にも読めなくなります。これはAI が作ったUIの失敗 29 件の 28 番目「状態の違いが、色だけに乗る」と同じ崩れ方です。
5. 状態設計（States）
5.1 必須状態（Required）
- データあり：線、点、軸、ラベルがそろっている
- データなし：期間内に点が 1 つも無い。空の座標軸だけを残さない
- 読み込み中：高さを確保し、描画後にレイアウトが動かないようにする
5.2 条件付き状態（Conditional）
- 欠測：途中の点が取れていない。線をつながず、そこが切れていると分かるようにする
- 予測や見込み：確定値と同じ実線にしない。破線にして、いつからが見込みかを書く
- ホバー / フォーカス：その時点の全系列の値をまとめて出す
- エラー：取得に失敗した。古い線を残したまま最新のように見せない
5.3 State Gallery
| 状態 | 必須 | 何を伝えるか |
|---|---|---|
| データあり | 必須 | 値の動きと、系列どうしの開き |
| データなし | 必須 | この期間に記録が無い理由 |
| 読み込み中 | 必須 | 取得中であること |
| 欠測 | 条件付き | ここは 0 ではなく、値が無い |
| 予測 | 条件付き | ここから先は確定していない |
| ホバー / フォーカス | 条件付き | この時点の各系列の値 |
| エラー | 条件付き | 取得に失敗した。数字は信用できない |
6. バリエーション設計（Variants）
線か面か、点を出すか、基準線を引くかの組み合わせです。
| バリアント | GUNJO の指定 | 典型的な用途 |
|---|---|---|
| 線表示 | variant="line"（既定） | 複数系列の比較。交差を読ませたいとき |
| 面表示 | variant="area" | 系列が 1 本で、量の大きさも見せたいとき |
| 点なし | showDots={false} | 点が多く、個々の値より傾向を優先するとき |
| 基準線つき | referenceValue + referenceLabel | 目標や平均との距離が主題のとき |
| 凡例つき | showLegend | 系列が 4 本で、直接ラベルが重なるとき |
禁止パターン：面表示で複数系列を重ねること。後ろの系列が隠れ、どこまでが誰の値なのか読めなくなります。複数系列の量を同時に見せたいなら、Stacked Bar Chart（積み上げ棒グラフ）を使います。
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- 独立したカテゴリを線でつなぐ：存在しない中間の値を読ませます。棒グラフに変えるだけで直ります
- 縦軸を切ったことを書かない：範囲を絞ること自体は妥当でも、断りが無いと差が誇張されます
- 系列を色だけで区別する：白黒印刷でも、色を見分けにくい読者にも、区別が消えます
7.1 Bad（典型3つ）
- 部署別の人数を折れ線にしており、営業と開発の間に点が読めそうな線が引かれている
- 縦軸が 95 から 100 の範囲なのに、下端の数字が出ておらず、わずかな変動が急落に見える
- 実績と予測を同じ実線でつないでおり、どこからが見込みなのか読者が判断できない
7.2 Good（対になる3つ）
- 部署別は棒グラフにする。時間の推移を見せたいなら、部署ごとに月別の折れ線を並べる
- 縦軸の下端に「95」と書き、ゼロから始まっていないことを図の中で示す
- 予測部分を破線にし、切り替わる時点に「ここから見込み」と注記する
7.3 How to fix（手順）
- 隣り合う 2 点の中間に値を置けるか確かめる。置けないなら棒グラフに変える
- 縦軸の下端を確認する。ゼロでなければ、下端の数字を図の中に出す
- 系列を数える。5 本以上なら、小さなチャートを並べる作りに分ける
- 色で区別している系列に、線の種類か直接ラベルを足す
<svg>にrole="img"とaria-labelを付け、要約（開始値、終了値、向き）を書く
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
チャートは「色だけで系列を区別する」が起きやすいコンポーネントです。次の 3 点を満たします。
9.1 色だけに頼らない
折れ線では、色以外の手がかりを線そのものに載せられます。
- 線の種類：実線、破線、点線を使い分ける
- 点の形：丸、四角、三角で系列を分ける
- 直接ラベル：線の終わりに系列名を置く。これが最も確実です
線と背景のコントラスト比は 3:1 以上を確保します。薄い灰色の線は、明るい画面では消えます。
9.2 代替テキストか表での提示
<figure>
<svg role="img" aria-labelledby="line-title line-desc">
<title id="line-title">月別の実績と目標（2026年1月から6月）</title>
<desc id="line-desc">
実績は42から71へ上昇し、4月に63で一度伸びたあと5月に58へ下がった。
目標は46から66へ一定の傾きで上昇。実績が目標を上回るのは4月と6月。
</desc>
</svg>
<figcaption>
<details>
<summary>数値を表で見る</summary>
<table>
<caption>月別の実績と目標（単位は件）</caption>
<thead><tr><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>46</td></tr>
<tr><th scope="row">2月</th><td>51</td><td>50</td></tr>
</tbody>
</table>
</details>
</figcaption>
</figure>
aria-label に 12 か月ぶんの数字を並べても、読み上げでは覚えられません。要約（開始値、終了値、向き、目立つ変化）を書き、正確な数字は表に置きます。
9.3 キーボードで点をたどれる
点が操作できる（その日の詳細を開くなど）なら、キーボードでも同じことができる状態にします。
Tabでチャートに入り、ArrowLeftとArrowRightで時点を移動する- 系列が複数あるなら、
ArrowUpとArrowDownで系列を切り替える - フォーカス中の点には、色以外にも見える枠を出す
- 移動のたびに、その時点の値を読み上げに流す（
aria-live="polite"の小さな領域を使う）
9.4 Touch / Pointer
点は小さいので、点そのものを当たり判定にしません。横軸のその位置を縦に貫く透明な帯を置き、帯のどこを触っても同じ時点が選ばれるようにします。帯の幅は 44 ピクセル以上を目安にします。
10. 実装メモ（Implementation Notes）
- GUNJO の
LineChartはseries（{ label, data, color }の配列）を受け取ります。dataは数値の配列でも、{ label, value }の配列でも渡せます variant="area"は 1 系列のときに使います。複数系列で塗ると、重なった部分の値が読めなくなりますshowDots={false}は点が 20 を超えたあたりから読みやすくなります。点が密集すると、線ではなく点の帯に見えてしまうためです- 複数のチャートを並べて比べるなら、縦軸の範囲を明示して固定します。自動スケールのままだと、チャートごとに縮尺が変わり、形の比較ができません
- 実装は GUNJO の LineChart（gunjo.jp を新しいタブで開く） にあります。線表示、面表示、基準線、範囲固定の見本が置かれています
11. 関連リンク
- 関連するUIデザイン原則: 比較のしやすさ (Comparison Support), 色に依存しない設計 (Color Independence), 視線の誘導 (Gaze Guidance)
- 用語集（定義）: 認知負荷 (Cognitive Load), シグナル・ノイズ比 (Signal-to-Noise Ratio)
- 関連するUIコンポーネント（横）: Bar Chart（棒グラフ）, Sparkline Chart（スパークライン）, Stacked Bar Chart（積み上げ棒グラフ）
12. まとめ
折れ線の設計でいちばん効くのは、「線でつないでよいデータか」を先に確かめることです。迷ったら 4. 設計判断の核 に戻り、「隣り合う 2 点の中間に値を置けるか」「縦軸を切ったなら断ってあるか」「系列は 4 本以内か」の 3 点を確かめてください。
系列の区別は、色に線の種類か直接ラベルを足すだけで、白黒印刷でも読み上げでも通る図になります。系列が 5 本を超えたと感じたら、線を増やすのではなく、小さなチャートを並べる方向へ切り替えてください。
