SlideShare a Scribd company logo
1 of 39
Download to read offline
実践!
Androidアプリを
  カッコ良くする
2012/10/20 adamrocker @ABC2012 S市
自己紹介
足立昌彦 (@adamrocker)
バイドゥ株式会社

・Simejiの開発
・Google Developer Expert (Android)
・日経ソフトウェア/Android Maniax連載
・デザイナーがコードから読み解く、
 Androidアプリのデザインの幅を広げるコツとTips

                     好き!!
                ジョジョ大
             大の
アジェンダ


                        g
実践!Androidアプリをカッコ良くする

・Android Designを読んで
・実践する

  【注意】
  本セッションでは所謂デザイナーの
  技術/知識がない人むけです。
はじめに




  http://goo.gl/BkSjx


すでに発表資料公開してます!
はじめに
【ソース】https://github.com/adamrocker/abc2012f




     すでに資料公開してます!
Android Design




                             d
http://developer.android.com/design/index.html
Android Design



     設計指針
アンドロイドの様式
 よくあるパターン
準備されているもの
参考にする部分
参考にする部分



   i
   たったの3つ
参考にする部分




i
ActionBar Pattern
Why ActionBar?




画面サイズに応じて自動でイイ感じにしてくれる
Why ActionBar?




画面サイズに応じて自動でイイ感じにしてくれる
Why ActionBar?




画面サイズに応じて自動でイイ感じにしてくれる
Why ActionBar?




画面サイズに応じて自動でイイ感じにしてくれる
Pure Android
Compatibility
ActionBar Sherlock




   http://actionbarsherlock.com
参考にする部分




     i
Metric(寸法)
参考にする部分




 i
Typography(文字)
DEMOアプリ




          f
Metric
Metric
Metric
Metric
Typography
Typography
Typography
Typography
One More Thing




      i
Color(色)
Color
Color
Color
Color
まとめ

・Android Designを読んで
・実践した
【知見】
Android Designに沿って余白
(Metric)や文字(Typography)、色
(Color)を決めたらカッコ良くなった。

【成果物】
https://github.com/adamrocker/abc2012f
おわり
ありがとうございました

More Related Content

Viewers also liked

ボクスケ 3Dプリントできる3Dデータ作成Android/iOSアプリ
ボクスケ 3Dプリントできる3Dデータ作成Android/iOSアプリボクスケ 3Dプリントできる3Dデータ作成Android/iOSアプリ
ボクスケ 3Dプリントできる3Dデータ作成Android/iOSアプリadamrocker
 
WordPress REST API とリアクティブプログラミング
WordPress REST API とリアクティブプログラミングWordPress REST API とリアクティブプログラミング
WordPress REST API とリアクティブプログラミングHiromasa Tanaka
 
Vue.js 0.12 to 2.0.0 gotanda.js #5
Vue.js 0.12 to 2.0.0   gotanda.js #5Vue.js 0.12 to 2.0.0   gotanda.js #5
Vue.js 0.12 to 2.0.0 gotanda.js #5Hayato Koriyama
 
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVMVue.jsでさくっとMVVM
Vue.jsでさくっとMVVMSatoshi Anai
 
Electron, databases, and RxDB
Electron, databases, and RxDBElectron, databases, and RxDB
Electron, databases, and RxDBBen Gotow
 
droidgirls Recyclerview
droidgirls Recyclerviewdroidgirls Recyclerview
droidgirls RecyclerviewYuki Anzai
 
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法Hiromasa Tanaka
 

Viewers also liked (8)

ボクスケ 3Dプリントできる3Dデータ作成Android/iOSアプリ
ボクスケ 3Dプリントできる3Dデータ作成Android/iOSアプリボクスケ 3Dプリントできる3Dデータ作成Android/iOSアプリ
ボクスケ 3Dプリントできる3Dデータ作成Android/iOSアプリ
 
WordPress REST API とリアクティブプログラミング
WordPress REST API とリアクティブプログラミングWordPress REST API とリアクティブプログラミング
WordPress REST API とリアクティブプログラミング
 
