【総集編】デザイナーがコードから読み解く、androidアプリのデザインの幅を広げるコツとtips...

Android App Designsデザイナーがコードから読み解く、

Androidアプリのデザインの幅を広げるコツとTips

秋葉ちひろ @tommmmy

約65名約80名約60名約90名

0% 25% 50% 75% 100%

37%26%16%21%

Webデザイン

アプリデザイン

Web開発

アプリ開発

参加者内訳

(1回目と4回目の合計)

63％

0% 25% 50% 75% 100%

37%26%16%21%

Webデザイン

アプリデザイン

Web開発

アプリ開発

参加者内訳

(1回目と4回目の合計)

37％

秋葉ちひろ• デザイナー／アートディレクター• Web系制作全般• Androidアプリデザイン• BaiduでSimejiのプロモーションと開発のフロントエンド実装の一部

@tommmmy

秋葉ちひろ• デザイナーズハックというデザイナー中心のコミュニティ活動

• 7月に大阪から引っ越してきたばかり

@tommmmy

http://designers-hack.net

http://designers-hack.net

デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips

Android App Designs

がんばって作ったデザインが、実装後に残念な結果にならないために

残念になる理由A. デザイナーがAndroidデザインの基礎を理解していない

B. エンジニアがデザインのことをわかっていない

線がない！

影がない！

影がない！

線がない！

落としやすいポイント

結論からいうと…

•線•影•余白

残念になる理由A. デザイナーがAndroidデザインの基礎を理解していない

B. エンジニアがデザインのことをわかっていない

デザイナーにXMLコードを勉強してほしい…？

エンジニアにデザインをわかってほしい…？

コードからつかんだデザインのコツ

デザイナーが知っておくとエンジニアもデザイン実装がしやすくなる！

自分が実装しやすいようにデザイナーに仕込む

どうやってかんたんに…• たぶんデザイナーに「dp」とかいっても受け入れてくれないと思う

• デザイナーさんの身近な言語に翻訳して伝えてみる

デザイナーさんにわかりやすく興味をもってもらうために

裏テーマ

アジェンダ• デザイナーさんにわかりやすく興味をもってもらうための5つのポイント

• 効率的な進め方• Android App Designs アンケート結果

デザイナーさんにわかりやすく興味をもってもらうための5つのポイント

自然に責める

640 px × 1066 px720 px × 1280 px

作成するデザイン案のサイズ

1

640 px × 1066 px720 px × 1280 px1

• xhdpiでつくる- 320dpiといういちばん大きな画面密度- 1dp = 2px なので計算がかんたん• 320dpと360dpの2種類

http://developer.android.com/design/style/metrics-grids.html

640 px × 1066 px720 px × 1280 px1





640 px × 1066 px720 px × 1280 px1






640 px × 1066 px 720 px × 1280 px

デザインを確認する端末によって分けるといいんじゃないかと思う

480 x 800(Double-click or ESC to hide)

640 px × 1066 px332200ddpp

720 x 1280(Double-click or ESC to hide)

720 px × 1280 px336600ddpp

336600ddpp332200ddpp

640 px × 1066 px

少し大きめ

336600ddpp332200ddpp

720 px × 1280 px

少し小さめ

640 px × 1066 px 720 px × 1280 px

640 px × 1066 px720 px × 1280 px

各要素を決める数値

296 px 4の倍数

48dp Rhythm


48dp = 96 px

96 px2






4の倍数2





• ガイドラインでは4の倍数 (dp) = 8の倍数 (px)

4の倍数2

= 大原則• 細かいところはもうひとまわり小さい単位でもいいのでは？

• 2の倍数 (dp) = 4の倍数 (px)

hhddppii

224400ddppii

xxhhddppii

332200ddppii

mmddppii

116600ddppii

1dp2dp3dp4dp5dp

1px2px3px4px5px

1.5px3 px4.5px6 px7.5px

2px4px6px8px10px

hhddppii

224400ddppii

xxhhddppii

332200ddppii

mmddppii

116600ddppii

6dp7dp8dp9dp10dp

6px7px8px9px10px

9 px10.5px12 px13.5px15 px

12px14px16px18px20px

96 px 4の倍数

伸縮幅・固定幅横幅は原則 2種類

どこが伸縮／固定なのかをはっきりさせる

3

• 640pxでつくっていたら、720pxのときにはどこが伸びるのか

• 720pxでつくっていたら、640pxのときにはどこがちぢむのか

• 余白はどちらのときも固定値にする

伸縮幅・固定幅3


伸縮幅・固定幅3





332200ddpp

553333ddpp

336600ddpp

664400ddpp

