Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
OOUIを知る
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
shintaro
May 24, 2021
Design
2
77
OOUIを知る
オブジェクト指向UIデザインとは何か
shintaro
May 24, 2021
Tweet
Share
More Decks by shintaro
See All by shintaro
Role of frontend engineer at product growth team
shin_k_2281
0
740
デザインエンジニアへの道
shin_k_2281
0
72
UIデザインとフロントエンド実装のレビュープラクティス集
shin_k_2281
0
310
The Development Productivity Storybook Provides
shin_k_2281
0
0
Wantedly の Dropdown UI カイゼンの道(調査・設計編)
shin_k_2281
2
300
エンジニアのためのFigma
shin_k_2281
0
57
知った気になれるUX心理学用語
shin_k_2281
0
130
Other Decks in Design
See All in Design
CREATIVE CLASS受講課題|無印良品を題材としたブランド再構築について
happy_ferret153
0
730
AIエージェントが対話的なUIを返す!MCP−UIで変わるユーザ体験
daitasu
1
170
デザインするために「多様性」について考える
iflection
0
230
TWCP#21 UXデザインと哲学のはなし
shinn
0
310
図じゃなく言語で描く - Common Ground for Design AI Operations.
kazukiikeda
2
720
OSO2025-マサカリと太陽:伝え方の情報デザイン
majimasachi
0
740
OJTで学んだ 「心を動かす」ファシリテーション
saki822
1
270
セブンデックス プロジェクト事例 / innovation Scenes
sevendex
1
250
チームをデザイン対象にする / Design for your team
kaminashi
1
820
Figma MCPを活用するためのデザインハンドブック
vivion
4
11k
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
a2k
0
130
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
2
680
Featured
See All Featured
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
4.1k
What's in a price? How to price your products and services
michaelherold
247
13k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
170
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
120
How to make the Groovebox
asonas
2
2k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.1k
Joys of Absence: A Defence of Solitary Play
codingconduct
1
310
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
120
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
270
4 Signs Your Business is Dying
shpigford
187
22k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
830
Transcript
OOUIを知る オブジェクト指向ユーザインタフェースとは
自己紹介 名前 shintaro (@shin_k_2281) 年齢 23歳 職業 SES企業でPOSレジ開発(C#) 学習 React/Next.js/GraphQL/firebase
... 都内のフロントエンジニア転職を目指して奮闘中 🔥
こんな本を読みました📕 【オブジェクト指向UIデザイン】 ・技術評論社出版 ・WEB+DB PRESS plusシリーズ ・2020/6/18 初版発行 ・(他)「WEBを支える技術」 ・PF作りに役立つと思い購入
・使いやすいデザインを学べた😌
目次 1. オブジェクト指向UIとは何か 2. タスク指向UIとの比較 3. OOUIの設計 4. OOUIの実践
オブジェクト指向UIとは何か🤔
オブジェクト指向UIとは OOUIはObject Oriented User Interfaceの略。 UIデザインに関してもオブジェクト指向の 設計を取り入れようという考え。 オブジェクトを手がかりに操作設計されたデザインは OOUIだと言える。 OOUIは、一般的にUIよりもUXの観点で
デザインのクオリティに寄与するもの。 (だと思っている)
オブジェクトとは OOUIにおいて語られるオブジェクトとは、 アプリケーションが扱う情報オブジェクトのことであり ユーザが操作をする際の対象物のうち、大きいまとまりの部分のこと。 ex) →Instagramなら投稿、ストーリー、コメントなど →Githubならリポジトリ、ユーザー、Organizationなど(たくさんありそう)
タスク指向UIとの比較🧐
タスク指向UIとは オブジェクト指向UIはオブジェクトをもとにUIを 構築するのに対し、タスク指向UIでは その名の通りタスク(やること)をもとにUIが表される。 ユーザの要求事項を最初に定義して、 そのタスクをUI設計時にをそのまま適用した場合などで 多くのパターンではUXの低下を招く。 アンチパターン
比較してみる
オブジェクト指向UI タスク指向UI UI UI タスク オブジェクト
OOUIの設計🏠
OOUI設計の3大要素 ・モデル モデルレイヤーではユーザの関心対象となるオブジェクトを定義する。 このモデリング時はターゲットとなるユーザのドメインについてしっかり把握する必要がある。 ・インタラクション モデルレイヤーで定義したオブジェクト同士の関係性を定義する、画面遷移図のようなイメージ。 一つのオブジェクトは複数の画面を持つ場合がある (シングルビュー “/user/[id]”, コレクションビュー
“/users” など) ・プレゼンテーション モデリングしたオブジェクトとインタラクション設計に沿って実際の画面を考える。
OOUIの実践
勤怠管理アプリ
申請機能 トップ 申請機能トップ 新規申請 過去申請検索 A B
A B
お分かりいただけ ただろうか... 👻
しっかりとレビューを行わず、 ユーザの要件定義をそのままUIに 落とし込んでしまった者達の 結末とでも言うのだろうか... →これがタスク指向UI