llm-wiki/raw/articles/digital-agency-dashboard-design-guidebook-2026.md at main

yuta/llm-wiki

Fork 0

Files

T

yuta 86cad348b4 add

2026-07-03 00:38:05 +09:00

56 KiB

Raw Permalink Blame History

source_url, ingested, sha256, discovered_from

source_url

ingested

sha256

discovered_from

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

2026-07-02

1d4ce3981cfe89f845389fad53637bc721770e8cdc5ad0eeb5dcbae52e58fd20

platform	channel_id	channel_name	message_id	author_id	posted_at	message_excerpt
discord	1028287639918497822	chat	1522185426788417576	890908900520505354	2026-07-02T10:21:26.584000000Z	デジタル庁ダッシュボードデザインの実践ガイドブック 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 おわりに

4.1 グラフとは 4.2 グラフの種類と選び方 4.3 カラーパレット 4.4 グラフ設計の原則 4.5 Do’s Don’ts

はじめに

ダッシュボードとは

ガイドブックの対象範囲

ダッシュボード作成の流れ

1 はじめに本書は、行政や公共機関、民間企業の人々が見やすいダッシュボードを効率的に作るための方法を提供しています。

分野を問わず、多くの人々が、自身のサービスの推進や意思決定にデータを活用したいと考えている一方で、データを適切に利用する方法に迷っているのも事実です。ダッシュボードは、データ活用の全てではないものの、有効な手段の一つと言えます。本書は、データをわかりやすく可視化することで、数値に基づいて事実を理解し、多くの関係者の間で共通認識を広げ、意思決定の質を向上させ、より良い行動に繋げていくことを目的にしています。

本書では、人々に必要とされる、わかりやすいダッシュボードを作るために、デジタル庁で実践してきた政策データダッシュボード作成のノウハウに加え、行政職員や民間有識者の意見を反映したものを整理し、体系化したものです。

ダッシュボードのより効果的な活用を目指して、新しい取り組みを始める、もしくは既存の取り組みをより良くするためのヒントとなればと考えます。

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

二つの類型

ダッシュボードのデザインを考えるにあたって、次の二つの類型を設定します。一つは、現状を基準と照らし合わせ、異常などに素早く気づき、行動の必要性を判断する「提示型」、もう一つは、特に明確な判断基準がない事柄について、差分を発見したり、その源流を特定して掘り下げる「探索型」です。

探索型のダッシュボードは、見る人に対して一定のドメイン知識を前提とし、集中と画面上での操作を求めます。そのデザインには広範な観点が必要となるため、ダッシュボードのデザインシステムを構築するための第一歩となる本書では、提示型のダッシュボードを中心に扱います。

本書の対象範囲

提示型

ダッシュボード

探索型

ダッシュボード

概況の把握

一般的な知識

単純な操作

詳細の分析

特定のドメイン知識

複雑な操作

1.2 ガイドブックの対象範囲

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

本書の対象範囲

データ収集・保管

（クラウドストレージ等）

データ加工・蓄積

（ETLツール、コンテナ等）

データソース

（アンケート調査、ログデータ等）

データ参照

（高速なデータウェアハウス等）データの可視化

（BIツール等）

運用管理

（ログモニタリング、セキュリティ監視等）

1.3 ダッシュボード作成の流れ

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

要件の整理

プロトタイピング

実装情報表現のポイント

必要な情報を

一覧化する

目的を定義する

プロトタイプ

をつくるフィードバックを

元に改善する

制約条件を整理する

ヒアリング

する

デジタル庁ダッシュボード作成ツールキット要件定義ワークシート PowerPoint

ダッシュボードイメージ作成キット PowerPoint

ダッシュボードを

実装する

チェックリストを

確認する

デジタル庁Power BIテンプレートデザインテンプレート Power BI

要件の整理

目的を定義する

制約条件を理解する

要件定義ワークシート

2 要件の整理ダッシュボードには必ず見る人が存在し、その人が解決したい課題や、必要とする情報があります。ダッシュボードを作成する目的は、必要な情報が伝わり、意思決定や行動に繋がることにあります。一方で、目的に照らし合わせてみると、ダッシュボードが適切な手段ではないこともあります。また、見る人のニーズを満たすのに必要なデータがそもそも入手できないかもしれません。

