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

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

Avatar for keikudo keikudo
August 11, 2011

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

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

Avatar for keikudo

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. 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!
  4. Android? more INFOBAR ๛෋ͳछྨ WebσβΠφʔŋதଜ༐ޗࢯ͕ UIΛσβΠϯ ༷ʑͳΩϟϦΞ͔Β޷͖ͳσόΠεΛબ΂Δ iPhoneͱ΄΅ಉ͡ײ֮Ͱ࢖͑Δ WebαΠτ΋αΫαΫӾཡՄೳ simeji

    twicca fxcamera ˞ͨͩ͠ ΠέϝϯʹݶΔ Okusama Nail dronjo ๛෋ͳΞϓϦέʔγϣϯ AndroidϚʔέοτ ʢϞόΠϧˍWebʣ ΑΓμ΢ϯϩʔυ Libraroid
  5. HowT oMake? forDesigner σβΠφʔͷ৔߹ ैདྷͷ஌ࣝŋٕज़Λ࢖͏ HTML / CSS / JavaScript

    / ActionScript Web Service / Tool collaboration αʔϏεŋπʔϧΛ࢖͏ ϓϩάϥϚʔͱ૊Ή 1 2 3
  6. 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/
  7. HowT oMake? forDesigner ϓϩάϥϚʔͱ૊Ή 3 ஌ࣝŋٕज़Λ͍͔͢͜ͱ͕Ͱ͖Δ ಘҙ෼໺Λ͍͔͠ɺޮ཰తͳ։ൃΛਐΊΔ͜ͱ͕Ͱ͖Δ ίʔυ ɿϓϩάϥϚʔ σβΠϯɿσβΠφʔ

    AndroidϚʔέοτ্ͰͷPRૉࡐͷΫΦϦςΟ͕޲্ ߴղ૾౓ӷথ୺຤ͷ૿Ճ ϓϩάϥϚʔ΋σβΠφʔΛ ཉ͍ͯ͠Δ ϓϩάϥϚʔ͚ͩͰ͸100%Πϯετʔϧ͞ΕΔΞϓϦέʔγϣϯΛ࡞੒͢Δ͜ͱ͸ࠔ೉ ཧ༝
  8. ຐ๏࢖͍ Programmer Designer Magic  ࿉ۚज़ࢣ ຐ๏ ͷσβΠϯ ͷσβΠϯ ը໘

    UX For Us For User UI / ϏδϡΞϧ ߏ଄ ϓϩάϥϛϯά Programmer Designer
  9. CaseStudy ஫ҙͨ͠఺ ͓ͨ͢͠΂ʹ ͍͖·͠ ΐʔ ʂ ͑Μ͕Θ ͨ΂͍ͨʂ ͞Μ͍ͤʂ ΠΠωʂ

    ཧղ͢Δ ৮ΕΔ  ௐ΂Δ  ฉ͘ Communication ର౳ʹݴ͍͋͑Δؔ܎ͷߏங Πϕϯ τΛ࡞Δ ϞνϕʔγϣϯΞοϓ
  10. RealV oice byProgrammer ख๏ͷཧղ Android UI GuideLine 9Patch Intent ը૾ॲཧͷཧղ

    ղ૾౓ ύʔπը૾Λ͢΂ͯը૾Խ͠ͳ͍ ମݧͤ͞Δ ੜ׆ʹAndroidΛͳ͡·ͤΔ σόΠεछྨͷ೺Ѳ σβΠφʔͱ૊Ή্Ͱͷܦݧଇ 1 2 3
  11. Summary ίϛϡχέʔγ ϣ ϯ ຊۀҎ֎ͷωοτϫʔΫ͕Ͱ͖Δ Web੍࡞࣌ʹ΋Ŋ͍͔͞ΕΔ ͢΂ͯಉ͡Ӿཡ؀ڥͱ͸ݶΒͳ͍ʢϞόΠϧʁ PCʁʣ Ӿཡ؀ڥɺߏ଄ʹదͨ͠ UI/ϏδϡΞϧΛσβΠϯ͢Δྗ

    ؀ڥŊߏ଄ͱσβΠϯͷؔ܎ දݱͷ෯ͷ޿͕Γ Ϣʔβʔɺ ΫϥΠΞϯτʹͱͬͯϕετͳදݱ͸Կ͔ʁ ఏҊ͢Δྗ ڠۀͰಘΒΕΔɹ ͭͷ͜ͱ ɿ 1 2 3 3 3
  12. 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/
  13. Thank you! Twitter : @keis [email protected] Special Thanks* @vvakame @tomorrowkey

    @mhidaka @tomo_watanabe @patorash @yanzm @akigonn @linen_beau @yanorin ͞ ͊ɺ ָ͍͠ຐ๏Λ ى͜ ͯ͠Έ·ͤΜ͔ ʁ