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
もし青森の女子webデザイナーがAndroidと出会ったら。
Search
keikudo
August 11, 2011
Design
0
55
もし青森の女子webデザイナーがAndroidと出会ったら。
CSS Nite in AOMORI Vol.5(2011年8月開催) にて講演した内容スライドです。
keikudo
August 11, 2011
Tweet
Share
More Decks by keikudo
See All by keikudo
女子デザイナーのライフサイクルシフトチェンジ
keis1979
0
39
Nonデザイナーでも覚えられるカラーリング講座
keis1979
0
37
モテアプリを実現するための押さえるべきカラーコーディネート
keis1979
0
32
Other Decks in Design
See All in Design
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.8k
decksh object reference
ajstarks
2
1.3k
Findyのプロデチームの 歩みとこれから
satty9556
0
300
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
220
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
560
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
2.9k
Installing and Running decksh/pdfdeck
ajstarks
1
860
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
360
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
420
Memory Man v3 (WIP)
storybychad
PRO
0
2.7k
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
390
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Mobile First: as difficult as doing things right
swwweet
224
10k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
The Language of Interfaces
destraynor
162
25k
Speed Design
sergeychernyshev
32
1.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
GraphQLとの向き合い方2022年版
quramy
49
14k
Designing for Performance
lara
610
69k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Transcript
͠੨ ͷ Web Android σβ ঁࢠ Πφʔ͕ ग़ձͬ ͨ
Βɻ ͱ ͠੨ ͷ Web Android σβ ঁࢠ Πφʔ͕ ग़ձͬ ͨ Βɻ ͱ hello,world!
Profile ͘Ͳ͏͚͍͜ ϑϦʔϥϯε ɾ σβΠφʔɺ ΠϥετϨʔλʔ ੨ݝࠇੴࢢग़ ࢁޱݝࡏॅ CSS Nite
in AOMORI ࣮ߦҕһใ Androidঁࢠ෦ϝϯόʔ @keis Works http://bleu-note.com/
A genda Androidͬͯʁ Androidͷجຊࣝͱಈ 1 ࣄྫհ ΞϓϦ࡞ࣄྫ 2 ϦΞϧϘΠε σβΠφʔŊϓϩάϥϚʔʹฉ͍ͯΈ·ͨ͠
3 ·ͱΊ ηογϣϯͰ͍͍͍ͨ͜ͱ 4 ? !
Androidͬͯʁ Androidͷجຊࣝͱಈ 1 ?
Question εϚʔ τ ϑΥ ϯˍλϒϨο τɺ ͍࣋ͬͯ·͔͢ ʁ iPhoneŋAndroidɺ ͲͪΒΛ
࣋ͬ ͍ͯ·͔͢ ʁ
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!
Android? more INFOBAR ๛ͳछྨ WebσβΠφʔŋதଜ༐ޗࢯ͕ UIΛσβΠϯ ༷ʑͳΩϟϦΞ͔Β͖ͳσόΠεΛબΔ iPhoneͱ΄΅ಉ͡ײ֮Ͱ͑Δ WebαΠταΫαΫӾཡՄೳ simeji
twicca fxcamera ˞ͨͩ͠ ΠέϝϯʹݶΔ Okusama Nail dronjo ๛ͳΞϓϦέʔγϣϯ AndroidϚʔέοτ ʢϞόΠϧˍWebʣ ΑΓμϯϩʔυ Libraroid
HowT oMake? forP rogrammer Ͱ։ൃ ϓϩάϥϚʔͷ߹ Java http://developer.android.com/sdk/index.html http://www.eclipse.org/downloads/packages/eclipse-ide-java-developers/indigor
HowT oMake? forDesigner σβΠφʔͷ߹ ैདྷͷࣝŋٕज़Λ͏ HTML / CSS / JavaScript
/ ActionScript Web Service / Tool collaboration αʔϏεŋπʔϧΛ͏ ϓϩάϥϚʔͱΉ 1 2 3
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/
HowT oMake? forDesigner αʔϏεŋπʔϧΛ͏ 2 AppInventor Dorokuri http://dorokuri.com/ http://appinventor.googlelabs.com/about/
HowT oMake? forDesigner ϓϩάϥϚʔͱΉ 3 ࣝŋٕज़Λ͍͔͢͜ͱ͕Ͱ͖Δ ಘҙΛ͍͔͠ɺޮతͳ։ൃΛਐΊΔ͜ͱ͕Ͱ͖Δ ίʔυ ɿϓϩάϥϚʔ σβΠϯɿσβΠφʔ
AndroidϚʔέοτ্ͰͷPRૉࡐͷΫΦϦςΟ্͕ ߴղ૾ӷথͷ૿Ճ ϓϩάϥϚʔσβΠφʔΛ ཉ͍ͯ͠Δ ϓϩάϥϚʔ͚ͩͰ100%Πϯετʔϧ͞ΕΔΞϓϦέʔγϣϯΛ࡞͢Δ͜ͱࠔ ཧ༝
ʮٕज़ݴ͍͑Ε ຐ๏͍ ࿉ۚज़ࢣ ͱ͍͏͜ͱͰ͢ͳɻ ʯ ʯ ʮͦͯ͠σβΠ φʔ Y @
asuhisa Hasegawa
ຐ๏͍ Programmer Designer Magic ࿉ۚज़ࢣ ຐ๏ ͷσβΠϯ ͷσβΠϯ ը໘
UX For Us For User UI / ϏδϡΞϧ ߏ ϓϩάϥϛϯά Programmer Designer
ࣄྫհ ΞϓϦ࡞ࣄྫ 2
CaseStudy ͭ͘ ͬͯΈ·ͨ͠ SUSHIFAN AR / sushima Nail dronjo ωΠϧσβΠϯ
/ dronjo
CaseStudy ΞϓϦ֓ཁ 3Dͷ͓ण͕࢘ ු͔ͿARΞϓϦ େࡕͱ౦ژͰ։ൃ σβΠφʔ ̍ਓ ϓϩάϥϚʔ ̒ਓ اը
̍ ਓ
CaseStudy ΩοΧέ Twitter ϊϦ ͍ ଈ࠲ͷϒϨετ
CaseStudy πʔϧ ڑͳͲؔͳ͍ σβΠϯͷҙࢥڞ༗ Skype Cacoo
CaseStudy ҙͨ͠ ͓ͨ͢͠ʹ ͍͖·͠ ΐʔ ʂ ͑Μ͕Θ ͍ͨͨʂ ͞Μ͍ͤʂ ΠΠωʂ
ཧղ͢Δ ৮ΕΔ ௐΔ ฉ͘ Communication ରʹݴ͍͋͑Δؔͷߏங Πϕϯ τΛ࡞Δ ϞνϕʔγϣϯΞοϓ
ϦΞϧϘΠε σβΠφʔŊϓϩάϥϚʔʹฉ͍ͯΈ·ͨ͠ 3
RealV oice byDesigner ೖΓ͍͢ೖΓޱ AppInventor Dorokuri ։ൃऀͱҿΈ༑ୡʹͳͬͨ͜ͱ σβΠϯͷ෯͕ͻΖ͕ΔՄೳੑ ࡞Ζ͏ͱࢥͬͨΩ οΧέ
ʁ
RealV oice byDesigner πʔϧ͕๛ ϓϩάϥϜ͕ࣝ͋·Γͳ͘ͱେৎ ϓϩάϥϚʔͱͷΓͱΓ ΞΠσΟΞ͕ΞϓϦԽ͢Δ·Ͱͷաఔ ໘ന͍ͱࢥ͏ ʁ ໘ന͍ͱࢥͬͨ͜ͱͳ͍
͜Μͳҙݟŋŋŋ
RealV oice byDesigner ಈ͘ͷΛ͙͢ʹ৮ΕΔ ൃΛ͙͢ʹΧλνʹͯ͘͠ΕΔ σβΠφʔϏδϡΞϧԽ͕͘͢͠ͳΔ ՌϕετͱݶΒͳ͍ ͙͢࡞ͬͨΧλν͕ਖ਼ղͱ͍͑ͳ͍ ͯ͢Λͻͬ͘Γฦ֮͢ޛඞཁ ϝ
Ϧ ο τ σϝ Ϧ ο τ
RealV oice byDesigner ίϛϡχέʔγϣϯ ·ͣΞΠσΟΞΛग़͢ AndroidͷجຊΛԡ͓͑ͯ͘͞ Ұํ௨ߦͱײͤ͡͞ͳ͍ετϨεϨεͳؔΛͭ͘Δ ϓϩάϥϚʔͱΉ্Ͱͷܦݧଇ σβΠφʔ͕Ϛωʔδϝϯτͨ͠΄͏͕͍͍͔ डୗͰࣄΛ͢Δ߹
RealV oice byProgrammer ಛผͳײΛͨͤͳ͍ ʮAndroid͔ͩΒŋŋŋʯͱ͍͏ݻఆ֓೦Λ࣋ͨͤͳ͍ ࣮ͳϏδϡΞϧදݱ σβΠφʔͷҙࢥΛөͤ͞Δ දݱͰ͖ͳ͍߹ସҊΛఏҊ ίʔυͰදݱͰ͖ΔՕॴίʔυͰ ͨͩ͠
ؾΛ͚͍ͭͯΔʁ
RealV oice byProgrammer ϏδϡΞϧԽ σϑΥϧτUI͔ΒσβΠϯ͞ΕͨUI θϩ σβΠφʔ͕͍ͳ͍։ൃͳΜͯߟ͑ΒΕͳ͍ ϝϦ ο τ
σϝϦ ο τ
RealV oice byProgrammer ख๏ͷཧղ Android UI GuideLine 9Patch Intent ը૾ॲཧͷཧղ
ղ૾ ύʔπը૾Λͯ͢ը૾Խ͠ͳ͍ ମݧͤ͞Δ ੜ׆ʹAndroidΛͳ͡·ͤΔ σόΠεछྨͷѲ σβΠφʔͱΉ্Ͱͷܦݧଇ 1 2 3
·ͱΊ ηογϣϯͰ͍͍͍ͨ͜ͱ 4 !
Summary ίϛϡχέʔγ ϣ ϯ ຊۀҎ֎ͷωοτϫʔΫ͕Ͱ͖Δ Web੍࡞࣌ʹŊ͍͔͞ΕΔ ͯ͢ಉ͡ӾཡڥͱݶΒͳ͍ʢϞόΠϧʁ PCʁʣ Ӿཡڥɺߏʹదͨ͠ UI/ϏδϡΞϧΛσβΠϯ͢Δྗ
ڥŊߏͱσβΠϯͷؔ දݱͷ෯ͷ͕Γ Ϣʔβʔɺ ΫϥΠΞϯτʹͱͬͯϕετͳදݱԿ͔ʁ ఏҊ͢Δྗ ڠۀͰಘΒΕΔɹ ͭͷ͜ͱ ɿ 1 2 3 3 3
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/
Thank you! Twitter : @keis
[email protected]
Special Thanks* @vvakame @tomorrowkey
@mhidaka @tomo_watanabe @patorash @yanzm @akigonn @linen_beau @yanorin ͞ ͊ɺ ָ͍͠ຐ๏Λ ى͜ ͯ͠Έ·ͤΜ͔ ʁ