# ダッシュボードデザインの実践ガイドブック
2024年5月31日発行

# 目次
1. はじめに
   - 1.1 ダッシュボードとは
   - 1.2 ガイドブックの対象範囲
   - 1.3 ダッシュボード作成の流れ
2. 要件の整理
   - 2.1 目的を定義する
   - 2.2制約条件を整理する
   - 2.3 要件定義ワークシート
3. プロトタイピング
   - 3.1 プロトタイピングのプロセス
   - 3.2 載せるべき情報を整理する
   - 3.3 プロトタイプを作る
   - 3.4 レイアウトの考え方
   - 3.5 要望を元に改善する
4. 情報表現のポイント
   - 4.1 グラフとは4.2 グラフの種類と選び方
   - 4.3 カラーパレット
   - 4.4 グラフ設計の原則
   - 4.5 Do’s Dont’s
5. 実装
   - 5.1 チャート・コンポーネントライブラリ（ベータ版）
   - 5.2 レイアウトグリッド
   - 5.3 操作マニュアル
   - 5.4 チェックリスト
   - 5.5 アクセシビリティの対応
6. おわりに


# 1 はじめに
本書は、行政や公共機関、民間企業の人々が見やすいダッシュボードを効率的に作るための方法を提供しています。
分野を問わず、多くの人々が、自身のサービスの推進や意思決定にデータを活用したいと考えている一方で、データを適切に利用する方法に迷っているのも事実です。ダッシュボードは、データ活用の全てではないものの、有効な手段の一つと言えます。本書は、データをわかりやすく可視化することで、数値に基づいて事実を理解し、多くの関係者の間で共通認識を広げ、意思決定の質を向上させ、より良い行動に繋げていくことを目的にしています。
本書では、人々に必要とされる、わかりやすいダッシュボードを作るために、デジタル庁で実践してきた政策データダッシュボード作成のノウハウに加え、行政職員や民間有識者の意見を反映したものを整理し、体系化したものです。
ダッシュボードのより効果的な活用を目指して、新しい取り組みを始める、もしくは既存の取り組みをより良くするためのヒントとなればと考えます。

- 政策データダッシュボード
  - https://www.digital.go.jp/resources/govdashboard


# 1.1 ダッシュボードとは
見る人が誰で、どのような環境にあり、次に何の行動をするかによって、ダッシュボードが備えるべき機能や性能は異なります。例えば、会議室のモニターに常時表示するもの、データ分析業務を行う人が使うもの、意思決定のための資料として使用するものなど、様々なユースケースとそれらに適したデザインがあります。

## 二つの類型
ダッシュボードのデザインを考えるにあたって、次の二つの類型を設定します。一つは、現状を基準と照らし合わせ、異常などに素早く気づき、行動の必要性を判断する「提示型」、もう一つは、特に明確な判断基準がない事柄について、差分を発見したり、その源流を特定して掘り下げる「探索型」です。
探索型のダッシュボードは、見る人に対して一定のドメイン知識を前提とし、集中と画面上での操作を求めます。そのデザインには広範な観点が必要となるため、ダッシュボードのデザインシステムを構築するための第一歩となる本書では、提示型のダッシュボードを中心に扱います。

## 本書の対象範囲
- 提示型ダッシュボード
  -	概況の把握
  -	一般的な知識
  -	単純な操作
- 探索型ダッシュボード
  -	詳細の分析
  -	特定のドメイン知識
  -	複雑な操作


# 1.2 ガイドブックの対象範囲
ダッシュボードを作るためには、データソースの特定、データの取得や格納、データの加工や分析、可視化が必要です。本書では、可視化の方法に特化して解説しているため、データの準備やクレンジング方法は扱っていません。

1. データソース（アンケート調査、ログデータ等）
2. データ収集・保管（クラウドストレージ等）
3. データ加工・蓄積（ETLツール、コンテナ等）
4. データ参照（高速なデータウェアハウス等）
5. データの可視化（BIツール等）
6. 運用管理（ログモニタリング、セキュリティ監視等）

- 出典：デジタル庁のデータ分析基盤「sukuna」の変化：Agile&FragileからTrust&Robustへ
  - https://digital-gov.note.jp/n/n2d16d32b7321


# 1.3 ダッシュボード作成の流れ
本書では、ダッシュボードを作成する流れを、要件の整理、プロトタイピング、実装の3つのステップに分解します。次章以降では、それぞれのステップで考えるべきことや活用できるツールを紹介します。

1. 要件の整理
  a. 目的を定義する
  b. 制約条件を整理する
