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
Shinjuku.html5.lunch #11
Search
ckazu
August 07, 2012
Design
0
24
Shinjuku.html5.lunch #11
https://www.slideshare.net/ckazu/shinjukuhtml5lunch-11
ckazu
August 07, 2012
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
typo の傾向と対策
ckazu
0
21
ずぶの素人がRails開発できるようになるために必要な5つのこと
ckazu
0
26
Other Decks in Design
See All in Design
freee + Product Design FY25Q4
freee
4
14k
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
640
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
210
線で考える画面構成
natsuume
1
880
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
170
CMS管理画面のアクセシビリティ
magi1125
7
2.1k
「デザイン」を信じるには
iflection
0
280
ポートフォリオ_webデザイナー
nami_webdesigner
0
100
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
450
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
1.8k
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
440
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
380
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Balancing Empowerment & Direction
lara
1
430
Why Our Code Smells
bkeepers
PRO
336
57k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Six Lessons from altMBA
skipperchong
28
3.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
What's in a price? How to price your products and services
michaelherold
246
12k
It's Worth the Effort
3n
185
28k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Transcript
Shinjuku.html5.lunch ͷಛผฤ 2012.08.07 kchinda (at) aiming-inc.com (a.k.a. @ckazu)
about me •@ckazu • •౦ژ։ൃG •Rails ʹΑΔαΠτ։ൃ •Rails + JS
ʹΑΔ ϒϥβήʔϜ։ൃ •
http://connpass.com/series/72/
http://www.slideshare.net/ckazu/ux-10671865
http://developer.aiming-inc.com/study/guide-to-ux-for-software-engineer/
ࠓͷςʔϚ •web ͷ UX ʹ͍ͭͯ
ࠓͷςʔϚ •ϝϯλϧϞσϧͱσόΠεͱͷؔΘΓ
ࠓͷత • ։ൃऀᅂͷϞϊ • σβΠφᅂͷϞϊ http://store.apple.com/us/product/MB829LL/A http://www.seiko-watch.co.jp/p_search/detail/do.php?no=SBPG003
ࠓͷత •Ϣʔβʹͱͬͯ ͍͢͞ͱԿ͔Λɼ ࠜڌΛ࣋ͬͯߟ͑ΒΕΔΑ͏ʹͳΔ
UX User Experience
The User Experience Honeycomb http://semanticstudios.com/publications/semantics/000029.php
UX/UI/IA ... Կނ͔࠷ۙΑ͘ฉ͘୯ޠ •UI (User Interface) •UX (User eXperience) •IA
(Information Architecture) •affordance theory (Perceived Affordance) •etc.
UX ೝՊֶ σβΠϯ ใՊֶ
UX affordance UI (User Interface) IA (Information Architecture) UX ?
(User Experience)
UX/UI/IA ... •UI / IA / affordance •͜ΕΒΛֶɼ ΑΓྑ͍ϢʔβମݧΛ༩͑ΒΕΔ ͷΛ࡞ΕΔͷ͔
ϝ ϯλ ϧϞσϧ Mental Model
ΩϟϯηϧͰ͖·͔͢ʁ
http://www.google.com/search?q=bad +ui&hl=ja&prmd=imvnsa&tbm=isch&tbo=u&source=univ&sa=X&ei=X9AgUMWuIKqImQX Xz4D4Bg&ved=0CF0QsAQ&biw=1366&bih=768#hl=ja&tbm=isch&sa=1&q=%22bad+ui %22+browser&oq=%22bad+ui%22+browser&gs_l=img. 3...7024.9528.2.9693.4.4.0.0.0.0.57.207.4.4.0...0.0...1c.l41lTJlFcT8&pbx=1&fp=1&biw=1366&bih =768&bav=on.2,or.r_gc.r_pw.r_qf.&cad=b&sei=v9AgUK-HMM30mAXr5YHICA BAD UI
Ϙλϯ͕̐ͭ http://www.seiko-watch.co.jp/p_search/detail/do.php?no=SBPG003
ΫϦοΫʁ http://store.apple.com/us/product/MB829LL/A
ԜΜͩϘλϯ
৭
ʢิʣ৭ͱจԽ http://www.informationisbeautiful.net/visualizations/colours-in-cultures/
ϝϯλϧϞσϧ •ʮͳΜͩே৽ฉಡΊͳ͍ͷ͔ʯ ――ߴྸऀ͕iPadΛͬͨΒʁ • http://plusd.itmedia.co.jp/pcuser/articles/1004/23/ news028.html
ϝϯλϧϞσϧ
ϝϯλϧϞσϧ
ϝϯλϧϞσϧ •ώτ͕ࣗ؍ͨ͜͠ͱΛઆ໌͢Δ ϝϯλϧϞσϧΛߏங͢Δ •։ൃऀͷϝϯλϧϞσϧͱɼ ϢʔβͷϝϯλϧϞσϧͱͷဃ
ϝϯλϧϞσϧ •ώτ͕ࣗ؍ͨ͜͠ͱΛઆ໌͢Δ ϝϯλϧϞσϧΛߏங͢Δ •ࣗͷ؍ଌൣғͰߏங͢ΔͷͰ •iPad ͰςϨϏݟΕͳ͍͚Ͳނোʁ •Ψνϟ֬ૢ࡞͞Ε͍ͯΔʂʁ •etc.
ϝϯλϧϞσϧ •ώτ͕ࣗ؍ͨ͜͠ͱΛઆ໌͢Δ ϝϯλϧϞσϧΛߏங͢Δ •ʮ։ൃऀͷৗࣝ ≠ Ϣʔβͷৗࣝʯ ͱߟ͑Δ͖
ֶश Lerning
ֶश •นը •ύϐϧεͷൃ໌ •ࢴ •άʔςϯϕϧΫҎ߱ •׆൛ҹ •ॻ੶ •ిࢠσόΠεͷൃୡ •PC •λϒϨοτ
ͦΕͧΕͷσόΠεʹ ׳ΕΔͨΊͷ ֶशίετʁ
ֶश •ͷࢬ •ສච •Ԗච •Ϙʔϧϖϯ •γϟʔϓϖϯγϧ ͦΕͧΕͷσόΠεʹ ׳ΕΔͨΊͷ ֶशίετʁ
ֶश •ΩʔϘʔυ •Ϛε •ϖϯλϒϨοτ •τϥοΫϘʔϧ •λονύωϧ ͦΕͧΕͷσόΠεʹ ׳ΕΔͨΊͷ ֶशίετʁ
ֶश •੩తHTML •ಈతHTML •Javascript Ͱಈ͖ͷ͋Δϖʔδ •Flashɹ •ajaxɹ •HTML5ɹ •CSS3 ͷ০
•WebGLɹ •etc.ɹ ͦΕͧΕʹ ׳ΕΔͨΊͷ ֶशίετʁ
ֶशίετΛԼ͛Δ •Web ੈքͷඪ४ •ը໘ͷߏ •ϦϯΫ৭ •ex) bingɹ •Լઢ •Ϙλϯ •input
ཁૉ •etc. •࣮ੈքͷϝλϑΝ •Ϙλϯ •ΞΠίϯ •δΦϯ • ex) http://www.nintendo.co.jp/3ds/abej •ϢχόʔαϧσβΠϯ
ରԠ͚ Mapping
ରԠ্͚͕ख͍͍ͬͯ͘ͳ͍ྫ
ରԠ͚
ରԠ͚ 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 •άϦϧͷՐεΠον •ܗঢ় •ஔॴ ؒҧ͍͑͢σβΠϯͳͷʹ ֤ࣾڞ௨ͷஔ ͳͥมߋ͞Εͳ͍ͷ͔
σϑΝΫτɾελϯμʔυ ౿ऻ͖͢ͳͷ͔ʁ
ࢀߟαΠτ
·ͱΊ •ΑΓྑ͍Ϣʔβମݧ͕ಘΒΕΔ ίϯςϯπΛ࡞Δʹ •ϝϯλϧϞσϧΛҙࣝ͢Δ •։ൃऀͱͯ͠ͷৗࣝҰ୴ࣺͯΔ •ৗࣝ ͔ ֵ৽͔ •ৗࣝ: ϨʔϧΛ֎Εͳ͍
•ֵ৽: ϝλϑΝΛ͏·͘औΓೖΕΔ etc.
ऴ