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
15
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.4k
磯野家で学ぶ Prolog
ckazu
0
18
Introduction fasttext
ckazu
0
7
Query selecterの話
ckazu
0
10
仮想電子工作のすすめ
ckazu
0
12
ウェブエンジニアのための色の話
ckazu
0
9
これさえ読めば知ったかできるかもしれない人工知能の歴史と機械学習の今
ckazu
0
6
typo の傾向と対策
ckazu
0
13
ずぶの素人がRails開発できるようになるために必要な5つのこと
ckazu
0
20
Other Decks in Design
See All in Design
発表資料テンプレート / My slide template
thatblue
0
180
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
240
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
750
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
8.8k
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
960
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.2k
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
200
Goodpatch Tour💙 / We are hiring!
goodpatch
31
790k
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
250
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
130
(第1回) アーキテクト・テックリード育成講座
masakaya
0
140
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.5k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
No one is an island. Learnings from fostering a developers community.
thoeni
20
3.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Why Our Code Smells
bkeepers
PRO
335
57k
GraphQLとの向き合い方2022年版
quramy
44
13k
Fireside Chat
paigeccino
34
3.2k
The Invisible Side of Design
smashingmag
299
50k
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.
ऴ