--- title: デジタル庁テーマを企業ブランドへ展開してみた話 tags: #power bi author: [AkioSaitoh](https://image.docswell.com/user/mameshiba_toro) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/P7XQ2D5XEX.jpg?width=480 description: 2026/09/24 Power BI LT 会 28 で登壇した「デジタル庁テーマを企業ブランドへ展開してみた話」の資料です https://powerbi.connpass.com/event/405130/ published: September 24, 26 canonical: https://image.docswell.com/s/mameshiba_toro/KGNVD8-2026-09-24-235541 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/P7XQ2D5XEX.jpg) POWER BI LIGHTNING TALK 会 28 デジタル庁テーマを 企業ブランドへ展開してみた話 Power BI Theme JSONによる レポートデザイン標準化の実践 Akio Saitoh｜2026/9/24 # Page. 2 ![Page Image](https://bcdn.docswell.com/page/37K9MX697D.jpg) 01 / PROBLEM 同じ組織なのに、レポートの見た目が違う Report A Report B Report C • 青いグラフ • 緑のグラフ • 赤いグラフ • 角丸カード • 枠線付きカード • 異なるボタン • 上部スライサー • 左側スライサー • 別のフォントサイズ 自由度が高い ＝ デザインが作成者に依存しやすい # Page. 3 ![Page Image](https://bcdn.docswell.com/page/LJ3WY569J5.jpg) 02 / STANDARDIZATION Theme JSONでデザインを再利用する Theme JSON → グラフ カード スライサー デザイン判断を、ファイルとして配布する ボタン ナビゲーション # Page. 4 ![Page Image](https://bcdn.docswell.com/page/8JDK5DV8EG.jpg) 03 / OPEN FOUNDATION ゼロから作らず、公開テーマを土台にする Solid Gray 背景 Blue Light Blue チャート デジタル庁が公開するPower BI用デザインテンプレートを活用 出典：デジタル庁「ダッシュボードデザインの実践ガイドブックとデザインテンプレート」 Cyan 書式 Green Orange カラーパレット Red レイアウト # Page. 5 ![Page Image](https://bcdn.docswell.com/page/VEPKGXVW78.jpg) 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 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/27VV6LZ97Q.jpg) 05 / COLOR DIFFERENCE テーマ名ではなく、実際の色で比較する Corporate Blue Blue Theme Light Blue Theme ✓ #0041C0 ΔE00 = 9.74 ΔE00 = 8.11 CIELAB / CIEDE2000。色差は選定の補助指標として使用。 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/5JGLNX447L.jpg) 06 / PALETTE DESIGN ブランドカラー1色では足りない #006255 Primary #338177 Secondary #6BA49C #ADCDC9 Mid Light ブランドカラーから、役割を持つ濃淡パレットへ #E6EFEE Pale # Page. 8 ![Page Image](https://bcdn.docswell.com/page/47QYQ8GREP.jpg) 07 / CHALLENGE Yellowのベーステーマがない #FBC82D 7種類のテーマに Yellowはない Solid Gray / Blue / Light Blue / Cyan / Green / Orange / Red 最も近い候補 → Orange # Page. 9 ![Page Image](https://bcdn.docswell.com/page/KE4WN25QJ1.jpg) 08 / REFRAMING 色を借りず、構造を借りる Orange Base Theme Yellow Brand Theme #AC3E00 #FBC82D #FB5B01 #FCD253 #FF8D44 → #FDDD7D #FFC199 #FEECB6 #FFEEE2 #FFFAEA # Page. 10 ![Page Image](https://bcdn.docswell.com/page/L71Y5MWLJG.jpg) 09 / IMPLEMENTATION Theme JSONはパレット表ではない { } "dataColors": [ "#FBC82D", "#FCD253", "#FDDD7D", "#FEECB6", "#FFFAEA" ] ボタン スライサー カード KPI ページナビ ブックマーク マップ コンボチャート 元カラー抽出 → 対応表 → JSON全体を置換 → 構文検証 → 目視確認 # Page. 11 ![Page Image](https://bcdn.docswell.com/page/G7WG536QE2.jpg) 10 / TAKEAWAYS Theme JSONは、デザイン判断を再利用する仕組み 1. 公開テーマを土台にする 2. 実際の色で比較する 3. 濃淡パレットを設計する 4. UI状態色まで確認する 5. JSON検証と目視確認をセットにする 6. テーマの構造と色を分けて考える デザインも、再利用可能な資産にできる。