カラーパレットの使い方

デジタル庁は、ダッシュボード開発において品質向上、および設計の効率化に貢献するため、ダッシュボード開発のためのデザインテンプレート（Power BI用）を公開しています。本ページでは提供している7色のカラーパレットの使い方を紹介しています。

目次

1. カラーパレットの構成

テキスト

ダッシュボード全体で使用するテキストの基本色

  • Text（Black）：背景が明るい場合に使用する色
  • Text（White）：背景が暗い場合に使用する色
  • Label：ラベル、注釈、補足情報など、補助的なテキストに使用する色
  • Link：リンクであることを示すテキストに使用する色

背景

チャート、表、フィルターなどの要素の背景に使用する色

  • Standard：指標、チャート、表などのコンテンツ領域の背景に使用する基本色
  • Highlight：特に強調したい指標や重要な情報の背景に使用する色
  • Control：フィルターなど、ユーザーが操作するUI要素の背景に使用する色

チャート

棒グラフや折れ線グラフなどのチャートでデータ系列を表すために使用する色

  • Primary：チャートで主要なデータを示すために使用する基本色
  • Secondary：ハイライトや複数系列を区別するために使用する補助色
  • Neutral：強調する必要のないデータや比較対象を表すために使用する控えめな色

セマンティックカラー

数値の増減や目標達成、エラーなどの状態を直感的に伝えるための色

  • Positive：数値の増加など、ポジティブな変化を示す色
  • Negative：数値の減少など、ネガティブな変化を示す色
  • Success：目標値など、条件を満たしている状態を示す色
  • Error：目標未達やエラーなど、注意や警告が必要な状態を示す色

2. Solid Gray（灰色）

ダッシュボードイメージ

Solid Gray（灰色）のダッシュボードイメージです。
Solid Gray（灰色）を活用した場合のダッシュボードのイメージ画像。主要指標2件、構成比ドーナツグラフ、年次推移の積み上げ棒グラフ、時系列折れ線グラフ、地域別前年比較グラフを含む6つの可視化要素で構成されている。

カラーパレット

Solid Gray（灰色）をキーカラーとしたカラーパレットです。
Solid Gray（灰色）をキーカラーとしたデザインシステムのカラーパレット仕様を示す図。テキスト、背景、チャート、セマンティックカラーの4つのカテゴリーに分類された色見本とカラーコードの一覧が示されている。

デザインテンプレート（Power BI）

Solid Gray（灰色）のデザインテンプレートです。

3. Blue（青色）

ダッシュボードイメージ

Blue（青色）のダッシュボードイメージです。
Blue（青色）を活用した場合のダッシュボードのイメージ画像。主要指標2件、構成比ドーナツグラフ、年次推移の積み上げ棒グラフ、時系列折れ線グラフ、地域別前年比較グラフを含む6つの可視化要素で構成されている。

カラーパレット

Blue（青色）をキーカラーとしたカラーパレットです。
Blue（青色）をキーカラーとしたデザインシステムのカラーパレット仕様を示す図。テキスト、背景、チャート、セマンティックカラーの4つのカテゴリーに分類された色見本とカラーコードの一覧

デザインテンプレート（Power BI）

Blue（青色）のデザインテンプレートです。

4. Light Blue（薄い青色）

ダッシュボードイメージ

Light Blue（薄い青色）のダッシュボードイメージです。
Light Blue（薄い青色）を活用した場合のダッシュボードのイメージ画像。主要指標2件、構成比ドーナツグラフ、年次推移の積み上げ棒グラフ、時系列折れ線グラフ、地域別前年比較グラフを含む6つの可視化要素で構成されている。

カラーパレット

Light Blue（薄い青色）をキーカラーとしたカラーパレットです。
Light Blue（薄い青色）をキーカラーとしたデザインシステムのカラーパレット仕様を示す図。テキスト、背景、チャート、セマンティックカラーの4つのカテゴリーに分類された色見本とカラーコードの一覧が示されている。

デザインテンプレート（Power BI）

Light Blue（薄い青色）のデザインテンプレートです。

5. Cyan（シアン色）

ダッシュボードイメージ

