デジタル庁テーマを企業ブランドへ展開してみた話

POWER BI LIGHTNING TALK 会 28 デジタル庁テーマを 企業ブランドへ展開してみた話 Power BI Theme JSONによる レポートデザイン標準化の実践 Akio Saitoh｜2026/9/24

01 / PROBLEM 同じ組織なのに、レポートの見た目が違う Report A Report B Report C • 青いグラフ • 緑のグラフ • 赤いグラフ • 角丸カード • 枠線付きカード • 異なるボタン • 上部スライサー • 左側スライサー • 別のフォントサイズ 自由度が高い ＝ デザインが作成者に依存しやすい

02 / STANDARDIZATION Theme JSONでデザインを再利用する Theme JSON → グラフ カード スライサー デザイン判断を、ファイルとして配布する ボタン ナビゲーション

03 / OPEN FOUNDATION ゼロから作らず、公開テーマを土台にする Solid Gray 背景 Blue Light Blue チャート デジタル庁が公開するPower BI用デザインテンプレートを活用 出典：デジタル庁「ダッシュボードデザインの実践ガイドブックとデザインテンプレート」 Cyan 書式 Green Orange カラーパレット Red レイアウト

04 / MAPPING ベーステーマの構造を維持し、ブランドカラーへ展開する 展開例 ブランドカラー デジタル庁 ベーステーマ Brand A #0041C0 Blue #0055AD Light Blue Brand B #465C85 Blue Gray #0055AD Light Blue Brand C #FBC82D Yellow #AC3E00 Orange Brand D #00B7F1 Cyan #0055AD Light Blue Brand E #003B68 Navy #0055AD Light Blue Brand F #006255 Deep Green #115A36 Green

05 / COLOR DIFFERENCE テーマ名ではなく、実際の色で比較する Corporate Blue Blue Theme Light Blue Theme ✓ #0041C0 ΔE00 = 9.74 ΔE00 = 8.11 CIELAB / CIEDE2000。色差は選定の補助指標として使用。

06 / PALETTE DESIGN ブランドカラー1色では足りない #006255 Primary #338177 Secondary #6BA49C #ADCDC9 Mid Light ブランドカラーから、役割を持つ濃淡パレットへ #E6EFEE Pale

07 / CHALLENGE Yellowのベーステーマがない #FBC82D 7種類のテーマに Yellowはない Solid Gray / Blue / Light Blue / Cyan / Green / Orange / Red 最も近い候補 → Orange

08 / REFRAMING 色を借りず、構造を借りる Orange Base Theme Yellow Brand Theme #AC3E00 #FBC82D #FB5B01 #FCD253 #FF8D44 → #FDDD7D #FFC199 #FEECB6 #FFEEE2 #FFFAEA

09 / IMPLEMENTATION Theme JSONはパレット表ではない { } "dataColors": [ "#FBC82D", "#FCD253", "#FDDD7D", "#FEECB6", "#FFFAEA" ] ボタン スライサー カード KPI ページナビ ブックマーク マップ コンボチャート 元カラー抽出 → 対応表 → JSON全体を置換 → 構文検証 → 目視確認

10 / TAKEAWAYS Theme JSONは、デザイン判断を再利用する仕組み 1. 公開テーマを土台にする 2. 実際の色で比較する 3. 濃淡パレットを設計する 4. UI状態色まで確認する 5. JSON検証と目視確認をセットにする 6. テーマの構造と色を分けて考える デザインも、再利用可能な資産にできる。