# Dashboard Design Guidebook

> デジタル庁のダッシュボードデザイン実践ガイドブックに基づく、見やすいダッシュボード設計・作成のガイド。グラフ選び、レイアウト、カラーパレット、アクセシビリティ、チェックリストを網羅。Use when ダッシュボードを新規作成したい、既存ダッシュボードを改善したい、可視化設計をレビューしたい、または軽量HTML・Grafana・SQLiteベースのダッシュボード設計方針を決めたい時。

- Skill: `tumf/dashboard-design-guidebook` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add tumf/dashboard-design-guidebook`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tumf/dashboard-design-guidebook/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tumf (https://skillmd.com/u/tumf)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tumf/dashboard-design-guidebook

---


# ダッシュボードデザインガイド

デジタル庁「ダッシュボードデザインの実践ガイドブック」（2026.3.31更新）の実質をまとめたスキル。完全版は `references/guidebook-full.txt` に収録。

## ダッシュボードの二つの類型

- **提示型**：現状を基準と照らし合わせ、異常に気づき、行動の必要性を判断する（本スキルの主対象）
- **探索型**：差分を発見し、源流を特定して掘り下げる（ドメイン知識・集中・複雑操作を前提）

## 作成フロー（3ステップ）

### Step 1: 要件の整理

5W1Hで整理する：

| 視点 | 確認事項 |
|------|---------|
| **Why** | 最終的に達成したい目的、ダッシュボードを見る理由 |
| **What/So What** | 知るべき情報、必要なデータ種類、見た後の判断や行動 |
| **Who/When/Where** | 見る人（属性・リテラシー）、タイミング・頻度、場所・デバイス |
| **How** | 求める機能、データ項目、更新頻度 |

**制約チェック**：
- 情報の種類が多すぎる → 減らす
- 伝える内容が複雑すぎる → 複雑度を下げる
- データに欠損・更新頻度不足・分解能不足 → 回避可能か確認

### Step 2: プロトタイピング

1. 必要な情報を一覧化し、グラフ候補を選定
2. **骨格レイアウト**を先に決める（表層の装飾は後回し）
3. 関係者に見せてフィードバックを得る（理由・意図まで聞き出す）
4. 要望は機械的に全部反映せず、目的に適うものだけ選定

### Step 3: 実装とチェック

実装後に下記チェックリストで確認。

## 情報選定の4原則

1. **目的に則する** — 目的に当てはまる情報だけ載せる。データ→判断までの距離を縮める
2. **分解できる** — 全体→部分の階層構造。見る人が読み解ける単位まで分割
3. **違いに気づける** — 突出データに気づく。変化の時期と傾向がわかる
4. **鮮度が高い** — 最新データを反映。定期更新の仕組みを構築

## レイアウトの基本

- **左上→右下**の視線移動に合わせる
- 左上に全体指標、右下に詳細情報
- 背景色で左上を目立たせる
- 16:9画面、縦横6分割グリッド推奨
- フィルターは上部か左部、影響を受ける情報は下か右

## グラフの選び方

| グラフ | 表現 | 適する用途 |
|--------|------|-----------|
| 折れ線グラフ | 位置 | 時間変化・傾向 |
| 棒グラフ | 長さ | 数量比較 |
| 面グラフ（積み上げ） | 位置+面積 | 時間変化＋構成比 |
| 円グラフ | 角度+面積 | 構成比（総量が明らかな時） |

**選び方の判断基準**：
- 横軸が**時間** → 折れ線 or 面グラフ
- 横軸が**分類** → 棒グラフ
- **構成比**のみ必要 → 円グラフ
- **構成比の時間変化** → 100%積み上げ面グラフ
- 系列が多い → 棒グラフの方が正確に伝わる

## グラフ設計の2大原則

### 知りたいことを知れる
- シンプルにする（不要な要素・装飾を削除）
- 意味のある順列にする（数量大小順、更新日順など）
- 強弱をつける（重要情報は色・サイズ・太さで差別化）
- 待たせすぎない（読み込み・操作レスポンスを速く）

### 誤解を生まない
- わかりやすく表記（タイトル・系列名・単位を丁寧に）
- データを定義（対象・数値の意味・更新日を参照可能に）
- 表現を歪曲しない（原点は0、軸範囲を恣意的にしない）
- メタ情報を記載（データソース・更新日・注釈・免責）

## カラーパレット（デジタル庁準拠）

7系統: Blue, Light Blue, Cyan, Green, Orange, Red, Solid Gray

**コントラスト要件**:
- 背景とグラフ色面: **3:1以上**（BlueキーカラーならBlue-500=#4979F5以上）
- 3:1満たせない場合 → グラフ色面の近くに数値記載（数値は背景対4.5:1以上）
- それも無理 → マウスオーバー/フォーカス時に数値表示
- **色覚多様性に配慮** — 色以外の識別手段（形・模様）も提供。白黒印刷でも伝わるように

## Do's & Don'ts

**Do's:**
- 全体指標と詳細グラフを併記
- 項目の並び順に意味を持たせる
- 不要な要素・装飾を削除
- 色数を絞る（1〜5色）
- タイトルに内容とデータ種別を記載
- グラフと凡例を隣接させる

**Don'ts:**
- 3D表現・ドロップシャドウを使わない
- 色だけで分類を識別しない
- 棒グラフの原点を0以外にしない
- 情報を詰め込みすぎない

## 最終チェックリスト

### 利用者体験
- [ ] 判断・行動に必要な情報が提供できているか
- [ ] 全体像を捉える基準指標があるか
- [ ] 不要な情報は削除されているか
- [ ] 数回の操作で目的が達成できるか
- [ ] 利用者が迷わず情報にたどり着けるか
- [ ] 複数利用者からのフィードバックを得て改善したか

### デザイン
- [ ] 注目すべき数値に優先的に目が向くか
- [ ] 配列順序が認知しやすいか
- [ ] グラフと凡例が隣接しているか
- [ ] 比較対象（目標値・前年比など）があるか
- [ ] 色数は1〜5色に絞られているか
- [ ] 不要な装飾・3D・シャドウを避けているか
- [ ] タイトルは誤解のない内容か
- [ ] 棒グラフの原点は0か
- [ ] データ更新日が記載されているか

### テクニカル
- [ ] 実環境・デバイスで表示・動作確認済みか
- [ ] 読み込み速度は遅すぎないか

### データ設計
- [ ] 目的に見合ったデータだけを選んでいるか
- [ ] 必要な粒度まで分解できるか
- [ ] 更新頻度は要件を満たしているか
- [ ] 比較できる数値が掲載されているか
- [ ] データ定義が参照可能か

### アクセシビリティ
- [ ] 色だけで情報を識別していないか
- [ ] 代替テキストを付与しているか
- [ ] データファイル（CSV等）を公開しているか
- [ ] テキスト要約版があるか（一般公開の場合）

## 関連リソース

- デジタル庁政策データダッシュボード: https://www.digital.go.jp/resources/govdashboard
- 完全版ガイドブック: `references/guidebook-full.txt`
- 要件定義ワークシート(PPTX): https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/1948e3cd-736a-4378-9e31-039b08d11106/08697ee1/20240531_resources_dashboard-guidebook_worksheet_01.pptx
- プロトタイプ作成キット(PPTX): https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/1948e3cd-736a-4378-9e31-039b08d11106/2bff8e00/20240531_resources_dashboard-guidebook_toolkit_01.pptx
- ウェブアクセシビリティ導入ガイド: https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook