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