Slide 1

Slide 1 text

データの価値を最大化する DaaSのUIデザイン デザインエンジニアMeetup! vol.4 株式会社estie デザインエンジニア Shun 2025/12/04

Slide 2

Slide 2 text

Shun デザインエンジニア 2024年に株式会社estieに入社 DaaS(Data as a Service)プロダクトである 「estie レジリサーチ」の開発に携わっている 自己紹介

Slide 3

Slide 3 text

estieの紹介

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Daas (Data as a Service) SaaS (Software as a Service)

Slide 7

Slide 7 text

DaaS (Data as a Service) データを中心としたサービス データ提供・検索・分析・意思決定支援な どが主目的 SaaS (Software as a Service) 業務支援・効率化が主目的のサービス プロダクトの性質によって UIデザインで重要になるポイントも変わる estieのDaaSとは estieのDaaSとSaaSの違い Daas SaaS

Slide 8

Slide 8 text

estieのDaaSにおける UIデザインと面白さ

Slide 9

Slide 9 text

estieのDaaSにおけるUIデザインと面白さ estieのDaaSの検索レイアウトUI

Slide 10

Slide 10 text

調査業務の流れに沿った構成 estieのDaaSにおけるUIデザインと面白さ estieのDaaSの検索レイアウトUI

Slide 11

Slide 11 text

検索結果を表示するだけでなく、複数の視点で探索や分析が効率的にできる estieのDaaSにおけるUIデザインと面白さ estieのDaaSの検索レイアウトUI

Slide 12

Slide 12 text

調査業務の流れに沿ったレイアウト 検索結果を表示するだけでなく、複数 の視点で探索や分析が効率的にできる データ探索 → 分析、活用まで1画面で 完結 データを表示するだけでなく、 意思決定を支えるUI estieのDaaSにおけるUIデザイン、面白さ estieのDaaSの検索レイアウトUI

Slide 13

Slide 13 text

ドメインならではの ユニークなUI

Slide 14

Slide 14 text

* ルームマップ、住戸配置図、スタッキングとも 鳥かご図のイメージ 鳥かご図*とは? 建物の部屋・区画の配置を階ごとに可 視化した図 一目で建物の全体像やボリューム、各 部屋の状況が理解できる 住宅の住戸配置や、オフィスのテナン ト構成などでも使われる ドメインならではのユニークなUI 建物の見える化(鳥かご図)

Slide 15

Slide 15 text

鳥籠図を再現するビュー 募集データから鳥籠図を自動生成 UI上でフィルタリングや詳細確認が可能 → 可視化に探索のインタラクションを加 えることで、静的な図では捉えにくい関 係性や示唆を発見できる インタラクションによって データ可視化の価値そのものを拡張する ドメインならではのユニークなUI 動的なUIとしてユニークな表現をプロダクトに落とし込む

Slide 16

Slide 16 text

estieのDaaSにおける UIデザイン

Slide 17

Slide 17 text

DaaSの価値を決めるUIデザイン 同じデータでも見せ方や構造化の仕方で 得られる洞察は全く変わる 探索・分析のインタラクションが更なる 価値を生む DaaSにおけるUIデザインのポイント (情報設計) 可視化 インタラクション estieのDaaSにおけるUIデザイン

Slide 18

Slide 18 text

目的に合わせた見せ方が重要 地図 https://mapsplatform.google.com/resources/blog/how- cluster-map-markers/ グラフ Highchartsの例 表 estieのDaaSにおけるUIデザイン DaaSにおけるUIデザインのポイント: 可視化

Slide 19

Slide 19 text

膨大なデータから示唆を得るために 探索・比較・分析できる能動的な体験があって 初めて、意思決定につながる(データが多い場 合は特に) 「理解のギャップ」を埋める仕組み ユーザーの目的と、画面に表示された状態 の理解との間にはしばしば「理解/実行の ギャップ」が生まれる インタラクションはその溝を埋め、適切な アニメーションは変化を追いやすくして理 解の負荷を下げる アニメーションについてはこちらで詳しく解説しています 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デザインのポイント: インタラクション

Slide 20

Slide 20 text

認知的な状態を考慮した「全体 → 詳細」の設計が重要 「全体」→「詳細」が可視化におけるインタラクティブ設計の基本的な考え方の一つ 中間状態として「見える」「見る」の認知的な状態を加えて考えてみると、より人間中心的なUI設計の実践に落とし込み やすくなる estieのDaaSにおけるUIデザイン DaaSにおけるUIデザインのポイント: インタラクション設計 Overview Focus 見える 見る Zoom/Filter Details

Slide 21

Slide 21 text

Overview Focus 見える 見る Zoom/Filter Details 視覚属性が重要 estieのDaaSにおけるUIデザイン DaaSにおけるUIデザインのポイント: インタラクション設計

Slide 22

Slide 22 text

学び・まとめ DaaSにおけるUI、ドメインに根ざしたUIをデザインするにあたって

Slide 23

Slide 23 text

価値ある意思決定を導くことまで意識する DaaSにおけるデザインは、データの見せ方も重要だがユーザーが次の一手を判断しやすくすること 意思決定に直結する問い(何を知りたいか・何を決めたいか)から逆算して設計することで、データの 価値を最大化できる 「このチャートでユーザーは何をするのか/何を知りたいのか」使う人の行動を起点に考える ドメインの本質を残しつつ、ユニークさと使いやすさの中庸をとる ドメインには慣習的でユニークな表現が存在するが、その本質は残しながらもユーザーのメンタルモデ ルからも外れないUIに再構成する 何を残しどこを変えるかを見極めることが大事 学び、まとめ

Slide 24

Slide 24 text

ご清聴ありがとうございました