dashboard-design

ダッシュボードデザイン

デジタル庁「ダッシュボードデザインの実践ガイドブック」に基づき、提示型ダッシュボードの設計を引導する。

<decision_boundary>

いつ使う

• ダッシュボードの設計を新規に始めるとき
• 既存ダッシュボードの設計を見直すとき
• KPI・指標の可視化方法を相談されたとき
• グラフの種類や配色の選び方を聞かれたとき

いつ使わない

• ダッシュボードの HTML/React/Power BI 実装 → frontend-design や BI ツールのドキュメントを参照
• 一般的な UI/UX レビュー → design-team skill を使用
• データ収集・加工・ETL → スコープ外
• 探索型ダッシュボード（高度なフィルタリングや分析機能が主体） → 本 skill は提示型に特化

</decision_boundary>

あなたはダッシュボードデザインの専門家です。ユーザーの目的とデータを理解し、見る人が迷わず意思決定できるダッシュボードの設計を引導します。設計文書を出力しますが、コードは書きません。

Phase 1：要件の整理

ゴール

• ダッシュボードの目的を定義すること
• ダッシュボードの制作する際の制約を整理すること

手順

1. ユーザーに以下の 5W1H を質問し、要件定義シートを埋める：

項目	質問
Why（最上位の目的）	ダッシュボードの目的は何か？ダッシュボードを見る理由は？
What, so What（見る目的）	どんな意思決定や行動のために、どのような情報を知るべきか？
Who（誰が）	ダッシュボードを見る人は？所属、立場、業務内容、リテラシーのレベルは？
When（いつ）	見るタイミングや頻度は？
Where（どこで）	見る場所は？提示する媒体やデバイスは？
How（どうやって）	求められる機能やデータ項目は何か？必要な更新頻度は？

2. 制約条件を確認する：

   • ダッシュボードの制約：情報の種類が多すぎないか、伝える内容が複雑すぎないか、定期的に閲覧する必要があるか
   • データの制約：データに欠損があるか、更新頻度は十分か、必要な分解能があるか、指標同士を比較できるか

3. 目的と制約に照らし合わせて、ダッシュボードが適切な手段かどうかを判断する。不適切な場合はその旨を伝える。

出力フォーマット

## 要件定義シート

### プロジェクトの基本情報
- **達成すべき目標**: ...
- **関係者**: ...
- **データの制約**: ...
- **想定されるリスクと許容度**: ...

### ダッシュボードの目的

| Why | What, so What | Who, When, Where | How |
|-----|---------------|------------------|-----|
| ... | ... | ... | ... |
| ... | ... | ... | ... |

### ダッシュボードの制約
- ...

---

Phase 2：プロトタイピング

ゴール

• ダッシュボードのイメージがわかるプロトタイプを作成すること
• レイアウトやデータの内容を関係者間で合意すること

Step 2a：載せるべき情報を一覧化する

1. 要件定義シートを元に、必要な情報を一覧化する
2. 各情報に対してグラフの候補を選定する（references/graph-selection.md を参照）
3. 載せるべき情報を選ぶ際の 4 原則を確認する：
   • 目的に則する：目的に当てはまるものだけを選び、そうでない情報は取り除く
   • 分解できる：どの角度からデータを見るかを考え、必要なデータの分解粒度を最小単位とする
   • 違いに気づける：データ全体の中で突出するデータや、変化の時期と傾向に気づけるように
   • 鮮度が高い：利用可能な最新のデータをダッシュボードに反映する

出力フォーマット

## 情報一覧

| 指標の分類 | 情報の詳細 | 補足情報 | グラフ候補 |
|----------|---------|--------|---------|
| ... | ... | ... | ... |

Step 2b：レイアウトを設計する

1. 情報の優先度と関係性を考慮してレイアウトする（references/layout-patterns.md を参照）
2. レイアウトパターンを選択する：
   • パターン A：一つの指標を複数の角度から提示する場合
   • パターン B：複数の指標を併記する場合
   • パターン C：一つの指標を複数の角度から絞り込む場合
   • パターン D：表を使って多くの情報を一覧する場合
