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
AIで加速するアクセシビリティのこれから
magi1125
3
560
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
640
問いの変遷
iflection
0
160
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.9k
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.7k
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
420
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
370
AI動画生成ガチャ紹介
piyo7
1
130
株式会社バクタム 会社説明資料
bactum
0
250
マンガで分かるサービスデザインガイドライン
senryakuka
1
900
The Golden Whitney
ohtristanart
PRO
0
550
線で考える画面構成
natsuume
1
880
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
A Tale of Four Properties
chriscoyier
160
23k
Embracing the Ebb and Flow
colly
86
4.7k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Gamification - CAS2011
davidbonilla
81
5.4k
Building Applications with DynamoDB
mza
95
6.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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