🎨

ダッシュボードデザインの標準化に挑む：東京都版カラーパレットができるまで

細矢｜GovTech東京

2026/03/25に公開

 1. はじめにこんにちは、東京都ICT職としてGovTech東京に派遣されている細矢です。
本記事では、「データでわかる東京」をきっかけに始まったダッシュボードデザイン標準化の取組みをご紹介します。こちらは東京都の業務に合わせて実施した取組みですが、同じようにダッシュボードを作成する方にも役立つ内容です。ぜひご活用ください。

 「データでわかる東京」とは「データでわかる東京」は、これまで東京都が部署ごとに作成・公開してきた政策の進捗や東京の現状等に関するデータの可視化コンテンツを集約し、ワンストップで閲覧できるポータルサイトです。データを軸に、東京都の政策が都民一人ひとりの生活に対してどのような効果や影響を与えているかを、分かりやすく解説するコンテンツを発信するとともに、「東京の今」をより直感的に理解できるよう、統一された見やすいデザインを採用しています。
ポータルサイトの開設後も、既存ダッシュボードのリデザインに加え、これまで可視化されてこなかったデータを活用した新たなダッシュボードの制作にも取り組み、都民へのオープンな情報発信をさらに推進していきます。
GovTech東京では、立ち上げ支援、既存ダッシュボードのリデザイン、新規ダッシュボードの制作をデータ利活用グループが担当し、ポータルサイトのUI設計支援をUI/UXグループが担当しました。
!「データでわかる東京」におけるGovTech東京の役割は、こちらの記事で詳細に紹介しています。ぜひご覧ください！
https://zenn.dev/govtechtokyo/articles/879a36c003fab8

 ダッシュボードデザイン標準化ダッシュボードを作るうえでは「データを理解し、正確に可視化すること」と、「見せ方を工夫し、理解しやすく整えること」の2つの要素が重要です。しかし、初めて取り組む人は前者で精いっぱいになりがちで、後者まで十分に考える余裕がない場合が多くあります。今回、データ利活用グループのダッシュボード担当に新たに職員が加わり、昨年度までの私1名体制から複数人体制へと移行したことが、作業の進め方やデザイン基準を整理し統一するきっかけにもなりました。
そこで今回、初めて取り組む人やデザインに不慣れな人でも一定のデザイン品質を維持できることを目指し、カラーパレット（配色に迷わないよう、使用する色をひとまとめにした色見本）を中心に標準的なデザイン方針を定めました。さらに、都庁全体のダッシュボード品質の向上に向け、策定したカラーパレットとルールはガイドブックの形で展開しました。

 2. カラーパレットの特徴
 完成したカラーパレット

東京都版ダッシュボードカラーパレット

 設計方針カラーユニバーサルに配慮する
誰かにとって見やすい色が、誰にでも見やすい色であるとは限りません。色覚特性のある方にとって見分けにくい色の組み合わせを避け、コントラスト比を一定に維持して設計しました。
ダッシュボード制作に過不足しない色数
簡潔で見やすいUIを作るには色数を抑えることが重要ですが、ダッシュボードにおいては、折れ線グラフや円グラフなど、系列ごとに異なる色が必要なビジュアルを想定して色を多めに用意しておく必要があります。

しかし色数を増やして自由度を高めてしまうと、本来の目的である統一感の維持が難しくなってしまうため、役割と優先度を持たせた必要最低限の色数で設計しました。
“東京都らしさ”を表現する
実は、この取り組みを始める前にも別の業務でダッシュボードを作っていたことがあり、当時はデジタル庁が公開している政策ダッシュボードを参考にしていたため、あまり”東京都らしさ”のないものになっていました。

そのため、まずは”東京都らしさ”の表現を目指し、かといって車輪の再発明にはならないよう、デジタル庁のデザインシステムをベースに東京都の色である緑色を取り入れて設計しました。

 ユーザビリティテスト設計にあたり、コントラストチェッカーやシミュレーションツールで確認するだけでなく、色覚特性のある当事者の方を対象にユーザビリティテストを実施しました。

 実施概要

対象者

色覚特性のある6名（D型：4名、P型：2名）色覚特性の型について

募集方法

テストを委託した事業者が色覚特性の関連団体に周知

タスク

新規カラーパレットを適用したダッシュボード画面について「見やすさ・判別しやすさ・理解のしやすさ」をスコア評価し、困難点を口頭でヒアリング

テストに使用したダッシュボード事例

 テスト結果、フィードバック内容数値・主要テキストの視認性は全体として良好

背景色とテキスト色に設定した色の組み合わせは、全テスターが「問題なく読める」と高評価

コントラスト比 4.5 : 1 (WCAG2.2 AA基準)を満たした組み合わせ
緑色とグレーの組み合わせは、型によらず識別が困難

