主婦でもできる Android Layout

2011/09/17(Sat)

Hiromi Tsuzuki(@mrshiromi) http://mrshiromi.net

主婦でもできる Android Layout

http://mrshiromi.net/

2011/09/17 主婦でもできる Android Layout 2

自己紹介：現在

● Mrs.HiromiでAndroidアプリ公開中。● 但し、javaは書けません。● 女子部「ネイル・ド・ロンジョ」のネイルパーツ画像。● ドロクリ利用した「MH Clock」シリーズ。● つ部「みんなのラーメンタイマー」画像とレイアウト。● B社ハッカソンがきっかけの「おなまえなあに？」画像。

● 専業主婦です。子育て中です。仕事が無いです。


自己紹介：過去

● キャリアは大学卒業後3年間のみ。● 資格は無かったけどCOBOLでプログラミングを少々。オフ

コンのデータベース管理とポスレジ管理。なぜか…2年目からは受付嬢も兼務とかしてたり…激務すぎ。

● 会社員時代に色鉛筆で20号の写実画を描いた。● 病気して会社辞めた後、自分のホームページ作った。● WebとかLogo・DM・名刺・看板デザイン制作とか。● 半身麻痺になった自分のために自宅をデザイン。


自己紹介：どうしてこうなった？

● HT-03Aを購入。● ROMをごにょってオレオレテーマに。● 娘（当時1歳）、旦那の順にHT-03Aを与える。● Android女子部に入る。Androidな世界が広がる。● 名古屋Androidつくる部に入る。Androidな日々。● 娘っ子も立派なAndroiderへと成長。● 使いやすさ・かわいさのチェックは娘っ子が担当。


では、本題へ。


レイアウト＆デザインについて

● 良いものは真似しよう！● 使いやすさ、見やすさを追求しよう！● アーティストになる必要は無い！● 人の好みは千差万別だから気にしない！● 努力したけどわからないなら素直に質問しよう！● 経験を積めばデザインは出来る！


アイデアが固まったらチェック

● 著作権・登録商標・ライセンス。● アイデアの権利というのがあって…。● 「TODO」は著作権登録されてるので要注意。● アプリ名「Hoge Dropbox」「Dropbox Hoge」はNG。● DropboxのIconをアプリIconの一部に使用もNG。● アプリ名「Hoge Twitter」「Twitter Hoge」はNG。● Droidfontの利用ライセンスは厳しいので要注意。


逆さまのピラミッド

アプリを使ってもらいたい人たちはどんな人？

書籍：逆さまのピラミッド（1990/05発売）より

ターゲットとするユーザー層によってターゲットとするユーザー層によってUIUIは変わるは変わるターゲットとするユーザー層によってターゲットとするユーザー層によってUIUIは変わるは変わる


画面の階層（Level）を描く「みんなのラーメンタイマー」の場合


画面の階層をチェック

● ユーザーが迷子にならない画面遷移を考える。● 同じような処理を一画面にできないか？● タップ回数が多すぎないか？● 階層が深くなりすぎて終りが見えなくなってないか？ ● 「戻るキー」の挙動に一貫性を。

– 戻るボタンを画面に置かない。

by　あんざいゆき（@yanzm）資料デブサミまとめまとめ:2011application Next Generation presented by android女子部

http://devsummary.miukoba.net/?q=d

http://www.slideshare.net/yanzm/dev11-dronjo-edit


レイアウトの種類

画像　Google I/O 2011 Designing and Implementing Android UIs for Phones and Tablets　Session presentation[PDF] より

SmartPhoneSmartPhone縦と横縦と横

● 大雑把に4種類

TabletTablet横と縦横と縦

http://www.google.com/events/io/2011/sessions/designing-and-implementing-android-uis-for-phones-and-tablets.html


4種類同進行は無理

どれをベースにすればいいの？


2011年6月18日WCAN 2011 summer #wcan51

「Web？ or App？モバイル対応を視野に入れたデザイン入門」

講演中に。


講師の矢野りんさんが、『Small Screen first.』。

Smart Phone ＞ Tablet ＞ PC


TLで佐藤伸哉さんが、『Mobile first.』。


ということで。

Smart Phone 向けのレイアウトを最初に描こう！


しか～し！マルチデバイス対応しないと！変態端末が日本は多いし！

画面サイズの基準は？


Androidでのサイズと単位

● Supporting Multiple Screens | Android Developers ● 画像の単位は「dp(dip)」。文字の単位は「sp」。● 解像度(dot per inch＝ピクセル解像度)が

mdpi(density=160dpi)の時、1px=1dp=1sp。● 上記が適用される画面サイズは、

● Smart Phone が 320x480px。● Tablet が 1280x800px。

http://developer.android.com/guide/practices/screens_support.html


画面サイズは320x480px

と1280x800px

でレイアウトを作ろう。


文字サイズは？


iosched - Google I/O App for Android

- Google Project Hosting

を見てみると。


http://code.google.com/p/iosched/

http://code.google.com/p/iosched/


android/ res/ values/ dimens.xml

