tumf/skills

dashboard-design-guidebook

デジタル庁のダッシュボードデザイン実践ガイドブックに基づく、見やすいダッシュボード設計・作成のガイド。グラフ選び、レイアウト、カラーパレット、アクセシビリティ、チェックリストを網?

First seen May 1, 2026

Installation

$ npx skills add tumf/skills --skill dashboard-design-guidebook

View on skills.sh ↗ GitHub repository ↗

Summary

デジタル庁のダッシュボードデザイン実践ガイドブックに基づく、見やすいダッシュボード設計・作成のガイド。グラフ選び、レイアウト、カラーパレット、アクセシビリティ、チェックリストを網羅。Use when…

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

frontend-design Same topic

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs

agent-browser Same topic

vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs

vercel-react-best-practices Same topic

vercel-labs/agent-skills 697.8K installs

web-design-guidelines Same topic

vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs

microsoft-foundry Same topic

microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs

azure-diagnostics Same topic

microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs

Also in this package

Other skills from tumf/skills · top by installs.

npx skills add tumf/skills

firecrawl 125 opencode-agent-creator 91 opencode-command-creator 29 openclaw-agent-creator 29 agentic-cli-design 29 product-improvement-proposal 23 gogcli 23 rust-cli 19 slack-rs 18 clawdbot-config 18

Browse all from tumf/skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared

Cursor Not declared

Codex Not declared

GitHub Copilot Not declared

Windsurf Not declared

Gemini CLI Not declared

Cline Not declared

OpenCode Not declared

Repository health

Stars 4

License LICENSE

Default branch main

Open issues 0

Status Active

Package contents

Files included with this skill beyond the listing page.

skill md SKILL.md 7,726 B
docs SUMMARY.md 558 B

History

May 1, 2026 First seen on skills.sh
Sep 9, 2026 First recorded snapshot · 4 installs

SKILL.md

ダッシュボードデザインガイド

デジタル庁「ダッシュボードデザインの実践ガイドブック」（2026.3.31更新）の実質をまとめたスキル。完全版は references/guidebook-full.txt に収録。

ダッシュボードの二つの類型

提示型：現状を基準と照らし合わせ、異常に気づき、行動の必要性を判断する（本スキルの主対象）
探索型：差分を発見し、源流を特定して掘り下げる（ドメイン知識・集中・複雑操作を前提）

作成フロー（3ステップ）

Step 1: 要件の整理

5W1Hで整理する：

視点	確認事項
Why	最終的に達成したい目的、ダッシュボードを見る理由
What/So What	知るべき情報、必要なデータ種類、見た後の判断や行動
Who/When/Where	見る人（属性・リテラシー）、タイミング・頻度、場所・デバイス
How	求める機能、データ項目、更新頻度

制約チェック：

情報の種類が多すぎる → 減らす
伝える内容が複雑すぎる → 複雑度を下げる
データに欠損・更新頻度不足・分解能不足 → 回避可能か確認

Step 2: プロトタイピング

必要な情報を一覧化し、グラフ候補を選定
骨格レイアウトを先に決める（表層の装飾は後回し）
関係者に見せてフィードバックを得る（理由・意図まで聞き出す）
要望は機械的に全部反映せず、目的に適うものだけ選定

Step 3: 実装とチェック

実装後に下記チェックリストで確認。

情報選定の4原則

目的に則する — 目的に当てはまる情報だけ載せる。データ→判断までの距離を縮める
分解できる — 全体→部分の階層構造。見る人が読み解ける単位まで分割
違いに気づける — 突出データに気づく。変化の時期と傾向がわかる
鮮度が高い — 最新データを反映。定期更新の仕組みを構築

レイアウトの基本

左上→右下の視線移動に合わせる
左上に全体指標、右下に詳細情報
背景色で左上を目立たせる
16:9画面、縦横6分割グリッド推奨
フィルターは上部か左部、影響を受ける情報は下か右

グラフの選び方

グラフ	表現	適する用途
折れ線グラフ	位置	時間変化・傾向
棒グラフ	長さ	数量比較
面グラフ（積み上げ）	位置+面積	時間変化＋構成比
円グラフ	角度+面積	構成比（総量が明らかな時）

選び方の判断基準：

横軸が時間 → 折れ線 or 面グラフ
横軸が分類 → 棒グラフ
構成比のみ必要 → 円グラフ
構成比の時間変化 → 100%積み上げ面グラフ
系列が多い → 棒グラフの方が正確に伝わる

グラフ設計の2大原則

知りたいことを知れる

シンプルにする（不要な要素・装飾を削除）
意味のある順列にする（数量大小順、更新日順など）
強弱をつける（重要情報は色・サイズ・太さで差別化）
待たせすぎない（読み込み・操作レスポンスを速く）

誤解を生まない

わかりやすく表記（タイトル・系列名・単位を丁寧に）
データを定義（対象・数値の意味・更新日を参照可能に）
表現を歪曲しない（原点は0、軸範囲を恣意的にしない）
メタ情報を記載（データソース・更新日・注釈・免責）

カラーパレット（デジタル庁準拠）

7系統: Blue, Light Blue, Cyan, Green, Orange, Red, Solid Gray

コントラスト要件:

背景とグラフ色面: 3:1以上（BlueキーカラーならBlue-500=#4979F5以上）
3:1満たせない場合 → グラフ色面の近くに数値記載（数値は背景対4.5:1以上）
それも無理 → マウスオーバー/フォーカス時に数値表示
色覚多様性に配慮 — 色以外の識別手段（形・模様）も提供。白黒印刷でも伝わるように

Do's & Don'ts

Do's:

全体指標と詳細グラフを併記
項目の並び順に意味を持たせる
不要な要素・装飾を削除
色数を絞る（1〜5色）
タイトルに内容とデータ種別を記載
グラフと凡例を隣接させる

Don'ts:

3D表現・ドロップシャドウを使わない
色だけで分類を識別しない
棒グラフの原点を0以外にしない
情報を詰め込みすぎない

最終チェックリスト

利用者体験

判断・行動に必要な情報が提供できているか
全体像を捉える基準指標があるか
不要な情報は削除されているか
数回の操作で目的が達成できるか
利用者が迷わず情報にたどり着けるか
複数利用者からのフィードバックを得て改善したか

デザイン

注目すべき数値に優先的に目が向くか
配列順序が認知しやすいか
グラフと凡例が隣接しているか
比較対象（目標値・前年比など）があるか
色数は1〜5色に絞られているか
不要な装飾・3D・シャドウを避けているか
タイトルは誤解のない内容か
棒グラフの原点は0か
データ更新日が記載されているか

テクニカル

実環境・デバイスで表示・動作確認済みか
読み込み速度は遅すぎないか

データ設計

目的に見合ったデータだけを選んでいるか
必要な粒度まで分解できるか
更新頻度は要件を満たしているか
比較できる数値が掲載されているか
データ定義が参照可能か

アクセシビリティ

色だけで情報を識別していないか
代替テキストを付与しているか
データファイル（CSV等）を公開しているか
テキスト要約版があるか（一般公開の場合）