3158 lines
56 KiB
Markdown
3158 lines
56 KiB
Markdown
---
|
||
source_url: "https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/1948e3cd-736a-4378-9e31-039b08d11106/2a3a0ebc/20260331_resources_dashboard-guidebook_guidebook_02.pdf"
|
||
ingested: 2026-07-02
|
||
sha256: 1d4ce3981cfe89f845389fad53637bc721770e8cdc5ad0eeb5dcbae52e58fd20
|
||
discovered_from:
|
||
platform: discord
|
||
channel_id: "1028287639918497822"
|
||
channel_name: "chat"
|
||
message_id: "1522185426788417576"
|
||
author_id: "890908900520505354"
|
||
posted_at: "2026-07-02T10:21:26.584000000Z"
|
||
message_excerpt: "デジタル庁 ダッシュボードデザインの実践ガイドブック PDF"
|
||
---
|
||
|
||
ダッシュボードデザインの
|
||
|
||
実践ガイドブック
|
||
Dashboard Design Guidebook
|
||
2026年3月31日更新
|
||
|
||
目次
|
||
|
||
1 はじめに
|
||
|
||
3
|
||
5
|
||
6
|
||
7
|
||
|
||
2 要件の整理
|
||
|
||
8
|
||
10
|
||
11
|
||
12
|
||
|
||
1.1 ダッシュボードとは
|
||
1.2 ガイドブックの対象範囲
|
||
1.3 ダッシュボード作成の流れ
|
||
2.1 目的を定義する
|
||
2.2 制約条件を整理する
|
||
2.3 要件定義ワークシート
|
||
|
||
3 プロトタイピング
|
||
|
||
3.1 プロトタイピングのプロセス
|
||
3.2 載せるべき情報を整理する
|
||
3.3 プロトタイプを作る
|
||
3.4 レイアウトの考え方
|
||
3.5 要望を元に改善する
|
||
|
||
14
|
||
16
|
||
17
|
||
19
|
||
23
|
||
26
|
||
|
||
4 情報表現のポイント
|
||
|
||
27
|
||
29
|
||
30
|
||
35
|
||
39
|
||
42
|
||
|
||
5 実装
|
||
|
||
5.1 デザインテンプレート
|
||
5.2 レイアウトグリッド
|
||
5.3 操作マニュアル
|
||
5.4 チェックリスト
|
||
5.5 アクセシビリティの対応
|
||
|
||
48
|
||
50
|
||
51
|
||
52
|
||
53
|
||
54
|
||
|
||
6 おわりに
|
||
|
||
57
|
||
|
||
4.1 グラフとは
|
||
4.2 グラフの種類と選び方
|
||
4.3 カラーパレット
|
||
4.4 グラフ設計の原則
|
||
4.5 Do’s Don’ts
|
||
|
||
©2026 Digital Agency
|
||
|
||
2
|
||
|
||
はじめに
|
||
|
||
ダッシュボードとは
|
||
|
||
ガイドブックの対象範囲
|
||
|
||
ダッシュボード作成の流れ
|
||
|
||
©2026 Digital Agency
|
||
|
||
3
|
||
|
||
1 はじめに
|
||
本書は、行政や公共機関、民間企業の人々が見やすいダッシュボードを効率
|
||
的に作るための方法を提供しています。
|
||
|
||
分野を問わず、多くの人々が、自身のサービスの推進や意思決定にデータを活
|
||
用したいと考えている一方で、データを適切に利用する方法に迷っているのも
|
||
事実です。ダッシュボードは、データ活用の全てではないものの、有効な手段
|
||
の一つと言えます。本書は、データをわかりやすく可視化することで、数値に
|
||
基づいて事実を理解し、多くの関係者の間で共通認識を広げ、意思決定の質を
|
||
向上させ、より良い行動に繋げていくことを目的にしています。
|
||
|
||
本書では、人々に必要とされる、わかりやすいダッシュボードを作るために、
|
||
デジタル庁で実践してきた政策データダッシュボード作成のノウハウに加え、
|
||
行政職員や民間有識者の意見を反映したものを整理し、体系化したものです。
|
||
|
||
ダッシュボードのより効果的な活用を目指して、新しい取り組みを始める、も
|
||
しくは既存の取り組みをより良くするためのヒントとなればと考えます。
|
||
|
||
1.1 ダッシュボードとは
|
||
見る人が誰で、どのような環境にあり、次に何の行動をするかによって、ダッ
|
||
シュボードが備えるべき機能や性能は異なります。例えば、会議室のモニター
|
||
に常時表示するもの、データ分析業務を行う人が使うもの、意思決定のための
|
||
資料として使用するものなど、様々なユースケースとそれらに適したデザイン
|
||
があります。
|
||
|
||
二つの類型
|
||
|
||
ダッシュボードのデザインを考えるにあたって、次の二つの類型を設定しま
|
||
す。一つは、現状を基準と照らし合わせ、異常などに素早く気づき、行動の必
|
||
要性を判断する「提示型」、もう一つは、特に明確な判断基準がない事柄につ
|
||
いて、差分を発見したり、その源流を特定して掘り下げる「探索型」です。
|
||
|
||
探索型のダッシュボードは、見る人に対して一定のドメイン知識を前提とし、
|
||
集中と画面上での操作を求めます。そのデザインには広範な観点が必要となる
|
||
ため、ダッシュボードのデザインシステムを構築するための第一歩となる本書
|
||
では、提示型のダッシュボードを中心に扱います。
|
||
|
||
本書の対象範囲
|
||
|
||
提示型
|
||
|
||
ダッシュボード
|
||
|
||
探索型
|
||
|
||
ダッシュボード
|
||
|
||
概況の把握
|
||
|
||
一般的な知識
|
||
|
||
単純な操作
|
||
|
||
詳細の分析
|
||
|
||
特定のドメイン知識
|
||
|
||
複雑な操作
|
||
|
||
©2026 Digital Agency
|
||
|
||
5
|
||
|
||
1.2 ガイドブックの対象範囲
|
||
|
||
ダッシュボードを作るためには、データソースの特定、データの取得や格納、データの加
|
||
工や分析、可視化が必要です。本書では、可視化の方法に特化して解説しているため、
|
||
データの準備やクレンジング方法は扱っていません。
|
||
|
||
本書の対象範囲
|
||
|
||
データ収集・保管
|
||
|
||
（クラウドストレージ等）
|
||
|
||
データ加工・蓄積
|
||
|
||
（ETLツール、コンテナ等）
|
||
|
||
データソース
|
||
|
||
（アンケート調査、ログデータ等）
|
||
|
||
データ参照
|
||
|
||
（高速なデータウェアハウス等）
|
||
データの可視化
|
||
|
||
（BIツール等）
|
||
|
||
運用管理
|
||
|
||
（ログモニタリング、セキュリティ監視等）
|
||
|
||
出典：デジタル庁のデータ分析基盤「sukuna」の変化：Agile&FragileからTrust&Robustへ
|
||
©2026 Digital Agency
|
||
|
||
6
|
||
|
||
1.3 ダッシュボード作成の流れ
|
||
|
||
本書では、ダッシュボードを作成する流れを、要件の整理、プロトタイピング、実装の3
|
||
つのステップに分解します。次章以降では、それぞれのステップで考えるべきことや活用
|
||
できるツールを紹介します。
|
||
|
||
要件の整理
|
||
|
||
プロトタイピング
|
||
|
||
実装
|
||
情報表現のポイント
|
||
|
||
必要な情報を
|
||
|
||
一覧化する
|
||
|
||
目的を定義する
|
||
|
||
プロトタイプ
|
||
|
||
をつくる
|
||
フィードバックを
|
||
|
||
元に改善する
|
||
|
||
制約条件を整理する
|
||
|
||
ヒアリング
|
||
|
||
する
|
||
|
||
デジタル庁ダッシュボード作成ツールキット
|
||
要件定義ワークシート PowerPoint
|
||
|
||
ダッシュボードイメージ作成キット PowerPoint
|
||
|
||
ダッシュボードを
|
||
|
||
実装する
|
||
|
||
チェックリストを
|
||
|
||
確認する
|
||
|
||
デジタル庁Power BIテンプレート
|
||
デザインテンプレート Power BI
|
||
|
||
©2026 Digital Agency
|
||
|
||
7
|
||
|
||
要件の整理
|
||
|
||
目的を定義する
|
||
|
||
制約条件を理解する
|
||
|
||
要件定義ワークシート
|
||
|
||
©2026 Digital Agency
|
||
|
||
8
|
||
|
||
2 要件の整理
|
||
ダッシュボードには必ず見る人が存在し、その人が解決したい課題や、必要と
|
||
する情報があります。ダッシュボードを作成する目的は、必要な情報が伝わ
|
||
り、意思決定や行動に繋がることにあります。一方で、目的に照らし合わせて
|
||
みると、ダッシュボードが適切な手段ではないこともあります。また、見る人
|
||
のニーズを満たすのに必要なデータがそもそも入手できないかもしれません。
|
||
|
||
目的と制約を整理しないまま制作を進めてしまうと、「そもそも誰のための、
|
||
何のためのダッシュボードだったか？」と、後になって問い直してしまうもの
|
||
が生まれてしまいます。そのような事態を避けるために、全てのプロセスに先
|
||
立って、まずは要件を整理しましょう。
|
||
|
||
要件の整理
|
||
|
||
本ステップのゴール
|
||
|
||
ダッシュボードの目的を定義すること
|
||
|
||
ダッシュボードの制作する際の制約を整理すること
|
||
|
||
使うもの
|
||
|
||
本書ではPowerPoint形式の要件定義ワークシートを用意しています。
|
||
要件定義ワークシート（PowerPoint）
|
||
|
||
プロトタイピング
|
||
|
||
実装
|
||
©2026 Digital Agency
|
||
|
||
9
|
||
|
||
2.1 目的を定義する
|
||
|
||
要件を整理するための第一歩は、見る人が誰であるかを考え、ダッシュボードの目的を定
|
||
義することです。次の図のように、5W1Hの問いにしたがって、ダッシュボードに求めら
|
||
れること、見る人の属性を記述しましょう。問いに対して適切に応えることが満たすべき
|
||
条件であり、これを満たすことが目的になります。
|
||
最上位の目的
|
||
|
||
見る目的
|
||
|
||
「最上位の目的」や「見る目的」は、あまり変わることはありません。一方で、「ダッ
|
||
シュボードの内容」に関しては、プロトタイプによる対話やテストにより、柔軟に変更し
|
||
ていきます。
|
||
想定の利用シーン
|
||
|
||
変わらない
|
||
|
||
Why
|
||
|
||
最終的に達成したい目的
|
||
|
||
ダッシュボードを見る理由
|
||
|
||
ダッシュボードの内容
|
||
状況に応じて柔軟に変更
|
||
|
||
What, so What
|
||
|
||
Who
|
||
|
||
情報
|
||
|
||
ダッシュボードを見る人
|
||
|
||
所属、立場、業務内容
|
||
|
||
リテラシーのレベル感
|
||
|
||
行動
|
||
|
||
When
|
||
|
||
目的達成のために知るべき情報
|
||
|
||
必要なデータの種類
|
||
見た後にする判断や行動
|
||
|
||
見るタイミングや頻度
|
||
|
||
Where
|
||
|
||
How
|
||
機能
|
||
|
||
求められる機能
|
||
データ
|
||
|
||
必要なデータ項目
|
||
|
||
更新頻度
|
||
|
||
見る場所
|
||
|
||
提示する媒体やデバイス
|
||
©2026 Digital Agency
|
||
|
||
10
|
||
|
||
2.2 制約条件を理解する
|
||
|
||
ダッシュボードには、どのような情報でも好きなように配置できるわけではありません。
|
||
例えば、大量のデータを羅列するのには不向きであり、見る人にとって必要な情報を選別
|
||
しなければなりません。また、選別した情報を入手できるかどうかも、ダッシュボードを
|
||
作る上での制約として働きます。
|
||
確認項目
|
||
|
||
ダッシュボードを
|
||
|
||
制作する上での制約
|
||
|
||
情報の種類が多すぎる
|
||
伝える内容が複雑すぎる
|
||
|
||
このように、要件定義の段階において「必要な情報」と「制約」の両方を理解し、プロト
|
||
タイプでの検証を通じて、ダッシュボードに掲載する情報を取捨選択できるようにしま
|
||
しょう。
|
||
アクション
|
||
|
||
プロトタイプでの検証
|
||
|
||
情報の種類を減らす
|
||
複雑度を下げる
|
||
|
||
情報が無理なく伝わるか、見た
|
||
人が理解できるかを確認する
|
||
|
||
定期的に閲覧する必要がない
|
||
|
||
データに欠損がある
|
||
|
||
データの制約
|
||
|
||
更新頻度が不十分である
|
||
必要な分解能がない
|
||
|
||
データの制約を回避できるか、
|
||
ダッシュボードを作成する上で
|
||
問題になるかを確認する
|
||
|
||
指標同士を比較できない
|
||
©2026 Digital Agency
|
||
|
||
11
|
||
|
||
2.3 要件定義ワークシート
|
||
以降のステップへ進む前に整理すべき情報をまとめるための
|
||
ワークシートを用意しました。
|
||
|
||
基本情報を整理する
|
||
|
||
プロジェクトの一般的な整理として、達成すべき目標や意思
|
||
決定者、ステークホルダー、リスク、スケジュールといった
|
||
情報を整理しましょう。
|
||
|
||
目的と制約条件を整理する
|
||
|
||
2.1と2.2で述べたように、ダッシュボードの目的や制約条件を
|
||
記述しましょう。
|
||
|
||
©2026 Digital Agency
|
||
|
||
12
|
||
|
||
2.3 要件定義ワークシート
|
||
|
||
要件定義ワークシートの記入サンプル
|
||
|
||
©2026 Digital Agency
|
||
|
||
13
|
||
|
||
プロトタイピング
|
||
|
||
プロトタイピングのプロセス
|
||
|
||
載せるべき情報を整理する
|
||
|
||
プロトタイプを作る
|
||
|
||
レイアウトの考え方
|
||
|
||
要望を元に改善する
|
||
|
||
©2026 Digital Agency
|
||
|
||
14
|
||
|
||
3 プロトタイピング
|
||
要件整理の次は、ダッシュボードのイメージがわかるプロトタイプを作成しま
|
||
す。要件を整理した後にそのまま実装に入るのではなく、プロトタイプを元に
|
||
チームや周囲の関係者と話し合うことで、ダッシュボードのQCD（= 品質とコ
|
||
スト、納期）向上が期待できます。
|
||
|
||
プロトタイプを通じて関係者と対話することには次のメリットがあります。
|
||
|
||
具体的な要望や意見を引き出すことができる
|
||
|
||
周囲と合意が取れ、手戻りが少なくなる
|
||
|
||
成果物が明確になり、実装の速度と品質が上がる
|
||
|
||
要件の整理
|
||
|
||
本ステップのゴール
|
||
|
||
ダッシュボードのイメージがわかるプロトタイプを作成すること
|
||
|
||
レイアウトやデータの内容を関係者間で合意すること
|
||
|
||
使うもの
|
||
|
||
プロトタイピングを低コストで実現するために、本書ではPowerPoint形式の
|
||
ツールキットを用意しています。
|
||
ダッシュボードイメージ作成キット（PowerPoint）
|
||
|
||
プロトタイピング
|
||
|
||
実装
|
||
©2026 Digital Agency
|
||
|
||
15
|
||
|
||
3.1 プロトタイピングのプロセス
|
||
載せるべき情報を整理する
|
||
|
||
プロトタイプをつくる
|
||
|
||
整理した要件を元に、ダッシュボードに必要な
|
||
情報を整理し、一覧化します。情報を可視化する
|
||
のに使用するグラフの種類も、仮案程度で良い
|
||
ので決めておくと良いでしょう。
|
||
|
||
整理した一覧を元に、作成するダッシュボード
|
||
のイメージを具体的に図示化します。使うツール
|
||
はPowerPointやFigmaなど、使いやすいもので
|
||
構いません。
|
||
|
||
関係者と話し、
|
||
|
||
フィードバックを得る
|
||
プロトタイプを用いて、ダッシュボードの想定
|
||
利用者やプロジェクト関係者と議論し、フィー
|
||
ドバックを集めましょう。フィードバックを元
|
||
にプロトタイプを修正することで、要件をより
|
||
正しく反映でき、実装の準備が整います。
|
||
|
||
©2026 Digital Agency
|
||
|
||
16
|
||
|
||
3.2 載せるべき情報を整理する
|
||
必要な情報を一覧化する
|
||
|
||
ダッシュボードの目的に照らし合わせ、必要な情報や求
|
||
められている情報を一覧化します。それぞれの項目が、
|
||
ダッシュボードに載る要素の候補となります。
|
||
|
||
グラフ候補を選定する
|
||
|
||
各情報に対して、グラフの候補を選定します。グラフの
|
||
候補があることで、プロトタイプを作る際に具体的なイ
|
||
メージが湧きやすくなります。
|
||
|
||
|
||
必要な情報の一覧例
|
||
|
||
指標の分類
|
||
|
||
売上
|
||
|
||
※グラフの選び方は次章で述べます。
|
||
|
||
顧客数
|
||
|
||
情報の詳細
|
||
|
||
補足情報
|
||
|
||
グラフ候補
|
||
|
||
売上数値
|
||
|
||
指標
|
||
|
||
地域別
|
||
|
||
・最新の売上数値が翌日の正午までに確認したい
|
||
|
||
・前日比、前週比、前月比も確認したい
|
||
・売上状況を推移で把握したい
|
||
|
||
・目標値との比較の情報もほしい
|
||
・好調な部門、不調な部門を把握したい
|
||
・部門別で先月比の情報もほしい
|
||
・地域差を確認したい
|
||
|
||
・地域毎でどの商品の売上が好調か確認したい
|
||
|
||
時系列
|
||
|
||
・顧客数の変化を日時単位で把握したい
|
||
|
||
折れ線グラフ
|
||
|
||
業界別
|
||
|
||
・荒い粒度でよいので業界別の顧客数を知りたい
|
||
|
||
・業界別の顧客数と、顧客あたりの売上規模を知りたい
|
||
|
||
表
|
||
|
||
時系列
|
||
部門別
|
||
|
||
折れ線グラフ
|
||
棒グラフ
|
||
棒グラフ
|
||
|
||
©2026 Digital Agency
|
||
|
||
17
|
||
|
||
3.2 載せるべき情報を整理する
|
||
|
||
載せるべき情報を選ぶ際の原則
|
||
目的に則する
|
||
|
||
分解できる
|
||
6,000
|
||
|
||
利用できるデータの中から、目的に当てはまるものを選び出
|
||
|
||
4,000
|
||
|
||
どの角度からデータを見るかを考え、それに必要なデータの分
|
||
|
||
し、ダッシュボードを構成します。そうでない情報はできる限
|
||
|
||
解粒度を最小単位とします。さらに、情報を全体から部分へ
|
||
|
||
り取り除き、データが判断や行動につながるまでの距離を縮め
|
||
|
||
と、見る人が読み解くことができる単位まで分割できるように
|
||
|
||
ます。
|
||
|
||
します。
|
||
|
||
違いに気づける
|
||
データ全体の中で突出するデータに気づけるようにします。ま
|
||
た、時間とともに変化する情報では、変化の時期と傾向（上昇
|
||
や下降）に気づけるようにします。
|
||
|
||
鮮度が高い
|
||
|
||
可能な最新のデータをダッシュボードに反映し、より現時
|
||
点に近い情報に基づいて意思決定をできるようにします。その
|
||
ために必要な、データを定期的に更新する仕組みやプロセスを
|
||
構築します。
|
||
利用
|
||
|
||
©2026 Digital Agency
|
||
|
||
18
|
||
|
||
3.3 プロトタイプを作る
|
||
|
||
ダッシュボードの要件や必要な情報の整理が終わったら、プロトタイプを作っていきま
|
||
す。最初は骨格となるレイアウトを検討し、次に表層である文言、色や形、グラフ表現を
|
||
検討していきましょう。
|
||
|
||
骨格となるレイアウトが定まらないうちに、表層の表現を細く詰めることはおすすめしま
|
||
せん。ダッシュボードの方向性を骨格となるレイアウト、表層的な表現という順番ですり
|
||
合わせることで、手戻りするリスクを軽減しましょう。
|
||
|
||
ダッシュボードの目的や要件
|
||
骨格となるレイアウト
|
||
|
||
最終的なイメージに近いモックアップ
|
||
|
||
データが反映されたダッシュボード
|
||
|
||
載せるべき情報
|
||
|
||
プロトタイプ
|
||
|
||
©2026 Digital Agency
|
||
|
||
19
|
||
|
||
3.3 プロトタイプを作る
|
||
|
||
骨格となるレイアウト
|
||
レイアウトを考える
|
||
|
||
整理した必要な情報を、情報の優先度と関係性を考慮してレイア
|
||
ウトします。優先度に応じて目立たせたり、大きさや順番を決め
|
||
ましょう。情報量が多くなる場合は、ベージを分割したり、ナビ
|
||
ゲーションを設計します。
|
||
|
||
視点を変えてレビューする
|
||
|
||
一回目で最終的なレイアウトが決まることはほとんどありませ
|
||
ん。情報の構成や強弱などを変えたもの何案か検討したり、プロ
|
||
ジェクト関係者やダッシュボードを見る人の視点で見直すことで
|
||
ダッシュボードの要件を満たすものを見つけ出しましょう。
|
||
|
||
プロトタイプ例
|
||
ダッシュボードのタイトル
|
||
指標Aの数値
|
||
|
||
指標Aの構成比
|
||
|
||
日時での更新
|
||
|
||
3つの分類
|
||
|
||
数値テキスト
|
||
円グラフ
|
||
指標のタイトル
|
||
|
||
補足情報
|
||
|
||
グラフ候補
|
||
|
||
指標Aの比較
|
||
|
||
前月比較
|
||
|
||
数値テキスト
|
||
|
||
指標Aの地域別
|
||
|
||
都道府県別データを使用
|
||
|
||
大きい数量から小さい数量にソート
|
||
|
||
棒グラフ
|
||
|
||
指標Aの時系列
|
||
|
||
2014年4月〜2024年3月までのデータ
|
||
|
||
目標値を記載
|
||
|
||
折れ線グラフ
|
||
|
||
©2026 Digital Agency
|
||
|
||
20
|
||
|
||
3.3 プロトタイプを作る
|
||
|
||
最終的なイメージに近いモックアップ
|
||
グラフを配置する
|
||
|
||
レイアウトが定まったら、グラフを配置し、最終的なダッシュ
|
||
ボードをイメージできる図を作成します。数値は、ランダムのダ
|
||
ミーデータで問題ありません。情報の意図や、議論が必要な点に
|
||
ついて補足も記載します。
|
||
|
||
作成にはPowerPointやFigmaなどのツールを使います。
|
||
|
||
※本書ではPowerPoint形式のツールキットを用意しています。
|
||
|
||
分類の定義
|
||
小カテゴリ16項目を3つの大
|
||
カテゴリにまとめて構成比と
|
||
して記載
|
||
|
||
プロトタイプ例
|
||
|
||
ダッシュボードのレイアウト例
|
||
指標
|
||
|
||
10,000,000
|
||
累計件数
|
||
|
||
指標定義
|
||
購買キャンセルなどを加味しな
|
||
い、速報値ベースでの売上を指
|
||
標として採用
|
||
|
||
指標の割合
|
||
|
||
分類3
|
||
10%
|
||
|
||
2,000
|
||
全体
|
||
|
||
分類2
|
||
30%
|
||
|
||
80% 80%
|
||
割合
|
||
|
||
指標の都道府県比較
|
||
|
||
指標の構成比
|
||
|
||
状況
|
||
|
||
分類1
|
||
60%
|
||
|
||
指標の時間変化と傾向
|
||
15,000
|
||
10,000
|
||
|
||
実績値
|
||
|
||
5,000
|
||
|
||
目標値
|
||
|
||
0
|
||
|
||
Jan
|
||
|
||
2020
|
||
|
||
Feb
|
||
|
||
Mar
|
||
|
||
更新頻度
|
||
目標値が月次で組まれているため、
|
||
月次のグラフを予定しているが、実
|
||
績値はデータとしては週次で表示す
|
||
ることも可能
|
||
|
||
Apr
|
||
|
||
May
|
||
|
||
Jun
|
||
|
||
Jul
|
||
|
||
北海道
|
||
|
||
青森県
|
||
|
||
岩手県
|
||
|
||
宮城県
|
||
|
||
秋田県
|
||
|
||
山形県
|
||
|
||
福島県
|
||
|
||
茨城県
|
||
|
||
栃木県
|
||
|
||
群馬県
|
||
|
||
埼玉県
|
||
|
||
千葉県
|
||
|
||
東京都
|
||
|
||
神奈川県
|
||
|
||
新潟県
|
||
|
||
富山県
|
||
|
||
石川県
|
||
|
||
福井県
|
||
|
||
山梨県
|
||
|
||
長野県
|
||
|
||
岐阜県
|
||
|
||
静岡県
|
||
|
||
愛知県
|
||
|
||
三重県
|
||
|
||
0
|
||
|
||
1,000
|
||
|
||
2,000
|
||
|
||
3,000
|
||
|
||
滋賀県
|
||
|
||
京都府
|
||
|
||
大阪府
|
||
|
||
兵庫県
|
||
|
||
奈良県
|
||
|
||
和歌山県
|
||
|
||
鳥取県
|
||
|
||
島根県
|
||
|
||
岡山県
|
||
|
||
広島県
|
||
|
||
山口県
|
||
|
||
徳島県
|
||
|
||
香川県
|
||
|
||
愛媛県
|
||
|
||
高知県
|
||
|
||
福岡県
|
||
|
||
佐賀県
|
||
|
||
長崎県
|
||
|
||
熊本県
|
||
|
||
大分県
|
||
|
||
宮崎県
|
||
|
||
鹿児島県
|
||
|
||
沖縄県
|
||
|
||
0
|
||
|
||
1,000
|
||
|
||
2,000
|
||
|
||
3,000
|
||
|
||
0000年00月00日時点のデータ
|
||
|
||
閾値の考え方
|
||
数値が2,000以下と2,000以上
|
||
で色分けする想定
|
||
|
||
©2026 Digital Agency
|
||
|
||
21
|
||
|
||
3.3 プロトタイプを作る
|
||
|
||
ダッシュボード設計の原則
|
||
構造を伝える
|
||
|
||
適切な情報量にする
|
||
|
||
全体から部分へと、階層構造になるようにダッシュボードの情
|
||
報を整理します。最初に全体を示す情報を得られ、次にその詳
|
||
細に辿り着けるように、レイアウトや導線を設計します。
|
||
|
||
過多な情報によって、継続的な利用意欲が削がれることの無い
|
||
ように配慮します。見る人にとって負担にならないように、情
|
||
報の総量を調整します。
|
||
|
||
複雑な操作を要求しない
|
||
|
||
比較対象を提供する
|
||
|
||
操作をせずに、あるいは少ない操作回数によって、必要な情報
|
||
を得られるようにします。繰り返し利用することが、見る人に
|
||
とって負担にならないようにします。
|
||
|
||
数量単体では意思決定することが難しいデータには、目標値や
|
||
平均値、前年の値を併記したり、前年比によってデータを表現
|
||
するなど、比較できる対象を提供します。
|
||
|
||
©2026 Digital Agency
|
||
|
||
22
|
||
|
||
3.4 レイアウトの考え方
|
||
|
||
ダッシュボードのレイアウトは、見る人の視線の動きに合わせるように、左上から右下に
|
||
向かって、全体から部分が並ぶように配置します。左上では全体を端的に示し、右下では
|
||
最も詳細な情報を表示するようにします。また、背景色に差をつけ、左上が最も目を引く
|
||
ように表現を調整します。
|
||
|
||
このようなダッシュボードを簡単に構成できるように、縦横6分割が可能なレイアウトグ
|
||
リッドをひいた16:9の画面用のテンプレートを用意しています。次章以降で述べる、指標
|
||
や表、グラフなどの構成要素を、テンプレート内のグリッドに沿って配置します。
|
||
|
||
見る順番に合わせた情報設計
|
||
|
||
レイアウトグリッドのテンプレート
|
||
|
||
最初に見るべき
|
||
|
||
大きな指標
|
||
1080px
|
||
|
||
判断や行動に役立つ
|
||
|
||
細かい指標
|
||
1920px
|
||
©2026 Digital Agency
|
||
|
||
23
|
||
|
||
3.4 レイアウトの考え方
|
||
|
||
レイアウトサンプル
|
||
|
||
ダッシュボードに掲載する情報に合わせて、レイアウトを検討しましょう。左上から右下
|
||
へ、上から下へ、左から右へ等、見る人の視線に沿うかたちで、全体感を表す指標から詳
|
||
細の情報へ流れるように設計します。
|
||
（例）一つの指標を複数の角度から提示する場合
|
||
|
||
（例）複数の指標を併記する場合
|
||
|
||
ダッシュボードのタイトル
|
||
|
||
ダッシュボードのタイトル
|
||
指標A
|
||
|
||
数値テキスト
|
||
|
||
指標B
|
||
|
||
数値テキスト
|
||
|
||
指標C
|
||
|
||
数値テキスト
|
||
|
||
指標Aの分解
|
||
|
||
数値テキスト
|
||
|
||
指標Bの分解
|
||
|
||
数値テキスト
|
||
|
||
指標Cの分解
|
||
|
||
数値テキスト
|
||
|
||
指標Aの分解の時系列
|
||
|
||
棒グラフ
|
||
|
||
指標Cの時系列
|
||
|
||
棒グラフ
|
||
|
||
指標A
|
||
|
||
数値テキスト
|
||
|
||
指標Aの構成比
|
||
|
||
円グラフ
|
||
|
||
都道府県別フィルター
|
||
ロゴ
|
||
指標Aの分類別
|
||
|
||
指標Aの分類別
|
||
|
||
棒グラフ
|
||
棒グラフ
|
||
|
||
指標Aの分解
|
||
|
||
数値テキスト
|
||
|
||
指標Aの時系列
|
||
|
||
折れ線グラフ
|
||
|
||
指標Aの分解
|
||
|
||
数値テキスト
|
||
|
||
年次フィルター
|
||
|
||
ロゴ
|
||
|
||
指標Aの時系列
|
||
|
||
折れ線グラフ
|
||
|
||
更新日時
|
||
|
||
更新日時
|
||
|
||
©2026 Digital Agency
|
||
|
||
24
|
||
|
||
3.4 レイアウトの考え方
|
||
|
||
レイアウトサンプル
|
||
|
||
フィルターは基本的に画面の上部か左部に配置し、フィルターの影響を受ける情報はその
|
||
下か右に配置します。フィルターと影響を受ける情報との関係性が分かるように配置しま
|
||
しょう。
|
||
（例）一つの指標を複数の角度から絞り込む場合
|
||
ダッシュボードのタイトル
|
||
指標Aの時系列
|
||
指標A
|
||
|
||
フィルター
|
||
数値テキスト
|
||
指標Aの分解
|
||
|
||
数値テキスト
|
||
|
||
年次フィルター
|
||
指標Aの分解
|
||
|
||
表
|
||
|
||
（例）表を使って多くの情報を一覧する場合
|
||
ロゴ
|
||
|
||
指標Aの分解
|
||
|
||
数値テキスト
|
||
|
||
ダッシュボードのタイトル
|
||
指標Aの分類
|
||
|
||
指標A
|
||
|
||
フィルター
|
||
数値テキスト
|
||
|
||
都道府県別フィルター
|
||
ロゴ
|
||
指標Aの分解
|
||
|
||
指標Aの分解
|
||
|
||
数値テキスト
|
||
数値テキスト
|
||
|
||
指標Aの分類
|
||
|
||
表
|
||
|
||
指標Aの時系列
|
||
|
||
折れ線グラフ
|
||
指標Aの分類
|
||
|
||
フィルター
|
||
|
||
更新日時
|
||
|
||
更新日時
|
||
|
||
©2026 Digital Agency
|
||
|
||
25
|
||
|
||
3.5 要望を元に改善する
|
||
反映する
|
||
(例) 都道府県職員が支援する対象を選ぶためには、各市区町
|
||
村の数値がどのくらい上がったのかを知る必要があるので、
|
||
前月比を追加してほしい
|
||
|
||
反映しない
|
||
(例) 性年代別での分類や地域別の分類を追加してほしい
|
||
(例) 47都道府県毎の推移も確認できるようにしたい
|
||
|
||
ヒアリングする
|
||
|
||
関係者へプロトタイプを見せ、フィードバックを収集し
|
||
ます。ダッシュボードの目的も伝えると、適切な意見を
|
||
得やすくなります。フィードバックは「こうしたい、こ
|
||
れを追加したい」という要望だけではなく、「〇〇をし
|
||
たいから、こうしたい」という理由や意図を聞き出す
|
||
と、以降のプロセスがスムーズに進みます。
|
||
|
||
反映方針を検討する
|
||
|
||
全ての要望を機械的に反映してしまうと、情報過多に
|
||
なったり、一貫性が損なわれ、見る人が混乱するものに
|
||
なります。要望の理由が明確で、かつダッシュボードの
|
||
目的に適っているものを選定します。要望の背景となる
|
||
理由を満たせる場合には、要望をそのまま反映する必要
|
||
はありません。要望を満たす最も良い改善方法を検討し
|
||
ましょう。
|
||
|
||
改善する
|
||
|
||
選定した要望を実現する必要最小限の変更を行います。
|
||
その後、改善したプロトタイプを再び見せて、要望が満
|
||
たされているかを確認しましょう。場合によっては複数
|
||
回の改善サイクルを行い、関係者が納得するものを目指
|
||
します。
|
||
|
||
©2026 Digital Agency
|
||
|
||
26
|
||
|
||
情報表現の
|
||
|
||
ポイント
|
||
|
||
グラフとは
|
||
|
||
グラフの種類と選び方
|
||
|
||
カラーパレット
|
||
|
||
グラフ設計の原則
|
||
|
||
Do’s Don’ts
|
||
|
||
©2026 Digital Agency
|
||
|
||
27
|
||
|
||
4 情報表現のポイント
|
||
ダッシュボードで情報を正しく伝えるため、グラフの選択や情報表現の適切な
|
||
方法を知る必要があります。まず、指標、表、グラフそれぞれの役割と種類を
|
||
把握し、次にグラフの要素と表現について理解します。本ガイドブックでは、
|
||
グラフ設計の原則、Do’s Don’ts（=望ましい表現と望ましくない表現）、必要
|
||
なカラーパレットを提供します。
|
||
|
||
本章の役立て方
|
||
|
||
ダッシュボードに掲載するグラフの種類の選択
|
||
|
||
タイトルや凡例、色といったグラフの表現の選択
|
||
|
||
©2026 Digital Agency
|
||
|
||
28
|
||
|
||
4.1 グラフとは
|
||
ダッシュボードで主に扱うデータは、値の集合です。値は数値や文字、記号などです。こ
|
||
のようなデータを分かりやすく整理する方法として、指標化と表組みが挙げられます。
|
||
|
||
指標
|
||
|
||
指標は、人々の判断や行動を左右する情報を端的に表す値です。目的に対する達成度を表
|
||
す単一の尺度であることや、全体傾向を表すような、複数の尺度を合成した値であること
|
||
もあります。一般に、データを正確に反映しつつ、見る人にとって有益な情報を得られる
|
||
ような指標化を行うのは簡単ではありません。
|
||
|
||
指標
|
||
表
|
||
グラフ
|
||
|
||
人々の判断や行動を左右する情報を端的に表す値
|
||
データを視覚的に整理して伝えるレイアウト手法
|
||
値を位置や長さといった幾何属性に対応づけて表現する図
|
||
|
||
表
|
||
|
||
表は、値に関連する情報を行と列へ対応づけ、値や値の集合を格子状に並べることで、
|
||
データを視覚的に整理して伝えるレイアウト手法です。表の中の値は、数値や文字に限ら
|
||
ず、色や図形によって表現することもあります。
|
||
|
||
グラフ
|
||
|
||
見る人の視覚認識の補助をより強めたものがグラフです。グラフは、値を位置や長さと
|
||
いった幾何属性に対応づけて表現する図です。これにより、値の差分や傾向、構成比と
|
||
いった、データが持つ意味を直感的に認識しやすくします。なお、二つの直交する軸を含
|
||
むものをここでは特にグラフと呼びますが、区別せずにチャートと呼ぶこともあります。
|
||
©2026 Digital Agency
|
||
|
||
29
|
||
|
||
4.2 グラフの種類と選び方
|
||
右図のように、異なるグラフは異なる値の表現をします。値の表現の仕方によって、直感
|
||
的に認識しやすくなる情報の種類も変わります。時間変化と傾向を伝える場合には折れ線
|
||
グラフ、数量を比較して伝える場合には棒グラフが適しています。ダッシュボードの目的
|
||
と照らし合わせ、伝える情報に対して適切なグラフを選ぶことが重要です。
|
||
|
||
この章では、いくつかの基本的なグラフの概要と構成要素、その使用例を解説します。
|
||
|
||
グラフ名
|
||
|
||
値の表現
|
||
|
||
伝える情報
|
||
|
||
折れ線グラフ
|
||
|
||
位置
|
||
|
||
時間変化、傾向
|
||
|
||
棒グラフ
|
||
|
||
長さ
|
||
|
||
数量比較
|
||
|
||
面グラフ
|
||
|
||
位置、面積
|
||
|
||
時間変化、傾向、構成比
|
||
|
||
円グラフ
|
||
|
||
角度、面積
|
||
|
||
構成比
|
||
|
||
©2026 Digital Agency
|
||
|
||
30
|
||
|
||
4.2 グラフの種類と選び方
|
||
|
||
折れ線グラフ
|
||
|
||
使用例
|
||
|
||
折れ線グラフ（ラインチャート）は、縦軸に数量、横軸に時間をとり、データ点の間を線
|
||
で結ぶ（補間する）ことで、数量の時間変化とその傾向を伝えるグラフです。
|
||
|
||
データ点には、丸や四角などの図形を配置し、補間の有無が分かるようにします。系列が
|
||
複数あるときには系列名を表示し、できる限り折れ線の近傍に配置します。
|
||
|
||
横軸は時間である必要があります。縦軸の数量に関係する変数が時間以外である場合に
|
||
は、棒グラフを使用することを検討します。
|
||
|
||
二つの系列
|
||
|
||
参照値との比較
|
||
|
||
データ点
|
||
|
||
15,000
|
||
|
||
系列名
|
||
|
||
10,000
|
||
|
||
系列
|
||
|
||
0
|
||
|
||
目標値との比較
|
||
|
||
Jan
|
||
|
||
2020
|
||
|
||
Feb
|
||
|
||
Mar
|
||
|
||
Apr
|
||
時間軸
|
||
|
||
May
|
||
|
||
Jun
|
||
|
||
Jul
|
||
|
||
系列1
|
||
|
||
5,000
|
||
|
||
系列2
|
||
|
||
5,000
|
||
4,000
|
||
3,000
|
||
2,000
|
||
1,000
|
||
0
|
||
|
||
Jan
|
||
Feb
|
||
2020
|
||
|
||
Mar
|
||
|
||
Apr
|
||
|
||
May
|
||
|
||
Jun
|
||
|
||
Jul
|
||
|
||
系列
|
||
|
||
Jan
|
||
Feb
|
||
2020
|
||
|
||
Mar
|
||
|
||
Apr
|
||
|
||
May
|
||
|
||
Jun
|
||
|
||
Jul
|
||
|
||
15,000
|
||
|
||
直線で結ぶ
|
||
|
||
5,000
|
||
|
||
10,000
|
||
|
||
0
|
||
|
||
構成要素
|
||
数量軸
|
||
|
||
15,000
|
||
|
||
10,000
|
||
|
||
目標値
|
||
|
||
実績値
|
||
|
||
5,000
|
||
0
|
||
|
||
Jan
|
||
Feb
|
||
2020
|
||
|
||
Mar
|
||
|
||
Apr
|
||
|
||
May
|
||
|
||
Jun
|
||
|
||
Jul
|
||
|
||
©2026 Digital Agency
|
||
|
||
31
|
||
|
||
4.2 グラフの種類と選び方
|
||
|
||
棒グラフ
|
||
|
||
使用例
|
||
|
||
5,000
|
||
4,000
|
||
|
||
棒グラフ（バーチャート）は、一つの軸に数量、もう一つの軸に分類をとり、配置する棒
|
||
の長さで数量を比較するグラフです。データ間の数量を比較するのに適しています。
|
||
|
||
|
||
参照値との比較
|
||
|
||
系列が複数あるときには、分類毎に複数の棒を並べて比較したり（集合棒グラフ）、棒を
|
||
|
||
3,000
|
||
2,000
|
||
1,000
|
||
|
||
積み上げて構成比を表現したりする（積み上げ棒グラフ）こともあります。
|
||
|
||
|
||
0
|
||
|
||
分類毎の数量を比較するときには、まず、棒グラフを使用することを検討します。もし、
|
||
時刻毎の数量を比較する場合には、折れ線グラフや面グラフが適しています。
|
||
|
||
United
|
||
Canada Germany France Mexico
|
||
States
|
||
|
||
Japan
|
||
|
||
United
|
||
Canada Germany France
|
||
States
|
||
|
||
Mexico
|
||
|
||
Japan
|
||
|
||
United
|
||
Canada Germany France Mexico
|
||
States
|
||
|
||
Japan
|
||
|
||
15,000
|
||
|
||
構成要素
|
||
|
||
10,000
|
||
|
||
集合棒グラフ
|
||
|
||
数量軸
|
||
|
||
5,000
|
||
|
||
5,000
|
||
|
||
隙間を空ける
|
||
|
||
0
|
||
|
||
4,000
|
||
3,000
|
||
|
||
15,000
|
||
|
||
2,000
|
||
|
||
10,000
|
||
|
||
積み上げ棒グラフ
|
||
|
||
1,000
|
||
0
|
||
|
||
5,000
|
||
|
||
United
|
||
|
||
States
|
||
|
||
Canada
|
||
|
||
Germany
|
||
|
||
France
|
||
|
||
分類軸
|
||
|
||
Mexico
|
||
|
||
Japan
|
||
|
||
0
|
||
|
||
©2026 Digital Agency
|
||
|
||
32
|
||
|
||
4.2 グラフの種類と選び方
|
||
|
||
面グラフ
|
||
|
||
使用例
|
||
|
||
面グラフ（エリアチャート）は、折れ線グラフに塗りを加えることで、数量と構成比の時
|
||
間変化を同時に伝えるグラフです。主に、複数の系列を積み上げて（積み上げ面グラフ）
|
||
|
||
15,000
|
||
系列
|
||
|
||
使用します。特に構成比の時間変化のみに着目するときには、値自体を構成比とする
|
||
（100%積み上げ面グラフ）こともあります。
|
||
|
||
|
||
10,000
|
||
|
||
構成比を伝える必要がないときには、折れ線グラフを使用します。また、系列の数が多い
|
||
|
||
一つの系列
|
||
5,000
|
||
|
||
場合や、時間変化を伝えない場合には、棒グラフが適しています。
|
||
|
||
0
|
||
|
||
構成要素
|
||
|
||
Jan
|
||
|
||
2020
|
||
|
||
Feb
|
||
|
||
Mar
|
||
|
||
Apr
|
||
|
||
May
|
||
|
||
Jun
|
||
|
||
Jul
|
||
|
||
数量軸
|
||
|
||
15,000
|
||
|
||
15,000
|
||
|
||
系列名
|
||
|
||
10,000
|
||
|
||
系列2
|
||
|
||
系列2
|
||
|
||
10,000
|
||
|
||
系列1
|
||
|
||
二つの系列
|
||
5,000
|
||
|
||
系列1
|
||
|
||
5,000
|
||
|
||
0
|
||
|
||
0
|
||
|
||
Jan
|
||
|
||
2020
|
||
|
||
Feb
|
||
|
||
Mar
|
||
|
||
Apr
|
||
|
||
時間軸
|
||
|
||
May
|
||
|
||
Jun
|
||
|
||
Jan
|
||
|
||
2020
|
||
|
||
Feb
|
||
|
||
Mar
|
||
|
||
Apr
|
||
|
||
May
|
||
|
||
Jun
|
||
|
||
Jul
|
||
|
||
Jul
|
||
|
||
©2026 Digital Agency
|
||
|
||
33
|
||
|
||
4.2 グラフの種類と選び方
|
||
|
||
円グラフ
|
||
|
||
使用例
|
||
|
||
円グラフ（パイチャート）は、円
|
||
を全体の総量とし、分類に対応する数量と弧の長さ（ま
|
||
たは角度および面積）を対応づけることで、数量の構成比を伝えるグラフです。同様のも
|
||
のに、円の中心をくり抜き情報を書き込むドーナッツグラフ（ドーナッツチャート）があ
|
||
ります。
|
||
|
||
円グラフが適するのは、全体の総量が明らかであり、構成比をコンパクトに伝える場合で
|
||
す。そうではない多くの場合において、棒グラフの方がデータを正確に伝えられることに
|
||
留意します。全体の総量が時間変化をともなう場合には、面グラフが適しています。
|
||
|
||
構成要素
|
||
|
||
円グラフ
|
||
|
||
原点
|
||
|
||
分類2
|
||
30%
|
||
|
||
分類名
|
||
|
||
分類1
|
||
60%
|
||
|
||
分類2
|
||
30%
|
||
|
||
できる限り数値を併記する
|
||
|
||
分類2
|
||
30%
|
||
|
||
分類1
|
||
60%
|
||
|
||
分類3
|
||
250
|
||
|
||
数量のドーナッツグラフ
|
||
|
||
分類3
|
||
10%
|
||
|
||
分類3
|
||
10%
|
||
|
||
分類2
|
||
750
|
||
|
||
分類1
|
||
1,500
|
||
|
||
分類3
|
||
10%
|
||
分類3
|
||
10%
|
||
|
||
全体
|
||
|
||
2,000
|
||
|
||
分類1
|
||
60%
|
||
|
||
比率のドーナッツグラフ
|
||
|
||
分類2
|
||
30%
|
||
|
||
全体
|
||
|
||
2,500
|
||
|
||
分類1
|
||
60%
|
||
|
||
全体の総量
|
||
|
||
©2026 Digital Agency
|
||
|
||
34
|
||
|
||
4.3 カラーパレット
|
||
|
||
デジタル庁 デザインシステムのカラーパレットを踏襲し、デザインテンプレート（Power BI用）のカラーパレットを次の７系統で用意しています。
|
||
Blue（青色）、Light Blue（薄い青色）、Cyan（シアン色）、Green（緑色）、Orange（オレンジ色）、Red（赤色）、Solid Gray（灰色）。
|
||
Blue
|
||
50
|
||
|
||
#D9E6FF
|
||
|
||
200
|
||
|
||
#C5D7FB
|
||
|
||
400
|
||
|
||
#7096F8
|
||
|
||
3:1→
|
||
|
||
Green
|
||
50
|
||
|
||
#E6F5EC
|
||
|
||
200
|
||
|
||
#9BD4B5
|
||
|
||
400
|
||
|
||
#51B883
|
||
|
||
3:1→
|
||
|
||
3:1→
|
||
|
||
600
|
||
|
||
#3460FB
|
||
|
||
900
|
||
|
||
#0017C1
|
||
|
||
1200
|
||
|
||
#000060
|
||
|
||
Light Blue
|
||
50
|
||
|
||
#F0F9FF
|
||
|
||
200
|
||
|
||
#C0E4FF
|
||
|
||
4.5:1→
|
||
|
||
600
|
||
|
||
#259D63
|
||
|
||
4.5:1→
|
||
|
||
400
|
||
|
||
#57B8FF
|
||
|
||
3:1→
|
||
|
||
1200
|
||
900
|
||
#115A36 #032213
|
||
|
||
Orange
|
||
50
|
||
|
||
#FFEEE2
|
||
|
||
200
|
||
|
||
#FFC199
|
||
|
||
400
|
||
|
||
#FF8D44
|
||
|
||
3:1→
|
||
|
||
600
|
||
|
||
#008BF2
|
||
|
||
900
|
||
|
||
#0055AD
|
||
|
||
1200
|
||
|
||
#00234B
|
||
|
||
Cyan
|
||
50
|
||
|
||
#E9F7F9
|
||
|
||
200
|
||
|
||
#99F2FF
|
||
|
||
#FB5B01
|
||
|
||
#2BC8E4
|
||
|
||
3:1→
|
||
|
||
4.5:1→
|
||
|
||
600
|
||
|
||
400
|
||
|
||
900
|
||
|
||
#AC3E00
|
||
|
||
1200
|
||
|
||
541E00
|
||
|
||
4.5:1→
|
||
|
||
4.5:1→ 白背景（#FFF）を１とした時のコントラスト比。右に行く程コントラストが強くなります。
|
||
|
||
Red
|
||
50
|
||
|
||
#FDEEEE
|
||
|
||
600
|
||
|
||
#00A3BF
|
||
|
||
900
|
||
|
||
#006F83
|
||
|
||
1200
|
||
|
||
#003741
|
||
|
||
4.5:1→
|
||
|
||
Solid Gray
|
||
|
||
200
|
||
|
||
#FFBBBB
|
||
|
||
400
|
||
|
||
#FF7171
|
||
|
||
3:1→
|
||
|
||
600
|
||
|
||
#FE3939
|
||
|
||
4.5:1→
|
||
|
||
900
|
||
|
||
#CE0000
|
||
|
||
1200
|
||
|
||
#620000
|
||
|
||
50
|
||
|
||
#F2F2F2
|
||
|
||
200
|
||
|
||
#CCCCCC
|
||
|
||
400
|
||
|
||
#999999
|
||
|
||
3:1→
|
||
|
||
536
|
||
|
||
#767676
|
||
|
||
700
|
||
|
||
#4D4D4D
|
||
|
||
900
|
||
|
||
#1A1A1A
|
||
|
||
4.5:1→
|
||
|
||
©2026 Digital Agency
|
||
|
||
35
|
||
|
||
4.3 カラーパレット
|
||
|
||
カラーパレットの構成
|
||
カラーパレットでは、利用する色（テキスト・背景・チャート・増減表現等）を定義しています。
|
||
下記はBlueのカラーパレットです。その他のカラーパレットの配色は「カラーパレットの使い方」を参照ください。
|
||
テキスト
|
||
Text（Black）
|
||
|
||
|
||
Text（White）
|
||
|
||
|
||
Label
|
||
|
||
|
||
Link
|
||
|
||
|
||
#000000
|
||
|
||
#FFFFFF
|
||
|
||
#626264
|
||
|
||
#0017C1
|
||
|
||
Standard
|
||
|
||
|
||
Highlight
|
||
|
||
|
||
Control
|
||
|
||
|
||
#F8F8FB
|
||
|
||
#0017C1
|
||
|
||
#F1F1F4
|
||
|
||
Blue 1200
|
||
|
||
|
||
Blue 900
|
||
|
||
|
||
Blue 600
|
||
|
||
|
||
Blue 400
|
||
|
||
|
||
Blue 200
|
||
|
||
|
||
Blue 50
|
||
|
||
|
||
#000060
|
||
|
||
#0017C1
|
||
|
||
#3460FB
|
||
|
||
#7096F8
|
||
|
||
#C5D7FB
|
||
|
||
#D9E6FF
|
||
|
||
背景
|
||
|
||
チャート
|
||
Primary
|
||
|
||
Neutral
|
||
|
||
Secondary
|
||
|
||
Yellow 800
|
||
|
||
|
||
Yellow 600
|
||
|
||
|
||
Yellow 400
|
||
|
||
|
||
SolidGray 800
|
||
|
||
|
||
SolidGray 600
|
||
|
||
|
||
SolidGray 400
|
||
|
||
|
||
SolidGray 200
|
||
|
||
|
||
#A58000
|
||
|
||
#D2A400
|
||
|
||
#FFC700
|
||
|
||
#333333
|
||
|
||
#666666
|
||
|
||
#999999
|
||
|
||
#CCCCCC
|
||
|
||
Red 200
|
||
|
||
|
||
Red 50
|
||
|
||
|
||
#FFBBBB
|
||
|
||
#FDEEEE
|
||
|
||
セマンティックカラー
|
||
Positive
|
||
Blue 600
|
||
|
||
|
||
Blue 200
|
||
|
||
|
||
Blue 50
|
||
|
||
|
||
Negative
|
||
Red 600
|
||
|
||
|
||
#3460FB
|
||
|
||
#C5D7FB
|
||
|
||
#E8F1FE
|
||
|
||
#FE3939
|
||
|
||
Success
|
||
|
||
|
||
Error
|
||
|
||
|
||
#197A4B
|
||
|
||
#CE0000
|
||
|
||
Others
|
||
|
||
©2026 Digital Agency
|
||
|
||
36
|
||
|
||
4.3 カラーパレット
|
||
|
||
ダッシュボードへの適応イメージ
|
||
カラーパレットを適応すると、色の設定が不要かつ統一したトンマナを有するダッシュボードを作成できます。
|
||
|
||
Cyan のカラーパレットを適応したダッシュボード
|
||
|
||
Orange のカラーパレットを適応したダッシュボード
|
||
|
||
出典：カラーパレットの使い方
|
||
©2026 Digital Agency
|
||
|
||
37
|
||
|
||
4.3 カラーパレット
|
||
|
||
コントラスト比の考え方
|
||
アクセシビリティに対応する場合、背景色とグラフ色面のコントラスト比を3:1以上にす
|
||
る必要があります。コントラスト比が3:1以上を満たせない場合、グラフの色面領域のす
|
||
ぐ近くに数値を記載するか、マウスオーバーやキーボードでのフォーカス時に数値が表示
|
||
されるようします。
|
||
|
||
3:1のコントラスト比を確保
|
||
|
||
マウスオーバーかフォーカス時に数値を表示
|
||
|
||
背景色に対して、3:1以上のコントラスト比を確保します。例えば、「Blue」カラーパ
|
||
|
||
3:1のコントラスト比が満たせない場合で、か グラフの色面領域のすぐ近くに数値の記
|
||
|
||
レットをキーカラーにした場合、グラフ色をBlue-500（#4979F5）以上の濃さで配色す
|
||
|
||
載がで ない場合 、色面領域をマウスオーバーかキーボードで れた時に数値を表示し
|
||
|
||
る必要があります。
|
||
|
||
ます。
|
||
|
||
グラフの色面領域の近くに数値を記載
|
||
|
||
※色覚多様性の考慮
|
||
|
||
3:1のコントラスト比が満たせない場合 、グラフの色面領域のすぐ近くに数値を記載し
|
||
|
||
グラフを 色にする場合 、色
|
||
|
||
は
|
||
|
||
ます。数値の色 、背景色に対して
|
||
|
||
は
|
||
|
||
4.5:1以上のコントラスト比を確保してください。
|
||
|
||
き
|
||
|
||
は
|
||
|
||
つ
|
||
|
||
触
|
||
|
||
多
|
||
は 覚多様性の人の見え方を配慮する必要があります。カラー
|
||
ユニバーサルデザイン推奨の配色、色覚特性シミュレーションやチェッカーを活用し、見
|
||
分けにくい色の組み合わせがないように調整します。また、色以外での識別方法を提供す
|
||
るようにしましょう。
|
||
|
||
出典：デジタル庁デザインシステムβ版カラーアクセシビリティ
|
||
©2026 Digital Agency
|
||
|
||
38
|
||
|
||
4.4 グラフ設計の原則
|
||
|
||
グラフの表現によって、情報の伝わりやすさは大きく変わります。情報が正しく伝わるグ
|
||
ラフを作るための原則として、「知りたいことを知れる」「誤解を生まない」の2つを提
|
||
示します。
|
||
|
||
知りたいことを知れる
|
||
シンプルにする
|
||
|
||
意味のある順列にする
|
||
|
||
強弱をつける
|
||
|
||
待たせすぎない
|
||
|
||
誤解を生まない
|
||
|
||
わかりやすく表記する
|
||
|
||
データを定義する
|
||
|
||
表現を歪曲しない
|
||
|
||
メタ情報を記載する
|
||
|
||
©2026 Digital Agency
|
||
|
||
39
|
||
|
||
4.4 グラフ設計の原則
|
||
|
||
知りたいことを知れる
|
||
シンプルにする
|
||
|
||
強弱をつける
|
||
|
||
意味のある順列にする
|
||
|
||
待たせ過ぎない
|
||
|
||
冗長なデータや説明、過度に装飾的な表現など、データを理解
|
||
するために不必要な情報をできるだけ取り除きます。
|
||
|
||
|
||
100
|
||
80
|
||
60
|
||
|
||
必要な情報を見つけやすいように配慮してデータを並べます。
|
||
数量の大小やアルファベット順など、情報を伝えるために適し
|
||
た並び順や、一般的に認知されている並び順の中から、最適な
|
||
ものを選びます。
|
||
|
||
ダッシュボードの中で重要な情報には、それ以外とは異なる表
|
||
現（色やサイズ、文字の太さなど）を用います。重要な箇所へ
|
||
見る人の注意を喚起し、必要な情報を発見しやすくします。
|
||
|
||
素早く情報を得られるようにするために、必要な情報を読み込
|
||
み、画面に表示するまでにかかる時間や、操作の反応や反映に
|
||
かかる時間が短くなるようにします。
|
||
|
||
©2026 Digital Agency
|
||
|
||
40
|
||
|
||
4.4 グラフ設計の原則
|
||
|
||
誤解を生まない
|
||
わかりやすく表記する
|
||
|
||
表現を歪曲しない
|
||
|
||
多くの人がデータを理解できるように、前提知識が必要とされ
|
||
る表現や、複雑な文言を避け、タイトルや系列名、数値の単位
|
||
を丁寧かつ簡潔に表記します。
|
||
|
||
グラフ軸の値範囲を恣意的に設定しない。値の範囲を省略しな
|
||
い。数量の差が実際よりも誇張や矮小化されて見えるような表
|
||
現をしない。
|
||
|
||
データを定義する
|
||
|
||
%
|
||
|
||
m
|
||
|
||
何を対象として収集したデータで、数値の意味が何であり、い
|
||
つ更新されたかといった、提供するデータの定義を参照できる
|
||
ようにします。
|
||
|
||
※
|
||
2024
|
||
8/26
|
||
|
||
メタ情報を記載する
|
||
|
||
ダッシュボードに使われているデータのソース、データの更新
|
||
日、いつ時点の数値なのか、注釈、免責事項など、見る人に
|
||
よって解釈の幅がないように補足情報を提供します。
|
||
|
||
©2026 Digital Agency
|
||
|
||
41
|
||
|
||
4.5 Do’s Don’ts
|
||
2つ の グ ラ フ 設 計 の 原 則 を ダ ッ シ ュ ボ ー ド の 設 計 に 活 か す た め に、 グ ラ フ と して の
|
||
Do’s（望ましい表現）とDon’ts（望ましくない表現）を具体例とともに紹介します。
|
||
|
||
知りたいことを知れる
|
||
|
||
誤解を生まない
|
||
|
||
全体の指標と詳細のグラフを表示する
|
||
|
||
|
||
タイトルにグラフの内容とデータ種別を表記する
|
||
|
||
|
||
グラフ項目の並び順に意味を持たせる
|
||
|
||
|
||
タイトルや凡例をシンプルに保つ
|
||
|
||
|
||
不要な要素は削除する
|
||
|
||
|
||
グラフと凡例を隣接する
|
||
|
||
|
||
不要な装飾やリッチな表現は使わない
|
||
|
||
|
||
グラフの原点は原則として0にする
|
||
|
||
|
||
グラフに使用する色数を絞る
|
||
|
||
色のみで分類を識別しない
|
||
|
||
©2026 Digital Agency
|
||
|
||
42
|
||
|
||
全体の指標と詳細の
|
||
|
||
グラフを表示する
|
||
|
||
Do
|
||
|
||
Don’t
|
||
全体の合計
|
||
|
||
10,000,000
|
||
|
||
見る人が最初にデータの全体像を捉えられるように
|
||
|
||
時系列
|
||
|
||
時系列
|
||
|
||
分解A
|
||
|
||
分解B
|
||
|
||
するため、全体を表す指標を配置し、その詳細につ
|
||
いての表やグラフを配置します。
|
||
分解A
|
||
|
||
分解B
|
||
|
||
詳細の要素だけが並んでいる
|
||
|
||
グラフ項目の並び順に
|
||
|
||
意味を持たせる
|
||
|
||
Do
|
||
|
||
Don’t
|
||
0
|
||
|
||
棒グラフや円グラフ、表などの項目の並び順は、見
|
||
る人が知りたい順番や比較しやすい順番にします。
|
||
例えば、数量の大小順、更新日順などです。
|
||
|
||
1,000
|
||
|
||
2,000
|
||
|
||
0
|
||
|
||
3,000
|
||
|
||
東京都
|
||
|
||
|
||
愛知県
|
||
|
||
|
||
大阪府
|
||
|
||
|
||
石川県
|
||
|
||
|
||
福岡県
|
||
|
||
|
||
大阪府
|
||
|
||
|
||
愛知県
|
||
|
||
|
||
沖縄県
|
||
|
||
|
||
北海道
|
||
|
||
|
||
東京都
|
||
|
||
|
||
石川県
|
||
|
||
|
||
福岡県
|
||
|
||
|
||
沖縄県
|
||
|
||
北海道
|
||
|
||
1,000
|
||
|
||
2,000
|
||
|
||
3,000
|
||
|
||
意味もなくあいうえお順で並んでいる
|
||
|
||
©2026 Digital Agency
|
||
|
||
43
|
||
|
||
不要な要素は削除する
|
||
|
||
Do
|
||
|
||
Don’t
|
||
目盛線やタイトル、小数部などが必要以上に記載されている
|
||
|
||
情報の重複を避け、下地のグリッドは最小限にしま
|
||
|
||
国別の人口
|
||
|
||
国別の人口
|
||
|
||
す。数値と直接関係のないテキスト情報は薄い色に
|
||
|
||
人口を国別に示します。グラフの縦軸は人口、横軸は国を表します。
|
||
|
||
し、グラフの情報量を必要最低限にします。
|
||
|
||
3,000
|
||
|
||
3,000.00
|
||
|
||
2,000
|
||
|
||
2,000.00
|
||
人口
|
||
|
||
1,000
|
||
|
||
0
|
||
|
||
1,000.00
|
||
|
||
マリ
|
||
|
||
ペルー
|
||
|
||
中国
|
||
|
||
米国
|
||
|
||
インド
|
||
|
||
0.00
|
||
|
||
日本
|
||
|
||
マリ
|
||
|
||
ペルー
|
||
|
||
中国
|
||
|
||
米国
|
||
|
||
インド
|
||
|
||
日本
|
||
|
||
国名
|
||
|
||
不要な装飾やリッチな
|
||
|
||
表現は使わない
|
||
|
||
Do
|
||
|
||
Don’t
|
||
数値とは関係のない表現が多用されている
|
||
|
||
世帯割合
|
||
|
||
世帯割合
|
||
|
||
数値やグラフを強調するための3D表現やドロップ
|
||
シャドウなど、数値と関係のない装飾的な表現は使
|
||
いません。
|
||
|
||
©2026 Digital Agency
|
||
|
||
44
|
||
|
||
グラフに使用する
|
||
|
||
色数を絞る
|
||
|
||
Do
|
||
|
||
Don’t
|
||
注目してほしいグラフがどれかわからない
|
||
|
||
グラフに使用する色数を絞り、見る人が注目すべき
|
||
系列を明確にします。
|
||
|
||
実績値
|
||
|
||
昨年度
|
||
|
||
目標値
|
||
|
||
目標値
|
||
|
||
昨年度
|
||
|
||
１月
|
||
|
||
タイトルにグラフの内容と
|
||
データ種別を表記する
|
||
|
||
２月
|
||
|
||
３月
|
||
|
||
４月
|
||
|
||
５月
|
||
|
||
６月
|
||
|
||
７月
|
||
|
||
Do
|
||
|
||
実績値
|
||
|
||
１月
|
||
|
||
２月
|
||
|
||
３月
|
||
|
||
４月
|
||
|
||
５月
|
||
|
||
６月
|
||
|
||
７月
|
||
|
||
Don’t
|
||
何を表すグラフかすぐに分からないタイトル
|
||
|
||
国産自動車の出荷台数（月次推移）
|
||
|
||
国産自動車
|
||
|
||
タイトルにグラフの数値の意味を正確に表したり、
|
||
月次推移や累計などのデータ種別を正確に記載し、
|
||
見る人がデータを誤認しないようにします。
|
||
|
||
１月
|
||
|
||
２月
|
||
|
||
３月
|
||
|
||
４月
|
||
|
||
５月
|
||
|
||
６月
|
||
|
||
７月
|
||
|
||
１月
|
||
|
||
２月
|
||
|
||
３月
|
||
|
||
４月
|
||
|
||
５月
|
||
|
||
６月
|
||
|
||
７月
|
||
|
||
©2026 Digital Agency
|
||
|
||
45
|
||
|
||
タイトルや凡例を
|
||
|
||
シンプルに保つ
|
||
|
||
Do
|
||
|
||
Don’t
|
||
端的でないタイトル
|
||
|
||
有効会員のプレミアムメンバー登録率
|
||
|
||
グラフに併記するタイトルや凡例、ラベルなどのテ
|
||
|
||
有効な会員IDを持っている人数のうちで
|
||
プレミアムメンバーシップ制度に登録して
|
||
いる人の比率の数値
|
||
|
||
キスト情報が冗長になることを避けます。見る人が
|
||
素早く簡単に理解できるように、正しく端的に記述
|
||
します。
|
||
|
||
プレミアムメンバーシップ
|
||
制度に登録している、に
|
||
該当する人の割合
|
||
|
||
登録している
|
||
|
||
60%
|
||
|
||
60%
|
||
|
||
グラフと凡例を
|
||
|
||
隣接させる
|
||
|
||
Do
|
||
|
||
Don’t
|
||
|
||
が
|
||
|
||
凡例 隣接していない
|
||
|
||
シティホテル
|
||
|
||
凡例をグラフと隣接させ、凡例の順序をグラフと対
|
||
応づけすることで、対応関係を明確にします。
|
||
|
||
ビジネスホテル
|
||
１月
|
||
|
||
２月 ３月 ４月 ５月 ６月 ７月
|
||
|
||
１月
|
||
|
||
２月 ３月 ４月 ５月 ６月 ７月
|
||
|
||
シティホテル
|
||
ビジネスホテル
|
||
|
||
順番がグラフと逆
|
||
|
||
凡例の
|
||
|
||
１月
|
||
|
||
２月 ３月 ４月
|
||
|
||
シティホテル
|
||
|
||
ビジネスホテル
|
||
|
||
１月
|
||
|
||
２月 ３月 ４月
|
||
|
||
ビジネスホテル
|
||
|
||
シティホテル
|
||
|
||
©2026 Digital Agency
|
||
|
||
46
|
||
|
||
グラフの原点は
|
||
|
||
原則として0にする
|
||
|
||
Do
|
||
|
||
Don’t
|
||
|
||
5,000
|
||
|
||
グラフの原点、特に棒グラフの原点は0にし、数量
|
||
|
||
5,000
|
||
|
||
4,000
|
||
|
||
が実際より誇張や矮小化されて見えないようにしま
|
||
|
||
4,000
|
||
|
||
3,000
|
||
|
||
す。
|
||
|
||
2,000
|
||
|
||
3,000
|
||
|
||
1,000
|
||
0
|
||
|
||
１月
|
||
|
||
２月
|
||
|
||
３月
|
||
|
||
４月
|
||
|
||
５月
|
||
|
||
2,000
|
||
|
||
６月
|
||
|
||
１月
|
||
|
||
２月
|
||
|
||
３月
|
||
|
||
４月
|
||
|
||
５月
|
||
|
||
６月
|
||
|
||
原点が０になっていない
|
||
|
||
色のみで分類を識別しない
|
||
|
||
Do
|
||
|
||
Don’t
|
||
違うグラフで同じ形のマーカーを使っている
|
||
|
||
色覚多様性を考慮し、データ点の形やグラフの塗り
|
||
の模様といった、色以外の情報からも系列を識別で
|
||
きるようにします。白黒印刷しても伝わる情報とな
|
||
るように意識しましょう。
|
||
|
||
１月
|
||
|
||
２月
|
||
|
||
３月
|
||
|
||
４月
|
||
|
||
５月
|
||
|
||
６月
|
||
|
||
７月
|
||
|
||
女性
|
||
|
||
女性
|
||
|
||
男性
|
||
|
||
男性
|
||
|
||
１月
|
||
|
||
２月
|
||
|
||
３月
|
||
|
||
４月
|
||
|
||
５月
|
||
|
||
６月
|
||
|
||
７月
|
||
|
||
©2026 Digital Agency
|
||
|
||
47
|
||
|
||
実装
|
||
|
||
デザインテンプレート
|
||
|
||
レイアウトグリッド
|
||
|
||
利用マニュアル
|
||
|
||
チェックリスト
|
||
|
||
アクセシビリティの対応
|
||
|
||
©2026 Digital Agency
|
||
|
||
48
|
||
|
||
5 実装
|
||
プロトタイプによってダッシュボードのデザイン案とデータの準備が整った
|
||
ら、BIツールやその他ソフトウェアでダッシュボードを実装します。実装過程
|
||
で、当初のデザイン案をそのまま実現できないこともあります。実現の障壁と
|
||
なる課題を解決できない場合は、必要に応じてデザインを調整しましょう。
|
||
|
||
本章では、グラフ設計の原則を満たしたダッシュボードを効率的に作成する
|
||
ためのツール（デザインテンプレートやレイアウトグリッド、利用マニュア
|
||
ル）を紹介しています。
|
||
|
||
実装を終えたら、チェックリストを用いて、グラフのデザインやデータ、アク
|
||
セシビリティの観点で問題がないか確認をします。最終的に、誰もが見やす
|
||
く、操作しやすいダッシュボードを目指しましょう。また、ダッシュボードの
|
||
KPI（アクセス数や利用頻度等）状況、組織の成熟度や関係者のデータリテラ
|
||
シーの変化に合わせて、ダッシュボードの構成や内容をアップデートし続けま
|
||
す。
|
||
実装
|
||
|
||
本ステップのゴール
|
||
|
||
ダッシュボードを実装すること
|
||
|
||
チェックリストによる最終確認を行うこと
|
||
|
||
使うもの
|
||
|
||
本ガイドブックではPower BI形式のツールキットを用意しています。
|
||
デザインテンプレート（Power BI）
|
||
|
||
利用マニュアル（PDF）
|
||
|
||
チェックリスト（Excel）
|
||
|
||
プロトタイピング
|
||
|
||
実装
|
||
e
|
||
|
||
©2026 Digital Ag ncy
|
||
|
||
49
|
||
|
||
5.1 デザインテンプレート
|
||
|
||
デザインテンプレートは、本書のデザイン指針をあらかじめ適用した指標と表、グラフを
|
||
含むPower BIファイルです。デザインの検討や調整する手間を省けます。
|
||
|
||
指標（数値）
|
||
|
||
積み上げ面グラフ
|
||
|
||
フィルター機能
|
||
|
||
表
|
||
|
||
折れ線グラフ
|
||
|
||
円グラフ
|
||
|
||
棒グラフ
|
||
|
||
複合グラフ
|
||
|
||
積み上げ棒グラフ
|
||
©2026 Digital Agency
|
||
|
||
50
|
||
|
||
5.2 レイアウトグリッド
|
||
本書が提供するレイアウトグリッドは、16:9の画面を縦横に2〜6分割できるように設計
|
||
しており、目的に合わせて柔軟にレイアウトを組むことができます。デザインテンプレー
|
||
トから表やグラフをコピー&ペーストし、グリッドに沿ってサイズや位置を調整します。
|
||
|
||
デザインテンプレート
|
||
|
||
レイアウトグリッド
|
||
|
||
5,000
|
||
4,000
|
||
|
||
拡大縮小
|
||
|
||
3,000
|
||
2,000
|
||
1,000
|
||
0
|
||
|
||
コピ
|
||
|
||
ー＆
|
||
|
||
ペー
|
||
スト
|
||
|
||
１月
|
||
|
||
２月
|
||
|
||
３月
|
||
|
||
４月
|
||
|
||
５月
|
||
|
||
６月
|
||
|
||
７月
|
||
|
||
5,000
|
||
4,000
|
||
3,000
|
||
|
||
拡大縮小
|
||
|
||
2,000
|
||
1,000
|
||
0
|
||
|
||
登録し
|
||
ている
|
||
|
||
60%
|
||
|
||
©2026 Digital Agency
|
||
|
||
51
|
||
|
||
5.3 利用マニュアル
|
||
|
||
デザインテンプレートを使用する際には、Power BI上での操作方法や作成手順を記載し
|
||
た利用マニュアルを参照してください。
|
||
|
||
利用マニュアルの章構成
|
||
|
||
プロトタイプの作成の手順
|
||
|
||
ダッシュボード作成の手順
|
||
|
||
PowerPointの事前準備をする
|
||
|
||
Power BIの事前準備をする
|
||
|
||
パーツを貼り付け、サイズを調整する
|
||
|
||
データを取り込む
|
||
|
||
メジャーとリレーションを作成する
|
||
|
||
レイアウトをつくる
|
||
|
||
詳細化する
|
||
|
||
指標、表、チャートを配置する
|
||
|
||
フィードバックを元に最終化する
|
||
タイトルや文字サイズを調整する
|
||
|
||
チャートを調整する
|
||
|
||
グリッドを非表示にする
|
||
|
||
フィードバックを元に最終化する
|
||
|
||
デザインテンプレート
|
||
|
||
利用マニュアル
|
||
デジタル庁
|
||
|
||
©2026 Digital Agency
|
||
|
||
52
|
||
|
||
5.4 チェックリスト
|
||
|
||
完成したダッシュボードをレビューするためのチェックリストです。設計の原則に則り、
|
||
ユーザーにとって見やすいものや行動を促すものになっているか、データやアクセシビリ
|
||
ティの観点で問題はないかの最終確認をします。
|
||
|
||
利用者の体験
|
||
|
||
利用者が判断や行動に必要な情報が提供できていますか？
|
||
データの全体像を捉えるための基準となる指標が掲載されていますか？
|
||
本当に必要な情報だけに絞り込めていますか？ほとんど使わない情報が掲載されていませんか？
|
||
利用者に必要以上の操作を求めていませんか？数回の操作で利用者の目的が達成されていますか？
|
||
利用者が迷わず必要な情報まで辿り着けますか？
|
||
上記が満たせていることを確認するために複数の利用者からのフィードバックを得て改善を重ねましたか？
|
||
|
||
18
|
||
22
|
||
22
|
||
22
|
||
22
|
||
26
|
||
|
||
©2026 Digital Agency
|
||
|
||
53
|
||
|
||
指標と表、グラフのデザイン
|
||
利用者が見たいと思っている数値へ優先的に目が向くようになっていますか？
|
||
|
||
40
|
||
|
||
グラフや表の配列順序が認知しやすいものになっていますか？
|
||
|
||
40
|
||
|
||
グラフと凡例が隣接され、対応づけがわかりやすくなっていますか？
|
||
|
||
40
|
||
|
||
他のデータとの比較や時間的な変化によって、すぐに違いを気づけるようになっていますか？
|
||
|
||
40
|
||
|
||
グラフの色数が1〜5色程度に絞れていますか？
|
||
|
||
45
|
||
|
||
グラフに含まれる要素（グリッドや枠線）を最小限にしていますか？
|
||
|
||
41
|
||
|
||
不要な装飾や画像、3Dやシャドウのようなリッチな表現は避けていますか？
|
||
|
||
41
|
||
|
||
誰が見てもわかりやすく、誤解のないタイトルや系列名になっていますか？
|
||
棒グラフの原点は0になっていますか？
|
||
データの更新日は記載されていますか？
|
||
|
||
41
|
||
41
|
||
41
|
||
|
||
テクニカル
|
||
|
||
利用者が実際に見る環境やデバイスで問題なく表示され、動作することを確認しましたか？
|
||
ダッシュボードの読み込み速度が遅すぎませんか？
|
||
|
||
40
|
||
40
|
||
|
||
©2026 Digital Agency
|
||
|
||
54
|
||
|
||
データ設計
|
||
|
||
利用者の目的に見合ったデータだけが選ばれていますか？
|
||
利用者が見たいレベルまでデータを分解できるようになっていますか？
|
||
利用者が必要な頻度でデータが更新されるような仕組みや運用プロセスになっていますか？
|
||
数量単体だけでは判断が困難な場合、理解を促すために比較できる数値が掲載されていますか？
|
||
データ定義を参照できるようになっていますか？
|
||
|
||
アクセシビリティ
|
||
|
||
色だけでグラフの情報を識別していませんか？
|
||
グラフに代替テキスト（alt情報）を付与していますか？
|
||
データファイル（ExcelやCSV）を公開していますか？
|
||
ダッシュボードの情報が要約されたテキストを公開していますか？（一般公開の場合）
|
||
|
||
18
|
||
18
|
||
18
|
||
22
|
||
41
|
||
56
|
||
56
|
||
56
|
||
56
|
||
|
||
©2026 Digital Agency
|
||
|
||
55
|
||
|
||
5.5 アクセシビリティの対応
|
||
|
||
行政や準公共機関が扱うデータをダッシュボードで公開する場合、すべての人が等しく情
|
||
報を閲覧できるようにするため、アクセシビリティへの配慮が重要です。多様な人々が
|
||
データへアクセスできるよう、色だけでなく数値を併記するなど、情報の取得や操作の代
|
||
替手段を提供しましょう。
|
||
|
||
デジタル庁 ウェブアクセシビリティ導入ガイドブック
|
||
|
||
データテーブルを公開する
|
||
|
||
ダッシュボードを見られない人やデータを解析したい人のために、データをファイル
|
||
（ExcelやCSV）やHTMLテーブルの形式で公開します。ファイルのデータ形式や構造も明
|
||
示します。
|
||
|
||
要約したテキスト情報を用意する
|
||
|
||
ダッシュボードの趣旨を把握したい人のために、主要な指標や傾向を文章と数値で要約
|
||
し、PDFやHTML形式で公開します。
|
||
|
||
代替テキストを付与する
|
||
|
||
ダッシュボードを見られない人のために、グラフやグラフに代替テキストを付与し、スク
|
||
リーンリーダーでダッシュボードの情報を得られるようにします。
|
||
|
||
©2026 Digital Agency
|
||
|
||
56
|
||
|
||
おわりに
|
||
©2026 Digital Agency
|
||
|
||
57
|
||
|
||
6 おわりに
|
||
デジタル庁は、データと根拠に基づいた政策判断・効果の可視化を日本政府内
|
||
で推進を先導する役割を担っています。今後もデータの可視化や分析に関する
|
||
実践や知見を積極的に公開していくことで、行政や公共機関、民間事業者の
|
||
人々がデータを利活用するための土壌を築いていきます。
|
||
|
||
お問い合わせ
|
||
|
||
本資料や関連ツールに関するご意見やご要望は、デジタル庁ウェブサイトのお
|
||
問い合わせよりご連絡ください。
|
||
デジタル庁ウェブサイトから問い合わせする
|
||
|
||
©2026 Digital Agency
|
||
|
||
58
|