1. プロトタイピング
  a. 必要な情報を一覧化する
  b. プロトタイプをつくる
  c. ヒアリングする
  d. フィードバックを元に改善する
3. 実装
  a. ダッシュボードを実装する
  b. チェックリストを確認する


# 2 要件の整理
ダッシュボードには必ず見る人が存在し、その人が解決したい課題や、必要とする情報があります。ダッシュボードを作成する目的は、必要な情報が伝わり、意思決定や行動に繋がることにあります。一方で、目的に照らし合わせてみると、ダッシュボードが適切な手段ではないこともあります。また、見る人のニーズを満たすのに必要なデータがそもそも入手できないかもしれません。
目的と制約を整理しないまま制作を進めてしまうと、「そもそも誰のための、何のためのダッシュボードだったか？」と、後になって問い直してしまうものが生まれてしまいます。そのような事態を避けるために、全てのプロセスに先立って、まずは要件を整理しましょう。

## 本ステップのゴール
-	ダッシュボードの目的を定義すること
-	ダッシュボードの制作する際の制約を整理すること

## 使うもの
本書ではPowerPoint形式の要件定義ワークシートを用意しています。
-	要件定義ワークシート（PowerPoint）
  - 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


# 2.1 目的を定義する
要件を整理するための第一歩は、見る人が誰であるかを考え、ダッシュボードの目的を定義することです。次の図のように、5W1Hの問いにしたがって、ダッシュボードに求められること、見る人の属性を記述しましょう。問いに対して適切に応えることが満たすべき条件であり、これを満たすことが目的になります。
「最上位の目的」や「見る目的」は、あまり変わることはありません。一方で、「ダッシュボードの内容」に関しては、プロトタイプによる対話やテストにより、柔軟に変更していきます。

## Why（最上位の目的）
-	最終的に達成したい目的
-	ダッシュボードを見る理由

## What, so What（見る目的）
-	目的達成のために知るべき情報
-	必要なデータの種類
-	見た後にする判断や行動

## Who, When, Where（想定の利用シーン）
-	ダッシュボードを見る人
-	所属、立場、業務内容
-	リテラシーのレベル感
-	見るタイミングや頻度
-	見る場所
-	提示する媒体やデバイス

## How（ダッシュボードの内容）
-	求められる機能
-	必要なデータ項目
-	更新頻度


# 2.2 制約条件を理解する
ダッシュボードには、どのような情報でも好きなように配置できるわけではありません。例えば、大量のデータを羅列するのには不向きであり、見る人にとって必要な情報を選別しなければなりません。また、選別した情報を入手できるかどうかも、ダッシュボードを作る上での制約として働きます。
このように、要件定義の段階において「必要な情報」と「制約」の両方を理解し、プロトタイプでの検証を通じて、ダッシュボードに掲載する情報を取捨選択できるようにしましょう。

## ダッシュボードを制作する上での制約
確認項目
-	情報の種類が多すぎる
-	伝える内容が複雑すぎる
-	定期的に閲覧する必要がない

アクション
-	情報の種類を減らす
-	複雑度を下げる

プロトタイプでの検証
-	情報が無理なく伝わるか、見た人が理解できるかを確認する

## データの制約
確認項目
-	データに欠損がある
-	更新頻度が不十分である
-	必要な分解能がない
-	指標同士を比較できない
プロトタイプでの検証
-	データの制約を回避できるか、ダッシュボードを作成する上で問題になるかを確認する


# 2.3 要件定義ワークシート
以降のステップへ進む前に整理すべき情報をまとめるためのワークシートを用意しました。

## 基本情報を整理する
プロジェクトの一般的な整理として、達成すべき目標や意思決定者、ステークホルダー、リスク、スケジュールといった情報を整理しましょう。

## 目的と制約条件を整理する
2.1と2.2で述べたように、ダッシュボードの目的や制約条件を記述しましょう。


# 3 プロトタイピング
要件整理の次は、ダッシュボードのイメージがわかるプロトタイプを作成します。要件を整理した後にそのまま実装に入るのではなく、プロトタイプを元にチームや周囲の関係者と話し合うことで、ダッシュボードのQCD（= 品質とコスト、納期）向上が期待できます。
プロトタイプを通じて関係者と対話することには次のメリットがあります。
-	具体的な要望や意見を引き出すことができる
-	周囲と合意が取れ、手戻りが少なくなる
-	成果物が明確になり、実装の速度と品質が上がる

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

## 使うもの
プロトタイピングを低コストで実現するために、本書ではPowerPoint形式のツールキットを用意しています。
-	ダッシュボードイメージ作成キット（PowerPoint）
  - 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


