導入・9-patch 2012.9.6 STARTUP Base Campにて

1. ハッシュタグ
デザイナーが ##aaaaddeessiiggnnss
コードから読み解く、
AAnnddrrooiiddアプリの
デザインの幅を広げるコツと
TTiippss
第11回：導入�・99--ppaattcchh
@@SSTTAARRTTUUPP BBaassee CCaammpp
22001122..99..66

2. ハッシュタグ
##aaaaddeessiiggnnss
aassaammiieeeeee77 ttoommmmmmmmyy aaddaammrroocckkeerr

3. ハッシュタグ
##aaaaddeessiiggnnss

4. ハッシュタグ
##aaaaddeessiiggnnss
がんばって作ったデザインが、
実装後に残念な結果にならないために

5. デザイナーが
コードから読み解く、
AAnnddrrooiiddアプリの
デザインの幅を広げる
コツとTTiippss
@@ttoommmmmmmmyy
秋葉ちひろ／BBaaiidduu JJaappaann

6. 秋葉ちひろ
•･ @@ttoommmmmmmmyy
•･ デザイナー／アートディレクター
•･ WWeebb系・アプリ系
•･ BBaaiidduuでSSiimmeejjiiの開発のフロント
エンドの一部

7. なぜ残念になるのか？
エンジニアまかせだから
•･ デザイナーが実装のことをわかっ
ていないから
•･ 実装の指示が出せない

8. なぜ残念になるのか？
エンジニアまかせだから
•･ エンジニアはデザインのことをわ
からずに実装しているから

9. 実装のことをわかっていたら、
組みやすい、理にかなった
デザインができる

10. Webサイトの場合 Androidアプリの場合
Visual Design Visual Design
HTML
Coding Coding XML
CSS
System System

11. Webサイトの場合 Androidアプリの場合
Visual Design Visual Design
HTML
Coding Coding XML
CSS
System System

12. この勉強会のポイント
XXMMLLの実装
•･ ちょっとでも知識があれば、実装可
能かどうかがわかる
•･ 110000％できなくてもいいので、
ちょっとでも知っておこう

13. http://itpro.nikkeibp.co.jp/article/COLUMN/20120113/378483/

15. 背景画像
影

16. アナログ感
カスタムUUII

17. ダイアログ

18. 11.. 導入�
22.. 99--ppaattcchh

19. 11.. 導入�
22.. 99--ppaattcchh

20. 11.. 導入�
•･ AAnnddrrooiiddアプリを作るには
-- デザイナーとってむずかしくないの？
•･ 画面解像度・画面サイズ
-- デザインファイルはどの大きさで作る？
-- 解像度ちがいのデザインはどうやって作る
の？

21. 11.. 導入�
•･ AAnnddrrooiiddアプリのデザインで
気をつけること
•･ アプリの軽量化も考える

22. 11.. 導入�
AAnnddrrooiiddアプリを作るには

23. Eclipse Android SDK

24. Eclipse Android SDK

26. 白くすればこわくない！

27. 茶色とかもあるよ！
え、そういう問題じゃない？

28. 11..導
入�
AAnnddrrooiiddアプリ
なにでできているの？
•･ レイアウトまわり XXMMLL
•･ ロジック JJAAVVAA

29. <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/
android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout style="@style/commonList" >
<LinearLayout style="@style/commonText" >
<TextView
style="@style/listText"
android:text="@string/base_sounds" />
<TextView
style="@style/listSubText"
android:text="デフォルト" />
</LinearLayout>
<ImageView style="@style/listDialog" />
</LinearLayout>
<LinearLayout style="@style/commonList" >
<LinearLayout style="@style/commonText" >
<TextView
style="@style/listText"
android:text="@string/base_vibe" />
</LinearLayout>
<CheckBox style="@style/checkBox" />
</LinearLayout>
<LinearLayout style="@style/commonList" >
<LinearLayout style="@style/commonText" >
<TextView
style="@style/listText"

30. <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/
android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout>
<LinearLayout style="@style/commonList" >
ddiivv
<LinearLayout style="@style/commonText" >
<TextView
<TextView /> hh,, pp
style="@style/listText"
android:text="@string/base_sounds" />
<TextView
<ImageView /> iimmgg
style="@style/listSubText"
android:text="デフォルト" />
<CheckBox />
</LinearLayout>
iinnppuutt ttyyppee==cchheecckkbbooxx
<ImageView style="@style/listDialog" />
</LinearLayout>
<RadioButton /> iinnppuutt ttyyppee==rraaddiioo
<LinearLayout style="@style/commonList" >
<LinearLayout style="@style/commonText" >
<TextView
<button /> iinnppuutt ttyyppee==bbuuttttoonn
style="@style/listText"
android:text="@string/base_vibe" />
</LinearLayout>
</LinearLayout>
<CheckBox style="@style/checkBox" />
</LinearLayout>
<LinearLayout style="@style/commonList" >
<LinearLayout style="@style/commonText" >
<TextView
style="@style/listText"

