プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers

primeNumber DATA SUMMIT 2025
Theater Session 登壇資料
https://primenumber.com/data-summit/2025

Transcript

1. プロダクトデザイナーに学ぶ、 『⾒る気が起きる』 ダッシュボードの作り⽅ 2025.11.26 in DATA SUMMIT 2025 株式会社ヤプリ ⼭本 雄太
2. SPEAKER 開発統括本部 プロダクト開発本部 データサイエンス室 ⼭本 雄太 • 2023年に新卒⼊社 • dbt導⼊に際したリリースフロー構築、データカタロ グ‧ドキュメント整備を担当 • コミュニティ運営にも携わらせていただいてます ◦ primeNumber User Group (pUG) ◦ dbt Tokyo Crew
7. Yappli導⼊顧客向けにアナリティクスサービスを提供 ヤプリの製品 CMSレポート Yappli 管理画⾯に表⽰される レポート画⾯ Yappli Data Hub アプリ内の⾏動データや属性データを ユーザ単位で分析を可能にする データ連携サービス Yappli Analytics アプリログを網羅した分析や、 機能別に特化した分析が可能な ダッシュボード 無償 有償
10. 「データ」の話も、 「AI」の話も 全然しません❌
11. 「デザイン」の話をします
12. Yappli導⼊顧客向けにアナリティクスサービスを提供 ヤプリの製品 CMSレポート Yappli 管理画⾯に表⽰される レポート画⾯ Yappli Data Hub アプリ内の⾏動データや属性データを ユーザ単位で分析を可能にする データ連携サービス Yappli Analytics アプリログを網羅した分析や、 機能別に特化した分析が可能な ダッシュボード 無償 有償
13. 今年8⽉にビジュアルアップデート ？ （後でお⾒せします）
14. プロダクトデザイナー(PdD)による再デザイン
15. PdD⽬線でのダッシュボード作りが とても勉強になったので、その学びを共有します！
16. みなさんのダッシュボードを振り返るきっかけに なれば嬉しいです！
17. INDEX ⽬次 1. PdD⽬線で⾒たダッシュボードの課題点 2. どう改善したか？ 3. PdD⽬線だからできた「データ可視化の⼯夫」
18. PdD⽬線で⾒た ダッシュボードの課題点
19. 担当PdDに訊きました
20. Yappli Analyticsを初めて⾒た時、 どう思いましたか？
22. ⽔⾊だなぁ…
23. 弊社のブランドカラーをただ使っているだけで、 ⾊に重要度が設定されていない →本当に重要な箇所がどこなのか分かりにくい…
24. セクション名 ページタイトル コントロールの輪郭線 区切り線 グラフ 注釈 弊社のブランドカラーをただ使っているだけで、 ⾊に重要度が設定されていない →本当に重要な箇所がどこなのか分かりにくい…
27. セクション名 ページタイトル グラフ
28. 図表を置いただけ ⾒る⼈のことをしっかり考えきれてなさそう…
29. サマリー的な情報が 真っ先に⽬に⼊る位置（左上）に 置かれていない →⾒⽅‧⾒る順番が分からない
32. ② 続いて、詳細 ① まず、サマリー
33. ⾔葉が難しい… これでYappli顧客に通じるんだろうか…
34. データ分析⽤語‧業界⽤語を使⽤ →Yappli顧客が精通しているとは限らないので伝わらない
35. Yappli Analyticsを初めて⾒た時の感想 • ブランドカラーをただ使っているだけで、⾊に重要度が設定されていない → 本当に重要な箇所がどこなのか分かりづらい • サマリー的な情報が真っ先に⽬に⼊る位置に置かれていない → ⾒⽅‧⾒る順番が分からない • データ分析⽤語‧業界⽤語を使⽤ → Yappli顧客が精通しているとは限らないので伝わらない
36. どう改善しましたか？
37. 前提：PdDへ伝えた制約条件 • 図表の仕様変更などは⾏わず、⾒た⽬の変更だけに留める ◦ そこまで変更してしまうと、顧客やCSMの業務への影響が⼤きすぎるため • ページサイズは変えてOK ◦ ダッシュボード誕⽣当初は印刷‧PDF化して使うシーンを考慮してページサイズを決めていた が、数年運⽤してみてそんなシーンは発⽣しなかったことが分かった
38. どう改善しましたか？
39. ？ こうしました！
40. こうしました！
41. Before After
42. どう改善したか？ をお伝えします！
43. ブランドカラーは 要所だけに絞る
44. ブランドカラーは要所だけに絞る →「どんなページ？」が直感的に分かるように メニュータイトル ページタイトル グラフの線
45. 他の⾊は、弊社でよく使っている⾊をベースに 背景カラー‧アクセントカラーを選定 メニュー背景 前回値からの増減量 ページ背景⾊
47. サマリー的な情報は 真っ先に⽬に⼊る場所に配置
48. サマリー的な情報は真っ先に⽬に⼊る場所に配置 →「⾒る順番」を意識する ② 続いて、詳細 ① まず、サマリー
49. 業界⽤語などをあえて使わず、 直感的にわかりやすい⾔葉を選択
50. 業界⽤語などをあえて使わず、直感的にわかりやすい⾔葉を選択 →Yappliで初めてデータ分析に⼊⾨される⽅にも親しみやすく セッション回数 平均セッション時間 セッションあたりの平均スクリーンビュー
51. 使えるスペースが増える ＝ 情報設計の⾃由度が上がり、⾒やすさUP↑ ⾒せたい情報を⼤きく 余⽩を⼗分に取って、 情報をグルーピング ページサイズを拡⼤
52. 改善ポイント • ブランドカラーは要所だけに絞る → 「どんなページ？」が直感的に分かるように • サマリー的な情報は真っ先に⽬に⼊る場所に配置 → 「⾒る順番」を意識する • 業界⽤語などをあえて使わず、直感的にわかりやすい⾔葉を選択 → Yappliで初めてデータに触れる⽅にも親しみやすく • ページサイズを広くすると、使えるスペースが増える ＝ 情報設計の⾃由度が上がり、⾒やすさUP↑
53. ＜ 学び💪 ＞ 「データ可視化の⼯夫」以外でも ダッシュボードの利⽤体験は向上できる！
54. PdD⽬線だからできた 「データ可視化の⼯夫」
55. 「データ可視化の⼯夫」にも PdD⽬線が活きた
57. • Yappliが持つ年間180億件以上の膨⼤な⾏動データと照合 • セッション数、PV数などを全Yappli製アプリの中で相対⽐較 → 約900アプリの中での⾃アプリの⽴ち位置が分かる！
58. ベンチマークの⾒⽅
59. ベンチマークの⾒⽅ 指標の値
60. ベンチマークの⾒⽅ 四分位のどの区分に属しているか？ 四分位の各境界値
61. ベンチマークの⾒⽅ 四分位のどの区分に属しているか？ 四分位の各境界値 PdD「⾒⽅が難しい…😣」
62. ベンチマークの⾒⽅ どっちが⾼い/低いのか分かりづらい… （例: 上位25%の区分は左端/右端どっち？）
63. ベンチマークの⾒⽅ ⽬盛の⾒⽅で混乱しやすい… （例: 「“75%”の”87.8%”って何…？」）
64. ベンチマークの⾒⽅ ⾔葉が難しい…
65. どう改善する？
66. PdDが考えた改善⽅針 • ベンチマークページで⼀番⼤切なことは？ → ⾃アプリの「ポジション」が分かること • それに対して、現状の（デザイン設計上の）課題は？ → 「数値」にフォーカスされている   「ポジション」にフォーカスされていない
67. PdDが考えた改善⽅針 • ベンチマークページで⼀番⼤切なことは？ → ⾃アプリの「ポジション」が分かること • それに対して、現状の（デザイン設計上の）課題は？ → 「数値」にフォーカスされている   「ポジション」にフォーカスされていない • 「ポジション」が最初に伝わるようにする • 視覚表現でポジションの「⾼い/低い」を表現する ◦ テキストで意味を補完しすぎない
68. 様々なデザイン検討🙏
69. 再デザインされたベンチマーク
70. Before After
71. 再デザインされたベンチマーク
72. 再デザインされたベンチマーク 「ポジション」を 最初に⽬に⼊る位置に！
73. 再デザインされたベンチマーク ⾼い/低いが直感的に 分かるように！
74. 再デザインされたベンチマーク ⽬盛は境界値のみ
75. 再デザインされたベンチマーク 7⽇以内再訪率 ⾔葉も分かりやすく
76. 再デザインされたベンチマーク 理解しやすくなった！🥳
77. PdD⽬線ナシでは出せなかった可視化⽅法
78. 得られた学び💪 • このページ‧図表で⼀番⼤切なことは何か？ • それを伝えるためには、何にフォーカスしてデザインを設計すべきか？ を意識する
79. まとめ
80. まとめ • 「データ可視化の⼯夫」以外でもダッシュボードの利⽤体験は向上できる ◦ ⾊に重要度を設定する ◦ ⾒る順番を意識して図表を配置する ◦ ダッシュボード利⽤者にとって分かりやすい⾔葉を選ぶ • PdD⽬線で考えることで「データ可視化の⼯夫」もレベルアップできる ◦ このページ‧図表で⼀番⼤切なことは何か？ ◦ それを伝えるためには、何にフォーカスしてデザインを設計すべきか？
81. 補⾜：デジタル庁がガイドラインを公開中 https://www.digital.go.jp/resources/dashboard-guidebook
82. みなさんのダッシュボードを振り返るきっかけに なれば嬉しいです！
83. FOLLOW ME!! Yappli Tech Blog Yappli Developers カジュアル⾯談 @yappli_dev https://tech.yappli.io/ https://open.talentio.com/r/1/c/yappli/pages/59642