目的と制約を整理しないまま制作を進めてしまうと、「そもそも誰のための、何のためのダッシュボードだったか？」と、後になって問い直してしまうものが生まれてしまいます。そのような事態を避けるために、全てのプロセスに先立って、まずは要件を整理しましょう。

要件の整理

本ステップのゴール

ダッシュボードの目的を定義すること

ダッシュボードの制作する際の制約を整理すること

使うもの

本書ではPowerPoint形式の要件定義ワークシートを用意しています。要件定義ワークシート（PowerPoint）

プロトタイピング

2.1 目的を定義する

要件を整理するための第一歩は、見る人が誰であるかを考え、ダッシュボードの目的を定義することです。次の図のように、5W1Hの問いにしたがって、ダッシュボードに求められること、見る人の属性を記述しましょう。問いに対して適切に応えることが満たすべき条件であり、これを満たすことが目的になります。最上位の目的

見る目的

「最上位の目的」や「見る目的」は、あまり変わることはありません。一方で、「ダッシュボードの内容」に関しては、プロトタイプによる対話やテストにより、柔軟に変更していきます。想定の利用シーン

変わらない

Why

最終的に達成したい目的

ダッシュボードを見る理由

ダッシュボードの内容状況に応じて柔軟に変更

What, so What

Who

情報

ダッシュボードを見る人

所属、立場、業務内容

リテラシーのレベル感

行動

When

目的達成のために知るべき情報

必要なデータの種類見た後にする判断や行動

見るタイミングや頻度

Where

How 機能

求められる機能データ

必要なデータ項目

更新頻度

見る場所

2.2 制約条件を理解する

ダッシュボードには、どのような情報でも好きなように配置できるわけではありません。例えば、大量のデータを羅列するのには不向きであり、見る人にとって必要な情報を選別しなければなりません。また、選別した情報を入手できるかどうかも、ダッシュボードを作る上での制約として働きます。確認項目

ダッシュボードを

制作する上での制約

情報の種類が多すぎる伝える内容が複雑すぎる

このように、要件定義の段階において「必要な情報」と「制約」の両方を理解し、プロトタイプでの検証を通じて、ダッシュボードに掲載する情報を取捨選択できるようにしましょう。アクション

プロトタイプでの検証

情報の種類を減らす複雑度を下げる

情報が無理なく伝わるか、見た人が理解できるかを確認する

定期的に閲覧する必要がない

データに欠損がある

データの制約

更新頻度が不十分である必要な分解能がない

データの制約を回避できるか、ダッシュボードを作成する上で問題になるかを確認する

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

基本情報を整理する

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

目的と制約条件を整理する

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

2.3 要件定義ワークシート

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

プロトタイピング

プロトタイピングのプロセス

載せるべき情報を整理する

プロトタイプを作る

レイアウトの考え方

要望を元に改善する

3 プロトタイピング要件整理の次は、ダッシュボードのイメージがわかるプロトタイプを作成します。要件を整理した後にそのまま実装に入るのではなく、プロトタイプを元にチームや周囲の関係者と話し合うことで、ダッシュボードのQCD（= 品質とコスト、納期）向上が期待できます。

プロトタイプを通じて関係者と対話することには次のメリットがあります。

具体的な要望や意見を引き出すことができる

周囲と合意が取れ、手戻りが少なくなる

成果物が明確になり、実装の速度と品質が上がる

要件の整理

本ステップのゴール

ダッシュボードのイメージがわかるプロトタイプを作成すること

レイアウトやデータの内容を関係者間で合意すること

使うもの

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

プロトタイピング

3.1 プロトタイピングのプロセス載せるべき情報を整理する

プロトタイプをつくる

整理した要件を元に、ダッシュボードに必要な情報を整理し、一覧化します。情報を可視化するのに使用するグラフの種類も、仮案程度で良いので決めておくと良いでしょう。

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

関係者と話し、

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

3.2 載せるべき情報を整理する必要な情報を一覧化する

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

グラフ候補を選定する

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

必要な情報の一覧例

指標の分類

売上

※グラフの選び方は次章で述べます。

顧客数

情報の詳細

補足情報

グラフ候補

売上数値

指標

地域別

・最新の売上数値が翌日の正午までに確認したい

・前日比、前週比、前月比も確認したい・売上状況を推移で把握したい