31. res
drawable-xhdpi
drawable-hdpi
drawable-mdpi
iimmgg
drawable-ldpi
layouts
JJAAVVAA
main.xml hhttmmll
構造
values
strings.xml ccssss
飾�り

32. Q. デザイナーにとって
むずかしくないの？
A. 環境構築さえできれば
なんとかなります

33. 11.. 導入�
画面解像度・画面サイズ

34. 11..導
入�
AAnnddrrooiiddアプリの宿命
なぜこんなに苦労する
•･ 画面解像度がバラバラ
•･ 画面サイズも
まったく統一されない

35. 11..導
入�
iiPPhhoonneeの場合
ddeennssiittyy ddeennssiittyy ssiizzee((ppxx))
ggrroouupp rraattiioo
iiPPhhoonnee 33GG 116600 11 332200xx448800
iiPPhhoonnee 33GGSS 116600 11 332200xx448800
iiPPhhoonnee 44 332200 22 664400xx996600
iiPPhhoonnee 44SS 332200 22 664400xx996600

36. 11..導
入�
AAnnddrrooiiddの場合
ddeennssiittyy ddeennssiittyy ssiizzee((ppxx))
ggrroouupp rraattiioo
ひと昔前 116600 11 332200xx448800
XXppeerriiaa aarrcc 224400 11..55 448800xx885544
IINNFFOOBBAARR
AA0011 224400 11..55 556600xx996600
GGaallaaxxyy
SS IIII 224400 11..55 448800xx880000
GGaallaaxxyy
NNeexxuuss 332200 22 772200xx11228800

37. 11..導
入�
116600ddppii 224400ddppii 332200ddppii
mmddppii hhddppii xxhhddppii
11 11..55 22
XXppeerriiaa aarrcc GGaallaaxxyy NNeexxuuss
IINNFFOOBBAARR AA0011 GGaallaaxxyy NNoottee
GGaallaaxxyy SS IIII
http://myakura.github.com/n/density.html

38. Q. デザインファイルは
どの大きさで作る？
A.
xxhhddppiiで作る
((772200xx11228800))

39. 448800xx880000 772200xx11228800
xx00..7755
11..55 hhddppii xxhhddppii 22
xx11..3333
バッチ処理も可能。
ピクセルパーフェクトにこ
だわる場合は少々の手直し
が必要。
同じ画像を使うことももち
ろんできる。
できるが、Webのときと同
じことが起こる。

40. 448800xx880000 772200xx11228800
hhddppii xxhhddppii
•･ 画像のサイズ
を指定しない
と大きく表示
される

41. 448800xx880000 772200xx11228800
hhddppii xxhhddppii
•･ 画像がねむい
•･ RReettiinnaa DDiissppllaayy
でWWeebbサイトを
見た感じ

42. 448800xx880000 772200xx11228800
hhddppii xxhhddppii
微調整

43. Q. 解像度ちがいのデザイン
はどうやって作るの？
A. 大きいものから作ると
楽ちん！（ただし要調整）

44. 11.. 導入�
AAnnddrrooiiddアプリのデザインで
気をつけること

45. 11..導
入�
iiPPhhoonneeとAAnnddrrooiiddの違い
iiPPhhoonnee AAnnddrrooiidd
画面サイズ 22種類 星の数
画面の縦横比 同じ 機種によってちがう
フォント ヒラギノ 機種によってちがう

46. 11..導
入�
気をつけること
•･ 文字により変化する部分がある
（フォントが機種依存だから）
•･ 画面サイズが大きくなっても伸縮
するようにする
（画面サイズが機種依存だから）

47. Q.
AAnnddrrooiiddアプリデザインを
考えるときに気をつけるこ
とは？
A.
画面サイズが多少変化し
ても耐えられるデザイン
にすること

52. 余白をじゃっかん大小して
自然に組めるデザインが、
いちばんうれしい！

53. 11.. 導入�
アプリの軽量化も
考える

54. 11..導
入�
アプリの軽量化
•･ 重いのは画像です
•･ コードでかけるものはコードで
かこう（→22回目にて詳しく）

55. この勉強会のポイント
XXMMLLの実装
•･ ちょっとでも知識があれば、実装可
能かどうかがわかる
•･ 110000％できなくてもいいので、
ちょっとでも知っておこう

56. 11.. 導入�
22.. 99--ppaattcchh

57. 22.. 99--ppaattcchh
•･ 99--ppaattcchhとは
-- なぜ必要なの？
-- 知っておく必要があるの？
•･ 仕組みと作り方
•･ 作成ツール

58. 22.. 99--ppaattcchh
•･ 応用「このデザインはできます！」
•･ 99--ppaattcchhに不向�きな例

59. 22.. 99--ppaattcchh
99--ppaattcchhとは

60. AAnnddrrooiiddアプリのデザインで
キモとなる
99--ppaattcchh

61. CCSSSS ((CCSSSS33)) でいうと、
bboorrddeerr--iimmaaggee
というプロパティがある

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