640 px 720 px

16 px

12 px

4 px

伸縮幅・固定幅

9-patch画像を伸ばすテクニック

4

• 画面サイズはデバイスによってちがい、必ず伸縮を考えなければならない

• 画像が自由自在に伸びるようにする設定

9-patch4

画像を9分割して、四隅は固定、その他を伸びてもいいようにする

伸びても耐えられるデザイン

9-patch4

伸びるところ

このデザインに関しては

結果は同じ

同じ色

大きなグラデーション

同じ色

同じ色

このデザインに関しては

結果はビミョーにちがう

もっこり感がビミョーに変わる

グラデーションは注意！• どこがのびるかを指定しよう• 光り具合などを計算している場合が多いので勝手に変えられるといやだ

9-patch4

9-patchの点までつけてほしいなぁ…

ムフォフォフォ

してもらってうれしいこと• 実際にデバイスで見るとどうのびるかをいっしょに体験する

• Draw9PatchがデザイナーのPCで動くようにする

慣れてきたらPhotoshopでもつくるよ！

えいやー！

矩形 <shape>コードで表現できるグラフィック

5

• コードでかける矩形のことを知っておこう（コードの書き方は知らなくてもよい）

矩形 <shape>5

R : 8px

2px

矩形 <shape>5

あ、残念だ…

• グラデーションの場合、コードで可能なものか、9-patchになるのかを考えておこう

矩形 <shape>5

640×1066・720×1280 (px)1

96px・4の倍数2伸縮幅・固定幅39-patch4矩形 <shape>5

効率的な進め方制作フローの再考

カンペ受け取り待機時

カンペ受け取り時

カンペくん（仮）ワイヤーフレーム

カンペを出す

カンペをみる

0 5 : 3 4

0 5 : 3 4

tomiroidと接続中

tomiroidと接続中

「接続中・・・」など接続に関する状況を表示カウントダウンタイマー（tomiroidと同期）

「終了」が押されるとチャイム音が鳴る

ピピッ

オンマイクでおねがいします！

tomipagostomipagos

0 5 : 3 4

4 0 :プレゼン時間

タイマー

0 0

tomipagosと接続中

カウントダウンタイマー（tomipagosと同期）

プレゼン時間の設定

タイマーのスタート／ストップ

終了時に押すと、チャイム音が鳴る


伝達事項を入力


カンペを出す

終了終了

リセットリセット

スタートスタート

設定設定

送信送信

tomiroidtomiroid

ストップストップカンペをみる

伝達事項を送信すると同時に、ピピッという小さい音を鳴らす

10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす

＜その他＞

0 5 : 3 4


タイマー

0 0









カンペを出す

終了終了



設定設定

送信送信

tomiroidtomiroid




＜その他＞

じゃあ1週間でデザインおねがいね！

おっけー！

0 5 : 3 4


タイマー

0 0









カンペを出す

終了終了



設定設定

送信送信

tomiroidtomiroid




＜その他＞

まだかなぁ…

おっけー！

1週間後

0 5 : 3 4


タイマー

0 0









カンペを出す

終了終了



設定設定

送信送信

tomiroidtomiroid




＜その他＞

まだかなぁ…

ごめーん！！急な対応が入ってしまって…

あと2日くれない？

1週間後

0 5 : 3 4


タイマー

0 0









カンペを出す

終了終了



設定設定

送信送信

tomiroidtomiroid




＜その他＞

わ、わかった…



1週間後

0 5 : 3 4


タイマー

0 0









カンペを出す

終了終了



設定設定

送信送信

tomiroidtomiroid




＜その他＞

できたかな♪



2日後

0 5 : 3 4


タイマー

0 0









カンペを出す

終了終了



設定設定

送信送信

tomiroidtomiroid




＜その他＞

できたかな♪

2日後

できたー！

0 5 : 3 4


タイマー

0 0









カンペを出す

終了終了



設定設定

送信送信

tomiroidtomiroid




＜その他＞

2日後

・・・・・

0 5 : 3 4


タイマー

0 0









カンペを出す

終了終了



設定設定

送信送信

tomiroidtomiroid




＜その他＞

う…これは…もっかいおねがい

2日後

わかったー！

0 5 : 3 4


タイマー

0 0









カンペを出す

終了終了



設定設定

送信送信

tomiroidtomiroid




＜その他＞

う…これは…もっかいおねがい

2日後

0 5 : 3 4


タイマー

0 0









カンペを出す

終了終了



設定設定

送信送信

tomiroidtomiroid




＜その他＞

じ、じかんが…

さらに3日後

できたー！

0 5 : 3 4


タイマー

0 0









