データの価値を最大化する DaaSのUIデザイン

Transcript

1. データの価値を最大化する DaaSのUIデザイン デザインエンジニアMeetup! vol.4 株式会社estie デザインエンジニア Shun 2025/12/04
2. Shun デザインエンジニア 2024年に株式会社estieに入社 DaaS（Data as a Service）プロダクトである 「estie レジリサーチ」の開発に携わっている 自己紹介
3. estieの紹介
6. Daas (Data as a Service) SaaS (Software as a Service)
7. DaaS (Data as a Service) データを中心としたサービス データ提供・検索・分析・意思決定支援な どが主目的 SaaS (Software as a Service) 業務支援・効率化が主目的のサービス プロダクトの性質によって UIデザインで重要になるポイントも変わる estieのDaaSとは estieのDaaSとSaaSの違い Daas SaaS
8. estieのDaaSにおける UIデザインと面白さ
9. estieのDaaSにおけるUIデザインと面白さ estieのDaaSの検索レイアウトUI
10. 調査業務の流れに沿った構成 estieのDaaSにおけるUIデザインと面白さ estieのDaaSの検索レイアウトUI
11. 検索結果を表示するだけでなく、複数の視点で探索や分析が効率的にできる estieのDaaSにおけるUIデザインと面白さ estieのDaaSの検索レイアウトUI
12. 調査業務の流れに沿ったレイアウト 検索結果を表示するだけでなく、複数 の視点で探索や分析が効率的にできる データ探索 → 分析、活用まで1画面で 完結 データを表示するだけでなく、 意思決定を支えるUI estieのDaaSにおけるUIデザイン、面白さ estieのDaaSの検索レイアウトUI
13. ドメインならではの ユニークなUI
14. * ルームマップ、住戸配置図、スタッキングとも 鳥かご図のイメージ 鳥かご図*とは？ 建物の部屋・区画の配置を階ごとに可 視化した図 一目で建物の全体像やボリューム、各 部屋の状況が理解できる 住宅の住戸配置や、オフィスのテナン ト構成などでも使われる ドメインならではのユニークなUI 建物の見える化（鳥かご図）
15. 鳥籠図を再現するビュー 募集データから鳥籠図を自動生成 UI上でフィルタリングや詳細確認が可能 → 可視化に探索のインタラクションを加 えることで、静的な図では捉えにくい関 係性や示唆を発見できる インタラクションによって データ可視化の価値そのものを拡張する ドメインならではのユニークなUI 動的なUIとしてユニークな表現をプロダクトに落とし込む
16. estieのDaaSにおける UIデザイン
17. DaaSの価値を決めるUIデザイン 同じデータでも見せ方や構造化の仕方で 得られる洞察は全く変わる 探索・分析のインタラクションが更なる 価値を生む DaaSにおけるUIデザインのポイント （情報設計） 可視化 インタラクション estieのDaaSにおけるUIデザイン
18. 目的に合わせた見せ方が重要 地図 https://mapsplatform.google.com/resources/blog/how- cluster-map-markers/ グラフ Highchartsの例 表 estieのDaaSにおけるUIデザイン DaaSにおけるUIデザインのポイント: 可視化
19. 膨大なデータから示唆を得るために 探索・比較・分析できる能動的な体験があって 初めて、意思決定につながる（データが多い場 合は特に） 「理解のギャップ」を埋める仕組み ユーザーの目的と、画面に表示された状態 の理解との間にはしばしば「理解／実行の ギャップ」が生まれる インタラクションはその溝を埋め、適切な アニメーションは変化を追いやすくして理 解の負荷を下げる アニメーションについてはこちらで詳しく解説しています https://www.estie.jp/blog/entry/2025/07/04/100251 「経済・財政・人口と暮らし（都道府県ごと）に関するダッシュボードとデータカタログ」（デジ タル庁）（https://www.digital.go.jp/resources/japandashboard/economy-fiscal-living- prefecture）を加工して作成 estieのDaaSにおけるUIデザイン DaaSにおけるUIデザインのポイント: インタラクション
20. 認知的な状態を考慮した「全体 → 詳細」の設計が重要 「全体」→「詳細」が可視化におけるインタラクティブ設計の基本的な考え方の一つ 中間状態として「見える」「見る」の認知的な状態を加えて考えてみると、より人間中心的なUI設計の実践に落とし込み やすくなる estieのDaaSにおけるUIデザイン DaaSにおけるUIデザインのポイント: インタラクション設計 Overview Focus 見える 見る Zoom/Filter Details
21. Overview Focus 見える 見る Zoom/Filter Details 視覚属性が重要 estieのDaaSにおけるUIデザイン DaaSにおけるUIデザインのポイント: インタラクション設計
22. 学び・まとめ DaaSにおけるUI、ドメインに根ざしたUIをデザインするにあたって
23. 価値ある意思決定を導くことまで意識する DaaSにおけるデザインは、データの見せ方も重要だがユーザーが次の一手を判断しやすくすること 意思決定に直結する問い（何を知りたいか・何を決めたいか）から逆算して設計することで、データの 価値を最大化できる 「このチャートでユーザーは何をするのか／何を知りたいのか」使う人の行動を起点に考える ドメインの本質を残しつつ、ユニークさと使いやすさの中庸をとる ドメインには慣習的でユニークな表現が存在するが、その本質は残しながらもユーザーのメンタルモデ ルからも外れないUIに再構成する 何を残しどこを変えるかを見極めることが大事 学び、まとめ
24. ご清聴ありがとうございました