・目標値との比較の情報もほしい・好調な部門、不調な部門を把握したい  ・部門別で先月比の情報もほしい・地域差を確認したい

・地域毎でどの商品の売上が好調か確認したい

時系列

・顧客数の変化を日時単位で把握したい

折れ線グラフ

業界別

・荒い粒度でよいので業界別の顧客数を知りたい

・業界別の顧客数と、顧客あたりの売上規模を知りたい

表

時系列部門別

折れ線グラフ棒グラフ棒グラフ

3.2 載せるべき情報を整理する

載せるべき情報を選ぶ際の原則目的に則する

分解できる 6,000

利用できるデータの中から、目的に当てはまるものを選び出

4,000

どの角度からデータを見るかを考え、それに必要なデータの分

し、ダッシュボードを構成します。そうでない情報はできる限

解粒度を最小単位とします。さらに、情報を全体から部分へ

り取り除き、データが判断や行動につながるまでの距離を縮め

と、見る人が読み解くことができる単位まで分割できるように

ます。

します。

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

鮮度が高い

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

3.3 プロトタイプを作る

ダッシュボードの要件や必要な情報の整理が終わったら、プロトタイプを作っていきます。最初は骨格となるレイアウトを検討し、次に表層である文言、色や形、グラフ表現を検討していきましょう。

骨格となるレイアウトが定まらないうちに、表層の表現を細く詰めることはおすすめしません。ダッシュボードの方向性を骨格となるレイアウト、表層的な表現という順番ですり合わせることで、手戻りするリスクを軽減しましょう。

ダッシュボードの目的や要件骨格となるレイアウト

最終的なイメージに近いモックアップ

データが反映されたダッシュボード

載せるべき情報

プロトタイプ

3.3 プロトタイプを作る

骨格となるレイアウトレイアウトを考える

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

視点を変えてレビューする

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

プロトタイプ例ダッシュボードのタイトル指標Aの数値

指標Aの構成比

日時での更新

3つの分類

数値テキスト円グラフ指標のタイトル

補足情報

グラフ候補

指標Aの比較

前月比較

数値テキスト

指標Aの地域別

都道府県別データを使用

大きい数量から小さい数量にソート

棒グラフ

指標Aの時系列

2014年4月〜2024年3月までのデータ

目標値を記載

折れ線グラフ

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

目標値

Jan

2020

Feb

Mar

更新頻度目標値が月次で組まれているため、月次のグラフを予定しているが、実績値はデータとしては週次で表示することも可能

Apr

May

Jun

Jul

北海道

青森県

岩手県

宮城県

秋田県

山形県

福島県

茨城県

栃木県

群馬県

埼玉県

千葉県

東京都

神奈川県

新潟県

富山県

石川県

福井県

山梨県

長野県

岐阜県

静岡県

愛知県

三重県

1,000

2,000

3,000

滋賀県

京都府

大阪府

兵庫県

奈良県

和歌山県

鳥取県

島根県

岡山県

広島県

山口県

徳島県

香川県

愛媛県

高知県

福岡県

佐賀県

長崎県

熊本県

大分県

宮崎県

鹿児島県

沖縄県

1,000

2,000

3,000

0000年00月00日時点のデータ

閾値の考え方数値が2,000以下と2,000以上で色分けする想定

3.3 プロトタイプを作る

ダッシュボード設計の原則構造を伝える

適切な情報量にする

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

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

複雑な操作を要求しない

比較対象を提供する

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

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

3.4 レイアウトの考え方

ダッシュボードのレイアウトは、見る人の視線の動きに合わせるように、左上から右下に向かって、全体から部分が並ぶように配置します。左上では全体を端的に示し、右下では最も詳細な情報を表示するようにします。また、背景色に差をつけ、左上が最も目を引くように表現を調整します。

このようなダッシュボードを簡単に構成できるように、縦横6分割が可能なレイアウトグリッドをひいた16:9の画面用のテンプレートを用意しています。次章以降で述べる、指標や表、グラフなどの構成要素を、テンプレート内のグリッドに沿って配置します。

見る順番に合わせた情報設計

レイアウトグリッドのテンプレート

最初に見るべき

大きな指標 1080px

判断や行動に役立つ

3.4 レイアウトの考え方

レイアウトサンプル

