ダッシュボードのデザインを自分で考えてはいけない。ひどいのができあがる
かといって「ダッシュボード作って」と AI に丸投げしてもいけない
やつらは、本当にデザインが下手である。めっちゃ凄いスキルをかましても、泣けるほど下手である
- 配色を沢山使う
- 意味なくグラデーションも使う
- 関連する情報同士を近づけてグループ化しない
- アイコンの横に文字を並べればいいと思ってる
- toB 用なのに絵文字を使う
- 要素のサイズや色に明確な違いをつけない
- 視線の移動など考えていない
- スクショの再現もうまくない
- 反復しすぎて退屈なレイアウト
- 勝手にシャドウをつける
おわかりだろうか？
デザインの4大原則を無視している。いちいち、ルールなどで指定しないといけない。かといって、デザインの心得がないエンジニアが今からデザインの勉強をするのも微妙
この、にっちもさっちもいかない状態を実務レベルに引き上げる基準が、デジタル庁から無料で公開されている
正式名称は『ダッシュボードデザインの実践ガイドブック』。2026 年 3 月 31 日に更新された 59 ページのPDF 本体で、誰でも無料で読める
読んだ。そして、管理画面に取り入れた
取引先企業に見せた。褒められた
ワイ、嬉しい
このガイドブック、デジタル庁が政策データのダッシュボードを作ってきたノウハウに行政職員と民間有識者の意見を足して体系化したもの
データの準備やクレンジングは扱わず、可視化そのものに絞ってある
そこらのおしゃれな、有料UI買うより絶対いい
ガイドブックの配布ページはこちら
X で毎日 Claude Code 情報を配信してるコムテです
要点
X で同じものを投稿しているが、このガイドブックから「最低限、これは知っておきたいね」というものをまとめるとこれ
◯ ダッシュボード作成の流れ
要件の整理 → プロトタイピング → 実装
◯ 載せるべき情報を選ぶ
- データ → 目的に当てはまるものを選ぶ
- 見る人が読み解くことができる単位まで分割
- データ全体の中で突出するデータに気づけるように
- 利用可能な最新データ → ダッシュボード反映
◯ レイアウト基本
- 見る人の視線の動きに合わせる
- 左上から右下に、上から下へ
- 全体から部分が並ぶように
- 右下は詳細情報
◯ ダッシュボード設計原則
- 全体 → 部分。階層構造に
- 適切な情報量に
- 複雑な操作を要求しない
- 比較対象を提供（目標値、平均値、前年値）
◯ グラフ
- 折れ線グラフ:時間変化、傾向
- 棒グラフ:数量比較
- 面グラフ:時間変化、傾向、構成比
- 円グラフ:構成比
◯ コントラスト比
- 背景色に対し、3:1以上のコントラスト比
- マウスオーバーかフォーカス時に数値表示
- グラフの色面領域の近くに数値を記載
- 色覚多様性の考慮
◯ デジタル庁 カラーパレット
- Blue（青色）→ おすすめ！
- Light Blue（薄い青色）
- Cyan（シアン色）
- Green（緑色）
- Orange（オレンジ色）
- Red（赤色）
- Solid Gray（灰色）
※ 配色は2~3色くらいに抑えると見やすい
◯ グラフ設計原則（知りたいことを知れる）
- シンプルに
- 意味のある順列に
- 強弱つける
- 待たせすぎない
◯ グラフ設計原則（誤解を生まない）
- わかりやすく表記
- データを定義
- 表現を歪曲しない
- メタ情報を記載
◯ 知りたいことを知れる(Do’s/Don’ts)
- 全体の指標と詳細のグラフを表示する
- グラフ項目の並び順に意味を持たせる
- 不要な要素は削除する
- 不要な装飾やリッチな表現は使わない
- グラフに使用する色数を絞る
◯ 誤解を生まない(Do’s/Don’ts)
- タイトルにグラフの内容とデータ種別を表記
- タイトルや凡例をシンプルに保つ
- グラフと凡例を隣接する
- グラフの原点は原則として0にする
- 色のみで分類を識別しない
原則1 まず目的を決める
最初にやるのは、その画面が何のためにあるかを言葉にすること。ガイドブックは 5W1H で目的を定義する
| 要素 | 決める内容 |
|---|---|
| Why | 最上位の目的 |
| What, so What | 知るべき情報と取る行動 |
| Who, When, Where | 誰がいつどこで見るか |
| How | 必要な機能とデータ項目・更新頻度 |
押さえておく区別が一つある。最上位の目的（見る目的）は動かさない。一方でダッシュボードに載せる中身は、運用しながら柔軟に変えてよい
目的を決める作業には、要件定義ワークシート（PowerPoint 形式）が付属する。埋めながら、目的と見せる情報と取る行動をはっきりさせられる
原則2 載せる情報を4つの基準で選ぶ
目的が決まったら、載せる情報を選ぶ。足すのでなく引く作業で、ガイドブックは 4 つの基準を挙げる
- 目的に則する 目的に直結する情報だけ残す
- 分解できる 見る人が読み解ける単位まで砕く
- 違いに気づける 突出や変化の時期と傾向が分かる
- 鮮度が高い 最新データが反映される仕組み
情報を増やすほど画面は読みにくくなる。この 4 基準は、載せない理由を作るための物差し
原則3 レイアウトは視線の流れに合わせる
人の視線は左上から右下へ、上から下へ、左から右へ動く。レイアウトはこの流れに逆らわない
だから左上に全体像を端的に置き、右下に最も詳細な情報を置く。背景色に差をつけて、左上を画面で一番目立たせる
土台には 16:9 のグリッドテンプレートがある。縦横 2〜6 分割で、コピペで組める形になっている
原則4 指標・表・グラフの役割とグラフの選び方
数字の見せ方には 3 つの道具がある。指標、表、グラフで、それぞれ役割が違う
| 道具 | 役割 |
|---|---|
| 指標 | 判断や行動を左右する値を端的に示す |
| 表 | 値を格子状に並べる |
| グラフ | 値を位置や長さなどの幾何属性で表す |
迷いやすいのはグラフの種類。ガイドブックは幾何属性（位置・長さ・角度・面積）と用途を対応させている
| グラフ | 手がかり | 向いている用途 |
|---|---|---|
| 折れ線 | 位置 | 時間変化・傾向 |
| 棒 | 長さ | 数量の比較 |
| 面 | 位置・面積 | 時間変化・傾向・構成比 |
| 円 | 角度・面積 | 構成比 |
円グラフは、全体の総量が明確で構成比をコンパクトに伝えたいときだけ使う。量の比較は棒グラフの方が正確に読み取れる
原則5 色とコントラストで誤解を防ぐ
色は情報を伝える手段であり、装飾ではない。ガイドブックは配色を 2〜3 色に抑えると読みやすいとする
コントラスト比（背景色との明暗の差）にも具体的な下限がある
- グラフの色面 背景に対し 3:1 以上
- 満たせないとき 数値を近くに併記かマウスオーバー表示
- 数値の文字 背景に対し 4.5:1 以上
色覚の多様性にも配慮する。色だけで分類を区別せず、形やラベルなど色以外の手がかりも用意する。白黒印刷でも伝わる状態を目安にする
装飾を削るという考え方は新しくない。データ可視化の古典 Stephen Few『Information Dashboard Design』が説く、データでない画素を削るという原則にそのまま沿う
ガイドブックは各項目を、望ましい表現（Do's）と避ける表現（Don'ts）の対で示している
| Do's（望ましい） | Don'ts（避ける） |
|---|---|
| 全体の指標と詳細のグラフを両方置く | 詳細のグラフだけを並べる |
| 並び順に意味を持たせる | 意味なく五十音順で並べる |
| 3D やドロップシャドウを避ける | 数値と無関係な装飾を多用する |
| タイトルに内容とデータ種別を書く | 何のグラフか分からないタイトル |
| グラフの原点を 0 にする | 原点を 0 以外から始める |
| 色に加え形やラベルでも分類する | 色だけで分類を区別する |
AIに渡すルールの作り方
AI コーディングツールには、毎回のプロンプトとは別に、常時読ませる指示を置く場所がある。Claude Code ならプロジェクト直下の CLAUDE.md やスキル、v0 や Cursor ならシステムプロンプトやルール設定
ここに原則を書く。曖昧語でなく具体値で書く
「見やすくして」では AI が解釈で埋める。「グラフの色面は背景に対しコントラスト比 3:1 以上」と数値で書けば、生成物がぶれない
そのまま貼れるルール対応表
前半の各原則を、AI への命令文に 1 対 1 で言い換えた。これをそのまま常時読ませる指示に貼る
| ガイドブックの原則 | AI に渡すルール文 |
|---|---|
| グラフ選択（円は構成比のみ） | 量の比較は棒グラフ。円グラフは構成比を伝えたいときだけ使う |
| グラフの原点は原則 0 | グラフの原点は 0 にする。特に棒グラフは 0 から始める |
| 色だけで分類しない | 分類は色に加えて形やラベルでも区別する |
| 配色は 2〜3 色 | 使う色は 2〜3 色に抑える |
| コントラスト比 | グラフ色面は背景比 3:1 以上、数値文字は 4.5:1 以上 |
| レイアウトは視線の流れ | 左上に全体サマリ、右下に最詳細を置く |
| 不要な装飾を削る | 3D・ドロップシャドウ・不要な装飾は使わない |
| グラフと凡例を隣接 | 凡例はグラフに隣接させ、離さない |
| タイトルに内容とデータ種別 | 各グラフのタイトルに内容とデータ種別を書く |
| 情報を引き算 | 目的に直結しない指標やグラフは載せない |
この表を常時読ませる指示に貼れば、次からの生成物は原則に沿いやすくなる。あとは、出てきたものを確かめる基準を用意する
生成物を公式チェックリストで検収する
ルールを渡しても、生成物が本当に守れているかは別問題。ガイドブックには受け入れ検査用のチェックリストが付いている
観点は 5 つ
- 利用者の体験 誰が何を読み取れるか
- 指標と表・グラフのデザイン 選択と表記が適切か
- テクニカル 表示速度など動作の質
- データ設計 データの構造と更新
- アクセシビリティ 色以外の手段や代替情報
検収は 2 段で回す。まず AI に、このチェックリストの 5 観点で自分の生成物を採点させる。落ちた項目を直させてから、人が最終確認する
作らせるルールと検収するチェックリストを同じ一次情報から作ると、基準が一本化して手戻りが減る
アクセシビリティは実装で担保する
アクセシビリティは心がけでなく、出力物で担保する。ガイドブックが挙げる対応は具体的
- データテーブルを併記 Excel・CSV・HTML で公開
- グラフに代替テキスト（
alt）を付ける - 要約テキストを PDF・HTML で公開
AI へのルールにもこれを加える。グラフを画像だけで完結させず、同じ内容の表と代替テキストを必ず一緒に出す、と書いておく
おわりに
AI の出す「それっぽい」画面を実務レベルに上げるのは、センスでなく検収基準ですね
デジタル庁のガイドブックは、その基準を無料で、しかもチェックリスト付きで配っている。原則を具体値の AI ルールに変換し、公式チェックリストで検収する。この閉じた輪は、誰でも同じ手順で回せる
設計の勘に頼れないときほど、公的機関の一次情報を基準として借りる価値がある
