KPI指標・グラフ・テーブル・アラートなどの情報を1画面に集約した、データ監視・意思決定のためのUIパターン。KPIカード・時系列グラフ・データテーブル・アラートバナー・日付フィルター・ウィジェットグリッドで構成される。Google Analytics・Salesforce・Vercel・GitHub Insightsなど、データドリブンなプロダクトのほぼすべてに登場する。
この記事を読むと、KPIカードのレイアウト・グリッドシステムによるウィジェット配置・スケルトンローディング・日付範囲フィルター・レスポンシブダッシュボード・空状態の設計が自分でできるようになります。
1. UI例（Preview / Live）
2. 定義（Definition）
複数のデータウィジェット（KPIカード・グラフ・テーブル・アラート）を1画面にまとめた、データ監視・意思決定のためのUIパターン。単一のコンポーネントではなく、複数のコンポーネントを特定の目的で組み合わせるレイアウトパターン。
ダッシュボードの4層構造：
| 層 | 要素 | 役割 |
|---|---|---|
| フィルター層 | 日付範囲・セグメント | データの絞り込み |
| サマリー層 | KPIカード | 現状の一目把握 |
| 分析層 | グラフ・チャート | トレンドと比較 |
| 詳細層 | テーブル・リスト | ドリルダウン |
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- データ監視：サーバーのリアルタイム状態・エラーレート・パフォーマンス
- KPI管理：売上・CVR・DAU などのビジネス指標の日次確認
- オペレーション管理：サポートチケット数・在庫状況・注文状況
- コンテンツ分析：PV・直帰率・コンバージョンのページ別比較
3.2 When NOT to use
- 情報が少ない（5項目未満）：シンプルな設定ページやプロフィールページにダッシュボードパターンは重すぎる
- データが静的・変化しない：更新されないデータには動的なダッシュボードは不要
4. 設計判断の核（Decision Principles）
Dashboard Patternsの核は「情報の階層化」——KPIカード（要約）→グラフ（トレンド）→テーブル（詳細）の順に上から配置し、ユーザーが「全体把握 → 問題発見 → 詳細確認」の流れで画面を読めるようにする。すべてのウィジェットを同等の重みで並べると、どこを見ればいいか分からなくなる。
判断の優先順位：① 情報の階層化（要約→詳細） → ② スケルトンローディング → ③ フィルターの連動 → ④ 前期比較の視覚化
- KPIカードは「値・変化量（前期比）・アイコン」の3点セットで設計する：値だけ見せても「増えたか減ったか」が分からない。変化量（前期比）と上昇/下降の色（緑/赤）をセットで表示する。「+12.4%」のような相対値と「前期比」のコンテキスト表示を忘れずに
- データ取得中はスケルトンローディングで実際のレイアウトを維持する：スピナー1つよりも、実際のカードの骨格をグレーで表示するスケルトンの方が、レイアウトシフトがなく体感速度が速い。KPIカードとグラフの形状をスケルトンで模倣する
- フィルター（日付範囲・セグメント）の変更はすべてのウィジェットに連動させる：フィルターが1か所に集まっていて、変更したらページ全体のデータが更新される設計が理想。ウィジェットごとにフィルターを持つと管理が煩雑になる
- レスポンシブはグリッドの列数で制御する：KPIカードは
grid-cols-4（デスクトップ）→grid-cols-2（タブレット）→grid-cols-1（モバイル）と列数を変える。幅を縮小するのではなく列数を変えることで、各カードの読みやすさを維持する
5. 状態設計（States）
| 状態 | KPIカード | グラフ | テーブル |
|---|---|---|---|
| ローディング | スケルトン | スケルトン矩形 | スケルトン行 |
| データあり | 値・変化量表示 | 折れ線/棒グラフ | データ行 |
| データなし（0件） | 「データがありません」 | 空グラフ | 空状態メッセージ |
| エラー | エラーバナー | 再試行ボタン | — |
| フィルター変更中 | スケルトン | スケルトン | スケルトン |
6. バリエーション設計（Variants）
| バリアント | 特徴 | 使用例 |
|---|---|---|
| 概要ダッシュボード | KPIカード＋折れ線グラフ | Google Analytics |
| リアルタイムモニター | 自動更新・アラート | サーバー監視・Datadog |
| 比較ダッシュボード | A/Bグループの並列表示 | A/Bテスト結果 |
| カスタマイズ可能 | ウィジェットのDnD並べ替え | Salesforce・Grafana |
| モバイルダッシュボード | 縦スクロール・KPI重視 | スマホ向け経営指標 |
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- データをそのまま並べて情報の階層がない：KPI・グラフ・テーブルが同じサイズで羅列され、何を最初に見るべきかが分からない
- ローディング中にレイアウトシフトが起きる：データ取得後に突然ウィジェットが出現してページが跳ねる
- フィルターが各ウィジェットにバラバラについている：日付フィルターをウィジェットごとに操作しなければならず、全体を統一した条件で見られない
7.1 Bad（典型3つ）
- 12個のKPIカードを同じサイズで並べ、前期比もなく「増えた/減った」が分からない
isLoading中は空のdivを返し、データ取得後にレイアウト全体が出現してシフトが発生する- 日付フィルターをグラフコンポーネント内に持ち、テーブルとKPIは別のデータを表示している
7.2 Good（対になる3つ）
- KPIは4〜6枚に絞り、値・前期比・アイコン（または色）の3点セットで設計する
isLoading中はスケルトンコンポーネントで実際のレイアウト形状を維持し、レイアウトシフトをゼロにする- 日付フィルターをダッシュボードのトップレベルStateとして管理し、全ウィジェットがその値を参照してデータを取得する
7.3 How to fix（手順）
- ウィジェット一覧を「要約→トレンド→詳細」の3層に分類し直す
isLoadingstate にスケルトンコンポーネントを返す分岐を追加する- 日付フィルターをページのトップレベルに引き上げ、全ウィジェットに
periodを props で渡す - KPIカードに前期比フィールドを追加し、上昇/下降を色で示す
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
Screen Reader
<!-- KPIカード -->
<article aria-label="総訪問数">
<p>12,847</p>
<p aria-label="前期比 プラス12.4パーセント 上昇">↑ +12.4%</p>
</article>
<!-- グラフ：テキスト代替 -->
<figure>
<figcaption>訪問数の推移（過去7日間）</figcaption>
<svg aria-hidden="true"><!-- グラフSVG --></svg>
<!-- スクリーンリーダー向けのテキスト代替 -->
<table class="sr-only">
<caption>訪問数データ</caption>
<!-- 日付と値のテーブル -->
</table>
</figure>
<!-- ローディング状態 -->
<div role="status" aria-label="データを読み込んでいます">
<!-- スケルトン -->
</div>
10. 実装メモ（Implementation Notes）
- グラフライブラリ：
recharts（React向け・軽量）・Chart.js+react-chartjs-2・D3.js（高度なカスタマイズ）が主な選択肢。プロダクション用途ではrechartsが最もバランスが良い - データフェッチの最適化：SWR や React Query の
staleWhileRevalidateを使うと、キャッシュデータを即時表示しながらバックグラウンドで更新するため、体感ローディング時間がゼロになる - ウィジェットのメモ化：各ウィジェットコンポーネントを
React.memoでラップし、関連する props が変わった時のみ再レンダリングするよう最適化する。ダッシュボードは多くのコンポーネントが1画面に並ぶため、不要な再レンダリングがパフォーマンスに直結する - レスポンシブグリッド：Tailwind の
grid-cols-1 sm:grid-cols-2 lg:grid-cols-4パターンが最も素直。CSS Grid のauto-fill+minmaxで完全にレスポンシブなグリッドを作ることもできる
11. 関連リンク
- 関連するUIデザイン原則: 情報密度の最適化 (Information Density), 視覚的階層 (Visual Hierarchy), システム状態の可視性 (Visibility of System Status)
- 用語集（定義）: 情報アーキテクチャ
- 関連するUIコンポーネント（横）: Card（カード）, Table（テーブル）, Filter（フィルター）, Badge（バッジ）, Loading（ローディング）, Empty State（空状態）, Density Patterns（密度パターン）
12. まとめ
Dashboard Patternsの設計で最重要なのは「情報の階層化（要約→トレンド→詳細）」と「スケルトンローディング」です。KPIカードには前期比を必ずセットにし、ローディング中もレイアウト形状をスケルトンで維持することで、体感速度とレイアウト安定性が大きく向上します。フィルターはページトップレベルで一元管理し、全ウィジェットが同じ条件のデータを表示するアーキテクチャを最初から設計してください。