## 3.1 プロトタイピングのプロセス
## 載せるべき情報を整理する
整理した要件を元に、ダッシュボードに必要な情報を整理し、一覧化します。情報を可視化するのに使用するグラフの種類も、仮案程度で良いので決めておくと良いでしょう。

## プロトタイプをつくる
整理した一覧を元に、作成するダッシュボードのイメージを具体的に図示化します。使うツールはPowerPointやFigmaなど、使いやすいもので構いません。

## 関係者と話し、フィードバックを得る
プロトタイプを用いて、ダッシュボードの想定利用者やプロジェクト関係者と議論し、フィードバックを集めましょう。フィードバックを元にプロトタイプを修正することで、要件をより正しく反映でき、実装の準備が整います。


# 3.2 載せるべき情報を整理する
## 必要な情報を一覧化する
ダッシュボードの目的に照らし合わせ、必要な情報や求められている情報を一覧化します。それぞれの項目が、ダッシュボードに載る要素の候補となります。

## グラフ候補を選定する
各情報に対して、グラフの候補を選定します。グラフの候補があることで、プロトタイプを作る際に具体的なイメージが湧きやすくなります。
※グラフの選び方は次章で述べます。

## 必要な情報の一覧例
-	売上
  -	売上数値
    -	最新の売上数値が翌日の正午までに確認したい
    -	前日比、前週比、前月比も確認したい
  -	時系列
    -	売上状況を推移で把握したい
    -	目標値との比較の情報もほしい
  -	部門別
    -	好調な部門、不調な部門を把握したい
    -	部門別で先月比の情報もほしい
  -	地域別
    -	地域差を確認したい
    -	地域毎でどの商品の売上が好調か確認したい
-	顧客数
  -	時系列
    - 顧客数の変化を日時単位で把握したい
  -	業界別
    -	荒い粒度でよいので業界別の顧客数を知りたい
    -	業界別の顧客数と、顧客あたりの売上規模を知りたい


# 載せるべき情報を選ぶ際の原則
## 目的に則する
利用できるデータの中から、目的に当てはまるものを選び出し、ダッシュボードを構成します。そうでない情報はできる限り取り除き、データが判断や行動につながるまでの距離を縮めます。

## 分解できる
どの角度からデータを見るかを考え、それに必要なデータの分解粒度を最小単位とします。さらに、情報を全体から部分へと、見る人が読み解くことができる単位まで分割できるようにします。

## 違いに気づける
データ全体の中で突出するデータに気づけるようにします。また、時間とともに変化する情報では、変化の時期と傾向（上昇や下降）に気づけるようにします。

## 鮮度が高い
利用可能な最新のデータをダッシュボードに反映し、より現時点に近い情報に基づいて意思決定をできるようにします。そのために必要な、データを定期的に更新する仕組みやプロセスを構築します。


# 3.3 プロトタイプを作る
ダッシュボードの要件や必要な情報の整理が終わったら、プロトタイプを作っていきます。最初は骨格となるレイアウトを検討し、次に表層である文言、色や形、グラフ表現を検討していきましょう。
骨格となるレイアウトが定まらないうちに、表層の表現を細く詰めることはおすすめしません。ダッシュボードの方向性を骨格となるレイアウト、表層的な表現という順番ですり合わせることで、手戻りするリスクを軽減しましょう。

-	ダッシュボードの目的や要件
-	載せるべき情報
-	骨格となるレイアウト（プロトタイプ）
-	最終的なイメージに近いモックアップ（プロトタイプ）
-	データが反映されたダッシュボード


# 骨格となるレイアウト
## レイアウトを考える
整理した必要な情報を、情報の優先度と関係性を考慮してレイアウトします。優先度に応じて目立たせたり、大きさや順番を決めましょう。情報量が多くなる場合は、ベージを分割したり、ナビゲーションを設計します。

## 視点を変えてレビューする
一回目で最終的なレイアウトが決まることはほとんどありません。情報の構成や強弱などを変えたもの何案か検討したり、プロジェクト関係者やダッシュボードを見る人の視点で見直すことでダッシュボードの要件を満たすものを見つけ出しましょう。


# 最終的なイメージに近いモックアップ
## グラフを配置する
レイアウトが定まったら、グラフを配置し、最終的なダッシュボードをイメージできる図を作成します。数値は、ランダムのダミーデータで問題ありません。情報の意図や、議論が必要な点について補足も記載します。
作成にはPowerPointやFigmaなどのツールを使います。
※本書ではPowerPoint形式のツールキットを用意しています。

