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
Mizunashi Mana
March 16, 2025
Design
460
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
UXとUIの違いを自分の言葉で表現する: UX DAYS TOKYO
UX DAYS TOKYO - UX基礎講座第1回の回答
https://x.com/uxdaystokyo/status/1901267497090986028
Mizunashi Mana
March 16, 2025
More Decks by Mizunashi Mana
See All by Mizunashi Mana
UX基礎講座③(回答)UXデザインは 何をするのか?: UX DAYS TOKYO
mizunashi_mana
0
20
UX基礎講座②(回答) なぜUXデザインで カスタマージャーニーマップを 使うのか?: UX DAYS TOKYO
mizunashi_mana
0
27
Higher Order Cofree Annotation for AST
mizunashi_mana
1
500
Other Decks in Design
See All in Design
Design dependencies
teba_eleven
0
170
デザインツールを開く前に その画面は誰に何と言わせたい?受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」
garyuten
1
220
【CEDEC2026】『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ~継承と挑戦を両立するデザイン手法~
cygames
PRO
3
5.1k
AI時代に求められるUXデザインのアプローチ
xtone
1
9.1k
怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-
securecat
1
270
AVI 2026 Keynote "Vision-Driven Design"
ishii_mit
0
130
Rethinking IFUs: What Board Game Rulebooks Contribute to IFU Usability
deadlinepoet
0
360
【CEDEC2026】アートとゲームデザインをつなぐVFX設計『GRANBLUE FANTASY: Relink - Endless Ragnarok』における表現と可読性の両立
cygames
PRO
1
1.3k
「おすすめ」はなぜ信用されないのか - 信頼を築くUI/UX設計
ryu1013
0
260
つくり方を変えていく | change-how-we-build
mottox2
2
1.4k
セブンデックス プロジェクト事例 / innovation Scenes
sevendex
1
1.8k
JBUG大阪#9_登壇資料_引き継ぎで困らないためのBacklogWikiの整え方_ミスと属人化を防ぐために、 “次の人が動ける状態”をどう残すか
webnaut
2
250
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
6.3k
Typedesign – Prime Four
hannesfritz
42
3.2k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.7k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
840
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
1.9k
Rails Girls Zürich Keynote
gr2m
96
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
4.7k
Odyssey Design
rkendrick25
PRO
2
800
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
820
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
What does AI have to do with Human Rights?
axbom
PRO
1
2.4k
Why Our Code Smells
bkeepers
PRO
340
58k
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のこと”