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
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
Yumika Yamada Portfolio
yumii
0
770
Dark mode : comment rejoindre le côté sombre ?
goetter
1
100
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
140
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
300
NAHO SHIMONO_Portfolio2025
nahohphp
0
900
sachi_y_portfolio
sachi337
0
320
AIで加速するアクセシビリティのこれから
magi1125
3
570
株式会社Muture_ソーシャル推進事業
muture
PRO
0
100
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
480
アクセシビリティに取り組むメリット
magi1125
1
190
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.7k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Docker and Python
trallard
44
3.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
The Cult of Friendly URLs
andyhume
79
6.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Statistics for Hackers
jakevdp
799
220k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
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 ͞ ͊ɺ ָ͍͠ຐ๏Λ ى͜ ͯ͠Έ·ͤΜ͔ ʁ