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
(Nakayama) UXとUIの違い
Search
Shirasu3
March 26, 2025
Design
0
65
(Nakayama) UXとUIの違い
Shirasu3
March 26, 2025
Tweet
Share
More Decks by Shirasu3
See All by Shirasu3
「UXとUIの違い」v2
shirasu3
0
250
Other Decks in Design
See All in Design
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.6k
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.5k
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
140
What makes a great Director?
_limex_
0
290
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
300
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
150
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
860
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
400
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
2k
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
160
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3.8k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Making Projects Easy
brettharned
119
6.4k
Producing Creativity
orderedlist
PRO
347
40k
Being A Developer After 40
akosma
91
590k
It's Worth the Effort
3n
187
28k
A designer walks into a library…
pauljervisheath
209
24k
Transcript
「UXとUIの違い」 UI だけ良くても、良い UX にならない
Nakayama(Shirasu)の紹介 ソフトウェアエンジニア Web 業界で 8年ほど。EC が得意。 最近はプロダクトマネジメント寄りの仕事をしています。 2024年に1年かけて Google
UX Certificate コースを修了。 アプリ UI やコンテンツがユーザにとってわかりやすいものであることを 意識して仕事をしています。UX エンジニアを自称したい。 ※ 2025/03/26 作成 参加者の顔や アイコンを追加
UXとUIの違いを 自分の言葉で 説明してください 問題
Nakayama の説明・考え • UX = User Experience, UI = User
Interface • UI はアプリのボタンの色とか余白といった視覚的なもの限定 • UX はユーザの行動すべて • UX の中に UI があるイメージ
「UXとUIの違い」 のスライドを見て。。。 再考しよう! 解答 解答:スライド
UX UI コンテンツ コンテキスト = + + UXの定義(解答スライドより引用) ※次のスライドで説明
ジョブ コンテンツ サービス = アウトカム コンテンツの定義
https://uxdaystokyo.com/articles/ui-ux-difference-study/ UXを理解する上での例え 箸など食器(UI) が使いやすく、料理(コンテンツ)も美味しい。が、 自分の状態・状況(コンテキスト)によって体験は異なる。
Nakayama の解釈 自宅の電気 駄目な or 良いUI ・電気をどう やってつけるの かわからない ・電気がつけら
れない ・電気をどう やってつけるの かわかる! ・電気がつけら れる!
駄目な or 良いコンテンツ Nakayamaの解釈 Nakayama の解釈 自宅の電気 ・部屋が明るく ならない ・部屋が明るく
なる!!
駄目な or 良いコンテキスト (私:名前)の解釈 Nakayama の解釈 自宅の電気 電気がつけら れて、部屋も明 るくなるけど
・・・ ・いつも部屋を 明るくしたいわ けではない 暗めの照明でく つろぎたいとき もある
新しい気づき・学び 見た目が使いやすい見た目で、やりたいことが実現 できればいい UX だと思っていた。 しかし、コンテキストが変わると、一見良いように 思うユーザ体験 UX が、悪いものになることもある。
UI, コンテンツは考えつきやすいが、 ユーザがどんなコンテキストでその製品を使うのかを 考えることが大切。だが、コンテキストを考えるのは難しいと感じた。
参考リンク • UXとUIの違い(UX TIMES) • The Definition of User Experience
(UX)(NNG) • UXとUIの比較以上の勉強をしよう(UX TIMES) • 書籍「UX+理論で作るWebデザイン」 この本に 今回のこと記載されてるよ! 体系的に学びたい方はぜひ
「#UXer1000000」でポストして広めよう! 2030までに = 100万人 自分の言葉で説明できる力をつけよう! ”UXのこと”