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
UXとUIの違いを自分の言葉で表現する: UX DAYS TOKYO
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Mizunashi Mana
March 16, 2025
Design
0
340
UXとUIの違いを自分の言葉で表現する: UX DAYS TOKYO
UX DAYS TOKYO - UX基礎講座第1回の回答
https://x.com/uxdaystokyo/status/1901267497090986028
Mizunashi Mana
March 16, 2025
Tweet
Share
More Decks by Mizunashi Mana
See All by Mizunashi Mana
UX基礎講座③(回答)UXデザインは 何をするのか?: UX DAYS TOKYO
mizunashi_mana
0
5
UX基礎講座②(回答) なぜUXデザインで カスタマージャーニーマップを 使うのか?: UX DAYS TOKYO
mizunashi_mana
0
11
Higher Order Cofree Annotation for AST
mizunashi_mana
1
490
Other Decks in Design
See All in Design
Ralph Penel Portfolio
ralphpenel
PRO
0
240
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
350
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
3
2.1k
アイデアを加速させる!Firefly ボードで発想の幅を広げよう
connecre
1
280
kintone_aroma
kintone
0
1.2k
Treasure_Hunting
solmetts
0
190
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
0
370
kintone Style Book
kintone
6
9.6k
結びながら、ひらく - にじむ境界のデザイン
hilokifigma
3
670
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
visional_engineering_and_design
1
320
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
spring_aki
1
280
Franks Myth
gfht1
1
400
Featured
See All Featured
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
110
Scaling GitHub
holman
464
140k
KATA
mclloyd
PRO
33
15k
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
160
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
1
110
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
170
How Software Deployment tools have changed in the past 20 years
geshan
0
31k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Rails Girls Zürich Keynote
gr2m
96
14k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
150
Paper Plane (Part 1)
katiecoart
PRO
0
3.4k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
290
Transcript
「UXとUIの違い」 UX中心に考える
(私:西山)の紹介 (肩書)ソフトウェアエンジニア (仕事歴)職業エンジニア歴4年ちょっと (仕事や行っていること)物流プラットフォーム開発 (UXの学び) • 社内の取り組みで1年ほどUXについて学んでいるが、UXデザインとは何かに ついてピンときていない (スライド実施日)2025/03/16
UXとUIの違いを 自分の言葉で 説明してください 問題
(私:西山)の説明・考え 講座前: • UXは、ユーザが何かをして得られる体験 • UIは、UXにアクセスするための手段 • UIを通してユーザが何かを行うことで得られるものがUX 講座後: UXは、ユーザの状況(コンテキスト)と提供されたコンテンツ、コンテンツへ
のアクセス手段であるUIから形作られる、ユーザがコンテンツへのアクセ スを通して得られる体験
「UXとUIの違い」 のスライドを見て。。。 再考しよう! 解答 解答:スライド
UX UI コンテンツ※ コンテキスト = + + UXの定義(解答スライドより引用)
ジョブ コンテンツ サービス = アウトカム コンテンツの解釈
https://uxdaystokyo.com/articles/ui-ux-difference-study/ UXを理解する上での例え 箸など食器が使いやすく(UI)、料理も美味しい(コンテンツ)。 けど自分の状態・状況(コンテキスト)によって体験は異なる。
(私:西山)の解釈 駄目なUI・良いUI (電子レンジを題材に) ダメなUI • 1Wずつしかワット数を調整できない 良いUI • よく使うワット数をひねりひとつで指定できる
駄目なUX・良いUX (電子レンジを題材に) ダメなUX • ワット数・時間を正しく指定したのに、全然食材が温ま らない 良いUX • ボタン数回押すだけで温め開始でき、ちゃんと温めてく れるので、手軽に温かい料理にありつける
(私:西山)の解釈
駄目な(良い)コンテキスト (電子レンジを題材に) ダメなコンテキスト • 温めに使いたいけど、置く場所がない 良いコンテキスト • 電源が届く距離に、置ける場所があるし、あると便利 (私:西山)の解釈
新しい気づき・学び • 自分のUXに関する考えはかなりUI寄りだったかも ◦ コンテンツ中心に考えていくのが大事かも ◦ UIはコンテンツをうまく扱えるようにするための手段ぐらいの気持ちでいた方が いい • UX=UI+コンテンツ+コンテキストの式は目から鱗
◦ ただ、何がUIで何がコンテンツかには拘らないようにした方がいいかも ◦ UI中心に考えてないか、コンテンツ、コンテキストを置いてけぼりにしてないかを 意識するための式だと思った方がいい • UI+コンテンツ=こちらが提供できるもの、コンテキスト=こちらが提供できないもの、どち らもあることを意識した方がいい ◦ 作る側だと、コンテキストを見落としがち ◦ ただ意識するだけではダメかも。コンテキストも見落とさないための道具が、UX ツールの中には色々あるので、それを活用していくのが良い
参考リンク • UXとUIの違い(UX TIMES) • The Definition of User Experience
(UX)(NNG) • UXとUIの比較以上の勉強をしよう(UX TIMES) • 書籍「UX+理論で作るWebデザイン」
「#UXer1000000」でポストして 広めよう! 2030までに = 100万人 自分の言葉で説明できる力をつけよう! ”UXのこと”