軸も目盛りも凡例も持たない、小さな傾向線です。指標カードの数字の隣、表の行の中、一覧の各行のように、数字だけでは分からない「ここ最近の動き」を、場所を取らずに添えたいときに使います。
この記事を読むと、スパークラインを単独で置いてはいけない理由、複数を並べるときに縦軸をそろえる必要、期間の書き方、読み上げに何を渡すかが自分でできるようになります。
1. UI例（Preview / Live）
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
スパークラインは、軸も目盛りも凡例も持たない小さな折れ線です。2006 年に、統計学者のエドワード・タフティが著書で示した図法で、「文中に置ける、語のような大きさのグラフ」と説明されています。伝えるのは値ではなく、上がっているか、下がっているか、揺れているかという傾向だけです。
折れ線グラフとの違い：折れ線グラフは軸と目盛りを持ち、単独で読めます。スパークラインは軸を捨てた代わりに、数字の隣や表の行の中に置ける大きさになりました。単独では読めないので、数字とセットで使います。
プログレスバーとの違い：プログレスバーは 1 つの値の達成度を示します。スパークラインは複数の時点の並びを示します。
読めるものと読めないもの：読めるのは向き（上がっている、下がっている）と、大きな揺れの有無です。読めないのは、値そのもの、変化の幅、いつの時点かです。これらは隣の数字と見出しに任せます。
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- 指標カードに動きを添える：大きな数字の隣に置き、「いまの値」と「ここ最近の動き」を 1 枚にまとめる
- 一覧の各行に添える：商品ごと、店舗ごとの推移を、行の中に置く
- 場所が無い：折れ線グラフを置く面積が取れないとき
- 傾向だけ分かれば足りる：詳しく見たい人は、その先の画面で折れ線を見られる作りにできるとき
3.2 When NOT to use
- 値を読ませたい：軸が無いので読めません。折れ線グラフを使います
- 単独で置く：数字が無いスパークラインは、上がっているという印象だけを残します
- 点が 5 つ以下：線が折れ線 1 本になり、傾向というより 1 回の変化に見えます
- 複数系列を重ねたい：小さすぎて交差が読めません。折れ線グラフを使います
3.3 代替UI（Alternatives）
- 値も読ませたい : Line Chart（折れ線グラフ）
- 達成度を示したい : Progress Bar（プログレスバー）, Gauge Chart（ゲージチャート）
- 項目ごとの比較 : Bar Chart（棒グラフ）
- 一覧に置く : Table（テーブル / 表）, Card（カード）
4. 設計判断の核（Decision Principles）
スパークラインの核は「軸を捨てた図である」こと。だから隣に数字が無いスパークラインは、上がっているという印象だけを残して、何も伝えていない。
判断の優先順位：1. 隣に数字があるか、2. 並べるときの縦軸の範囲、3. 期間の明示、4. 折れ線に切り替える線引き。
- 単独で置かない。現在値の数字と並べる：スパークラインが伝えるのは向きだけです。上のデモで数字を消すと、上がっているのは分かるのに、1 件から 2 件なのか 1 万から 2 万なのかが読めません。数字が主役で、線はその補足という関係にします。可能なら、変化量（「直近 8 週で +920 件」）も添えます。線が伝えられない「どれくらい」を、文字が引き受けます。
- 並べるときは縦軸の範囲をそろえる：これがスパークラインで最も起きやすい間違いです。各系列を自分の最小値と最大値で描くと、8 件しか増えていない解約が、920 件増えた訪問数と同じくらい激しく動いて見えます。上のデモで自動スケールに切り替えると確かめられます。同じ単位の系列を並べるなら、同じ範囲で描きます。単位が違う系列を並べるなら、線の描かれ方だけを比べさせないよう、変化率の数字を添えます。
- 期間を書く：軸が無いので、その線が 7 日ぶんなのか 12 か月ぶんなのかは図から読めません。カードの見出しか、線の近くに「直近 8 週」と書きます。同じ画面のスパークラインは、期間をそろえます。そろえないと、読者は無意識に同じ期間だと思って比べます。
- 基準線を引くなら、その意味を書く：GUNJO（群青）は UIXHERO が作っているデザインシステムです。その
SparklineChartはreferenceValueで点線の基準値を引けます。目標や平均を示せますが、軸が無いので線だけでは何の線か分かりません。referenceLabelに意味の分かる名前を入れ、可能なら「目標 90 件」のように数字も添えます。 - 点や軸を足したくなったら、折れ線へ移る：目盛りを足したい、値のラベルを出したい、系列を 2 本にしたいと思ったときが、スパークラインの限界です。無理に情報を足すと、小さくて読めない折れ線グラフになります。カードをクリックしたら折れ線グラフに移る、という作りにするほうが両方が生きます。
5. 状態設計（States）
5.1 必須状態（Required）
- データあり：線と、隣の数字がそろっている
- データなし：点が 1 つも無い。平らな線を描かず、線の場所を空けて「データなし」と書く
- 読み込み中：線の場所ぶんの高さを確保する
5.2 条件付き状態（Conditional）
- 点が 1 つだけ：線が引けない。点だけを打つか、線を出さずに数字だけにする
- 欠測：途中の点が取れていない。線をつながず、そこが切れていると分かるようにする
- 全点が同じ値：平らな線になる。データなしと見分けられるようにする
- ホバー / フォーカス：期間と、始点と終点の値を出す
5.3 State Gallery
| 状態 | 必須 | 何を伝えるか |
|---|---|---|
| データあり | 必須 | 期間内の向きと、大きな揺れの有無 |
| データなし | 必須 | この期間に記録が無い |
| 読み込み中 | 必須 | 取得中であること |
| 点が 1 つだけ | 条件付き | 比べる相手がまだ無い |
| 欠測 | 条件付き | ここは 0 ではなく、値が無い |
| 全点が同じ値 | 条件付き | 実際に変化が無い（データが無いのではない） |
| ホバー / フォーカス | 条件付き | 期間と、始点と終点の値 |
6. バリエーション設計（Variants）
線の描き方と、基準線の有無で決まります。
| バリアント | GUNJO の指定 | 典型的な用途 |
|---|---|---|
| 線 | variant="line"（既定） | 連続した値の傾向。最も汎用 |
| 面 | variant="area" | 量の大きさも感じさせたいとき。1 系列のみ |
| ステップ | variant="step" | 段階的に変わる値（在庫、料金プラン、状態の段） |
| 基準線つき | referenceValue + referenceLabel | 目標や平均との位置関係を添えるとき |
禁止パターン：スパークラインを数字なしで単独に置くこと。読者は向きしか受け取れず、その向きが良いことなのか悪いことなのかも判断できません。
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- 数字が無い：向きの印象だけが残り、規模も良否も伝わりません
- 並べたスパークラインの縦軸がばらばら：小さな変化が大きな変化と同じ形に見えます
- 期間が書かれていない：7 日ぶんと 12 か月ぶんが同じ画面に並んでも気づけません
7.1 Bad（典型3つ）
- 指標カードにスパークラインだけがあり、現在値も期間も書かれていない
- 3 つの指標を並べ、それぞれ自分の最小値と最大値で描いている。8 件の増加が急上昇に見える
- 線に
aria-label="3900, 4100, 3980, 4300, 4210, 4450, 4600, 4820"と付けている
7.2 Good（対になる3つ）
- 現在値を大きく出し、その隣に線を置き、「直近 8 週」と期間を書く
- 同じ単位の 3 系列を、同じ範囲（0 から最大値）で描く
- 線は
aria-hiddenにして、「直近 8 週で +920 件」を本文の要素として置く
7.3 How to fix（手順）
- 線の隣に現在値の数字を置く。無ければ、そのスパークラインは外す
- 同じ画面で並べているスパークラインの縦軸の範囲をそろえる
- 期間を見出しか線の近くに書く。同じ画面では期間をそろえる
- 変化量か変化率を文字で添える（「+920 件」「+19%」）
<svg>をaria-hidden="true"にして、数字と傾向の説明を本文として置く
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
チャートは「色だけで系列を区別する」が起きやすいコンポーネントです。スパークラインは系列が 1 本なので色の区別は起きにくい一方、増減の向きを色だけで伝える崩れ方が起きます。次の 3 点を満たします。
9.1 色だけに頼らない
- 向きを文字で書く：「+920 件」のように符号と数字を出す。緑と赤だけで良否を伝えない
- 良否を語で書く：解約が増えるのは悪いことです。色ではなく「増加（要確認）」のような語で示します
- 線の太さ：薄い色の線は明るい画面で消えます。線と背景のコントラスト比は 3:1 以上を確保します
- 形の違い：
variant="step"のように、線の描き方そのものを変える方法もあります
9.2 代替テキストか表での提示
スパークラインでは、図を読み上げから外し、結論を文字として置くのが最も読みやすくなります。
<div class="metric">
<p class="metric__label" id="visits-label">訪問数</p>
<p class="metric__value"><strong>4,820</strong> 件</p>
<!-- 線は装飾。読み上げには下の文が届く -->
<svg class="metric__spark" aria-hidden="true" focusable="false">
<path d="M3 20 L 15 17 …" fill="none" stroke="currentColor" />
</svg>
<p class="metric__trend">直近 8 週で 3,900 件から 4,820 件へ増加（+920 件、+24%）</p>
</div>
aria-hidden="true" と focusable="false" の両方を付けます。focusable="false" が無いと、一部のブラウザで <svg> がタブ移動の対象になります。
一覧の各行に置く場合も同じです。行ごとに 8 個の数字を読ませると、20 行で 160 個が流れます。行には「増加（+920 件）」の 1 文だけを届けます。値そのものを渡したいなら、開閉できる表を別に用意します。
9.3 キーボードで点をたどれる
スパークラインは表示だけの図として使うのが基本です。フォーカス可能にしません。止まるだけの要素を増やさないためです。
その代わり、次の 2 つを用意します。
- カード全体をリンクかボタンにする：
Tabでカードに入り、Enterで軸のある折れ線グラフへ移る - 移った先で点をたどれるようにする：詳しく見たい読者は、折れ線グラフ側で
ArrowLeftとArrowRightを使えます
スパークラインそのものに点ごとのフォーカスを付けると、20 行の一覧で 160 個のタブ位置ができます。詳細は移った先に任せます。
9.4 Touch / Pointer
線そのものをタップ対象にしません。細すぎて狙えないからです。カードや行の全体を当たり判定にして、高さ 44 ピクセル以上を確保します。ホバーで値を出す作りにしているなら、タッチでは同じ情報が出ないことがあるので、文字での説明を欠かさないようにします。
10. 実装メモ（Implementation Notes）
- GUNJO の
SparklineChartはdata（数値の配列、または{ label, value }の配列）を受け取ります。ラベル付きで渡すと、ツールチップに時点が出ます - 複数を並べてスケールをそろえるときは、各スパークラインに同じ最大値を渡します。渡さないと、それぞれのデータの範囲で正規化されます
variant="step"は、値が段階的に変わるもの（在庫、料金プラン、状態の段）に向きます。連続した値に使うと、実際より急な変化に見えますformatValueは関数を渡す prop のため、クライアントコンポーネントからのみ渡せます。サーバーコンポーネントからはvalueFormatを使います- 実装は GUNJO の SparklineChart（gunjo.jp を新しいタブで開く） にあります。線、面、ステップ、基準線の見本が置かれています
11. 関連リンク
- 関連するUIデザイン原則: 情報密度の最適化 (Information Density), 色に依存しない設計 (Color Independence), 観測性と指標 (Observability & Metrics)
- 用語集（定義）: シグナル・ノイズ比 (Signal-to-Noise Ratio), 視覚的アンカー (Visual Anchor)
- 関連するUIコンポーネント（横）: Line Chart（折れ線グラフ）, Card（カード）, Dashboard Patterns（ダッシュボードパターン）
12. まとめ
スパークラインの設計でいちばん効くのは、数字と並べて置くことです。迷ったら 4. 設計判断の核 に戻り、「隣に現在値があるか」「並べた線の範囲はそろっているか」「期間が書かれているか」の 3 点を確かめてください。
軸を捨てたぶん、線が伝えられるのは向きだけになりました。足りない情報は隣の数字と文字が引き受けます。目盛りや系列を足したくなったら、それはスパークラインの限界で、折れ線グラフへ移る合図です。
