ハッシュタグ

##aaaaddeessiiggnnssデザイナーが

コードから読み解く、

AAnnddrrooiiddアプリの

デザインの幅を広げるコツと

TTiippss

第11回：導入�・99--ppaattcchh@@SSTTAARRTTUUPP BBaassee CCaammpp

22001122..99..66

aassaammiieeeeee77 ttoommmmmmmmyy aaddaammrroocckkeerr

ハッシュタグ

##aaaaddeessiiggnnss

ハッシュタグ

##aaaaddeessiiggnnss

がんばって作ったデザインが、

実装後に残念な結果にならないために

ハッシュタグ

##aaaaddeessiiggnnss

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

秋葉ちひろ／BBaaiidduu JJaappaann

秋葉ちひろ

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

エンジニアまかせだから

•･ デザイナーが実装のことをわかっていないから

•･ 実装の指示が出せない

なぜ残念になるのか？

エンジニアまかせだから

•･ エンジニアはデザインのことをわからずに実装しているから

なぜ残念になるのか？

実装のことをわかっていたら、

組みやすい、理にかなった

デザインができる

Visual Design

Coding

System

Visual Design

Coding

System

Webサイトの場合 Androidアプリの場合

CSS

HTML

XML

Visual Design

Coding

System

Visual Design

Coding

System

Webサイトの場合 Androidアプリの場合

CSS

HTML

XML

XXMMLLの実装

•･ ちょっとでも知識があれば、実装可能かどうかがわかる

•･ 110000％できなくてもいいので、ちょっとでも知っておこう

この勉強会のポイント

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

iuuq;00xxx/boespje.bqq.qbuufsot/dpn0iuuq;00xxx/boespje.bqq.qbuufsot/dpn0

背景画像

影

アナログ感

カスタムUUII

ダイアログ

11.. 導入�

22.. 99--ppaattcchh

11.. 導入�

22.. 99--ppaattcchh

•･ AAnnddrrooiiddアプリを作るには-- デザイナーとってむずかしくないの？

•･ 画面解像度・画面サイズ-- デザインファイルはどの大きさで作る？

-- 解像度ちがいのデザインはどうやって作るの？

11.. 導入�

•･ AAnnddrrooiiddアプリのデザインで気をつけること

•･ アプリの軽量化も考える

11.. 導入�

AAnnddrrooiiddアプリを作るには

11.. 導入�

Eclipse Android SDK

Eclipse Android SDK

白くすればこわくない！

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

なにでできているの？

•･ レイアウトまわり•･ ロジック

AAnnddrrooiiddアプリ11..導入�

XXMMLL

JJAAVVAA

<?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" android:text="@string/base_popup" />

<?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" android:text="@string/base_popup" />

<LinearLayout> <TextView /> <ImageView /> <CheckBox /> <RadioButton /> <button /></LinearLayout>

ddiivv

hh,, pp

iimmgg

iinnppuutt ttyyppee==cchheecckkbbooxx

iinnppuutt ttyyppee==rraaddiioo

iinnppuutt ttyyppee==bbuuttttoonn

drawable-hdpi

drawable-mdpi

drawable-ldpi

layouts

main.xml

values

strings.xml

res

drawable-xhdpi

iimmgg

hhttmmll

ccssss

JJAAVVAA構造

飾�り

デザイナーにとって

むずかしくないの？Q.環境構築さえできれば

なんとかなりますA.

画面解像度・画面サイズ

11.. 導入�

なぜこんなに苦労する

•･ 画面解像度がバラバラ•･ 画面サイズもまったく統一されない

AAnnddrrooiiddアプリの宿命11..導入�

11..導入�

ddeennssiittyyggrroouupp

ddeennssiittyyrraattiioo ssiizzee((ppxx))

iiPPhhoonnee 33GG

iiPPhhoonnee 33GGSS

iiPPhhoonnee 44

iiPPhhoonnee 44SS

116600 11 332200xx448800

116600 11 332200xx448800

332200 22 664400xx996600

332200 22 664400xx996600

iiPPhhoonneeの場合

