Dashboard Design Guidebook

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

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

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

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

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

Step 1: 要件の整理

5W1Hで整理する：

制約チェック：

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

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