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
350
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
8
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
【サイバーエージェント】Creative Switch 会社説明資料
cyberagent_creators
0
5.1k
mount_company_profile
mount_inc
0
5k
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
koyaman
1
1.4k
Storyboard Exercise: Chase Sequence
lynteo
1
210
Figmaレクチャー会Part2 もっと使いこなす編@千株式会社 社内勉強会
designer_no_pon
1
260
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
bitkey
PRO
0
250
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
payatsusan213
0
200
Ralph Penel Portfolio
ralphpenel
0
270
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
mixi_design
PRO
1
200
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
designer_no_pon
0
1.2k
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
kumanoayumi
6
870
AIスライドデザインを生成する仕組みを社内共有する
kenichiota0711
5
4.3k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
141
7.3k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Faster Mobile Websites
deanohume
310
31k
The untapped power of vector embeddings
frankvandijk
1
1.6k
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
750
How to Think Like a Performance Engineer
csswizardry
28
2.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
2.1k
Unsuck your backbone
ammeep
671
58k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.4k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.1k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
180
BBQ
matthewcrist
89
10k
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のこと”