- ダッシュボードイメージ作成キット(PowerPoint)
  - 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


# ダッシュボード設計の原則
## 構造を伝える
全体から部分へと、階層構造になるようにダッシュボードの情報を整理します。最初に全体を示す情報を得られ、次にその詳細に辿り着けるように、レイアウトや導線を設計します。

## 適切な情報量にする
過多な情報によって、継続的な利用意欲が削がれることの無いように配慮します。見る人にとって負担にならないように、情報の総量を調整します。

## 複雑な操作を要求しない
操作をせずに、あるいは少ない操作回数によって、必要な情報を得られるようにします。繰り返し利用することが、見る人にとって負担にならないようにします。

## 比較対象を提供する
数量単体では意思決定することが難しいデータには、目標値や平均値、前年の値を併記したり、前年比によってデータを表現するなど、比較できる対象を提供します。


# 3.4 レイアウトの考え方
ダッシュボードのレイアウトは、見る人の視線の動きに合わせるように、左上から右下に向かって、全体から部分が並ぶように配置します。左上では全体を端的に示し、右下では最も詳細な情報を表示するようにします。また、背景色に差をつけ、左上が最も目を引くように表現を調整します。
このようなダッシュボードを簡単に構成できるように、縦横6分割が可能なレイアウトグリッドをひいた16:9の画面用のテンプレートを用意しています。次章以降で述べる、指標や表、グラフなどの構成要素を、テンプレート内のグリッドに沿って配置します。

# レイアウトサンプル
ダッシュボードに掲載する情報に合わせて、レイアウトを検討しましょう。左上から右下へ、上から下へ、左から右へ等、見る人の視線に沿うかたちで、全体感を表す指標から詳細の情報へ流れるように設計します。
フィルターは基本的に画面の上部か左部に配置し、フィルターの影響を受ける情報はその下か右に配置します。フィルターと影響を受ける情報との関係性が分かるように配置しましょう。


# 3.5 要望を元に改善する
## ヒアリングする
関係者へプロトタイプを見せ、フィードバックを収集します。ダッシュボードの目的も伝えると、適切な意見を得やすくなります。フィードバックは「こうしたい、これを追加したい」という要望だけではなく、「〇〇をしたいから、こうしたい」という理由や意図を聞き出すと、以降のプロセスがスムーズに進みます。

# 反映方針を検討する
全ての要望を機械的に反映してしまうと、情報過多になったり、一貫性が損なわれ、見る人が混乱するものになります。要望の理由が明確で、かつダッシュボードの目的に適っているものを選定します。要望の背景となる理由を満たせる場合には、要望をそのまま反映する必要はありません。要望を満たす最も良い改善方法を検討しましょう。

-	反映する
  -	(例) 都道府県職員が支援する対象を選ぶためには、各市区町村の数値がどのくらい上がったのかを知る必要があるので、前月比を追加してほしい
-	反映しない
  -	(例) 性年代別での分類や地域別の分類を追加してほしい
  -	(例) 47都道府県毎の推移も確認できるようにしたい

## 改善する
選定した要望を実現する必要最小限の変更を行います。その後、改善したプロトタイプを再び見せて、要望が満たされているかを確認しましょう。場合によっては複数回の改善サイクルを行い、関係者が納得するものを目指します。


# 4 情報表現のポイント
ダッシュボードで情報を正しく伝えるため、グラフの選択や情報表現の適切な方法を知る必要があります。まず、指標、表、グラフそれぞれの役割と種類を把握し、次にグラフの要素と表現について理解します。本ガイドブックでは、グラフ設計の原則、Do’s Dont’s（=望ましい表現と望ましくない表現）、必要なカラーパレットを提供します。

## 本章の役立て方
-	ダッシュボードに掲載するグラフの種類の選択
-	タイトルや凡例、色といったグラフの表現の選択


# 4.1 グラフとは
ダッシュボードで主に扱うデータは、値の集合です。値は数値や文字、記号などです。このようなデータを分かりやすく整理する方法として、指標化と表組みが挙げられます。

## 指標（人々の判断や行動を左右する情報を端的に表す値）
指標は、人々の判断や行動を左右する情報を端的に表す値です。目的に対する達成度を表す単一の尺度であることや、全体傾向を表すような、複数の尺度を合成した値であることもあります。一般に、データを正確に反映しつつ、見る人にとって有益な情報を得られるような指標化を行うのは簡単ではありません。

