Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

F5e92f75297fea8f5185ff04d299892a?s=47 keikudo
August 11, 2011

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

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

F5e92f75297fea8f5185ff04d299892a?s=128

keikudo

August 11, 2011
Tweet

More Decks by keikudo

Other Decks in Design

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 ͞ ͊ɺ ָ͍͠ຐ๏Λ ى͜ ͯ͠Έ·ͤΜ͔ ʁ