63. Q. なぜ必要なの？
A. 伸縮のことを考えないと
いけないことが多い

65. 448800xx880000 556600xx996600

66. 448800xx880000 556600xx996600

67. エンジニアさんに物申す！
縦横比を
勝手に変えないで
ください！

68. Q. 知っておく必要が
あるの？
A. あると思います。
エンジニアさんに物申すため…�

69. 22.. 99--ppaattcchh
仕組みと作り方
•･ 伸びる部分と伸びない部分を決める
•･ 中のコンテンツが入�り込むエリアを
決める

70. 黒い点((線�))で表現
•･ 書き出したパーツの上下左右に、
11ppxxずつ余白を追加する

73. 伸びる部分と伸びない部分
•･ 上側と左側に黒い点((線�))をかく

74. 伸びるところ

86. このデザインに関しては
結果は同じ
伸びても耐えられるデザイン

92. 同じ色

99. 大きな
グラデーション

105. 同じ色
同じ色

107. このデザインに関しては
結果はビミョーにちがう
もっこり感がビミョーに変わる

108. 22.. 99--ppaattcchh
仕組みと作り方
•･ 伸びる部分と伸びない部分を決める
•･ 中のコンテンツが入�り込むエリアを
決める

109. 中のコンテンツが入�り込むエリア
•･ 右側と下側に黒い点((線�))をかく

112. コンテンツが入�り込むエリア

113. 余白

114. 余白

115. 余白

117. 99--ppaattcchhは
余白を定義する
こともできる！

118. 仕組みと作り方
•･ 伸びる部分と伸びない部分を決める
•･ 中のコンテンツが入�り込むエリアを
決める
双方は独立している

119. bbuuttttoonn__bbgg..ppnngg

120. bbuuttttoonn__bbgg ..99 ..ppnngg

121. main.xml
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_bg"
android:text="撮影する"
/>

122. 22.. 99--ppaattcchh
作成ツール
•･ パーツを書き出したあと、
「ddrraaww99ppaattcchh」を使う
•･ PPhhoottoosshhooppやFFiirreewwoorrkkssなどで
そのまま黒い点を打つ

123. ddrraaww99ppaattcchh
•･ AAnnddrrooiidd SSDDKKの中に入�っている

126. DEM
O

127. ddrraaww99ppaattcchh、どう？
使いにくい！！

128. •･
真ん中はどこ？ 目分量
•･ 左右対称とかどうやるの？ 目分量
•･ めっちゃ長いやつとか がんばって塗る
どうするの？
もうめんどくさいので…�

129. PPhhoottoosshhooppでええやん！

130. PPhhoottoosshhooppの落とし穴
•･ このまま書きだしても適用されない
•･ 書き出し時のmmeettaa情報とかが問題？
•･ 原因はよくわからない

131. ちなみに…�
FFiirreewwoorrkkssからでも
ダメでした。

132. PPhhoottoosshhoopp
FFiirreewwoorrkkss
なのですが、その後懇親会で、PSでもできるよ！というお話を聞きました！
たぶん、わたしがやったものだと、まわりの9-patchのエリアに肉眼では見
えないような、うす∼い影などが入っていたような気もします。
ブログを書いてくださいましたので参考にしてください！
http://htomiyama.blogspot.jp/2012/09/9patchdraw9patch.html

133. Q. 99--ppaattcchhを作るには？
A.
・ddrraaww99ppaattcchhを使う
・PPhhoottoosshhooppとかでも
できる…�？？
きれいに作れば、Photoshopでもできるようです！！

134. 22.. 99--ppaattcchh
応用
「このデザインはできます！」

135. 99--ppaattcchhのポイント11
伸ばす点はいくつでも
•･ 上側・左側の伸ばす点はいくつでも
打てます

136. 99--ppaattcchhのポイント22
伸ばす点の割合
•･ 何ピクセル打つかによって伸びる
割合が変わってきます

144. 99--ppaattcchhの注意点
伸ばすしかできない
•･ ちぢむことができないので、
最小の大きさで作るとGGoooodd！

150. 重なっとるーー！！

152. 99--ppaattcchhの33箇条
•･ 伸ばす点はいくつでも打てる
•･ 伸び率も比例する
•･ 小さめにつくる

153. ちなみに…�
一度やってみてください
吐くぐらい、
めっちゃめんどくさいです

154. 22.. 99--ppaattcchh
99--ppaattcchhに不向�きな例

155. 不向�きな例
ストライプ・ドット

157. DEM
O

159. 不向�きな例
一部テクスチャ

162. @@aakkaaii__tt

166. さいごに
•･ 別にデザイナーがやらなくてもいいけ
ど、仕組みは知っておいてください
•･ 時間があったらやってみてください
（ちょーめんどくさい）
•･ お互い苦労を知りましょう

167. ありがとうございました！
GGoooodd LLuucckk!!
•･ @@ttoommmmmmmmyy
•･ ffaacceebbooookk :: 秋葉ちひろ
•･ 次回は99//2200（木）＠GGMMOOさん