## 表（データを視覚的に整理して伝えるレイアウト手法）
表は、値に関連する情報を行と列へ対応づけ、値や値の集合を格子状に並べることで、データを視覚的に整理して伝えるレイアウト手法です。表の中の値は、数値や文字に限らず、色や図形によって表現することもあります。

## グラフ（値を位置や長さといった幾何属性に対応づけて表現する図）
見る人の視覚認識の補助をより強めたものがグラフです。グラフは、値を位置や長さといった幾何属性に対応づけて表現する図です。これにより、値の差分や傾向、構成比といった、データが持つ意味を直感的に認識しやすくします。なお、二つの直交する軸を含むものをここでは特にグラフと呼びますが、区別せずにチャートと呼ぶこともあります。


# 4.2 グラフの種類と選び方
右図のように、異なるグラフは異なる値の表現をします。値の表現の仕方によって、直感的に認識しやすくなる情報の種類も変わります。時間変化と傾向を伝える場合には折れ線グラフ、数量を比較して伝える場合には棒グラフが適しています。ダッシュボードの目的と照らし合わせ、伝える情報に対して適切なグラフを選ぶことが重要です。
この章では、いくつかの基本的なグラフの概要と構成要素、その使用例を解説します。

-	折れ線グラフ
  -	位置
  -	時間変化、傾向
-	棒グラフ
  -	長さ
  -	数量比較
-	面グラフ
  -	位置、面積
  -	時間変化、傾向、構成比
-	円グラフ
  -	角度、面積
  -	構成比


# 折れ線グラフ
折れ線グラフ（ラインチャート）は、縦軸に数量、横軸に時間をとり、データ点の間を線で結ぶ（補間する）ことで、数量の時間変化とその傾向を伝えるグラフです。
データ点には、丸や四角などの図形を配置し、補間の有無が分かるようにします。系列が複数あるときには系列名を表示し、できる限り折れ線の近傍に配置します。
横軸は時間である必要があります。縦軸の数量に関係する変数が時間以外である場合には、棒グラフを使用することを検討します。


# 棒グラフ
棒グラフ（バーチャート）は、一つの軸に数量、もう一つの軸に分類をとり、配置する棒の長さで数量を比較するグラフです。データ間の数量を比較するのに適しています。
系列が複数あるときには、分類毎に複数の棒を並べて比較したり（集合棒グラフ）、棒を積み上げて構成比を表現したりする（積み上げ棒グラフ）こともあります。
分類毎の数量を比較するときには、まず、棒グラフを使用することを検討します。もし、時刻毎の数量を比較する場合には、折れ線グラフや面グラフが適しています。


# 円グラフ
円グラフ（エリアチャート）は、折れ線グラフに塗りを加えることで、数量と構成比の時間変化を同時に伝えるグラフです。主に、複数の系列を積み上げて（積み上げ面グラフ）使用します。特に構成比の時間変化のみに着目するときには、値自体を構成比とする（100%積み上げ面グラフ）こともあります。
構成比を伝える必要がないときには、折れ線グラフを使用します。また、系列の数が多い場合や、時間変化を伝えない場合には、棒グラフが適しています。

# 円グラフ
円グラフ（パイチャート）は、円を全体の総量とし、分類に対応する数量と弧の長さ（または角度および面積）を対応づけることで、数量の構成比を伝えるグラフです。同様のものに、円の中心をくり抜き情報を書き込むドーナッツグラフ（ドーナッツチャート）があります。
円グラフが適するのは、全体の総量が明らかであり、構成比をコンパクトに伝える場合です。そうではない多くの場合において、棒グラフの方がデータを正確に伝えられることに留意します。全体の総量が時間変化をともなう場合には、面グラフが適しています。


# 4.3 カラーパレット
グラフで使う色は、デジタル庁 デザインシステムのカラーパレットのうち、次の組み合わせを使用します。グラフで使用する色が1?3色の場合は太字の明度、4?5色の場合は全ての明度から色を選択します。
※デジタル庁では「Blue」カラーパレットの配色でチャート・コンポーネントライブラリーを提供しています。


# コントラスト比の考え方
アクセシビリティに対応する場合、背景色とグラフ色面のコントラスト比を3:1以上にする必要があります。コントラスト比が3:1以上を満たせない場合、グラフの色面領域のすぐ近くに数値を記載するか、マウスオーバーやキーボードでのフォーカス時に数値が表示されるようします。

## 3:1のコントラスト比を確保
背景色に対して、3:1以上のコントラスト比を確保します。例えば、「Blue」カラーパレットをキーカラーにした場合、グラフ色をBlue-500（#4979F5）以上の濃さで配色する必要があります。