ダッシュボードに掲載する情報に合わせて、レイアウトを検討しましょう。左上から右下へ、上から下へ、左から右へ等、見る人の視線に沿うかたちで、全体感を表す指標から詳細の情報へ流れるように設計します。（例）一つの指標を複数の角度から提示する場合

（例）複数の指標を併記する場合

ダッシュボードのタイトル

ダッシュボードのタイトル指標A

数値テキスト

指標B

数値テキスト

指標C

数値テキスト

指標Aの分解

数値テキスト

指標Bの分解

数値テキスト

指標Cの分解

数値テキスト

指標Aの分解の時系列

棒グラフ

指標Cの時系列

棒グラフ

指標A

数値テキスト

指標Aの構成比

円グラフ

都道府県別フィルターロゴ指標Aの分類別

指標Aの分類別

棒グラフ棒グラフ

指標Aの分解

数値テキスト

指標Aの時系列

折れ線グラフ

指標Aの分解

数値テキスト

年次フィルター

ロゴ

指標Aの時系列

折れ線グラフ

更新日時

3.4 レイアウトの考え方

レイアウトサンプル

フィルターは基本的に画面の上部か左部に配置し、フィルターの影響を受ける情報はその下か右に配置します。フィルターと影響を受ける情報との関係性が分かるように配置しましょう。（例）一つの指標を複数の角度から絞り込む場合ダッシュボードのタイトル指標Aの時系列指標A

フィルター数値テキスト指標Aの分解

数値テキスト

年次フィルター指標Aの分解

表

（例）表を使って多くの情報を一覧する場合ロゴ

指標Aの分解

数値テキスト

ダッシュボードのタイトル指標Aの分類

指標A

フィルター数値テキスト

都道府県別フィルターロゴ指標Aの分解

指標Aの分解

数値テキスト数値テキスト

指標Aの分類

表

指標Aの時系列

折れ線グラフ指標Aの分類

フィルター

更新日時

3.5 要望を元に改善する反映する (例) 都道府県職員が支援する対象を選ぶためには、各市区町村の数値がどのくらい上がったのかを知る必要があるので、前月比を追加してほしい

反映しない (例) 性年代別での分類や地域別の分類を追加してほしい (例) 47都道府県毎の推移も確認できるようにしたい

ヒアリングする

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

反映方針を検討する

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

改善する

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

情報表現の

ポイント

グラフとは

グラフの種類と選び方

カラーパレット

グラフ設計の原則

Do’s Don’ts

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

本章の役立て方

ダッシュボードに掲載するグラフの種類の選択

タイトルや凡例、色といったグラフの表現の選択

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

指標

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

指標表グラフ

人々の判断や行動を左右する情報を端的に表す値データを視覚的に整理して伝えるレイアウト手法値を位置や長さといった幾何属性に対応づけて表現する図

表

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

グラフ

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

この章では、いくつかの基本的なグラフの概要と構成要素、その使用例を解説します。

グラフ名

値の表現

伝える情報

折れ線グラフ

位置

時間変化、傾向

棒グラフ

長さ

数量比較

面グラフ

位置、面積

時間変化、傾向、構成比

円グラフ

角度、面積

構成比

4.2 グラフの種類と選び方

折れ線グラフ

使用例

折れ線グラフ（ラインチャート）は、縦軸に数量、横軸に時間をとり、データ点の間を線で結ぶ（補間する）ことで、数量の時間変化とその傾向を伝えるグラフです。

データ点には、丸や四角などの図形を配置し、補間の有無が分かるようにします。系列が複数あるときには系列名を表示し、できる限り折れ線の近傍に配置します。

横軸は時間である必要があります。縦軸の数量に関係する変数が時間以外である場合には、棒グラフを使用することを検討します。

二つの系列

参照値との比較

データ点

15,000

系列名

10,000

系列

目標値との比較

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

構成要素数量軸

15,000

10,000

目標値

実績値

5,000 0

Jan Feb 2020

Mar

Apr

May

Jun

Jul

4.2 グラフの種類と選び方

棒グラフ

使用例

5,000 4,000

棒グラフ（バーチャート）は、一つの軸に数量、もう一つの軸に分類をとり、配置する棒の長さで数量を比較するグラフです。データ間の数量を比較するのに適しています。

参照値との比較