11..導入�

ddeennssiittyyggrroouupp

ddeennssiittyyrraattiioo ssiizzee((ppxx))

ひと昔前

XXppeerriiaa aarrcc

IINNFFOOBBAARRAA0011

GGaallaaxxyySS IIII

GGaallaaxxyy NNeexxuuss

116600 11 332200xx448800

224400 11..55 448800xx885544

224400 11..55 556600xx996600

224400 11..55 448800xx880000

332200 22 772200xx11228800

AAnnddrrooiiddの場合

11..導入�

mmddppii

116600ddppii

hhddppii

224400ddppii

xxhhddppii

332200ddppii

11 11..55 22

XXppeerriiaa aarrcc

IINNFFOOBBAARR AA0011

GGaallaaxxyy SS IIII

GGaallaaxxyy NNeexxuuss

GGaallaaxxyy NNoottee

http://myakura.github.com/n/density.html

デザインファイルは

どの大きさで作る？Q.xxhhddppiiで作る

((772200xx11228800))A.

hhddppii xxhhddppiixx00..7755

xx11..3333

バッチ処理も可能。ピクセルパーフェクトにこだわる場合は少々の手直しが必要。同じ画像を使うことももちろんできる。できるが、Webのときと同じことが起こる。

448800xx880000 772200xx11228800

11..55 22

xxhhddppii

•･ 画像のサイズを指定しないと大きく表示される

hhddppii

448800xx880000 772200xx11228800

hhddppii

•･ 画像がねむい•･ RReettiinnaa DDiissppllaayyでWWeebbサイトを見た感じ

448800xx880000

xxhhddppii

772200xx11228800

hhddppii

448800xx880000

xxhhddppii

772200xx11228800

微調整

解像度ちがいのデザイン

はどうやって作るの？Q.大きいものから作ると

楽ちん！（ただし要調整）A.

AAnnddrrooiiddアプリのデザインで

気をつけること

11.. 導入�

11..導入�

iiPPhhoonnee AAnnddrrooiidd

画面サイズ

画面の縦横比

フォント

22種類 星の数

同じ 機種によってちがう

ヒラギノ 機種によってちがう

iiPPhhoonneeとAAnnddrrooiiddの違い

11..導入�

気をつけること

•･ 文字により変化する部分がある（フォントが機種依存だから）

•･ 画面サイズが大きくなっても伸縮するようにする（画面サイズが機種依存だから）

AAnnddrrooiiddアプリデザインを

考えるときに気をつけるこ

とは？Q.

画面サイズが多少変化し

ても耐えられるデザイン

にすることA.

余白をじゃっかん大小して

自然に組めるデザインが、

いちばんうれしい！

アプリの軽量化も

考える

11.. 導入�

11..導入�

アプリの軽量化

•･ 重いのは画像です•･ コードでかけるものはコードでかこう（→22回目にて詳しく）

XXMMLLの実装

•･ ちょっとでも知識があれば、実装可能かどうかがわかる

•･ 110000％できなくてもいいので、ちょっとでも知っておこう

この勉強会のポイント

11.. 導入�

22.. 99--ppaattcchh

•･ 99--ppaattcchhとは-- なぜ必要なの？-- 知っておく必要があるの？

•･ 仕組みと作り方•･ 作成ツール

22.. 99--ppaattcchh

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

22.. 99--ppaattcchh

99--ppaattcchhとは

22.. 99--ppaattcchh

AAnnddrrooiiddアプリのデザインで

キモとなる

99--ppaattcchh

CCSSSS ((CCSSSS33)) でいうと、

bboorrddeerr--iimmaaggeeというプロパティがある

画像を99分割して、四隅は固定、

その他を伸びてもいいようにする

なぜ必要なの？Q.伸縮のことを考えないと

いけないことが多いA.

448800xx880000 556600xx996600

448800xx880000 556600xx996600

エンジニアさんに物申す！

縦横比を

勝手に変えないで

ください！

知っておく必要が

あるの？Q.あると思います。エンジニアさんに物申すため…�A.

仕組みと作り方