## グラフの色面領域の近くに数値を記載
3:1のコントラスト比が満たせない場合は、グラフの色面領域のすぐ近くに数値を記載します。数値の色は、背景色に対して4.5:1以上のコントラスト比を確保してください。

## マウスオーバーかフォーカス時に数値を表示
3:1のコントラスト比が満たせない場合で、かつグラフの色面領域のすぐ近くに数値の記載ができない場合は、色面領域をマウスオーバーかキーボードで触れた時に数値を表示します。

## ※色覚多様性の考慮
グラフを多色にする場合は、色覚多様性の人の見え方を配慮する必要があります。カラーユニバーサルデザイン推奨の配色、色覚特性シミュレーションやチェッカーを活用し、見分けにくい色の組み合わせがないように調整します。また、色以外での識別方法を提供するようにしましょう。


# 4.4 グラフ設計の原則
グラフの表現によって、情報の伝わりやすさは大きく変わります。情報が正しく伝わるグラフを作るための原則として、「知りたいことを知れる」「誤解を生まない」の2つを提示します。

## 知りたいことを知れる
-	シンプルにする
-	意味のある順列にする
-	強弱をつける
-	待たせすぎない

## 誤解を生まない
-	わかりやすく表記する
-	データを定義する
-	表現を歪曲しない
-	メタ情報を記載する


# 知りたいことを知れる
## シンプルにする
冗長なデータや説明、過度に装飾的な表現など、データを理解するために不必要な情報をできるだけ取り除きます。

## 意味のある順列にする
必要な情報を見つけやすいように配慮してデータを並べます。数量の大小やアルファベット順など、情報を伝えるために適した並び順や、一般的に認知されている並び順の中から、最適なものを選びます。
## 強弱をつける
ダッシュボードの中で重要な情報には、それ以外とは異なる表現（色やサイズ、文字の太さなど）を用います。重要な箇所へ見る人の注意を喚起し、必要な情報を発見しやすくします。
## 待たせ過ぎない
素早く情報を得られるようにするために、必要な情報を読み込み、画面に表示するまでにかかる時間や、操作の反応や反映にかかる時間が短くなるようにします。

# 誤解を生まない
## わかりやすく表記する
多くの人がデータを理解できるように、前提知識が必要とされる表現や、複雑な文言を避け、タイトルや系列名、数値の単位を丁寧かつ簡潔に表記します。

## データを定義する
何を対象として収集したデータで、数値の意味が何であり、いつ更新されたかといった、提供するデータの定義を参照できるようにします。

## 表現を歪曲しない
グラフ軸の値範囲を恣意的に設定しない。値の範囲を省略しない。数量の差が実際よりも誇張や矮小化されて見えるような表現をしない。

## メタ情報を記載する
ダッシュボードに使われているデータのソース、データの更新日、いつ時点の数値なのか、注釈、免責事項など、見る人によって解釈の幅がないように補足情報を提供します。

# 4.5 Do’s Dont’s
2つのグラフ設計の原則をダッシュボードの設計に活かすために、グラフとしてのDo’s（望ましい表現）とDont’s（望ましくない表現）を具体例とともに紹介します。

## 知りたいことを知れる
-	全体の指標と詳細のグラフを表示する
-	グラフ項目の並び順に意味を持たせる
-	不要な要素は削除する
-	不要な装飾やリッチな表現は使わない
-	グラフに使用する色数を絞る

## 誤解を生まない
-	タイトルにグラフの内容とデータ種別を表記する
-	タイトルや凡例をシンプルに保つ
-	グラフと凡例を隣接する
-	グラフの原点は原則として0にする
-	色のみで分類を識別しない


# 全体の指標と詳細のグラフを表示する
見る人が最初にデータの全体像を捉えられるようにするため、全体を表す指標を配置し、その詳細についての表やグラフを配置します。

## グラフ項目の並び順に意味を持たせる
棒グラフや円グラフ、表などの項目の並び順は、見る人が知りたい順番や比較しやすい順番にします。例えば、数量の大小順、更新日順などです。

## 不要な要素は削除する
情報の重複を避け、下地のグリッドは最小限にします。数値と直接関係のないテキスト情報は薄い色にし、グラフの情報量を必要最低限にします。

## 不要な装飾やリッチな表現は使わない
数値やグラフを強調するための3D表現やドロップシャドウなど、数値と関係のない装飾的な表現は使いません。

## グラフに使用する色数を絞る
グラフに使用する色数を絞り、見る人が注目すべき系列を明確にします。

