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の違い」v2
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Shirasu3
July 09, 2025
Design
0
330
「UXとUIの違い」v2
Shirasu3
July 09, 2025
Tweet
Share
More Decks by Shirasu3
See All by Shirasu3
(Nakayama) UXとUIの違い
shirasu3
0
68
Other Decks in Design
See All in Design
Figmaレクチャー会Part2 もっと使いこなす編@千株式会社 社内勉強会
designer_no_pon
1
260
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
payatsusan213
0
200
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
securecat
0
200
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは?~操作を減らし、成果を最大にするための設計~
ncdc
0
110
【サイバーエージェント】Creative Switch 会社説明資料
cyberagent_creators
0
5.1k
From the Visible Crossroads: Turning Outputs into Outcomes
takaikanako
2
1.1k
mount_company_profile
mount_inc
0
4.9k
結びながら、ひらく - にじむ境界のデザイン
hilokifigma
3
1.3k
Ralph Penel Portfolio
ralphpenel
PRO
0
260
Drawing for Animation
lynteo
2
190
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
500
DESIGNEAST 2025 A-3
_kotobuki_
0
130
Featured
See All Featured
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.1k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
110
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
730
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
180
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
57
50k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.6k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.2k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
250
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
78
Being A Developer After 40
akosma
91
590k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.6k
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 ・電気をどう やってつけるの かわからない ・電気がつけら
れない ・電気をどう やってつけるの かわかる! ・電気がつけら れる!
Nakayama の解釈 「電気」駄目な or 良いUI どれを押せば良いかわからない どれを押せば良いかわかる
「電気」駄目な or 良いコンテンツ ・部屋が明るく ならない ・部屋が明るく なる!! Nakayama の解釈
「電気」駄目な or 良いコンテンツ Nakayama の解釈 暗すぎて不便 明るくて過ごしやすい
駄目な or 良いコンテキスト (私:名前)の解釈 Nakayama の解釈 自宅の電気 電気がつけら れて、部屋も明 るくなるけど
・・・ ・いつも部屋を 明るくしたいわ けではない 暗めの照明でく つろぎたいとき もある
Nakayama の解釈 「電気」のコンテキスト スイッチの場所が わかるように 光っている センサーで勝手に 明かりがつく 夜帰ってきてスイッチが見えない
Nakayama の解釈 「電気」のコンテキスト https://praemio.work/blog/how-to-choose-lighting 照度が低い方が リラックスしやすい 照度が高い方が 集中しやすい
新しい気づき・学び 見た目が使いやすい見た目で、やりたいことが実現 できればいい UX だと思っていた。 しかし、コンテキストが変わると、一見良いように 思うユーザ体験 UX が、悪いものになることもある。
UI, コンテンツは考えつきやすいが、 ユーザがどんなコンテキストでその製品を使うのかを 考えることが大切。だが、コンテキストを考えるのは難しいと感じた。
参考リンク • UXとUIの違い(UX TIMES) • The Definition of User Experience
(UX)(NNG) • UXとUIの比較以上の勉強をしよう(UX TIMES) • 書籍「UX+理論で作るWebデザイン」 この本に 今回のこと記載されてるよ! 体系的に学びたい方はぜひ
「#UXer1000000」でポストして広めよう! 2030までに = 100万人 自分の言葉で説明できる力をつけよう! ”UXのこと”