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
26
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
26
Introduction fasttext
ckazu
0
20
Query selecterの話
ckazu
0
19
仮想電子工作のすすめ
ckazu
0
20
ウェブエンジニアのための色の話
ckazu
0
19
これさえ読めば知ったかできるかもしれない人工知能の歴史と機械学習の今
ckazu
0
13
typo の傾向と対策
ckazu
0
22
ずぶの素人がRails開発できるようになるために必要な5つのこと
ckazu
0
28
Other Decks in Design
See All in Design
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.7k
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
270
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.4k
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3.4k
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
580
株式会社バクタム 会社説明資料
bactum
0
340
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
290
#Dubois Challenge 2025: Economics
ajstarks
1
170
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
150
佐藤千晶|ポートフォリオ
chimi_chia
0
150
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
170
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
550
Featured
See All Featured
It's Worth the Effort
3n
187
28k
Rails Girls Zürich Keynote
gr2m
95
14k
Faster Mobile Websites
deanohume
309
31k
The Cult of Friendly URLs
andyhume
79
6.6k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Documentation Writing (for coders)
carmenintech
74
5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
How GitHub (no longer) Works
holman
315
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
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.
ऴ