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
5
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.1k
磯野家で学ぶ Prolog
ckazu
0
12
Introduction fasttext
ckazu
0
6
Query selecterの話
ckazu
0
3
仮想電子工作のすすめ
ckazu
0
9
ウェブエンジニアのための色の話
ckazu
0
7
これさえ読めば知ったかできるかもしれない人工知能の歴史と機械学習の今
ckazu
0
5
typo の傾向と対策
ckazu
0
7
ずぶの素人がRails開発できるようになるために必要な5つのこと
ckazu
0
16
Other Decks in Design
See All in Design
We Baby Bears-Triple T Tiger
yvonnehsuanho
PRO
0
400
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
190
Sensitive Texter Storyboard
ctagulao98
0
160
Sci-Fi: Descenso
elrtovar
0
200
TrollsTopia: Funtography- Part 1
kenijam
1
260
生成AIを活用したサービス設計のススメ〜仮説構築編〜
tomo1215
2
1.1k
Designing and Automating Component Specifications
nathanacurtis
3
310
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
3
750
User Experience Design für Entwickler
joergneumann
4
910
PdMというキャリアがUXデザイナーの頭によぎったとき スポットライトをどう当て、 どうシステムを見つめるか
muture
0
490
速攻で価値検証して無駄なものを作らないプロダクトデザイン
cremacrema
3
320
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
220
Featured
See All Featured
What the flash - Photography Introduction
edds
65
11k
The Invisible Side of Design
smashingmag
294
50k
A Philosophy of Restraint
colly
200
16k
Fireside Chat
paigeccino
25
2.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
BBQ
matthewcrist
82
9k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Embracing the Ebb and Flow
colly
81
4.3k
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.
ऴ