## タイトルにグラフの内容とデータ種別を表記する
タイトルにグラフの数値の意味を正確に表したり、月次推移や累計などのデータ種別を正確に記載し、見る人がデータを誤認しないようにします。

## タイトルや凡例をシンプルに保つ
グラフに併記するタイトルや凡例、ラベルなどのテキスト情報が冗長になることを避けます。見る人が素早く簡単に理解できるように、正しく端的に記述します。

## グラフと凡例を隣接させる
凡例をグラフと隣接させ、凡例の順序をグラフと対応づけすることで、対応関係を明確にします。

## グラフの原点は原則として0にする
グラフの原点、特に棒グラフの原点は0にし、数量が実際より誇張や矮小化されて見えないようにします。

## 色のみで分類を識別しない
色覚多様性を考慮し、データ点の形やグラフの塗りの模様といった、色以外の情報からも系列を識別できるようにします。白黒印刷しても伝わる情報となるように意識しましょう。


# 5 実装
プロトタイプによってダッシュボードのデザイン案とデータの準備が整ったら、BIツールやその他ソフトウェアでダッシュボードを実装します。実装過程で、当初のデザイン案をそのまま実現できないこともあります。実現の障壁となる課題を解決できない場合は、必要に応じてデザインを調整しましょう。
本章では、グラフ設計の原則を満たしたダッシュボードを効率的に作成するためのツール（チャート・コンポーネントライブラリやレイアウトグリッド、利用マニュアル）を紹介しています。
実装を終えたら、チェックリストを用いて、グラフのデザインやデータ、アクセシビリティの観点で問題がないか確認をします。最終的に、誰もが見やすく、操作しやすいダッシュボードを目指しましょう。また、ダッシュボードのKPI（アクセス数や利用頻度等）状況、組織の成熟度や関係者のデータリテラシーの変化に合わせて、ダッシュボードの構成や内容をアップデートし続けます。

## 本ステップのゴール
-	ダッシュボードを実装すること
-	チェックリストによる最終確認を行うこと

## 使うもの
本ガイドブックではPowerBI形式のツールキットを用意しています。
-	チャート・コンポーネントライブラリ　ベータ版（PowerBI）
  - https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/1948e3cd-736a-4378-9e31-039b08d11106/63a34503/20240531_resources_dashboard-guidebook_chart_library_01.zip
-	利用マニュアル（PDF）
  - https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/1948e3c%5B%C3%A2%C2%80%C2%A6%5D45d2e73/20240531_resources_dashboard-guidebook_manual_01.pdf
-	チェックリスト（Excel）
  - https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/1948e3cd-736a-4378-9e31-039b08d11106/1dd17300/20240531_resources_dashboard-guidebook_checklist_01.xlsx


# 5.1 チャート・コンポーネントライブラリ（ベータ版）
チャート・コンポーネントライブラリは、本書のデザイン指針をあらかじめ適用した指標と表、グラフを含むPowerBIファイルです。デザインの?検討や調整する手間を省けます。

-	チャート・コンポーネントライブラリ　ベータ版（PowerBI）
  - https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/1948e3cd-736a-4378-9e31-039b08d11106/63a34503/20240531_resources_dashboard-guidebook_chart_library_01.zip

提供しているグラフ
-	指標（数値）
-	フィルター機能
-	折れ線グラフ
-	棒グラフ
-	積み上げ棒グラフ
-	積み上げ面グラフ
-	表
-	円グラフ
-	複合グラフ


# 5.2 レイアウトグリッド
本書が提供するレイアウトグリッドは、16:9の画面を縦横に2?6分割できるように設計しており、目的に合わせて柔軟にレイアウトを組むことができます。チャート・コンポーネントライブラリから表やグラフをコピー&ペーストし、グリッドに沿ってサイズや位置を調整します。

# 5.3 利用マニュアル
チャート・コンポーネントライブラリを使用する際には、PowerBI上での操作方法や作成手順を記載した利用マニュアルを参照してください。

-	利用マニュアル（PDF）
  - https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/1948e3c%5B%C3%A2%C2%80%C2%A6%5D45d2e73/20240531_resources_dashboard-guidebook_manual_01.pdf

## 利用マニュアルの章構成
-	プロトタイプの作成の手順
  1. PowerPointの事前準備をする
  2. パーツを貼り付け、サイズを調整する
  3. レイアウトをつくる
  4. 詳細化する
  5. フィードバックを元に最終化する
-	ダッシュボード作成の手順
  1. PowerBIの事前準備をする
  2. データを取り込む
  3. メジャーとリレーションを作成する
  4. 指標、表、チャートを配置する
  5. タイトルや文字サイズを調整する
  6. チャートを調整する
  7. グリッドを非表示にする
  8.	フィードバックを元に最終化する


