Shinjuku.html5.lunch #11

https://www.slideshare.net/ckazu/shinjukuhtml5lunch-11

Transcript

1. Shinjuku.html5.lunch ໷ͷಛผฤ 2012.08.07 kchinda (at) aiming-inc.com (a.k.a. @ckazu)
2. about me •@ckazu • •౦ژ։ൃG •Rails ʹΑΔαΠτ։ൃ •Rails + JS ʹΑΔ ϒϥ΢βήʔϜ։ൃ •
3. http://connpass.com/series/72/
4. http://www.slideshare.net/ckazu/ux-10671865
5. http://developer.aiming-inc.com/study/guide-to-ux-for-software-engineer/
6. ࠓ೔ͷςʔϚ •web ͷ UX ʹ͍ͭͯ
7. ࠓ೔ͷςʔϚ •ϝϯλϧϞσϧͱσόΠεͱͷؔΘΓ
8. ࠓ೔ͷ໨త • ։ൃऀᅂ޷ͷϞϊ • σβΠφᅂ޷ͷϞϊ http://store.apple.com/us/product/MB829LL/A http://www.seiko-watch.co.jp/p_search/detail/do.php?no=SBPG003
9. ࠓ೔ͷ໨త •Ϣʔβʹͱͬͯ ࢖͍΍͢͞ͱ͸Կ͔Λɼ ࠜڌΛ࣋ͬͯߟ͑ΒΕΔΑ͏ʹͳΔ
10. UX User Experience
11. The User Experience Honeycomb http://semanticstudios.com/publications/semantics/000029.php
12. UX/UI/IA ... Կނ͔࠷ۙΑ͘ฉ͘୯ޠ •UI (User Interface) •UX (User eXperience) •IA (Information Architecture) •affordance theory (Perceived Affordance) •etc.
13. UX ೝ஌Պֶ σβΠϯ ৘ใՊֶ
14. UX affordance UI (User Interface) IA (Information Architecture) UX ? (User Experience)
15. UX/UI/IA ... •UI / IA / affordance •͜ΕΒΛֶ΂͹ɼ ΑΓྑ͍ϢʔβମݧΛ༩͑ΒΕΔ ΋ͷΛ࡞ΕΔͷ͔
16. ϝ ϯλ ϧϞσϧ Mental Model
17. ΩϟϯηϧͰ͖·͔͢ʁ
18. 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
19. Ϙλϯ͕̐ͭ http://www.seiko-watch.co.jp/p_search/detail/do.php?no=SBPG003
20. ΫϦοΫʁ http://store.apple.com/us/product/MB829LL/A
21. ԜΜͩϘλϯ
23. ʢิ଍ʣ৭ͱจԽ http://www.informationisbeautiful.net/visualizations/colours-in-cultures/
24. ϝϯλϧϞσϧ •ʮͳΜͩே೔৽ฉ͸ಡΊͳ͍ͷ͔ʯ ――ߴྸऀ͕iPadΛ࢖ͬͨΒʁ • http://plusd.itmedia.co.jp/pcuser/articles/1004/23/ news028.html
25. ϝϯλϧϞσϧ
26. ϝϯλϧϞσϧ
27. ϝϯλϧϞσϧ •ώτ͸ࣗ෼͕؍࡯ͨ͜͠ͱΛઆ໌͢Δ ϝϯλϧϞσϧΛߏங͢Δ •։ൃऀͷϝϯλϧϞσϧͱɼ ϢʔβͷϝϯλϧϞσϧͱͷဃ཭
28. ϝϯλϧϞσϧ •ώτ͸ࣗ෼͕؍࡯ͨ͜͠ͱΛઆ໌͢Δ ϝϯλϧϞσϧΛߏங͢Δ •ࣗ෼ͷ؍ଌൣғͰߏங͢ΔͷͰ •iPad ͰςϨϏݟΕͳ͍͚Ͳނোʁ •Ψνϟ͸֬཰ૢ࡞͞Ε͍ͯΔʂʁ •etc.
29. ϝϯλϧϞσϧ •ώτ͸ࣗ෼͕؍࡯ͨ͜͠ͱΛઆ໌͢Δ ϝϯλϧϞσϧΛߏங͢Δ •ʮ։ൃऀͷৗࣝ ≠ Ϣʔβͷৗࣝʯ ͱߟ͑Δ΂͖
30. ֶश Lerning
31. ֶश •นը •ύϐϧεͷൃ໌ •ࢴ •άʔςϯϕϧΫҎ߱ •׆൛ҹ࡮ •ॻ੶ •ిࢠσόΠεͷൃୡ •PC •λϒϨοτ୺຤ ͦΕͧΕͷσόΠεʹ ׳ΕΔͨΊͷ ֶशίετ͸ʁ
32. ֶश •໦ͷࢬ •ສ೥ච •Ԗච •Ϙʔϧϖϯ •γϟʔϓϖϯγϧ ͦΕͧΕͷσόΠεʹ ׳ΕΔͨΊͷ ֶशίετ͸ʁ
33. ֶश •ΩʔϘʔυ •Ϛ΢ε •ϖϯλϒϨοτ •τϥοΫϘʔϧ •λονύωϧ ͦΕͧΕͷσόΠεʹ ׳ΕΔͨΊͷ ֶशίετ͸ʁ
34. ֶश •੩తHTML •ಈతHTML •Javascript Ͱಈ͖ͷ͋Δϖʔδ •Flashɹ •ajaxɹ •HTML5ɹ •CSS3 ͷ૷০ •WebGLɹ •etc.ɹ ͦΕͧΕʹ ׳ΕΔͨΊͷ ֶशίετ͸ʁ
35. ֶशίετΛԼ͛Δ •Web ੈքͷඪ४ •ը໘ͷߏ੒ •ϦϯΫ৭ •ex) bingɹ •Լઢ •Ϙλϯ •input ཁૉ •etc. •࣮ੈքͷϝλϑΝ •Ϙλϯ •ΞΠίϯ •δΦϯ • ex) http://www.nintendo.co.jp/3ds/abej •ϢχόʔαϧσβΠϯ
36. ରԠ෇͚ Mapping
37. ରԠ෇্͚͕ख͍͍ͬͯ͘ͳ͍ྫ
38. ରԠ෇͚
39. ରԠ෇͚ 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 •άϦϧͷ఺ՐεΠον •ܗঢ় •഑ஔ৔ॴ ؒҧ͑΍͍͢σβΠϯͳͷʹ ֤ࣾڞ௨ͷ഑ஔ ͳͥ௕೥มߋ͞Εͳ͍ͷ͔ σϑΝΫτɾελϯμʔυ͸ ౿ऻ͢΂͖ͳͷ͔ʁ
40. ࢀߟαΠτ
41. ·ͱΊ •ΑΓྑ͍Ϣʔβମݧ͕ಘΒΕΔ ίϯςϯπΛ࡞Δʹ͸ •ϝϯλϧϞσϧΛҙࣝ͢Δ •։ൃऀͱͯ͠ͷৗࣝ͸Ұ୴ࣺͯΔ •ৗࣝ ͔ ֵ৽͔ •ৗࣝ: ϨʔϧΛ֎Εͳ͍ •ֵ৽: ϝλϑΝΛ͏·͘औΓೖΕΔ etc.
42. ऴ