small=14spmedium=18splarge=18spxlarge=18sp

4種類用意されてる。


画面サイズが320x480px(160dpi)の時、

文字サイズは大22px・中18px・小14px。


文字サイズについて

● 大・中・小の3種類は必要。● Google的には、18spが文字サイズのdefaultらしい。● 2010年のioschedのソースでは、「large=22sp・

medium=18sp・small=14sp」だった。● xlargeはTablet向け。● 現状、『dp=sp』。


さてと、

レイアウト作成へ。

と、その前に。


Head First XML Layout on Androidあんざいゆきさん

http://www.slideshare.net/yanzm/head-first-xml-layout-on-android-5290462

見ておいてください。

http://www.slideshare.net/yanzm/head-first-xml-layout-on-android-5290462


画面レイアウト制作開始。


とにかく全部を、

スケッチブックに手描き。


追加で、付箋やメモを貼りつけて。

全体がある程度決まったら。


レイアウト作成ツールなど

● Illustlator or Inkscape 。● そのまま画像制作出来るように環境設定する。

● Photoshop or GIMP2 はベクター画像で描くこと。● CacooなどのWebサービスは情報共有向き。● GUIキットやStencilを利用しよう。

● http://clip.livedoor.com/clips/studiohiromi/tag/GUI

http://cacoo.com/

http://clip.livedoor.com/clips/studiohiromi/tag/GUI


レイアウトを描く①Cacooで描いた「みんなのラーメンタイマー」画面レイアウト


レイアウトを描く②Cacooで描いた「みんなのラーメンタイマー」画面レイアウト


余白とUIと共通レイアウト

● 余白を決める。ボタンの誤操作を避けるために余白は重要。

● UIを考慮する。使いやすい＆わかりやすいを最優先。

● 共通レイアウト箇所を決めておく。● 実装も画像制作も作業工程が減る。Fragment対応の場合は必須。


必要画像の一覧を作ろう

● 各画面ごとに、必要な画像の一覧を用意しよう。● 命名規則というのがあって…。

● Icon Design Guidelines | Android Developers Use common naming conventions for icon assets。

● 装飾画像は「img_hoge」「[画面]_btn_hoge」など。● ボタン（タップする）画像は3種用意しよう。

– default・focused(selected)・Pressed。– disableもあるよ。

http://developer.android.com/guide/practices/ui_guidelines/icon_design.html


画像の名前①home_icon

home_appname

img_raimon

home_btn_reader (default/focused/pressed)

home_btn_timer (default/focused/pressed)

home_btn_favorite (default/focused/pressed)

home_btn_history (default/focused/pressed)

home_btn_itemlist (default/focused/pressed)

home_btn_search (default/focused/pressed)

home_tsubulogo (default/focused/pressed)


画像の名前②ic_title_home (default/focused/pressed)

ic_title_barcode (default/focused/pressed)

ic_title_serch (default/focused/pressed)

img_raimon/img_photo

ic_popup_camera (default/focused/pressed)

ic_popup_gallery (default/focused/pressed)

ic_popup_selecter (default/focused/pressed)

timer_btn_plus (default/focused/pressed)

timer_btn_minus (default/focused/pressed)

btn_bg (default/focused/pressed)


配色を決めよう

● 中間色を使おう！ by 矢野りん● 基本は3色！by あんざいゆき● カラーパレットを利用しよう。

● Adobe Kuler http://kuler.adobe.com– Highest rated or Most Popular から選ぶといい。

● COLOURlovers http://www.colourlovers.com– Browse Palettes MOST LOVED から選ぶといい。– http://www.colourlovers.com/palettes/most-loved/all-time/grid

http://kuler.adobe.com/

http://www.colourlovers.com/

http://www.colourlovers.com/palettes/most-loved/all-time/grid


配色の基本的なこと。


日本Androidの会名古屋支部第2回勉強会

女子部が好きなアイコン♥矢野りんさん

http://qik.com/video/51676652010/2/27 Sat

http://qik.com/video/5167665


カラーパレットを使おう。


Adobe Kuler ①

クリック


Adobe Kuler ②色調整△を左右にスライド

RGBHEXコピペ


COLOURlovers ①ダメ

鮮やかすぎる

良い中間色の同系統

冒険難易度高

お勧め色の割合がポイント


COLOURlovers ②

HEXとRGB

ライセンス

登録するとダウンロード可能


今できるユニバーサルデザイン

● 視覚異常の方への配慮● 同系色でコントラストを。赤と緑は一緒に使わない。● 参考：Visolve - 色覚異常の方の色の見え方

● 現状、端末自体がユニバーサルデザインではない。● 私自身が経験した中で、ユニバーサルデザインな物は今までに2個しかありません。

– TOTO NEOREST（トイレ）– Vola（水栓）デザイン：アルネ・ヤコブセン

http://www.ryobi-sol.co.jp/visolve/jp/simulation.html


画像制作へ

と、その前に。


ベクター画像とビットマップ画像

40x40 px の円を描いて。

120倍に拡大して見てみると。

上が Illustlator で描いてる状態。