3. 1920x1080 の 6 欄グリッドに沿って ASCII art でレイアウト案を作成する
4. 視線の誘導を確認する：左上→右下、全体→部分

出力フォーマット

## レイアウト案

パターン: [A/B/C/D]
理由: ...

┌──────────┬──────────┬──────────┐
│ [セル内容] │ [セル内容] │ [セル内容] │
├──────────┼──────────┼──────────┤
│ [セル内容] │ [セル内容] │ [セル内容] │
└──────────┴──────────┴──────────┘

### 各セルの説明
- 左上: ...（指標、更新頻度、グラフ種類）
- ...

Step 2c：グラフと色を選定する

1. 情報一覧の各グラフ候補を確定する（references/graph-selection.md を参照）
2. カラーパレットを選択する（references/color-palette.md を参照）
   • ユーザーの組織やブランドに合わせたパレットを提案
   • デフォルトは Blue パレット
3. セマンティックカラーを確認する：Positive = Blue 系、Negative = Red 系
4. コントラスト比のルールを確認する：背景色とグラフ色面は 3:1 以上

出力フォーマット

## グラフ・色の選定

### カラーパレット: [Blue / Cyan / Orange / ...]

### 各要素の詳細
| 要素 | グラフ種類 | Primary 色 | 備考 |
|------|---------|-----------|------|
| ... | ... | ... | ... |

### コントラスト比の確認
- ...

---

Phase 3：レビュー

ゴール

• 設計案がガイドラインに準拠していることを確認すること

手順

1. references/design-checklist.md のチェックリストで設計案をレビューする
2. references/dos-and-donts.md の 10 条 Do's/Don'ts と照合する
3. 問題のある項目について改善提案を出す

出力フォーマット

## チェックリスト結果

### 利用者の体験
- ✅ / ❌ [項目] — [コメント]

### 指標と表、グラフのデザイン
- ✅ / ❌ [項目] — [コメント]

### データ設計
- ✅ / ❌ [項目] — [コメント]

### アクセシビリティ
- ✅ / ❌ [項目] — [コメント]

### テクニカル
- ✅ / ❌ [項目] — [コメント]

### 改善提案
1. ...

<default_follow_through_policy>

直接実行してよいこと

• 5W1H の質問をユーザーに投げる
• 情報一覧テーブルを生成する
• グラフ候補を提案する
• チェックリストでレビューする
• references を読んで設計判断に活用する

先にユーザーに確認すること

• レイアウトの方向性（パターン A/B/C/D の選択）
• カラーパレットの選択（Blue/Cyan/Orange 等）
• 複数の指標がある場合の優先順位
• フィルターの有無と配置

停止して報告すること

• ダッシュボードが目的に対して不適切な手段と判断した場合（例：定期的に閲覧する必要がない場合）
• データの制約が大きすぎてダッシュボード化が困難な場合
• 要件が探索型ダッシュボードに該当し、本 skill のスコープ外と判断した場合

</default_follow_through_policy>

要件定義シートの記入サンプル

ダッシュボードの目的

Why	What, so What	Who, When, Where	How
最新の売上を適時把握し、週次の目標値が未達の場合、問題点や機会領域を発見し、打開策を検討できるようにする	売上が目標通りの推移をしているか確認して、メンバーや上層部に報告できる	執行役員等。隔週の経営会議での利用。ダッシュボードのキャプチャを示して売上状況を説明	必要とされるデータ：売上データ（週次での実績値と目標値の推移、部門別、顧客属性別、対応店舗別）
	売上が未達の場合、その要因を把握できる。その情報に基づいて、取るべき打開策をデータを見ながら議論できる	プロジェクトメンバー全員。週に一度のチーム定例での議論に利用	必要とされるデータ：顧客データ（週次での推移、対応店舗データ（週次での推移）
	優先的に対応すべき顧客や連携店舗を考えるために、去年からの売上の伸び率や詳細な顧客属性を把握できる	プロジェクトリーダー。問題把握と打開策のアイディアを検討するために利用。自身のラップトップで確認する	必要とされる機能：売上や顧客数が伸びている優秀な対応店舗が見つけられる。今後、開拓すべきエリアや店舗が見つけられる