事前調査では、緑色は黄色や茶色に見えやすいという情報が多く、無彩色のグレーとは混同しないものと予想していたが、テスターの多くの方が「識別しにくい」と評価

「色の違いが分かりにくい」と指摘された例。モノクロ化すると2番目と3番目の色の明度差が小さいことが分かる
グラフと凡例の対応関係を色のみで識別するのは困難

隣り合う色の違いを識別することはできるものの、離れた位置にある色同士の対応関係を認識することは困難

凡例とグラフの並び順が正しく対応していることや、意味を理解しやすい位置にあることなど、色以外の手がかりが重要

「対応関係を把握しづらい」と指摘のあった例。凡例の並び順とグラフの形との対応が重要であることが分かる。

 総括ユーザビリティテストの結果を踏まえ、テスト時点のカラーパレット自体は問題ない、という結論にいたりました。
「緑とグレーの区別がつきにくい」というフィードバックもありましたが、緑は東京都のメインカラーであり、グレーも“特別な意味を持たせない色”として、どちらも他の色に置き換えることが難しい色です。また、色の識別性は位置関係によって容易に変化するため、色そのものを変えても根本的な解決にならないことが分かりました。
そこで、パレット自体を変更するのではなく、以下の運用ルールで対応する方針としました：
緑とグレーを使う際は明度差を取る
枠線で境界を強調する
凡例とグラフの並び順を正しく対応させる

 3. デザイン方針の展開
カラーパレットをもとに、いくつかのデザイン方針を定めました。本記事では詳細な説明は省きますが、それらをまとめた公開資料をご紹介します。

 ダッシュボード作成ガイドブック
標準的なデザイン方針の展開にあたり、ダッシュボード制作業務の参考書となるようなガイドブックを作成しました。このガイドブックは、カラーパレットを中心とした標準デザインガイドやダッシュボードの作成プロセス、プロトタイピングの進め方など、質の高いダッシュボードデザインを効率的に作るためのヒントを多く掲載しています。ダッシュボード作成ガイドブック
またこちらは、デジタル庁が公開している「ダッシュボードデザインの実践ガイドブック」の内容をもとに東京都の業務に合わせてアレンジしており、東京都のサービスデザインの考え方やGovTech東京のUI/UXグループメンバーのアクセシビリティに関する知見等を盛り込みました。ここまで紹介してきた「東京都版ダッシュボードカラーパレット」もこの「ダッシュボード作成ガイドブック」に収録されています。ぜひご活用ください！

ダッシュボード作成ガイドブックより、アクセシビリティの確認方法およびカラーパレットの使い方を示したページ

 「ダッシュボードプロトタイプ作成キット」と「東京都版 チャート・コンポーネントライブラリ」ガイドブックの付録として、「ダッシュボードプロトタイプ作成キット」と「東京都版 チャート・コンポーネントライブラリ」を公開しています。
これらは、標準デザインに沿ったプロトタイプやダッシュボードをすぐに作れるデザインテンプレートで、PowerPoint形式とPowerBI形式を提供しています。テンプレートを活用することで、ゼロからデザインを考える手間を省くことができ、ダッシュボード制作の効率化とデザインの標準化に役立ちます。
また、本キット及びライブラリは、デジタル庁が作成・公開している「プロトタイプ作成ツール」「チャート・コンポーネントライブラリ（ベータ版）」をもとに、東京都版として独自に整備したものです。制作にあたっては、デジタル庁のダッシュボード担当の皆様との意見交換を重ね、実務に即した形で完成させました。

「ダッシュボードプロトタイプ作成キット」および「東京都版 チャート・コンポーネントライブラリ」の画面

 実装事例
データでわかる東京

標準デザインで実装した事例（データでわかる東京）
東京都オープンデータカタログサイト

標準デザインで実装した事例（東京都オープンデータカタログサイト）

 4. 今後の展望とまとめ今回作成した「東京都版ダッシュボードカラーパレット」をはじめとした標準デザインは、今後も継続的に改善を重ねていく予定です。実際の運用の中で得られたフィードバックや新たな課題を踏まえ、より使いやすく、アクセシブルなデザインシステムへと進化させていきます。
本記事では、東京都の「データでわかる東京」事業におけるダッシュボードデザインの標準化について、特にカラーパレットの開発プロセスを中心にご紹介しました。東京都らしさを表現しながら、誰もが使いやすいアクセシブルなデザインを実現するために、調査・検証・テストを重ねて作り上げた「東京都版ダッシュボードカラーパレット」は、今後も都政のデータ可視化において重要な役割を果たしていきます。
P.S. 本記事は、カラーパレット策定に共に取り組んだUI/UXグループの髙谷さんと共同で執筆しました。