Cyan（シアン色）のダッシュボードイメージです。
Cyan（シアン色）を活用した場合のダッシュボードのイメージ画像。主要指標2件、構成比ドーナツグラフ、年次推移の積み上げ棒グラフ、時系列折れ線グラフ、地域別前年比較グラフを含む6つの可視化要素で構成されている。

カラーパレット

Cyan（シアン色）をキーカラーとしたカラーパレットです。
Cyan（シアン色）をキーカラーとしたデザインシステムのカラーパレット仕様を示す図。テキスト、背景、チャート、セマンティックカラーの4つのカテゴリーに分類された色見本とカラーコードの一覧が示されている。

デザインテンプレート（Power BI）

Cyan（シアン色）のデザインテンプレートです。

6. Green（緑色）

ダッシュボードイメージ

Green（緑色）のダッシュボードイメージです。
Green（緑色）を活用した場合のダッシュボードのイメージ画像。主要指標2件、構成比ドーナツグラフ、年次推移の積み上げ棒グラフ、時系列折れ線グラフ、地域別前年比較グラフを含む6つの可視化要素で構成されている。

カラーパレット

Green（緑色）をキーカラーとしたカラーパレットです。
Green（緑色）をキーカラーとしたデザインシステムのカラーパレット仕様を示す図。テキスト、背景、チャート、セマンティックカラーの4つのカテゴリーに分類された色見本とカラーコードの一覧が示されている。

デザインテンプレート_（Power BI）

Green（緑色）のデザインテンプレートです。

7. Orange（オレンジ色）

ダッシュボードイメージ

Orange（オレンジ色）のダッシュボードイメージです。
Orange（オレンジ色）を活用した場合のダッシュボードのイメージ画像。主要指標2件、構成比ドーナツグラフ、年次推移の積み上げ棒グラフ、時系列折れ線グラフ、地域別前年比較グラフを含む6つの可視化要素で構成されている。

カラーパレット

Orange（オレンジ色）をキーカラーとしたカラーパレットです。
Orange（オレンジ色）をキーカラーとしたデザインシステムのカラーパレット仕様を示す図。テキスト、背景、チャート、セマンティックカラーの4つのカテゴリーに分類された色見本とカラーコードの一覧が示されている。

デザインテンプレート（Power BI）

Orange（オレンジ色）のデザインテンプレートです。

8. Red（赤色）

ダッシュボードイメージ

Red（赤色）のダッシュボードイメージです。
Red（赤色）を活用した場合のダッシュボードのイメージ画像。主要指標2件、構成比ドーナツグラフ、年次推移の積み上げ棒グラフ、時系列折れ線グラフ、地域別前年比較グラフを含む6つの可視化要素で構成されている。

カラーパレット

Red（赤色）をキーカラーとしたカラーパレットです。
Red（赤色）をキーカラーとしたデザインシステムのカラーパレット仕様を示す図。テキスト、背景、チャート、セマンティックカラーの4つのカテゴリーに分類された色見本とカラーコードの一覧が示されている。

デザインテンプレート（Power BI）

Red（赤色）のデザインテンプレートです。

9. 留意事項

カラーパレットには10色のみが設定されています

デザインテンプレートのカラーパレットには、ダッシュボード設計でよく使用する10色のみが設定されています。 それ以外の色を使用する場合は、各カラーパレットに掲載されている色を参考に配色してください。

デジタル庁デザインシステムに準拠しています

各カラーパレットで使用している色は、デジタル庁デザインシステムのカラーパレットに準拠しています。 カラーパレットに含まれていない色を使用する場合は、デジタル庁デザインシステムのカラーパレットを参照してください。

アクセシビリティに配慮して設計する必要があります

誰にとっても見やすく使いやすいダッシュボードとするため、コントラスト要件を満たし、色覚多様性に配慮する必要があります。 カラーパレットを参考にしながら、テキストと背景のコントラスト比や適切な色の組み合わせを検討してください。 具体的な考え方については、デジタル庁デザインシステムのカラーアクセシビリティを参照ください。

ご意見・ご要望

ご質問やアイディアは、ご意見・ご要望よりお寄せください。