# 5.4 チェックリスト
完成したダッシュボードをレビューするためのチェックリストです。設計の原則に則り、ユーザーにとって見やすいものや行動を促すものになっているか、データやアクセシビリティの観点で問題はないかの最終確認をします。

-	チェックリスト（Excel）
  - https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/1948e3cd-736a-4378-9e31-039b08d11106/1dd17300/20240531_resources_dashboard-guidebook_checklist_01.xlsx

## 利用者の体験
-	利用者が判断や行動に必要な情報が提供できていますか？
-	データの全体像を捉えるための基準となる指標が掲載されていますか？
-	本当に必要な情報だけに絞り込めていますか？ほとんど使わない情報が掲載されていませんか？
-	利用者に必要以上の操作を求めていませんか？数回の操作で利用者の目的が達成されていますか？
-	利用者が迷わず必要な情報まで辿り着けますか？
-	上記が満たせていることを確認するために複数の利用者からのフィードバックを得て改善を重ねましたか？

## 指標と表、グラフのデザイン
-	利用者が見たいと思っている数値へ優先的に目が向くようになっていますか？
-	グラフや表の配列順序が認知しやすいものになっていますか？
-	グラフと凡例が隣接され、対応づけがわかりやすくなっていますか？
-	他のデータとの比較や時間的な変化によって、すぐに違いを気づけるようになっていますか？
-	グラフの色数が1?5色程度に絞れていますか？
-	グラフに含まれる要素（グリッドや枠線）を最小限にしていますか？
-	不要な装飾や画像、3Dやシャドウのようなリッチな表現は避けていますか？
-	誰が見てもわかりやすく、誤解のないタイトルや系列名になっていますか？
-	棒グラフの原点は0になっていますか？
-	データの更新日は記載されていますか？

## テクニカル
-	利用者が実際に見る環境やデバイスで問題なく表示され、動作することを確認しましたか？
-	ダッシュボードの読み込み速度が遅すぎませんか？

## データ設計
-	利用者の目的に見合ったデータだけが選ばれていますか？
-	利用者が見たいレベルまでデータを分解できるようになっていますか？
-	利用者が必要な頻度でデータが更新されるような仕組みや運用プロセスになっていますか？
-	数量単体だけでは判断が困難な場合、理解を促すために比較できる数値が掲載されていますか？
-	データ定義を参照できるようになっていますか？

## アクセシビリティ
-	色だけでグラフの情報を識別していませんか？
-	グラフに代替テキスト（alt情報）を付与していますか？
-	データファイル（ExcelやCSV）を公開していますか？
-	ダッシュボードの情報が要約されたテキストを公開していますか？（一般公開の場合）


# 5.5 アクセシビリティの対応
行政や準公共機関が扱うデータをダッシュボードで公開する場合、すべての人が等しく情報を閲覧できるようにするため、アクセシビリティへの配慮が重要です。多様な人々がデータへアクセスできるよう、色だけでなく数値を併記するなど、情報の取得や操作の代替手段を提供しましょう。

-	デジタル庁 ウェブアクセシビリティ導入ガイドブック
  - https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook

## データテーブルを公開する
ダッシュボードを見られない人やデータを解析したい人のために、データをファイル（ExcelやCSV）やHTMLテーブルの形式で公開します。ファイルのデータ形式や構造も明示します。

## 代替テキストを付与する
ダッシュボードを見られない人のために、グラフやグラフに代替テキストを付与し、スクリーンリーダーでダッシュボードの情報を得られるようにします。

## 要約したテキスト情報を用意する
ダッシュボードの趣旨を把握したい人のために、主要な指標や傾向を文章と数値で要約し、PDFやHTML形式で公開します。
-	サンプルフォーマット（Word）
  - https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/1948e3cd-736a-4378-9e31-039b08d11106/b5f8520f/20240531_resources_dashboard-guidebook_format_01.docx


# 6 おわりに
デジタル庁は、データと根拠に基づいた政策判断・効果の可視化を日本政府内で推進を先導する役割を担っています。今後もデータの可視化や分析に関する実践や知見を積極的に公開していくことで、行政や公共機関、民間事業者の人々がデータを利活用するための土壌を築いていきます。

## お問い合わせ
本資料や関連ツールに関するご意見やご要望は、デジタル庁ウェブサイトのお問い合わせよりご連絡ください。
-	デジタル庁ウェブサイトから問い合わせする
  - https://www.digital.go.jp/contact/