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
47
もし青森の女子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
34
Nonデザイナーでも覚えられるカラーリング講座
keis1979
0
35
モテアプリを実現するための押さえるべきカラーコーディネート
keis1979
0
30
Other Decks in Design
See All in Design
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.9k
私とデザインの10年
iflection
0
130
AIで加速するアクセシビリティのこれから
magi1125
3
530
#Dubois Challenge 2025: Economics
ajstarks
0
110
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
680
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
170
Kid Cowboy 103
marilutwin
0
260
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.5k
CIRCULAR ECONOMY + SERVICES
jmanooch
0
110
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
130
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
130
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
140
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
GitHub's CSS Performance
jonrohan
1031
460k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Making Projects Easy
brettharned
116
6.3k
Unsuck your backbone
ammeep
671
58k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
It's Worth the Effort
3n
185
28k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Embracing the Ebb and Flow
colly
86
4.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
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 ͞ ͊ɺ ָ͍͠ຐ๏Λ ى͜ ͯ͠Έ·ͤΜ͔ ʁ