データ可視化・ダッシュボード
数字を動かして見せる、グラフとKPIの演出。
数字を見せる部品のカテゴリ。KPI の統計カード、リストビュー、タイムライン、バッジ、伸びる棒グラフ、ドーナツ進捗、折れ線の描画、グラフのツールチップ、リアルタイム風スパークライン、ゲージ、カレンダーヒートマップ、ソート可能テーブル、オドメーター数字がある。原則は認知負荷。グラフのアニメーションは飾りではなく、値が「どこから増えたか」「どの点が最新か」を読み取る手がかりとして使うときだけ意味がある。ダッシュボードの一画面に何を何枚置き、どこを動かしどこを止めるかを決めるときに引く。
使い分け要約は stat-card を2〜3枚、比較は bar-chart-grow、割合は donut-progress、推移は line-chart-draw か realtime-sparkline。値の読み取りは chart-tooltip を必ず添える。明細は sortable-table。odometer-counter / gauge-meter は主役の数字1つに限る。
まず見る3件
- 静的
統計カード解説あり
Stat Card
ラベル・大きな数値・前期比の増減（増は緑↑／減は朱↓）・小さなスパークラインをまとめたKPIカード。横に2〜3枚並べてダッシュボードの要約を示します。
- 数値は 21px の太字、単位は 13px の灰で 1 段落とす。「¥8.42M」を同じ太さで組むと桁が読めない
- 増減は色＋矢印＋隠しテキストの 3 つで出す。緑と朱だけでは色覚特性によって区別できない
- tabular-nums を指定して桁の幅を揃える。並んだカードで小数点の位置がずれると比較しにくい
- CSSのみ
- クリック
バーチャート描画
Animated Bar Chart
棒が下から伸びるアニメーション。読み込みで自動再生し、ボタンで何度でも再生できる。
- 棒は 60ms ずつ順に伸ばす。同時に伸ばすと 1 枚の面に見え、順に伸ばすと 7 本の比較として読める
- 値ラベルは棒が伸び切る 600ms 後に出す。伸びている途中に数字があると、動く棒と数字の対応が取れない
- 最大の棒の上に出るラベルぶん枠に padding-top を取る。忘れると 91 の数字が切れる
- JS
- クリック
グラフtooltip
Chart Tooltip
棒グラフの各棒にホバー（PC）またはタップ（スマホ）でその棒の値がツールチップで表示される。
- PC はホバーで出し、タップ／クリックは固定と解除にする。タッチ端末で hover に頼ると最初のタップで開いて閉じられない
- ツールチップは棒の真上に三角付きで出す。カーソル追従にすると読んでいる間に動く
- 0.85 倍→1 倍の 150ms で出す。0 から拡大すると出所が分からず、即表示だと点滅に見える
- JS
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| バーチャート描画 Animated Bar Chart | クリック | JS | 曜日・月ごとの比較を最初の一瞬で印象づける表示・ダッシュボードの読み込み時の演出 | default / hover |
| ドーナツ進捗 Radial Progress (Donut) | クリック | JS | 達成率・完了率を 1 つの数字で示す KPI・目標に対する進み具合の可視化 | default / hover |
| 折れ線グラフ描画 Line Chart Draw-In | クリック | JS | 月次推移を「描いて見せる」レポートの冒頭・7 点程度の少数データ | default / hover |
| グラフtooltip Chart Tooltip | クリック | JS | 棒グラフで正確な値を必要なときだけ見せたい場合・PC はホバー・スマホはタップの両対応が要る画面 | default / hover / focus / active |
| リアルタイム風スパークライン Real-Time Sparkline | 自動再生 | JS | CPU・トラフィックなど流れる指標の監視・現在値と直近の傾向を小さく見せるカード | default |
| ゲージメーター Gauge Meter | クリック | JS | スコア・稼働率など 0〜100 の単一値・速度計の比喩が自然な指標 | default / hover |
| カレンダーヒートマップ Calendar Heatmap | ホバー | JS | 日ごとの活動量を数か月分まとめて見せる実績表示・継続の習慣化を促すプロフィール | default / hover |
| ソート可能テーブル Sortable Table | クリック | JS | 在庫・ランキング・注文一覧など並べ替えが主目的の表・数行〜数十行の小さなデータ | default / hover / focus / active |
| オドメーター数字ロール Odometer Counter | クリック | JS | 売上・累計など更新を印象づけたい KPI・カウントアップより「動いた」感を出したい数字 | default |
| リストビュー List View | クリック | JS | メンバー・会話・ファイルなどの一覧・行を選んで詳細を右や下に出す 2 ペイン構成 | default / hover / focus / active |
| タイムライン Timeline | 静的 | CSSのみ | 配送状況・承認フローの進捗・更新履歴・沿革など一方向の並び | default / active |
| 統計カード Stat Card | 静的 | CSSのみ | ダッシュボード先頭の KPI 要約（2〜3 枚）・前期比の増減が判断に直結する指標 | default |
| バッジ Badge | 静的 | CSSのみ | 一覧の状態列（成功／警告／エラー／情報）・アイコンに重ねる未読・件数 | default |
すべての見本（13件）
- クリック
バーチャート描画
Animated Bar Chart
棒が下から伸びるアニメーション。読み込みで自動再生し、ボタンで何度でも再生できる。
- JS
- クリック
ドーナツ進捗
Radial Progress (Donut)
SVGの stroke-dashoffset で指定%まで円弧が描かれ、中央に数値%がカウントアップで表示される。
- JS
- クリック
折れ線グラフ描画
Line Chart Draw-In
SVG polyline が stroke-dashoffset で描かれ、続いて各頂点の点が順番にポップインして現れる。
- JS
- クリック
グラフtooltip
Chart Tooltip
棒グラフの各棒にホバー（PC）またはタップ（スマホ）でその棒の値がツールチップで表示される。
- JS
- 自動再生
リアルタイム風スパークライン
Real-Time Sparkline
1秒ごとに新しい値が追加され、折れ線グラフが左に流れる。現在値と変化方向をリアルタイムで表示。
- JS
- クリック
ゲージメーター
Gauge Meter
スピードメーター風の半円ゲージ。針が0から目標値までアニメで動き、中央に数値がカウントアップで表示される。
- JS
- ホバー
カレンダーヒートマップ
Calendar Heatmap
GitHub風の週×曜日グリッドを値の濃淡(藍の階調)で塗る。セルにホバー/タップで値ツールチップを表示。
- JS
- クリック
ソート可能テーブル解説あり
Sortable Table
列ヘッダーをタップすると昇順/降順に並び替わり、矢印で現在の方向を表示する。日本語ダミーデータ5行。
- JS
- クリック
オドメーター数字ロール
Odometer Counter
各桁が縦に回転して数字が切り替わる、スロット／走行距離計のようなカウンタ。KPIや売上の更新を“動いて”見せる、count-upの上位版。
- JS
- クリック
リストビュー
List View
アバター＋主・副テキスト＋右端メタ／シェブロンで構成する定番のデータ一覧。行をタップすると選択状態になり、区切り線とホバーで視認性を保ちます。
- JS
- 静的
タイムライン解説あり
Timeline
縦の連結線とノードで出来事を時系列に並べる見本。現在地のノードだけ藍で強調し、各項目に時刻・見出し・説明を添えます。読み込みで各項目がふわっと現れます。
- CSSのみ
- 静的
統計カード解説あり
Stat Card
ラベル・大きな数値・前期比の増減（増は緑↑／減は朱↓）・小さなスパークラインをまとめたKPIカード。横に2〜3枚並べてダッシュボードの要約を示します。
- CSSのみ
- 静的
バッジ解説あり
Badge
ステータスドット（成功／警告／エラー／情報）、アイコンに重ねる件数バッジ、NEWピル、数値の通知バブルを一覧にした見本。状態や件数を小さく添えるための定番部品です。
- CSSのみ