系列が複数あるときには、分類毎に複数の棒を並べて比較したり（集合棒グラフ）、棒を

3,000 2,000 1,000

積み上げて構成比を表現したりする（積み上げ棒グラフ）こともあります。

分類毎の数量を比較するときには、まず、棒グラフを使用することを検討します。もし、時刻毎の数量を比較する場合には、折れ線グラフや面グラフが適しています。

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

隙間を空ける

4,000 3,000

15,000

2,000

10,000

積み上げ棒グラフ

1,000 0

5,000

United

States

Canada

Germany

France

分類軸

Mexico

Japan

4.2 グラフの種類と選び方

面グラフ

使用例

面グラフ（エリアチャート）は、折れ線グラフに塗りを加えることで、数量と構成比の時間変化を同時に伝えるグラフです。主に、複数の系列を積み上げて（積み上げ面グラフ）

15,000 系列

使用します。特に構成比の時間変化のみに着目するときには、値自体を構成比とする（100%積み上げ面グラフ）こともあります。

10,000

構成比を伝える必要がないときには、折れ線グラフを使用します。また、系列の数が多い

一つの系列 5,000

場合や、時間変化を伝えない場合には、棒グラフが適しています。

構成要素

Jan

2020

Feb

Mar

Apr

May

Jun

Jul

数量軸

15,000

系列名

10,000

系列2

10,000

系列1

二つの系列 5,000

系列1

5,000

Jan

2020

Feb

Mar

Apr

時間軸

May

Jun

Jan

2020

Feb

Mar

Apr

May

Jun

Jul

4.2 グラフの種類と選び方

円グラフ

使用例

円グラフ（パイチャート）は、⁨円 ⁩ を全体の総量とし、分類に対応する数量と弧の長さ（または角度および面積）を対応づけることで、数量の構成比を伝えるグラフです。同様のものに、円の中心をくり抜き情報を書き込むドーナッツグラフ（ドーナッツチャート）があります。

円グラフが適するのは、全体の総量が明らかであり、構成比をコンパクトに伝える場合です。そうではない多くの場合において、棒グラフの方がデータを正確に伝えられることに留意します。全体の総量が時間変化をともなう場合には、面グラフが適しています。

構成要素

円グラフ

原点

分類2 30%

分類名

分類1 60%

分類2 30%

できる限り数値を併記する

分類2 30%

分類1 60%

分類3 250

数量のドーナッツグラフ

分類3 10%

分類2 750

分類1 1,500

分類3 10% 分類3 10%

全体

2,000

分類1 60%

比率のドーナッツグラフ

分類2 30%

全体

2,500

分類1 60%

全体の総量

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→

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

#F2F2F2

200

#CCCCCC

400

#999999

3:1→

536

#767676

700

#4D4D4D

900

#1A1A1A

4.5:1→

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

4.3 カラーパレット

ダッシュボードへの適応イメージカラーパレットを適応すると、色の設定が不要かつ統一したトンマナを有するダッシュボードを作成できます。

Cyan のカラーパレットを適応したダッシュボード

Orange のカラーパレットを適応したダッシュボード

4.3 カラーパレット

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

3:1のコントラスト比を確保

マウスオーバーかフォーカス時に数値を表示

背景色に対して、3:1以上のコントラスト比を確保します。例えば、「Blue」カラーパ

3:1のコントラスト比が満たせない場合で、かグラフの色面領域のすぐ近くに数値の記

レットをキーカラーにした場合、グラフ色をBlue-500（#4979F5）以上の濃さで配色す

載がでない場合、色面領域をマウスオーバーかキーボードでれた時に数値を表示し

る必要があります。

ます。

グラフの色面領域の近くに数値を記載

※色覚多様性の考慮

3:1のコントラスト比が満たせない場合、グラフの色面領域のすぐ近くに数値を記載し

グラフを色にする場合、色

は

ます。数値の色、背景色に対して

は

4.5:1以上のコントラスト比を確保してください。

き

は

つ

触

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

4.4 グラフ設計の原則

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

知りたいことを知れるシンプルにする

意味のある順列にする

強弱をつける

待たせすぎない

誤解を生まない

わかりやすく表記する

データを定義する

表現を歪曲しない

メタ情報を記載する

4.4 グラフ設計の原則

