もし青森の女子webデザイナーがAndroidと出会ったら。

CSS Nite in AOMORI Vol.5（2011年8月開催） にて講演した内容スライドです。

Transcript

1. ΋ ͠੨৿ ͷ Web Android σβ ঁࢠ Πφʔ͕ ग़ձͬ ͨ Βɻ ͱ ΋ ͠੨৿ ͷ Web Android σβ ঁࢠ Πφʔ͕ ग़ձͬ ͨ Βɻ ͱ hello,world!
2. Profile ͘Ͳ͏͚͍͜ ϑϦʔϥϯε ɾ σβΠφʔɺ ΠϥετϨʔλʔ ੨৿ݝࠇੴࢢग़਎ ࢁޱݝࡏॅ CSS Nite in AOMORI ࣮ߦҕһ
   ޿ใ Androidঁࢠ෦
   ϝϯόʔ @keis Works http://bleu-note.com/
3. A genda Androidͬͯʁ Androidͷجຊ஌ࣝͱಈ޲ 1 ࣄྫ঺հ ΞϓϦ࡞੒ࣄྫ 2 ϦΞϧϘΠε σβΠφʔŊϓϩάϥϚʔʹฉ͍ͯΈ·ͨ͠ 3 ·ͱΊ ౰ηογϣϯͰ͍͍͍ͨ͜ͱ 4 ? !
4. Androidͬͯʁ Androidͷجຊ஌ࣝͱಈ޲ 1 ?
5. Question εϚʔ τ ϑΥ ϯˍλϒϨο τɺ ͍࣋ͬͯ·͔͢ ʁ iPhoneŋAndroidɺ ͲͪΒΛ ࣋ͬ ͍ͯ·͔͢ ʁ
6. Android? Google͕ εϚʔ τϑΥϯ΍λϒϨο τΛओͳλʔήο τͱ͠ ։ൃͨ͠ϓϥο τϑΥʔϜ Cupcake Dounuts Eclair Froyo Gingerbread Honeycomb IceCreamSandwich 1.5 1.6 2.0-2.1 2.2 2.3 3.0-3.2 3.3 Now! Now! ࠷৽όʔδϣϯ εϚʔτϑΥϯ޲͚ɿ2.3 λϒϨο τ޲͚ ɿ3.2 http://developer.android.com/resources/dashboard/platform-versions.html 2011/7/15 ݱࡏ Coming Soon!
7. Android? more INFOBAR ๛෋ͳछྨ WebσβΠφʔŋதଜ༐ޗࢯ͕ UIΛσβΠϯ ༷ʑͳΩϟϦΞ͔Β޷͖ͳσόΠεΛબ΂Δ iPhoneͱ΄΅ಉ͡ײ֮Ͱ࢖͑Δ WebαΠτ΋αΫαΫӾཡՄೳ simeji twicca fxcamera ˞ͨͩ͠ ΠέϝϯʹݶΔ Okusama Nail dronjo ๛෋ͳΞϓϦέʔγϣϯ AndroidϚʔέοτ ʢϞόΠϧˍWebʣ ΑΓμ΢ϯϩʔυ Libraroid
8. HowT oMake? forP rogrammer Ͱ։ൃ ϓϩάϥϚʔͷ৔߹ Java http://developer.android.com/sdk/index.html http://www.eclipse.org/downloads/packages/eclipse-ide-java-developers/indigor
9. HowT oMake? forDesigner σβΠφʔͷ৔߹ ैདྷͷ஌ࣝŋٕज़Λ࢖͏ HTML / CSS / JavaScript / ActionScript Web Service / Tool collaboration αʔϏεŋπʔϧΛ࢖͏ ϓϩάϥϚʔͱ૊Ή 1 2 3
10. HowT oMake? forDesigner ैདྷͷ஌ࣝŋٕज़Λ࢖͏ 1 HTML+CSS+JavaScript ActionScript Titanium Mobile Titanium Mobile PhoneGap PhoneGap Flash/Flex Flash/Flex AIR SDK AIR SDK http://www.phonegap.com/ http://www.adobe.com/products/air/sdk/ http://www.adobe.com/jp/products/flash.html http://www.appcelerator.com/products/titanium-mobile-application-development/
11. HowT oMake? forDesigner αʔϏεŋπʔϧΛ࢖͏ 2 AppInventor Dorokuri http://dorokuri.com/ http://appinventor.googlelabs.com/about/
12. HowT oMake? forDesigner ϓϩάϥϚʔͱ૊Ή 3 ஌ࣝŋٕज़Λ͍͔͢͜ͱ͕Ͱ͖Δ ಘҙ෼໺Λ͍͔͠ɺޮ཰తͳ։ൃΛਐΊΔ͜ͱ͕Ͱ͖Δ ίʔυ ɿϓϩάϥϚʔ σβΠϯɿσβΠφʔ AndroidϚʔέοτ্ͰͷPRૉࡐͷΫΦϦςΟ͕޲্ ߴղ૾౓ӷথ୺຤ͷ૿Ճ ϓϩάϥϚʔ΋σβΠφʔΛ ཉ͍ͯ͠Δ ϓϩάϥϚʔ͚ͩͰ͸100%Πϯετʔϧ͞ΕΔΞϓϦέʔγϣϯΛ࡞੒͢Δ͜ͱ͸ࠔ೉ ཧ
    
    ༝
