# Public Dashboard Design

> 公共ダッシュボードや説明責任が求められる資料に対して、誤解防止・比較しやすさ・信頼性確保を優先した設計ルールを適用する

- Skill: `nekoai-lab/public-dashboard-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add nekoai-lab/public-dashboard-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nekoai-lab/public-dashboard-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: nekoai-lab (https://skillmd.com/u/nekoai-lab)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/nekoai-lab/public-dashboard-design

---


# 目的
公共ダッシュボードや説明責任が必要な可視化において、見た人が誤解なく事実を把握し、判断できる状態をつくる。

このスキルは、見栄えではなく「誰が見ても同じ解釈ができること」「データの出所と時点が明確であること」を最優先にする。

# 適用場面
- 行政・公共機関のダッシュボード設計・レビュー
- KPI資料・進捗報告の図表設計
- 説明責任が伴うレポート・提案書の可視化
- 誤読リスクを下げたい既存ダッシュボードの改善
- 公開資料に含めるグラフ・表の選定

# 基本姿勢
- 実績だけを見せず、常に比較軸（目標・計画・前期）を持たせる
- データの基準時点と出典を省かない
- 色や位置だけに意味を持たせず、ラベル・凡例・注記で補う
- 読み手に前提知識を要求しない
- 誤読を招く表現は、わかりやすさより誤解のなさを優先して排除する

# 優先原則

## 1. 比較軸を必ず持たせる
- 実績値には目標値・計画比・前期比のいずれかを必ずセットで示す
- 比較基準が何かをタイトルまたは注記に明示する
- 比較基準を変えた場合は、その変更を注記する

## 2. データの信頼性を担保する
- 基準日時を「YYYY年MM月DD日時点」の形式で明記する
- 出典・責任主体（組織名）を毎ページ・毎画面に記載する
- 定義が変わった指標には変更時点と変更内容を注記する

## 3. 1画面1論点
- 1つのダッシュボード画面に問いを1つだけ置く
- 主指標と補足情報の優先度を視覚的に区別する
- 論点が増えた場合はページを分割する

## 4. 意味を言葉で補う
- 数値には単位を必ずつける
- グラフには対象・期間・粒度を明記する
- 色だけで良し悪しを伝えない

# KPIルール
- KPIカードには「実績値」「目標値」「計画比（%）」の3点をセットで表示する
- 実績のみの表示は不可（比較軸なしのKPI表示は禁止）
- 達成・未達の区別は色だけに頼らず、数値または記号（▲/▼）で補う
- 複数KPIを並べる場合は、重要度の高い順に左上から配置する
- ゲージは最大値の根拠（目標値・上限値）を明示しないと使わない

# グラフ選定ルール

## 目的別の選定基準
| 目的 | 優先するグラフ | 避けるグラフ |
|---|---|---|
| 時系列の変化・傾向 | 折れ線グラフ | 棒グラフ |
| 規模感の推移を強調 | 面グラフ | 折れ線グラフ単体 |
| カテゴリ間の大小比較 | 棒グラフ（縦棒 or 横棒） | 円グラフ、ツリーマップ |
| 大小比較 ＋ 推移を同時に示す | 複合グラフ（棒＋折れ線） | 2種のグラフを別々に並べる |
| 総量 ＋ 内訳の構成を比較 | 積み上げ棒グラフ | 複数の円グラフを並べる |
| 構成比のカテゴリ間比較 | 100%積み上げ棒グラフ | 複数の円グラフを並べる |
| 増減の要因と内訳 | ウォーターフォール図 | 棒グラフ単体 |
| プロセスの段階的減少・離脱 | ファネル | 折れ線グラフ |
| 構成比（3項目以内） | 円グラフ・ドーナツグラフ | 積み上げ棒（直感性優先の場合のみ） |
| 地域差の可視化 | 地図（シェイプ＋色の濃淡） | 都道府県を横に並べた棒グラフ |
| 階層構造の大小関係 | ツリーマップ | 棒グラフ（階層がある場合） |
| 2変数の相関・分布・外れ値 | 散布図 | 折れ線グラフ、棒グラフ |
| 複数指標の横断参照・詳細値 | 表・マトリックス | グラフ（精確な値の参照が目的の場合） |

## 誤用しやすいパターン
よく見られる誤用を明示する。選定表の「避けるグラフ」と合わせて確認すること。

- **地域差の可視化**：都道府県を大量の棒グラフで並べない。地図（シェイプ＋色の濃淡）を使う
- **構成比のカテゴリ間比較**：複数の円グラフを並べない。100%積み上げ棒グラフに切り替える
- **増減要因の説明**：棒グラフ単体で済ませない。内訳を示す必要があればウォーターフォール図を使う
- **階層構造のないデータ**：ツリーマップを使わない。カテゴリ比較なら棒グラフを使う

## 棒グラフの軸
- 縦軸・横軸は原則0始点とする
- 0始点でない場合は「軸は〇〇から表示」と注記する

## 複合グラフ（2軸）
- 2軸の単位が異なる場合は、タイトルまたは凡例に単位を明示する
- 2軸を使う理由が説明できない場合は使わない

# タイトル・注記ルール
- タイトル構造：`ダッシュボードタイトル｜サブタイトル`（主題と補足を `｜` で区切る）
- タイトルだけで「何の・いつの・何と比べた」数字かわかるようにする
- 基準日時は左下フッターに固定：`YYYY年MM月DD日時点の数字`
- 組織名・出典は右下フッターに固定
- グラフ・表のタイトルには対象・期間・粒度・単位を含める

## 悪いタイトル例
- 実績
- 進捗状況
- 比較

## 良いタイトル例
- 月次申請件数の推移（2025年1月〜12月 / 前年同月比）
- 都道府県別 交付率（2025年12月1日時点 / 目標比）
- フェーズ別 処理件数（2025年上期 vs 下期）

# 色ルール
- 強調色は1画面に1〜2色に絞る
- 赤は「未達・警告・異常」のみに使う。それ以外の強調に赤を使わない
- ウォーターフォール図の色は意味で固定する：増加＝青、減少＝赤、合計＝灰
- 地図は単色グラデーションで数量を表現する。多色は使わない
- 色だけで系列・良し悪しを伝える場合は、凡例またはラベルを必ず補う
- ページをまたいで色の意味を変えない

# レイアウトルール
- レイアウト比率は16:9（横長）または4:3を統一する。混在しない
- 要素の端をグリッドに揃える
- 余白を確保し、要素を詰め込まない

## 固定配置（変更不可）
公共ダッシュボードでは以下の配置を固定する。デザイン上の都合で変えない。

| 要素 | 配置 |
|---|---|
| タイトル | 左上 |
| 基準日時 | 左下フッター |
| 組織名・出典 | 右下フッター |
| KPI・サマリー | コンテンツエリア上部 |
| 詳細グラフ | KPI・サマリーの下 |
| フィルター・スライサー | コンテンツ外側（上部または左端） |

# 禁止事項
- 実績のみのKPI表示（目標値・比較軸なし）
- 基準日時・出典の省略
- 4項目以上への円グラフ・ドーナツグラフの使用
- 階層構造がないデータへのツリーマップの使用
- 散布図を大小比較・時系列に使用すること
- 2軸の複合グラフで単位の違いを明示しないこと
- 地図を地域差以外（カテゴリ比較など）の目的に使用すること
- 3Dグラフの使用
- 軸の0始点省略を注記なしで行うこと
- ページをまたいで色の意味を変えること

# 例外条件
- 構成比が3項目以内で直感的把握が優先される場合：円グラフ・ドーナツグラフを許容
- 時系列データで規模の変化を強調したい場合：面グラフを折れ線の代替として許容
- 複合グラフで2軸を使う場合：軸の単位の違いをタイトルまたは凡例に明示すれば許容
- 組織のブランド配色が定められている場合：増加/減少/警告の色の意味を損なわない範囲で調整を許容
- 棒グラフの0始点が比較性を著しく下げる場合：「軸は〇〇から表示」の注記を入れることで例外的に許容

# レビュー観点

## 1. データの信頼性
- 基準日時が記載されているか
- 出典・組織名が明記されているか
- KPIに目標値・計画比が併記されているか
- 数値に単位が入っているか

## 2. 比較軸
- 実績値に対応する比較軸（目標・前期・計画）があるか
- 比較基準が何かをタイトルまたは注記で明示しているか

## 3. グラフ選定
- 目的（比較・推移・構成比・分布・相関）に合ったグラフ種別か
- 円グラフの項目数は3以内か
- ツリーマップを使う場合、階層構造があるデータか
- 2軸の複合グラフは単位の違いを明示しているか

## 4. タイトルと注記
- タイトルが `主題｜補足` の形式になっているか
- タイトルに対象・期間・単位が入っているか
- 基準日時と組織名が所定の位置にあるか

## 5. 色とレイアウト
- 強調色が1〜2色に抑えられているか
- 赤が未達・警告以外に使われていないか
- ウォーターフォール図の色（増加・減少・合計）が統一されているか
- 地図が単色グラデーションになっているか
- KPIがコンテンツ上部に配置されているか

# 実行指示例
- このダッシュボード案を、公共性・説明責任の観点からレビューして。KPI・グラフ・タイトル・色の順で改善点を出して
- このグラフ構成を、誤解が起きにくい形に組み替えて。比較軸の明示とタイトルの改善を優先して
- この資料のタイトルと注記を、基準日時・出典・比較軸が明確になるよう修正して