カンペを出す

終了終了



設定設定

送信送信

tomiroidtomiroid




＜その他＞

う…がんばる…

さらに3日後

できたー！

従来のやりかた• ワイヤーを決める• デザインをデザイナーにまかせる• なかなかできあがってこない• デザインがないと実装できないよぅ～

従来のやりかた

設計ワイヤー

デザイン

レイアウト実装

テスト

同時進行ワイヤーさえ決まればあとは同時進行

0 5 : 3 4


タイマー

0 0









カンペを出す

終了終了



設定設定

送信送信

tomiroidtomiroid




＜その他＞

0 5 : 3 4


タイマー

0 0









カンペを出す

終了終了



設定設定

送信送信

tomiroidtomiroid




＜その他＞よし、モックつくろ♪

よし、デザインつくろ♪

0 5 : 3 4


タイマー

0 0









カンペを出す

終了終了



設定設定

送信送信

tomiroidtomiroid




＜その他＞

できたー！

1週間後できたー！

0 5 : 3 4


タイマー

0 0









カンペを出す

終了終了



設定設定

送信送信

tomiroidtomiroid




＜その他＞

1週間後

同時進行のやりかた

設計ワイヤーデザイン

実装

テスト

レイアウト

XMLスタイリングを最後にする

ワイヤーさえ変わらなければ最高の効率

デザイン例<shape>を知った上でのデザイン

きれいでシュッとしてるように見えるけど…

ほとんどが<shape>

R : 8px

2px

声おおきくー！




押せるところ盛り上がっている(ように見える)

押せないところすでにへこんでいる

(ように見える)

R : 20px

1px

text shadow

1px

R : 8pxtext shadow

1px

R : 8pxshadow

1px

R : 8px

＃本当はノイズは上からかぶさっているが、　わかりやすいように下から出しています。

きれいにデザインをするためには

• 数少ない表現方法でも、知っていればそれなりに組み合わせてきれいなデザインを作れる

• 残念になるのは両方が勉強不足？

Android App Designsアンケート日々の見えない声

デザイナー → エンジニア


Androidのアプリの開発経験はないのですが、どちらの立場も経験したものとして、デザイナーは何をしたいのか、エンジニアは何ができるのか、お互い手の内を見せるしかないと思うのだけど、どうしたらお互いうまく伝えられるのかわからない。


1px 1dp とても大事にデザインしているのと、ちゃんと 1px 1dp 1line 色形すべてに意味があるので、実装が難しい場合はちゃんと対策を考えますので何も言わずに勝手に変更しないでください(>_<)相談してください(>_<)

エンジニア → デザイナー


デザインに時間がかかりすぎて、実装する時間が短いよ・・・。

背景になる画像に文字入れられると本当に困る。。。背景はある程度の伸縮に耐えられるもの文字やオブジェクト等を上に載せるなら、別の画像で用意して欲しいです。。。毎回、画像を作り直してもらうのが申し訳なくて・・・


切り出したそざいがざんねんだった。


多分、デザイン面で言ってるエンジニアの「できない」は時間的に無理って事で、Androidの仕様上無理ってのはそうそう無いです。（最終的にはUI丸々自作という手も・・・）


→つづく

エンジニアの「できない」は信じないほうが良いです。でも「できる」って言うと仕事増えるんで理由つけてやらない方向に持って行きたいんです。


いつもお世話になってます！


デザイナー「やっぱりここを変えよう」↓HTML + CSSを修正↓デザイナー「終わったー」↓プログラマー「あ、デザイン変わってる」


Webの場合

→つづく

デザイナー「やっぱりここを変えよう」↓デザイナー「ここを変えたいから、修正しといて」↓プログラマー「え?」→xml修正→「終わったー」↓デザイナー「余白が違う」↓プログラマー「え?」


Androidの場合

→つづく

結論：xmlを書いて欲しい


• Androidのデザインを頼むとiPhoneっぽくデザインするのﾔﾒﾃ(´・ω・｀)• もっとAndroidのデザインを勉強してほしい。• 同種の画像を複数サイズで作成依頼時に嫌な顔しないで欲しい。• Androidも好きになってください。


→つづく

Android好きなデザイナさんだと、Androidのデベロッパーサイトを見て色々勉強してくれてるけど、そうでない場合や、エンジニア向けガイドラインを見てもらうのは無理がある場合もあります。そういった場合でもデザイナさん向けに見てもらえるようなちょっとした資料があるといいんだけど。ﾁﾗｯ


for your happy Android Life!Thank you so much!

【総集編】デザイナーがコードから読み解く、androidアプリのデザインの幅を広げるコツとtips...

Documents