13. ʮٕज़԰͸ݴ͍׵͑Ε͹ ຐ๏࢖͍ ࿉ۚज़ࢣ ͱ͍͏͜ͱͰ͢ͳɻ ʯ ʯ ʮͦͯ͠σβΠ φʔ͸ Y @ asuhisa Hasegawa
14. ຐ๏࢖͍ Programmer Designer Magic  ࿉ۚज़ࢣ ຐ๏ ͷσβΠϯ ͷσβΠϯ ը໘ UX For Us For User UI / ϏδϡΞϧ ߏ଄ ϓϩάϥϛϯά Programmer Designer
15. ࣄྫ঺հ ΞϓϦ࡞੒ࣄྫ 2
16. CaseStudy ͭ͘ ͬͯΈ·ͨ͠ SUSHIFAN AR / sushima Nail dronjo ωΠϧσβΠϯ / dronjo
17. CaseStudy ΞϓϦ֓ཁ 3Dͷ͓ण͕࢘ ු͔ͿARΞϓϦ େࡕͱ౦ژͰ։ൃ σβΠφʔ ̍ਓ ϓϩάϥϚʔ ̒ਓ اը ̍ ਓ
18. CaseStudy ΩοΧέ Twitter ϊϦ  ੎͍  ଈ࠲ͷϒϨετ
19. CaseStudy πʔϧ ڑ཭ͳͲؔ܎ͳ͍ σβΠϯͷҙࢥڞ༗ Skype Cacoo
20. CaseStudy ஫ҙͨ͠఺ ͓ͨ͢͠΂ʹ ͍͖·͠ ΐʔ ʂ ͑Μ͕Θ ͨ΂͍ͨʂ ͞Μ͍ͤʂ ΠΠωʂ ཧղ͢Δ ৮ΕΔ  ௐ΂Δ  ฉ͘ Communication ର౳ʹݴ͍͋͑Δؔ܎ͷߏங Πϕϯ τΛ࡞Δ ϞνϕʔγϣϯΞοϓ
21. ϦΞϧϘΠε σβΠφʔŊϓϩάϥϚʔʹฉ͍ͯΈ·ͨ͠ 3
22. RealV oice byDesigner ೖΓ΍͍͢ೖΓޱ AppInventor Dorokuri ։ൃऀͱ஡ҿΈ༑ୡʹͳͬͨ͜ͱ σβΠϯͷ෯͕ͻΖ͕ΔՄೳੑ ࡞Ζ͏ͱࢥͬͨΩ οΧέ͸ ʁ
23. RealV oice byDesigner πʔϧ͕๛෋ ϓϩάϥϜ஌͕ࣝ͋·Γͳ͘ͱ΋େৎ෉ ϓϩάϥϚʔͱͷ΍ΓͱΓ ΞΠσΟΞ͕ΞϓϦԽ͢Δ·Ͱͷաఔ ໘ന͍ͱࢥ͏఺͸ ʁ ໘ന͍ͱࢥͬͨ͜ͱ͸ͳ͍ ͜Μͳҙݟ΋ŋŋŋ
24. RealV oice byDesigner ಈ͘΋ͷΛ͙͢ʹ৮ΕΔ ൃ૝Λ͙͢ʹΧλνʹͯ͘͠ΕΔ σβΠφʔ͸ϏδϡΞϧԽ͕͠΍͘͢ͳΔ ੒Ռϕετͱ͸ݶΒͳ͍ ͙͢࡞ͬͨΧλν͕ਖ਼ղͱ͸͍͑ͳ͍ ͢΂ͯΛͻͬ͘Γฦ֮͢ޛ΋ඞཁ ϝ Ϧ ο τ σϝ Ϧ ο τ
25. RealV oice byDesigner ίϛϡχέʔγϣϯ ·ͣ͸ΞΠσΟΞΛग़͢ AndroidͷجຊΛԡ͓͑ͯ͘͞ Ұํ௨ߦͱײͤ͡͞ͳ͍ετϨεϨεͳؔ܎Λͭ͘Δ ϓϩάϥϚʔͱ૊Ή্Ͱͷܦݧଇ σβΠφʔ͕Ϛωʔδϝϯτͨ͠΄͏͕͍͍͔΋ डୗͰ࢓ࣄΛ͢Δ৔߹
26. RealV oice byProgrammer ಛผͳײ৘Λ΋ͨͤͳ͍ ʮAndroid͔ͩΒŋŋŋʯͱ͍͏ݻఆ֓೦Λ࣋ͨͤͳ͍ ஧࣮ͳϏδϡΞϧදݱ σβΠφʔͷҙࢥΛ൓өͤ͞Δ දݱͰ͖ͳ͍৔߹͸୅ସҊΛఏҊ ίʔυͰදݱͰ͖ΔՕॴ͸ίʔυͰ ͨͩ͠ ؾΛ͚͍ͭͯΔ఺͸ʁ
27. RealV oice byProgrammer ϏδϡΞϧԽ σϑΥϧτUI͔ΒσβΠϯ͞ΕͨUI΁ θϩ σβΠφʔ͕͍ͳ͍։ൃͳΜͯߟ͑ΒΕͳ͍ ϝϦ ο τ σϝϦ ο τ
28. RealV oice byProgrammer ख๏ͷཧղ Android UI GuideLine 9Patch Intent ը૾ॲཧͷཧղ ղ૾౓ ύʔπը૾Λ͢΂ͯը૾Խ͠ͳ͍ ମݧͤ͞Δ ੜ׆ʹAndroidΛͳ͡·ͤΔ σόΠεछྨͷ೺Ѳ σβΠφʔͱ૊Ή্Ͱͷܦݧଇ 1 2 3
29. ·ͱΊ ౰ηογϣϯͰ͍͍͍ͨ͜ͱ 4 !
30. Summary ίϛϡχέʔγ ϣ ϯ ຊۀҎ֎ͷωοτϫʔΫ͕Ͱ͖Δ Web੍࡞࣌ʹ΋Ŋ͍͔͞ΕΔ ͢΂ͯಉ͡Ӿཡ؀ڥͱ͸ݶΒͳ͍ʢϞόΠϧʁ PCʁʣ Ӿཡ؀ڥɺߏ଄ʹదͨ͠ UI/ϏδϡΞϧΛσβΠϯ͢Δྗ ؀ڥŊߏ଄ͱσβΠϯͷؔ܎ දݱͷ෯ͷ޿͕Γ Ϣʔβʔɺ ΫϥΠΞϯτʹͱͬͯϕετͳදݱ͸Կ͔ʁ ఏҊ͢Δྗ ڠۀͰಘΒΕΔɹ ͭͷ͜ͱ ɿ 1 2 3 3 3
31. L ink Android UI Guideline http://developer.android.com/guide/practices/ui_guidelines/index.html ౰ηογϣϯͷؔ࿈هࣄ http://keikudo.com/design/3295 http://keikudo.com/design/3384 http://keikudo.com/days/3535 Psd Template http://superdit.com/2011/01/13/20-high-quality-android-device-psd-resources/ Wireframe Stencil http://gliderguns.files.wordpress.com/2010/01/android_wireframe_templates3.pdf 9patchΛ֮͑Α͏ ʂ http://d.hatena.ne.jp/tomorrowkey/20110501/1304245217 Psd Template http://www.teehanlax.com/blog/iphone-gui-psd-30/ http://www.teehanlax.com/blog/ipad-gui-psd/ Wireframe Stencil http://lab.3fl.jp/iphone-idea-sheet-v01/ GUI Stencil http://speckyboy.com/2011/04/26/gui-stencils-wireframing-kits-and-sketching-templates-for-ipad-app-designers/
32. Thank you! Twitter : @keis keis1979@gmail.com Special Thanks* @vvakame @tomorrowkey @mhidaka @tomo_watanabe @patorash @yanzm @akigonn @linen_beau @yanorin ͞ ͊ɺ ָ͍͠ຐ๏Λ ى͜ ͯ͠Έ·ͤΜ͔ ʁ