Vue.js ハンズオン資料
Vue.js ハンズオン資料Vue.js ハンズオン資料
Vue.js ハンズオン資料
 
Vue.js 0.12 to 2.0.0 gotanda.js #5
Vue.js 0.12 to 2.0.0   gotanda.js #5Vue.js 0.12 to 2.0.0   gotanda.js #5
Vue.js 0.12 to 2.0.0 gotanda.js #5
 
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVMVue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
 
Electron, databases, and RxDB
Electron, databases, and RxDBElectron, databases, and RxDB
Electron, databases, and RxDB
 
droidgirls Recyclerview
droidgirls Recyclerviewdroidgirls Recyclerview
droidgirls Recyclerview
 
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
 

Similar to Abc2012f adamrocker

Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜Chihiro Tomita
 
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザインNobuya Sato
 
HTML5/JavaScriptで作るAndroidアプリ開発seminar
HTML5/JavaScriptで作るAndroidアプリ開発seminarHTML5/JavaScriptで作るAndroidアプリ開発seminar
HTML5/JavaScriptで作るAndroidアプリ開発seminarkujirahand kujira
 
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろこれだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろschoowebcampus
 
入門者用Android Studio Hands on
入門者用Android Studio Hands on入門者用Android Studio Hands on
入門者用Android Studio Hands onShintaro Yamasaki
 
Android SDK Toolsのおさらい
Android SDK ToolsのおさらいAndroid SDK Toolsのおさらい
Android SDK ToolsのおさらいTomoki YAMASHITA
 
AdobeEdge系アプリ触ってみた
AdobeEdge系アプリ触ってみたAdobeEdge系アプリ触ってみた
AdobeEdge系アプリ触ってみたTakayuki Yagi
 
あの手この手で楽して覚えるAndroid開発Tips
あの手この手で楽して覚えるAndroid開発Tipsあの手この手で楽して覚えるAndroid開発Tips
あの手この手で楽して覚えるAndroid開発TipsYoshihiro Wada
 
Android Studio 2.2の紹介@Google I/O 2016東京報告会
Android Studio 2.2の紹介@Google I/O 2016東京報告会Android Studio 2.2の紹介@Google I/O 2016東京報告会
Android Studio 2.2の紹介@Google I/O 2016東京報告会mokelab
 
[ABC2016S]Android Wear アプリ開発入門
[ABC2016S]Android Wear アプリ開発入門[ABC2016S]Android Wear アプリ開発入門
[ABC2016S]Android Wear アプリ開発入門Kenichi Kambara
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるためにMiho Yamamori
 
Devsumi2013 15-C-1 実践!スマホアプリのマネタイズ!! ~マーケット把握術と iPhone&Androidプログラミングテクニック~
Devsumi2013 15-C-1 実践!スマホアプリのマネタイズ!! ~マーケット把握術と iPhone&Androidプログラミングテクニック~Devsumi2013 15-C-1 実践!スマホアプリのマネタイズ!! ~マーケット把握術と iPhone&Androidプログラミングテクニック~
Devsumi2013 15-C-1 実践!スマホアプリのマネタイズ!! ~マーケット把握術と iPhone&Androidプログラミングテクニック~Masahiro Hidaka
 
デザイン領域へiOS / Android開発
デザイン領域へiOS / Android開発デザイン領域へiOS / Android開発
デザイン領域へiOS / Android開発baroqueworksdev
 
AndroidのUI設計で押さえておきたいポイント
AndroidのUI設計で押さえておきたいポイントAndroidのUI設計で押さえておきたいポイント
AndroidのUI設計で押さえておきたいポイントTakayuki Inoue
 
プロ文.com 勉強会 Phase 1
プロ文.com 勉強会 Phase 1プロ文.com 勉強会 Phase 1
プロ文.com 勉強会 Phase 1Hiroki Toyokawa
 
Androidアプリ開発を楽にするために
Androidアプリ開発を楽にするためにAndroidアプリ開発を楽にするために
Androidアプリ開発を楽にするためにShuichi Takaya
 