下が Photoshop で描いてる状態。

上がベクター画像。

下がビットマップ画像。


画像を作る場合、解像度320dpi端末に対応できるよう作ろう。

『大は小を兼ねる』


Illustlatorでの製作過程を主に説明します。


新規ドキュメントの設定

● 画面サイズ 320x480px （Illustlator標準150ppi）。


グリッドの設定

● 環境設定からグリッドを設定。● 分割数は4か8。8分割のがいいと思う。


グリッドを設定後

● 制作サイズ 320x480px。● グリッド分割数8。● 1つの正方形が 8px(8dp)。● グリッドを基準に作業。● 480x800pxで制作する場合も一緒です。


Inkscapeでのグリッド設定

● ファイル(F)→ドキュメントの設定(D)→グリッド。

メジャーグリッドラインの頻度

制作画面サイズ320x480pxなら 4640x960pxなら 8

480x800pxでも 8がいいと思う。


パスからガイドを作成

● パスで四角を描く。● 必要サイズに変更。● グリッドを基準に配置。● パスからガイドを作成。● ひたすら繰り返してガイドを

作る。● Inkscapeの場合も同様に。


すべての余白と配置をガイドで

● ガイドで画像と文字のサイズと配置箇所を作る。

● コンテンツ別の基準ガイド。● 余白を含めた画像と文字の配置箇所ガイド。

● 最終画像サイズ用ガイド。最終的にスライスに変更。


サイズと余白が決まったので、あとは絵を描くのみ。


ざっくりと作業工程を。


画像制作工程：都築の場合

● 基本的には、Illustlatorのみで制作してます。● 必要画像をレイアウト画面内で作る。● 最初はシェイプ（シルエット）のみで仕上げる。● 基本となる配色を決める。背景・文字・ボタンなど。● 必要ならPhotoshopのレイヤースタイルで仕上げ。● 仕上がり画像サイズはhdpi(density240)用で保存。

● icon.png なら 72x72px。


さて、やるか。

と、その前に。良い資料があります。


Android Bazaar and Conference 2011 Summer

デザイントラックより。


@tomorrowkey（エンジニア）／山本麻美（WEBデザイナー）Androidアプリデザイン入門編

講演資料これ必読ですよ。

https://docs.google.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B9cwi8dHYjWVY2ZjNjNjZTgtZWNmNi00OWJkLTkyYzgtNDExMDc3YjI2MjE1&hl=ja


では、画像制作その１。

シェイプ画像のみ配置。


レイアウトにシェイプ画像配置

● 画像を白黒のみでシェイプ（ベースとなる形）を描く。

● 仕上がりサイズ48x48pxなら、40x40pxを基準に描く。

● シェイプのみで描いておけば、ベクター画像なので後から拡縮しても大丈夫です。


続いて、画像制作その2。

配色を決める。


Kuler 一番人気 Honey Pot で配色

ユニバーサルデザインなら右４つ。

ボタン　defaultは黄土色　Focusedで黄色　Pressedでレンガ色装飾　dividerにレンガ色


COLOURlovers (◕ ” ◕) で配色

やりすぎ。ある意味ありだと思う。ユニバーサルデザインなら左４つ。

ボタン　defaultはオレンジ　Focusedで黄色　Pressedで赤装飾　dividerに赤


配色が決まったら。


ドキュメントサイズをxhdpi向けに

● アートボードサイズを640x960pxに変更。

● ガイドとパスで描かれた画像一式を縦横2倍に拡大する。

● 文字はptではなくpxで指定。アウトライン化しないで、文字サイズと配置箇所の説明を書いておく。


ボタン画像の作り方は、

ガイドラインのアイコンと基本的には一緒です。


ボタン画像の制作ポイント

● ランチャーアイコンの作り方を参考に。● 凹凸。グラデーション。光と影。● タップする画像だよ～とわかりやすいことが大事。● 人の指の大きさに配慮しましょう。● Launcher Icons | Android Developers 必ず読んで

ください。

http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html


ボタン画像の作り方と配置に関する説明は、

こちら。


Android女子部勉強会@関東（東京）2011/04/16

Ustream Android UI モバイル向けUI設計の基礎

by 矢野りんhttp://ustre.am/_WZwf:LHY

http://ustre.am/_WZwf:LHY


矢野りんさんと

あんざいゆきさんに

頼りっぱなしですいません。


Inkscapeの場合はこちら。

Inkscapeで、タダではじめるGUIデザイン

http://www.slideshare.net/cocopon/inkscapegui

http://www.slideshare.net/cocopon/inkscapegui


ということで、

まとめ。


画面サイズ480x800(854)pxで、

私がデザインしない理由。


マルチデバイス対応

● IS03のレイアウト崩れを未然に回避。● 余白を広げて配置することは、実装時に対応可能。● 逆に、出来上がった画像をそのまま使って、余白を削って小さい画面に合わせるのは難しい。

● 特定の端末のみに、別レイアウトを用意するのは最終手段。

● 作業工程が増えるのは極力避けたい。


『Small Screen first.』。


ご清聴、

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