知りたいことを知れるシンプルにする

強弱をつける

意味のある順列にする

待たせ過ぎない

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

100 80 60

必要な情報を見つけやすいように配慮してデータを並べます。数量の大小やアルファベット順など、情報を伝えるために適した並び順や、一般的に認知されている並び順の中から、最適なものを選びます。

ダッシュボードの中で重要な情報には、それ以外とは異なる表現（色やサイズ、文字の太さなど）を用います。重要な箇所へ見る人の注意を喚起し、必要な情報を発見しやすくします。

素早く情報を得られるようにするために、必要な情報を読み込み、画面に表示するまでにかかる時間や、操作の反応や反映にかかる時間が短くなるようにします。

4.4 グラフ設計の原則

誤解を生まないわかりやすく表記する

表現を歪曲しない

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

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

データを定義する

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

※ 2024 8/26

メタ情報を記載する

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

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

知りたいことを知れる

誤解を生まない

全体の指標と詳細のグラフを表示する

タイトルにグラフの内容とデータ種別を表記する

グラフ項目の並び順に意味を持たせる

タイトルや凡例をシンプルに保つ

不要な要素は削除する

グラフと凡例を隣接する

不要な装飾やリッチな表現は使わない

グラフの原点は原則として0にする

グラフに使用する色数を絞る

色のみで分類を識別しない

全体の指標と詳細の

グラフを表示する

Don’t 全体の合計

10,000,000

見る人が最初にデータの全体像を捉えられるように

時系列

分解A

分解B

するため、全体を表す指標を配置し、その詳細についての表やグラフを配置します。分解A

分解B

詳細の要素だけが並んでいる

グラフ項目の並び順に

意味を持たせる

Don’t 0

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

1,000

2,000

3,000

東京都

愛知県

大阪府

石川県

福岡県

大阪府

愛知県

沖縄県

北海道

東京都

石川県

福岡県

沖縄県

北海道

1,000

2,000

3,000

意味もなくあいうえお順で並んでいる

不要な要素は削除する

Don’t 目盛線やタイトル、小数部などが必要以上に記載されている

情報の重複を避け、下地のグリッドは最小限にしま

国別の人口

す。数値と直接関係のないテキスト情報は薄い色に

人口を国別に示します。グラフの縦軸は人口、横軸は国を表します。

し、グラフの情報量を必要最低限にします。

3,000

3,000.00

2,000

2,000.00 人口

1,000

1,000.00

マリ

ペルー

中国

米国

インド

0.00

日本

マリ

ペルー

中国

米国

インド

日本

国名

不要な装飾やリッチな

表現は使わない

Don’t 数値とは関係のない表現が多用されている

世帯割合

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

グラフに使用する

色数を絞る

Don’t 注目してほしいグラフがどれかわからない

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

実績値

昨年度

目標値

昨年度

１月

タイトルにグラフの内容とデータ種別を表記する

２月

３月

４月

５月

６月

７月

実績値

１月

２月

３月

４月

５月

６月

７月

Don’t 何を表すグラフかすぐに分からないタイトル

国産自動車の出荷台数（月次推移）

国産自動車

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

１月

２月

３月

４月

５月

６月

７月

１月

２月

３月

４月

５月

６月

７月

タイトルや凡例を

シンプルに保つ

Don’t 端的でないタイトル

有効会員のプレミアムメンバー登録率

グラフに併記するタイトルや凡例、ラベルなどのテ

有効な会員IDを持っている人数のうちで  プレミアムメンバーシップ制度に登録して  いる人の比率の数値

キスト情報が冗長になることを避けます。見る人が素早く簡単に理解できるように、正しく端的に記述します。

プレミアムメンバーシップ  制度に登録している、に  該当する人の割合

登録している

60%

グラフと凡例を

隣接させる

Don’t

が

凡例隣接していない

シティホテル

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

ビジネスホテル１月

２月３月４月５月６月７月

１月

２月３月４月５月６月７月

シティホテルビジネスホテル

順番がグラフと逆

凡例の

１月

２月３月４月

シティホテル

ビジネスホテル

１月

２月３月４月

ビジネスホテル

シティホテル

グラフの原点は

原則として0にする

Don’t

5,000

グラフの原点、特に棒グラフの原点は0にし、数量

5,000

4,000

