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入門
Search
ckazu
December 07, 2011
Design
0
15
エンジニアのためのUX入門
https://www.slideshare.net/ckazu/ux-10671865
ckazu
December 07, 2011
Tweet
Share
More Decks by ckazu
See All by ckazu
2024 コーディング研修
ckazu
2
1.6k
磯野家で学ぶ Prolog
ckazu
0
24
Introduction fasttext
ckazu
0
19
Query selecterの話
ckazu
0
17
仮想電子工作のすすめ
ckazu
0
19
ウェブエンジニアのための色の話
ckazu
0
17
これさえ読めば知ったかできるかもしれない人工知能の歴史と機械学習の今
ckazu
0
13
Shinjuku.html5.lunch #11
ckazu
0
24
typo の傾向と対策
ckazu
0
21
Other Decks in Design
See All in Design
portfolio_YumiYasuda
yum0418
0
290
株式会社バクタム 会社説明資料
bactum
0
250
NAHO SHIMONO_Portfolio2025
nahohphp
0
880
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
390
今日から意識できるアクセシビリティ
fumiko
0
250
Kid Cowboy 103
marilutwin
0
270
CMS管理画面のアクセシビリティ
magi1125
7
2.1k
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
420
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
520
Saudade typeface
tiagoporto
0
330
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
610
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
1.7k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Balancing Empowerment & Direction
lara
1
430
How to Think Like a Performance Engineer
csswizardry
25
1.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Gamification - CAS2011
davidbonilla
81
5.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
GitHub's CSS Performance
jonrohan
1031
460k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Transcript
ΤϯδχΞͷͨΊͷUXೖ UI / UX / IA 2011.12.07
[email protected]
(a.k.a. @ckazu)
ࠓͷ༰ •UI / UX / IAσβΠϯʹؔͯ͠ɽɽɽ •͘ઙ͘ •ࡶଟͳτϐοΫε
ࠓͷ༰ •ͨͩ͠ɽɽɽ •ೝՊֶʹภ͍ͬͯΔ •UI / UX / IAσβΠϯʹؔͯ͠ɽɽɽ •͘ઙ͘ •ࡶଟͳτϐοΫε
ࠓͷత̍ •ιϑτΣΞΤϯδχΞ͕ɼ σβΠϯΛΔҙٛ •Ϣʔβʹͱ͍͍ͬͯ͢Ϟϊͱɼ ։ൃऀʹͱ͍͍ͬͯ͢Ϟϊ
ࠓͷత̍ • ։ൃऀᅂͷϞϊ • σβΠφᅂͷϞϊ http://store.apple.com/us/product/MB829LL/A http://www.seiko-watch.co.jp/p_search/detail/do.php?no=SBPG003
ࠓͷత̍ •ਓʹͱ͍͍ͬͯ͢Ϟϊ ιϑτΣΞΛ࡞Δʹɽɽɽ •ਓʹͱ͍͍ͬͯ͢σβΠϯͱԿ͔
ࠓͷత̍ •ਓʹͱ͍͍ͬͯ͢Ϟϊ ιϑτΣΞΛ࡞Δʹɽɽɽ •ਓʹͱ͍͍ͬͯ͢σβΠϯͱԿ͔ ώτΛΔ → ೝ ʨ৺ཧֶ, Պֶʩ
ࠓͷత̎ • UX (User Experience) • UI (User Interface) •
IA (Information Architecture) • HCD (Human Centered Design) • Ubiquitous • Usability • HI (Human Interface) • Interactive Design • Interactive System • Man-Machine Interface • Tangible • HCI (Human Computer Interaction) • etc... UX ʹؔ͢Δ༻ޠ
ࠓͷత http://www.kickerstudio.com/blog/images/ux.jpg
ࠓͷత̎ •UX (UI) ֶࡍతͳྖҬ •ͦΕͧΕͷͰɼ ͦΕͧΕͷఆٛ༻ޠ͕͋Δ •ࠜఈͷߟ͑ํͦΜͳʹҧΘͳ͍ ೝՊֶ σβΠϯ ใՊֶ
ࠓͷత̎ •UX (UI) ֶࡍతͳྖҬ •ͦͷྖҬʹӨڹ͞Εͣʹɼ ‘design’ ʹ͍ͭͯߟ͑ͯΈΔ
ࠓͷత̎ •UX (UI) ֶࡍతͳྖҬ •ͦͷྖҬʹӨڹ͞Εͣʹɼ ‘design’ ʹ͍ͭͯߟ͑ͯΈΔ ࠓɼͦͷ͖͔͚ͬʹ͢Δ
ೝ cognition
ೝ৺ཧֶ •֮ɾཧղɾهԱɾࢥߟɾֶशɾਪɾղܾ •ήγϡλϧτ৺ཧֶ • http://ja.wikipedia.org/wiki/ήγϡλϧτ৺ཧֶ •H. ΤϏϯάϋε • http://ja.wikipedia.org/wiki/ࡨࢹ •
http://ja.wikipedia.org/wiki/٫ۂઢ
ೝՊֶ •ϑϨʔϜ •ϩϘοτͱόοςϦͱരͷ • Daniel Dennett, “Cognitive Wheels : The
Frame Problem of AI,” The Philosophy of Artificial Intelligence, Margaret A. Boden, Oxford University Press, 1984, pp. 147-170. cite: http://www.cs.sfu.ca/~vaughan/teaching/415/papers/dennett- cognitivewheels.html
ϑϨʔϜ •όοςϦͷΕͦ͏ͳϩϘοτ͕Ұମ͍Δ •ྡͷ෦ʹόοςϦ͕͋Δ •όοςϦͷ্ʹ࣌ݶര͕͓͍ͯ͋Γɼ Ұఆ࣌ؒޙʹരൃ͢Δ
ϑϨʔϜ •όοςϦͷΕͦ͏ͳϩϘοτ͕Ұମ͍Δ •ྡͷ෦ʹόοςϦ͕͋Δ •όοςϦͷ্ʹ࣌ݶര͕͓͍ͯ͋Γɼ Ұఆ࣌ؒޙʹരൃ͢Δ ϩϘοτʹ ʮྡͷ෦͔ΒόοςϦΛͬͯ͘Δ͜ͱʯ ͱ͍͏໋ྩΛͨ͠
ϑϨʔϜ •ϩϘοτR1 •۪ʹతΛߦ͢ΔϩϘοτ
ϑϨʔϜ •ϩϘοτR1 •۪ʹతΛߦ͢ΔϩϘοτ όοςϦΛ࣋ͪग़͢͜ͱʹޭͨ͠ɽ ͨͩ͠ɼόοςϦΛ࣋ͪग़͢ͱര Ұॹʹ࣋ͪग़͢͜ͱΛߟ͑ΒΕͳ͔ͬͨͨΊɼ ͕ͯരൃʹר͖ࠐ·Εͯ͠·ͬͨ
ϑϨʔϜ •ϩϘοτR1ͷ •όοςϦΛ࣋ͪग़͢͜ͱͰੜ͡Δɼ ڥͷมԽΛߟྀͰ͖ͳ͔ͬͨ
ϑϨʔϜ •ϩϘοτR1D1 •తΛୡ͢ΔͨΊʹɼੜ͡Δ෭࣍తͳӨڹΛ ߟྀ͢ΔΑ͏վྑͨ͠ ※ D = deduceʢԋ៷ʣ
ϑϨʔϜ •ϩϘοτR1D1 •తΛୡ͢ΔͨΊʹɼੜ͡Δ෭࣍తͳӨڹΛ ߟྀ͢ΔΑ͏վྑͨ͠ ϩϘοτɼόοςϦͷલͰϑϦʔζ͠ɼ ͕ͯɼരͷരൃʹר͖ࠐ·Εͯ͠·ͬͨ ※ D = deduceʢԋ៷ʣ
ϑϨʔϜ •ϩϘοτR1D1ͷ •όοςϦΛ্࣋ͪ͛ΔલʹɼόοςϦΛ্࣋ͪ͛Δͱੜ͡ Δͨ͘͞Μͷ͜ͱΛܭࢉ͠ͳ͚ΕͳΒͳ͔ͬͨ •όοςϦΛ্࣋ͪ͛Δͱɼര͕స͕Βͳ͍͔ •όοςϦΛ্࣋ͪ͛ΔͨΊʹɼΞʔϜΛಈ͔͢͜ͱͰɼ ΞʔϜ͕Ͳ͔͜ʹͿ͔ͭΒͳ͍͔ •όοςϦʹۙͮ͘ͱɼচ͕ൈ͚མͪͳ͍͔ •όοςϦʹ৮ΕΔͱɼೖޱͷυΞʹ伴͕͔͔Βͳ͍͔ ...
ϑϨʔϜ •ϩϘοτR2D1 •తΛୡ͢ΔͨΊʹɼੜ͡Δ෭࡞༻ͷ͏ͪɼ తΛୡ͢ΔͨΊʹෆඞཁͳͷΛߟྀ͠ͳ͍Α ͏վྑͨ͠ɽ
ϑϨʔϜ •ϩϘοτR2D1 •తΛୡ͢ΔͨΊʹɼੜ͡Δ෭࡞༻ͷ͏ͪɼ తΛୡ͢ΔͨΊʹෆඞཁͳͷΛߟྀ͠ͳ͍Α ͏վྑͨ͠ɽ ϩϘοτɼྡͷ෦ͷυΞͷલͰϑϦʔζͨ͠ ͕ͯɼര͕രൃͨ͠
ϑϨʔϜ •ϩϘοτR2D1ͷ •తͷߦಈΛى͜͢લʹͦͷతΛୡ͢Δͷʹ ෆඞཁͳେͳใΛܭࢉ͢ΔӋʹͳͬͨ
ڥ •ڥʹແݶʹใ͕ଘࡏ͢Δ •ώτͷ֮ •ώτڥͷใΛͱͯ͏·͘ೝ͍ࣝͯ͠Δ •ώτ͕ϑϨʔϜͰࠔΔ͜ͱ͋·Γͳ͍
࣮ݧΛ͠·͢
࣮ݧ นʹཱ͔͍ͬͯͬͯͩ͘͞
࣮ݧ ӈ͏ͰΛ৳ͨ͠ͱ͖ɼ นʹதࢦ͕৮ΕΔ͘Β͍ͷ ڑʹཱ͍ͬͯͩ͘͞
࣮ݧ ͪΐ͏Ͳதࢦͷઌ͕ นʹ৮ΕΔ͔৮Εͳ͍͔ͷ ڑʹཱͯ·͔ͨ͠ʁ
࣮ݧ ӈ͏ͰΛ৳ͨ͠ͱ͖ นʹखͷͻΒ͕ͬͭ͘͘ ڑʹཱ͍ͬͯͩ͘͞
࣮ݧ ମ͕͘͜ͱͳ͘ खͷͻΒ͕ͬͨΓͱ นʹ͖ͭ·͔ͨ͠ʁ
࣮ݧ ͏Ұ ෦Λ҉ͯ͘͠
࣮ݧ͓ΘΓ
ώτͷ֮ •ಈͷ֮ͱͯ༏Ε͍ͯΔ •ਓతʹࢥ͑Δಈ࡞Ͱʮୈײʯͱ͍͏ ᐆດͳݴ༿Ͱย͚͍͚ͯͳ͍ •ਓͷۭؒѲೳྗ •ϓϩεϙʔπબखͷମೳྗ •Իײ
ώτͷ֮ •μΠφϛοΫɾλον •ݟ͑ͳ͍ͷ͞Λ ֮͢Δ •ݟ͑ͳ͍ͷܗΛ ֮͢Δ
ώτͷ֮ •ಈڥΛແҙࣝʹ֮͠ɼ ͦͷใΛੵ͍ͯ͠Δ •ੵͨ͠ใΛແ֮ࣗͷ͏ͪʹ ڥʹରͯ͠ద༻͍ͯ͠Δ •ಈʢώτʣϑϨʔϜʹ ໘͠ͳ͍
Ξϑ Υ ʔμϯ ε affordance
ΞϑΥʔμϯε •ಈͱڥͱͷؔΘΓΛ ߟ͑ͯΈΔ
Ҝࢠਓ͕࠲Δͷ ໘ਓཱ͕ͭʗาߦ͢Δͷ ΞϑΥʔμϯε
Ҝࢠਓ͕࠲Δͷ ໘ਓཱ͕ͭʗาߦ͢Δͷ ΞϑΥʔμϯε
Ҝࢠਓ͕࠲Δͷ ໘ਓཱ͕ͭʗาߦ͢Δͷ ΞϑΥʔμϯε Ҝࢠਓʹ࠲Δ͜ͱΛఏڙ͢Δ ໘ਓʹཱͭʗาߦ͢Δ͜ͱΛఏڙ͢Δ
afford ʦଞಈʧʙΛ༩͑ΔɼʙΛͨΒ͢ɼʙ͕Ͱ͖Δ
Ҝࢠਓ͕࠲Δͷ ໘ਓཱ͕ͭʗาߦ͢Δͷ ΞϑΥʔμϯε Ҝࢠਓʹ࠲Δ͜ͱΛఏڙ͢Δ ໘ਓʹཱͭʗาߦ͢Δ͜ͱΛఏڙ͢Δ
Ҝࢠਓ͕࠲Δͷ ໘ਓཱ͕ͭʗาߦ͢Δͷ ΞϑΥʔμϯε Ҝࢠਓʹ࠲Δ͜ͱΛΞϑΥʔυ͢Δ ໘ਓʹཱͭʗาߦ͢Δ͜ͱΛΞϑΥʔυ ͢Δ
affordance B⒎PSEΛ໊ࢺԽʗ+BNFT+(JCTPOʹΑΔޠ
affordance ʦ໊ʧڥ͕ಈʹఏڙ͢ΔҙຯՁ
ΞϑΥʔμϯε •υΞϊϒΛ... •ѲΔ •ճ͢ •Լ͛Δ •औͬखΛ... •ѲΔ •ԡ͢ •Ҿ͘ •εϥΠυ͢Δ
•υΞΛ... •ԡ͢ •ϊοΫ͢Δ •υΞͷͭΞϑΥʔμϯε
None
None
None
None
ΞϑΥʔμϯε •υΞͷͭΞϑΥʔμϯε •υΞϊϒΛ... •ѲΔ •ճ͢ •Լ͛Δ •औͬखΛ... •ѲΔ •ԡ͢ •Ҿ͘
•εϥΠυ͢Δ •υΞΛ... •ԡ͢ •ϊοΫ͢Δ
ΞϑΥʔμϯε •υΞͷͭΞϑΥʔμϯε ͜ΕΒͷߦಈΛΞϑΥʔυ͍ͯ͠Δ͔ʁ ͍ͯ͠Δͷͱͦ͏Ͱͳ͍ͷҧ͍ʁ •υΞϊϒΛ... •ѲΔ •ճ͢ •Լ͛Δ •औͬखΛ... •ѲΔ
•ԡ͢ •Ҿ͘ •εϥΠυ͢Δ •υΞΛ... •ԡ͢ •ϊοΫ͢Δ
ʹ ͗ Δ
None
͠ ΅ Δ
None
None
None
ΠϯλϥΫς Ο ϒ σβΠϯ interactive design
ରԠ͚ͱϑΟʔυόοΫ •Ԡ͢ΔͷͱεΠονͳͲ͕ ҰରҰʹରԠ͍ͯ͠Δ •ߦಈʹର͢Δదͳ Ԡ͕͋Δ
ରԠ͚ •ΩʔϘʔυ •ΧʔιϧΩʔ •ϑΝϯΫγϣϯΩʔ •ंͷΟϯΧʔ •֎ं
ରԠ্͚͕ख͍͍ͬͯ͘ͳ͍ྫ
ରԠ͚
ରԠ͚
ରԠ͚ http://www.google.co.jp/search?q=Ψείϯϩ &hl=ja&prmd=imvns&source=lnms&tbm=isch&ei=cT3mTvnjL67BiQf0lKi2BQ&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CEUQ_ AUoAQ&biw=1366&bih=768 •άϦϧͷՐεΠον •ܗঢ় •ஔॴ
ରԠ͚ http://www.google.co.jp/search?q=Ψείϯϩ &hl=ja&prmd=imvns&source=lnms&tbm=isch&ei=cT3mTvnjL67BiQf0lKi2BQ&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CEUQ_ AUoAQ&biw=1366&bih=768 •άϦϧͷՐεΠον •ܗঢ় •ஔॴ ؒҧ͍͑͢σβΠϯͳͷʹ ֤ࣾڞ௨ͷஔ ͳͥมߋ͞Εͳ͍ͷ͔
σϑΝΫτɾελϯμʔυ ౿ऻ͖͢ͳͷ͔ʁ
ϑΟʔυόοΫ
ϑΟʔυόοΫ •ిͷϑΟʔυόοΫ •μΠϠϧϓογϡԻ •ίʔϧԻ •อཹதͷԻָ •௨ऴྃ࣌ͷԻ
ϑΟʔυόοΫ •λονσόΠε ϑΟʔνϟϑΥϯͱ εϚʔτϑΥϯͱͷ ϑΟʔυόοΫͷҧ͍ʁ
ϑΟʔυόοΫ •λονσόΠε ϑΟʔνϟϑΥϯͱ εϚʔτϑΥϯͱͷ ϑΟʔυόοΫͷҧ͍ʁ ࢲͨͪͷߟ͑Δ͖՝
ϝϯλϧϞσϧ •ͳͥɼରԠ͚ϑΟʔυόοΫ͕େͳͷ͔ •ώτ͕ࣗ؍ͨ͜͠ͱΛઆ໌͢Δ ϝϯλϧϞσϧΛߏங͢Δ •։ൃऀͷϝϯλϧϞσϧͱɼ ϢʔβͷϝϯλϧϞσϧͱͷဃ ରԠ͚ɼదͳϑΟʔυόοΫɼ ΑΓྑ͍ϝϯλϧϞσϧͷߏஙʹཱͭ
Ϣʔβ ɾ Π ϯλ ϑ ΣΠ ε user interface
User Interface • 1987 • Knowledge Navigator ʮిൿॻʯ
http://video.google.com/videoplay?docid=-5144094928842683632
User Interface • 1987, Apple Inc. • Knowledge Navigator ʮిൿॻʯ
• Apple ͕ࢦ͢࠷ऴతͳΠϯλϑΣΠε
User Interface • 2011, Apple Inc. • siri • Ͳ͜·Ͱ͍͍ۙͮͯΔ͔
User Interface • 1996, B. Reeves, C. Nass, The Media
EquationʢϝσΟΞͷࣜʣ • “Media = Real Life” • ਓؒΠϯλϥΫγϣϯ͢ΔϝσΟΞΛ ਓ֨Λ࣋ͭରͱͯ͠ѻ͏͕͋Δ
σβΠϯ design
࠷ޙʹ •ʮdesign ͱԿ͔ʁʯ Λߟ͑Δ •σβΠϯ ≠ design •ݸਓͷߟ͑Λ࣋ͭ
࠷ޙʹ • design ͱԿ͔ʁʢݸਓతͳҙݟʣ • ใΛཧ͢Δ͜ͱɽ • ຊ୨ͷཧ → ຊͷฒͼํΛσβΠϯ͢Δ
• ίʔυͷϦϑΝΫλϦϯά → ίʔυͷઃܭ (design) Λݟ͢ • ಄ͷதΛཧ͢Δ → brain storming
design ͱԿ͔ ߟ͑ͯΈ·͠ΐ͏
ऴ
ࢀߟจݙ • D. Norman, ୭ͷͨΊͷσβΠϯʁ • J. J. Gibson, ੜଶֶతࢹ֮
• ࠤʑਖ਼ਓ, ΞϑΥʔμϯε ― ৽͍͠ೝͷཧ • ޙ౻, ࠤʑਖ਼ਓ, ਂᖒਓ, σβΠϯͷੜଶֶ • B. Reeves, C. Nass, ϝσΟΞͷࣜ • ࡔຊو࢙, IAγϯΩϯά
None