22.. 99--ppaattcchh

•･ 伸びる部分と伸びない部分を決める•･ 中のコンテンツが入�り込むエリアを決める

黒い点((線�))で表現

•･ 書き出したパーツの上下左右に、11ppxxずつ余白を追加する

伸びる部分と伸びない部分

•･ 上側と左側に黒い点((線�))をかく

伸びるところ

このデザインに関しては

結果は同じ

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

同じ色

大きなグラデーション

同じ色

同じ色

このデザインに関しては

結果はビミョーにちがう

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

仕組みと作り方

22.. 99--ppaattcchh

•･ 伸びる部分と伸びない部分を決める•･ 中のコンテンツが入�り込むエリアを決める

中のコンテンツが入�り込むエリア

•･ 右側と下側に黒い点((線�))をかく

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

余白

余白

余白

99--ppaattcchhは

余白を定義する

こともできる！

仕組みと作り方

•･ 伸びる部分と伸びない部分を決める•･ 中のコンテンツが入�り込むエリアを決める

双方は独立している

bbuuttttoonn__bbgg..ppnngg

bbuuttttoonn__bbgg ..ppnngg..99

main.xml

<Button android:layout_width="wrap_content"

android:layout_height="wrap_content" android:background="@drawable/button_bg" android:text="撮影する" />

作成ツール

22.. 99--ppaattcchh

•･ パーツを書き出したあと、「ddrraaww99ppaattcchh」を使う

•･ PPhhoottoosshhooppやFFiirreewwoorrkkssなどでそのまま黒い点を打つ

ddrraaww99ppaattcchh

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

DEMO

ddrraaww99ppaattcchh、どう？

使いにくい！！

•･ 真ん中はどこ？•･ 左右対称とかどうやるの？•･ めっちゃ長いやつとかどうするの？

目分量

目分量

がんばって塗る

もうめんどくさいので…�

PPhhoottoosshhooppでええやん！

PPhhoottoosshhooppの落とし穴

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

ちなみに…�

FFiirreewwoorrkkssからでも

ダメでした。

PPhhoottoosshhoopp

FFiirreewwoorrkkss

なのですが、その後懇親会で、PSでもできるよ！というお話を聞きました！たぶん、わたしがやったものだと、まわりの9-patchのエリアに肉眼では見えないような、うす～い影などが入っていたような気もします。

ブログを書いてくださいましたので参考にしてください！http://htomiyama.blogspot.jp/2012/09/9patchdraw9patch.html

99--ppaattcchhを作るには？Q.・ddrraaww99ppaattcchhを使う

・PPhhoottoosshhooppとかでも

　できる…�？？A.きれいに作れば、Photoshopでもできるようです！！

応用「このデザインはできます！」

22.. 99--ppaattcchh

伸ばす点はいくつでも

•･ 上側・左側の伸ばす点はいくつでも打てます

99--ppaattcchhのポイント11

伸ばす点の割合

•･ 何ピクセル打つかによって伸びる割合が変わってきます

99--ppaattcchhのポイント22

伸ばすしかできない

•･ ちぢむことができないので、最小の大きさで作るとGGoooodd！

99--ppaattcchhの注意点

重なっとるーー！！

99--ppaattcchhの33箇条

•･ 伸ばす点はいくつでも打てる•･ 伸び率も比例する•･ 小さめにつくる

ちなみに…�

一度やってみてください吐くぐらい、

めっちゃめんどくさいです

99--ppaattcchhに不向�きな例

22.. 99--ppaattcchh

ストライプ・ドット

不向�きな例

DEMO

一部テクスチャ

不向�きな例

@@aakkaaii__tt

さいごに

•･ 別にデザイナーがやらなくてもいいけど、仕組みは知っておいてください

•･ 時間があったらやってみてください（ちょーめんどくさい）

•･ お互い苦労を知りましょう

GGoooodd LLuucckk!!

ありがとうございました！

•･ @@ttoommmmmmmmyy•･ ffaacceebbooookk :: 秋葉ちひろ•･ 次回は99//2200（木）＠GGMMOOさん