が実際より誇張や矮小化されて見えないようにしま

4,000

3,000

す。

2,000

3,000

1,000 0

１月

２月

３月

４月

５月

2,000

６月

１月

２月

３月

４月

５月

６月

原点が０になっていない

色のみで分類を識別しない

Don’t 違うグラフで同じ形のマーカーを使っている

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

１月

２月

３月

４月

５月

６月

７月

女性

男性

１月

２月

３月

４月

５月

６月

７月

実装

デザインテンプレート

レイアウトグリッド

利用マニュアル

チェックリスト

アクセシビリティの対応

5 実装プロトタイプによってダッシュボードのデザイン案とデータの準備が整ったら、BIツールやその他ソフトウェアでダッシュボードを実装します。実装過程で、当初のデザイン案をそのまま実現できないこともあります。実現の障壁となる課題を解決できない場合は、必要に応じてデザインを調整しましょう。

本章では、グラフ設計の原則を満たしたダッシュボードを効率的に作成するためのツール（デザインテンプレートやレイアウトグリッド、利用マニュアル）を紹介しています。

実装を終えたら、チェックリストを用いて、グラフのデザインやデータ、アクセシビリティの観点で問題がないか確認をします。最終的に、誰もが見やすく、操作しやすいダッシュボードを目指しましょう。また、ダッシュボードの KPI（アクセス数や利用頻度等）状況、組織の成熟度や関係者のデータリテラシーの変化に合わせて、ダッシュボードの構成や内容をアップデートし続けます。実装

本ステップのゴール

ダッシュボードを実装すること

チェックリストによる最終確認を行うこと

使うもの

本ガイドブックではPower BI形式のツールキットを用意しています。デザインテンプレート（Power BI）

利用マニュアル（PDF）

チェックリスト（Excel）

プロトタイピング

実装 e

5.1 デザインテンプレート

デザインテンプレートは、本書のデザイン指針をあらかじめ適用した指標と表、グラフを含むPower BIファイルです。デザインの⁨検討や調整する手間を省けます。

指標（数値）

積み上げ面グラフ

フィルター機能

表

折れ線グラフ

円グラフ

棒グラフ

複合グラフ

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%

5.3 利用マニュアル

デザインテンプレートを使用する際には、Power BI上での操作方法や作成手順を記載した利用マニュアルを参照してください。

利用マニュアルの章構成

プロトタイプの作成の手順

ダッシュボード作成の手順

PowerPointの事前準備をする

Power BIの事前準備をする

パーツを貼り付け、サイズを調整する

データを取り込む

メジャーとリレーションを作成する

レイアウトをつくる

詳細化する

指標、表、チャートを配置する

フィードバックを元に最終化するタイトルや文字サイズを調整する

チャートを調整する

グリッドを非表示にする

フィードバックを元に最終化する

デザインテンプレート

利用マニュアルデジタル庁

5.4 チェックリスト

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

利用者の体験

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

18 22 22 22 22 26

指標と表、グラフのデザイン利用者が見たいと思っている数値へ優先的に目が向くようになっていますか？

グラフや表の配列順序が認知しやすいものになっていますか？

グラフと凡例が隣接され、対応づけがわかりやすくなっていますか？

他のデータとの比較や時間的な変化によって、すぐに違いを気づけるようになっていますか？

グラフの色数が1〜5色程度に絞れていますか？

グラフに含まれる要素（グリッドや枠線）を最小限にしていますか？

不要な装飾や画像、3Dやシャドウのようなリッチな表現は避けていますか？

誰が見てもわかりやすく、誤解のないタイトルや系列名になっていますか？棒グラフの原点は0になっていますか？データの更新日は記載されていますか？

41 41 41

テクニカル

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

40 40

データ設計

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

アクセシビリティ

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

18 18 18 22 41 56 56 56 56

5.5 アクセシビリティの対応

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

デジタル庁ウェブアクセシビリティ導入ガイドブック

データテーブルを公開する

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

要約したテキスト情報を用意する

ダッシュボードの趣旨を把握したい人のために、主要な指標や傾向を文章と数値で要約し、PDFやHTML形式で公開します。

代替テキストを付与する

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

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

お問い合わせ

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

56 KiB Raw Permalink Blame History Unescape Escape

56 KiB

Raw Permalink Blame History