Androidをやっただけで iOSアプリもできればいいのに 〜MOEという選択〜
Androidをやっただけで iOSアプリもできればいいのに 〜MOEという選択〜Androidをやっただけで iOSアプリもできればいいのに 〜MOEという選択〜
Androidをやっただけで iOSアプリもできればいいのに 〜MOEという選択〜Saiki Iijima
 
Android技術者認定試験を受けてみよう!
Android技術者認定試験を受けてみよう!Android技術者認定試験を受けてみよう!
Android技術者認定試験を受けてみよう!Akira SUGIMOTO
 
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaHTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaKeisuke Todoroki
 

Similar to Abc2012f adamrocker (20)

Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
 
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
 
HTML5/JavaScriptで作るAndroidアプリ開発seminar
HTML5/JavaScriptで作るAndroidアプリ開発seminarHTML5/JavaScriptで作るAndroidアプリ開発seminar
HTML5/JavaScriptで作るAndroidアプリ開発seminar
 
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろこれだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
 
入門者用Android Studio Hands on
入門者用Android Studio Hands on入門者用Android Studio Hands on
入門者用Android Studio Hands on
 
Android SDK Toolsのおさらい
Android SDK ToolsのおさらいAndroid SDK Toolsのおさらい
Android SDK Toolsのおさらい
 
AdobeEdge系アプリ触ってみた
AdobeEdge系アプリ触ってみたAdobeEdge系アプリ触ってみた
AdobeEdge系アプリ触ってみた
 
あの手この手で楽して覚えるAndroid開発Tips
あの手この手で楽して覚えるAndroid開発Tipsあの手この手で楽して覚えるAndroid開発Tips
あの手この手で楽して覚えるAndroid開発Tips
 
Android Studio 2.2の紹介@Google I/O 2016東京報告会
Android Studio 2.2の紹介@Google I/O 2016東京報告会Android Studio 2.2の紹介@Google I/O 2016東京報告会
Android Studio 2.2の紹介@Google I/O 2016東京報告会
 
[ABC2016S]Android Wear アプリ開発入門
[ABC2016S]Android Wear アプリ開発入門[ABC2016S]Android Wear アプリ開発入門
[ABC2016S]Android Wear アプリ開発入門
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
 
Devsumi2013 15-C-1 実践!スマホアプリのマネタイズ!! ~マーケット把握術と iPhone&Androidプログラミングテクニック~
Devsumi2013 15-C-1 実践!スマホアプリのマネタイズ!! ~マーケット把握術と iPhone&Androidプログラミングテクニック~Devsumi2013 15-C-1 実践!スマホアプリのマネタイズ!! ~マーケット把握術と iPhone&Androidプログラミングテクニック~
Devsumi2013 15-C-1 実践!スマホアプリのマネタイズ!! ~マーケット把握術と iPhone&Androidプログラミングテクニック~
 
デザイン領域へiOS / Android開発
デザイン領域へiOS / Android開発デザイン領域へiOS / Android開発
デザイン領域へiOS / Android開発
 
AndroidのUI設計で押さえておきたいポイント
AndroidのUI設計で押さえておきたいポイントAndroidのUI設計で押さえておきたいポイント
AndroidのUI設計で押さえておきたいポイント
 
プロ文.com 勉強会 Phase 1
プロ文.com 勉強会 Phase 1プロ文.com 勉強会 Phase 1
プロ文.com 勉強会 Phase 1
 
Androidアプリ開発を楽にするために
Androidアプリ開発を楽にするためにAndroidアプリ開発を楽にするために
Androidアプリ開発を楽にするために
 
App shortcuts
App shortcutsApp shortcuts
App shortcuts
 
Androidをやっただけで iOSアプリもできればいいのに 〜MOEという選択〜
Androidをやっただけで iOSアプリもできればいいのに 〜MOEという選択〜Androidをやっただけで iOSアプリもできればいいのに 〜MOEという選択〜
Androidをやっただけで iOSアプリもできればいいのに 〜MOEという選択〜
 
Android技術者認定試験を受けてみよう!
Android技術者認定試験を受けてみよう!Android技術者認定試験を受けてみよう!
Android技術者認定試験を受けてみよう!
 
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaHTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
 

Abc2012f adamrocker