0
主婦でもできる Android Layout               2011/09/17(Sat)Hiromi Tsuzuki(@mrshiromi) http://mrshiromi.net
自己紹介:現在 ●   Mrs.HiromiでAndroidアプリ公開中。      ●   但し、javaは書けません。      ●   女子部「ネイル・ド・ロンジョ」のネイルパーツ画像。      ●   ドロクリ利用した「MH Cloc...
自己紹介:過去 ●   キャリアは大学卒業後3年間のみ。      ●   資格は無かったけどCOBOLでプログラミングを少々。オフ          コンのデータベース管理とポスレジ管理。なぜか…2年目か          らは受付嬢も兼務と...
自己紹介:どうしてこうなった? ●   HT-03Aを購入。 ●   ROMをごにょってオレオレテーマに。 ●   娘(当時1歳)、旦那の順にHT-03Aを与える。 ●   Android女子部に入る。Androidな世界が広がる。 ●   名...
では、本題へ。2011/09/17    主婦でもできる Android Layout   5
レイアウト&デザインについて ●   良いものは真似しよう! ●   使いやすさ、見やすさを追求しよう! ●   アーティストになる必要は無い! ●   人の好みは千差万別だから気にしない! ●   努力したけどわからないなら素直に質問しよう!...
アイデアが固まったらチェック ●   著作権・登録商標・ライセンス。      ●   アイデアの権利というのがあって…。      ●   「TODO」は著作権登録されてるので要注意。      ●   アプリ名「Hoge Dropbox」「...
逆さまのピラミッドアプリを使ってもらいたい人たちはどんな人?      ターゲットとするユーザー層によってUIは変わる      ターゲットとするユーザー層によってUIは変わる                書籍:逆さまのピラミッド(1990/...
画面の階層(Level)を描く   「みんなのラーメンタイマー」の場合2011/09/17       主婦でもできる Android Layout   9
画面の階層をチェック ●   ユーザーが迷子にならない画面遷移を考える。      ●   同じような処理を一画面にできないか?      ●   タップ回数が多すぎないか?      ●   階層が深くなりすぎて終りが見えなくなってないか? ...
レイアウトの種類 ●   大雑把に4種類              SmartPhone                縦と横                                               Tablet      ...
4種類同進行は無理   どれをベースにすればいいの?2011/09/17     主婦でもできる Android Layout   12
2011年6月18日             WCAN 2011 summer #wcan51「Web? or App?モバイル対応を視野に入れたデザイン入門」       講演中に。2011/09/17          主婦でもできる An...
講師の 矢野りん さんが、             『Small Screen first.』。   Smart Phone > Tablet > PC2011/09/17          主婦でもできる Android Layout   14
TLで 佐藤伸哉 さんが、               『Mobile first.』。2011/09/17        主婦でもできる Android Layout   15
ということで。        Smart Phone 向けの      レイアウトを最初に描こう!2011/09/17    主婦でもできる Android Layout   16
しか~し!   マルチデバイス対応しないと!    変態端末が日本は多いし!             画面サイズの基準は?2011/09/17      主婦でもできる Android Layout   17
Androidでのサイズと単位 ●   Supporting Multiple Screens | Android Developers ●   画像の単位は「dp(dip)」。文字の単位は「sp」。 ●   解像度(dot per inch=...
画面サイズは               320x480px                   と               1280x800px                   で             レイアウトを作ろう。2011...
文字サイズは?2011/09/17    主婦でもできる Android Layout   20
iosched - Google I/O App for Android    - Google Project Hosting             を見てみると。2011/09/17    主婦でもできる Android Layout  ...
http://code.google.com/p/iosched/2011/09/17             主婦でもできる Android Layout    22
android/ res/ values/ dimens.xml                                               small=14sp                                 ...
画面サイズが       320x480px(160dpi)の時、          文字サイズは     大22px・中18px・小14px。2011/09/17    主婦でもできる Android Layout   24
文字サイズについて ●   大・中・小の3種類は必要。 ●   Google的には、18spが文字サイズのdefaultらしい。 ●   2010年のioschedのソースでは、「large=22sp・     medium=18sp・smal...
さてと、             レイアウト作成へ。             と、その前に。2011/09/17     主婦でもできる Android Layout   26
Head First XML Layout on Android                あんざいゆき さん  http://www.slideshare.net/yanzm/head-first-xml-layout-on-androi...
画面レイアウト制作開始。2011/09/17   主婦でもできる Android Layout   28
とにかく全部を、         スケッチブックに手描き。2011/09/17     主婦でもできる Android Layout   29
追加で、         付箋やメモを貼りつけて。      全体がある程度決まったら。2011/09/17   主婦でもできる Android Layout   30
レイアウト作成ツールなど ●   Illustlator or Inkscape 。      ●   そのまま画像制作出来るように環境設定する。 ●    Photoshop or GIMP2 はベクター画像で描くこと。 ●   Cacooな...
レイアウトを描く①  Cacooで描いた「みんなのラーメンタイマー」画面レイアウト2011/09/17     主婦でもできる Android Layout   32
レイアウトを描く②  Cacooで描いた「みんなのラーメンタイマー」画面レイアウト2011/09/17     主婦でもできる Android Layout   33
余白とUIと共通レイアウト ●   余白を決める。ボタンの誤操作を避けるために余白は重要。 ●   UIを考慮する。使いやすい&わかりやすいを最優先。 ●   共通レイアウト箇所を決めておく。      ●   実装も画像制作も作業工程が減る。...
必要画像の一覧を作ろう ●   各画面ごとに、必要な画像の一覧を用意しよう。 ●   命名規則というのがあって…。      ●   Icon Design Guidelines | Android Developers Use        ...
画像の名前①                    home_icon                    home_appname                    img_raimon                    home_...
画像の名前②                    ic_title_home (default/focused/pressed)                    ic_title_barcode (default/focused/pre...
配色を決めよう ●   中間色を使おう! by 矢野りん ●   基本は3色!by あんざいゆき ●   カラーパレットを利用しよう。      ●   Adobe Kuler http://kuler.adobe.com           ...
配色の基本的なこと。2011/09/17      主婦でもできる Android Layout   39
日本Androidの会          名古屋支部第2回勉強会         女子部が好きなアイコン♥            矢野りんさん             http://qik.com/video/5167665          ...
カラーパレットを使おう。2011/09/17   主婦でもできる Android Layout   41
Adobe Kuler ①                                        クリック2011/09/17     主婦でもできる Android Layout          42
Adobe Kuler ②                                        色調整                                        △を                        ...
COLOURlovers ①                                                ダメ                                         鮮やかすぎる           ...
COLOURlovers ②                                         HEXとRGB                                         ライセンス              ...
今できるユニバーサルデザイン ●   視覚異常の方への配慮      ●   同系色でコントラストを。赤と緑は一緒に使わない。      ●   参考:Visolve - 色覚異常の方の色の見え方 ●   現状、端末自体がユニバーサルデザインで...
画像制作へ             と、その前に。2011/09/17    主婦でもできる Android Layout   47
ベクター画像とビットマップ画像                  40x40 px の円を描いて。                  120倍に拡大して見てみると。                  上が Illustlator で描いてる状態...
画像を作る場合、              解像度320dpi端末に             対応できるよう作ろう。              『大は小を兼ねる』2011/09/17       主婦でもできる Android Layout  ...
Illustlatorでの      製作過程を主に説明します。2011/09/17   主婦でもできる Android Layout   50
新規ドキュメントの設定 ●   画面サイズ 320x480px (Illustlator標準150ppi)。2011/09/17        主婦でもできる Android Layout   51
グリッドの設定 ●   環境設定からグリッドを設定。 ●   分割数は4か8。8分割のがいいと思う。2011/09/17    主婦でもできる Android Layout   52
グリッドを設定後                   ●   制作サイズ 320x480px。                   ●   グリッド 分割数8。                   ●   1つの正方形が 8px(8dp)。  ...
Inkscapeでのグリッド設定 ●   ファイル(F)→ドキュメントの設定(D)→グリッド。                                          メジャーグリッドラインの頻度                   ...
パスからガイドを作成                    ●   パスで四角を描く。                    ●   必要サイズに変更。                    ●   グリッドを基準に配置。           ...
すべての余白と配置をガイドで                      ●   ガイドで画像と文字のサイズ                          と配置箇所を作る。                      ●   コンテンツ別の基...
サイズと余白が決まったので、     あとは絵を描くのみ。2011/09/17   主婦でもできる Android Layout   57
ざっくりと作業工程を。2011/09/17      主婦でもできる Android Layout   58
画像制作工程:都築の場合 ●   基本的には、Illustlatorのみで制作してます。 ●   必要画像をレイアウト画面内で作る。 ●   最初はシェイプ(シルエット)のみで仕上げる。 ●   基本となる配色を決める。背景・文字・ボタンなど。...
さて、やるか。              と、その前に。             良い資料があります。2011/09/17      主婦でもできる Android Layout   60
Android Bazaar and       Conference 2011 Summer             デザイントラックより。2011/09/17      主婦でもできる Android Layout   61
@tomorrowkey(エンジニア) /山本麻美(WEBデザイナー) Androidアプリデザイン入門編               講演資料             これ必読ですよ。2011/09/17     主婦でもできる Androi...
では、              画像制作その1。             シェイプ画像のみ配置。2011/09/17      主婦でもできる Android Layout   63
レイアウトにシェイプ画像配置                     ●   画像を白黒のみでシェイプ                         (ベースとなる形)を描く。                     ●   仕上がりサイズ4...
続いて、             画像制作その2。             配色を決める。2011/09/17     主婦でもできる Android Layout   65
Kuler 一番人気 Honey Pot で配色                     ユニバーサルデザインなら右4つ。                     ボタン                      defaultは黄土色    ...
COLOURlovers (◕ ” ◕) で配色                         やりすぎ。ある意味ありだと思う。                         ユニバーサルデザインなら左4つ。                ...
配色が決まったら。2011/09/17     主婦でもできる Android Layout   68
ドキュメントサイズをxhdpi向けに                ●   アートボードサイズを                    640x960pxに変更。                ●   ガイドとパスで描かれた画像一       ...
ボタン画像の作り方は、         ガイドラインのアイコンと          基本的には一緒です。2011/09/17      主婦でもできる Android Layout   70
ボタン画像の制作ポイント ●   ランチャーアイコンの作り方を参考に。 ●   凹凸。グラデーション。光と影。 ●   タップする画像だよ~とわかりやすいことが大事。 ●   人の指の大きさに配慮しましょう。 ●   Launcher Icon...
ボタン画像の作り方と             配置に関する説明は、               こちら。2011/09/17      主婦でもできる Android Layout   72
Android女子部勉強会@関東(東京)                      2011/04/16  Ustream Android UI モバイル        向けUI設計の基礎         by 矢野りん            ...
矢野りん さん            と        あんざいゆき さん            に      頼りっぱなしですいません。2011/09/17   主婦でもできる Android Layout   74
Inkscapeの場合はこちら。     Inkscapeで、タダではじめる            GUIデザイン             http://www.slideshare.net/cocopon/inkscapegui2011/09...
ということで、              まとめ。2011/09/17    主婦でもできる Android Layout   76
画面サイズ             480x800(854)pxで、         私がデザインしない理由。2011/09/17        主婦でもできる Android Layout   77
マルチデバイス対応 ●   IS03のレイアウト崩れを未然に回避。 ●   余白を広げて配置することは、実装時に対応可能。 ●   逆に、出来上がった画像をそのまま使って、余白を     削って小さい画面に合わせるのは難しい。 ●   特定の端...
『Small Screen first.』。2011/09/17          主婦でもできる Android Layout   79
ご清聴、         ありがとうございました。2011/09/17   主婦でもできる Android Layout   80
Upcoming SlideShare
Loading in...5
×

主婦でもできる Android Layout

7,410

Published on

2011/09/17 日本Androidの会 浜松支部 第5回ミーティング資料。

Published in: Design
0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,410
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
33
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

Transcript of "主婦でもできる Android Layout"

  1. 1. 主婦でもできる Android Layout 2011/09/17(Sat)Hiromi Tsuzuki(@mrshiromi) http://mrshiromi.net
  2. 2. 自己紹介:現在 ● Mrs.HiromiでAndroidアプリ公開中。 ● 但し、javaは書けません。 ● 女子部「ネイル・ド・ロンジョ」のネイルパーツ画像。 ● ドロクリ利用した「MH Clock」シリーズ。 ● つ部「みんなのラーメンタイマー」画像とレイアウト。 ● B社ハッカソンがきっかけの「おなまえなあに?」画像。 ● 専業主婦です。子育て中です。仕事が無いです。2011/09/17 主婦でもできる Android Layout 2
  3. 3. 自己紹介:過去 ● キャリアは大学卒業後3年間のみ。 ● 資格は無かったけどCOBOLでプログラミングを少々。オフ コンのデータベース管理とポスレジ管理。なぜか…2年目か らは受付嬢も兼務とかしてたり…激務すぎ。 ● 会社員時代に色鉛筆で20号の写実画を描いた。 ● 病気して会社辞めた後、自分のホームページ作った。 ● WebとかLogo・DM・名刺・看板デザイン制作とか。 ● 半身麻痺になった自分のために自宅をデザイン。2011/09/17 主婦でもできる Android Layout 3
  4. 4. 自己紹介:どうしてこうなった? ● HT-03Aを購入。 ● ROMをごにょってオレオレテーマに。 ● 娘(当時1歳)、旦那の順にHT-03Aを与える。 ● Android女子部に入る。Androidな世界が広がる。 ● 名古屋Androidつくる部に入る。Androidな日々。 ● 娘っ子も立派なAndroiderへと成長。 ● 使いやすさ・かわいさのチェックは娘っ子が担当。2011/09/17 主婦でもできる Android Layout 4
  5. 5. では、本題へ。2011/09/17 主婦でもできる Android Layout 5
  6. 6. レイアウト&デザインについて ● 良いものは真似しよう! ● 使いやすさ、見やすさを追求しよう! ● アーティストになる必要は無い! ● 人の好みは千差万別だから気にしない! ● 努力したけどわからないなら素直に質問しよう! ● 経験を積めばデザインは出来る!2011/09/17 主婦でもできる Android Layout 6
  7. 7. アイデアが固まったらチェック ● 著作権・登録商標・ライセンス。 ● アイデアの権利というのがあって…。 ● 「TODO」は著作権登録されてるので要注意。 ● アプリ名「Hoge Dropbox」「Dropbox Hoge」はNG。 ● DropboxのIconをアプリIconの一部に使用もNG。 ● アプリ名「Hoge Twitter」「Twitter Hoge」はNG。 ● Droidfontの利用ライセンスは厳しいので要注意。2011/09/17 主婦でもできる Android Layout 7
  8. 8. 逆さまのピラミッドアプリを使ってもらいたい人たちはどんな人? ターゲットとするユーザー層によってUIは変わる ターゲットとするユーザー層によってUIは変わる 書籍:逆さまのピラミッド(1990/05発売)より2011/09/17 主婦でもできる Android Layout 8
  9. 9. 画面の階層(Level)を描く 「みんなのラーメンタイマー」の場合2011/09/17 主婦でもできる Android Layout 9
  10. 10. 画面の階層をチェック ● ユーザーが迷子にならない画面遷移を考える。 ● 同じような処理を一画面にできないか? ● タップ回数が多すぎないか? ● 階層が深くなりすぎて終りが見えなくなってないか? ● 「戻るキー」の挙動に一貫性を。 – 戻るボタンを画面に置かない。資料 by あんざいゆき(@yanzm)デブサミまとめまとめ:2011application Next Generation presented by android女子部2011/09/17 主婦でもできる Android Layout 10
  11. 11. レイアウトの種類 ● 大雑把に4種類 SmartPhone 縦と横 Tablet 横と縦画像 Google I/O 2011 Designing and Implementing Android UIs for Phones and Tablets Session presentation[PDF] より2011/09/17 主婦でもできる Android Layout 11
  12. 12. 4種類同進行は無理 どれをベースにすればいいの?2011/09/17 主婦でもできる Android Layout 12
  13. 13. 2011年6月18日 WCAN 2011 summer #wcan51「Web? or App?モバイル対応を視野に入れたデザイン入門」 講演中に。2011/09/17 主婦でもできる Android Layout 13
  14. 14. 講師の 矢野りん さんが、 『Small Screen first.』。 Smart Phone > Tablet > PC2011/09/17 主婦でもできる Android Layout 14
  15. 15. TLで 佐藤伸哉 さんが、 『Mobile first.』。2011/09/17 主婦でもできる Android Layout 15
  16. 16. ということで。 Smart Phone 向けの レイアウトを最初に描こう!2011/09/17 主婦でもできる Android Layout 16
  17. 17. しか~し! マルチデバイス対応しないと! 変態端末が日本は多いし! 画面サイズの基準は?2011/09/17 主婦でもできる Android Layout 17
  18. 18. Androidでのサイズと単位 ● Supporting Multiple Screens | Android Developers ● 画像の単位は「dp(dip)」。文字の単位は「sp」。 ● 解像度(dot per inch=ピクセル解像度)が mdpi(density=160dpi)の時、1px=1dp=1sp。 ● 上記が適用される画面サイズは、 ● Smart Phone が 320x480px。 ● Tablet が 1280x800px。2011/09/17 主婦でもできる Android Layout 18
  19. 19. 画面サイズは 320x480px と 1280x800px で レイアウトを作ろう。2011/09/17 主婦でもできる Android Layout 19
  20. 20. 文字サイズは?2011/09/17 主婦でもできる Android Layout 20
  21. 21. iosched - Google I/O App for Android - Google Project Hosting を見てみると。2011/09/17 主婦でもできる Android Layout 21
  22. 22. http://code.google.com/p/iosched/2011/09/17 主婦でもできる Android Layout 22
  23. 23. android/ res/ values/ dimens.xml small=14sp medium=18sp large=18sp xlarge=18sp 4種類用意されてる。2011/09/17 主婦でもできる Android Layout 23
  24. 24. 画面サイズが 320x480px(160dpi)の時、 文字サイズは 大22px・中18px・小14px。2011/09/17 主婦でもできる Android Layout 24
  25. 25. 文字サイズについて ● 大・中・小の3種類は必要。 ● Google的には、18spが文字サイズのdefaultらしい。 ● 2010年のioschedのソースでは、「large=22sp・ medium=18sp・small=14sp」だった。 ● xlargeはTablet向け。 ● 現状、『dp=sp』。2011/09/17 主婦でもできる Android Layout 25
  26. 26. さてと、 レイアウト作成へ。 と、その前に。2011/09/17 主婦でもできる Android Layout 26
  27. 27. Head First XML Layout on Android あんざいゆき さん http://www.slideshare.net/yanzm/head-first-xml-layout-on-android-5290462 見ておいてください。2011/09/17 主婦でもできる Android Layout 27
  28. 28. 画面レイアウト制作開始。2011/09/17 主婦でもできる Android Layout 28
  29. 29. とにかく全部を、 スケッチブックに手描き。2011/09/17 主婦でもできる Android Layout 29
  30. 30. 追加で、 付箋やメモを貼りつけて。 全体がある程度決まったら。2011/09/17 主婦でもできる Android Layout 30
  31. 31. レイアウト作成ツールなど ● Illustlator or Inkscape 。 ● そのまま画像制作出来るように環境設定する。 ● Photoshop or GIMP2 はベクター画像で描くこと。 ● CacooなどのWebサービスは情報共有向き。 ● GUIキットやStencilを利用しよう。 ● http://clip.livedoor.com/clips/studiohiromi/tag/GUI2011/09/17 主婦でもできる Android Layout 31
  32. 32. レイアウトを描く① Cacooで描いた「みんなのラーメンタイマー」画面レイアウト2011/09/17 主婦でもできる Android Layout 32
  33. 33. レイアウトを描く② Cacooで描いた「みんなのラーメンタイマー」画面レイアウト2011/09/17 主婦でもできる Android Layout 33
  34. 34. 余白とUIと共通レイアウト ● 余白を決める。ボタンの誤操作を避けるために余白は重要。 ● UIを考慮する。使いやすい&わかりやすいを最優先。 ● 共通レイアウト箇所を決めておく。 ● 実装も画像制作も作業工程が減る。Fragment対応の場合は必須。2011/09/17 主婦でもできる Android Layout 34
  35. 35. 必要画像の一覧を作ろう ● 各画面ごとに、必要な画像の一覧を用意しよう。 ● 命名規則というのがあって…。 ● Icon Design Guidelines | Android Developers Use common naming conventions for icon assets。 ● 装飾画像は「img_hoge」「[画面]_btn_hoge」など。 ● ボタン(タップする)画像は3種用意しよう。 – default・focused(selected)・Pressed。 – disableもあるよ。2011/09/17 主婦でもできる Android Layout 35
  36. 36. 画像の名前① 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)2011/09/17 主婦でもできる Android Layout 36
  37. 37. 画像の名前② 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)2011/09/17 主婦でもできる Android Layout 37
  38. 38. 配色を決めよう ● 中間色を使おう! 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/grid2011/09/17 主婦でもできる Android Layout 38
  39. 39. 配色の基本的なこと。2011/09/17 主婦でもできる Android Layout 39
  40. 40. 日本Androidの会 名古屋支部第2回勉強会 女子部が好きなアイコン♥ 矢野りんさん http://qik.com/video/5167665 2010/2/27 Sat2011/09/17 主婦でもできる Android Layout 40
  41. 41. カラーパレットを使おう。2011/09/17 主婦でもできる Android Layout 41
  42. 42. Adobe Kuler ① クリック2011/09/17 主婦でもできる Android Layout 42
  43. 43. Adobe Kuler ② 色調整 △を 左右に スライド RGB HEX コピペ2011/09/17 主婦でもできる Android Layout 43
  44. 44. COLOURlovers ① ダメ 鮮やかすぎる 良い 中間色の同系統 冒険 難易度高 お勧め 色の割合がポイント2011/09/17 主婦でもできる Android Layout 44
  45. 45. COLOURlovers ② HEXとRGB ライセンス 登録すると ダウンロード 可能2011/09/17 主婦でもできる Android Layout 45
  46. 46. 今できるユニバーサルデザイン ● 視覚異常の方への配慮 ● 同系色でコントラストを。赤と緑は一緒に使わない。 ● 参考:Visolve - 色覚異常の方の色の見え方 ● 現状、端末自体がユニバーサルデザインではない。 ● 私自身が経験した中で、ユニバーサルデザインな物は 今までに2個しかありません。 – TOTO NEOREST(トイレ) – Vola(水栓) デザイン:アルネ・ヤコブセン2011/09/17 主婦でもできる Android Layout 46
  47. 47. 画像制作へ と、その前に。2011/09/17 主婦でもできる Android Layout 47
  48. 48. ベクター画像とビットマップ画像 40x40 px の円を描いて。 120倍に拡大して見てみると。 上が Illustlator で描いてる状態。 下が Photoshop で描いてる状態。 上がベクター画像。 下がビットマップ画像。2011/09/17 主婦でもできる Android Layout 48
  49. 49. 画像を作る場合、 解像度320dpi端末に 対応できるよう作ろう。 『大は小を兼ねる』2011/09/17 主婦でもできる Android Layout 49
  50. 50. Illustlatorでの 製作過程を主に説明します。2011/09/17 主婦でもできる Android Layout 50
  51. 51. 新規ドキュメントの設定 ● 画面サイズ 320x480px (Illustlator標準150ppi)。2011/09/17 主婦でもできる Android Layout 51
  52. 52. グリッドの設定 ● 環境設定からグリッドを設定。 ● 分割数は4か8。8分割のがいいと思う。2011/09/17 主婦でもできる Android Layout 52
  53. 53. グリッドを設定後 ● 制作サイズ 320x480px。 ● グリッド 分割数8。 ● 1つの正方形が 8px(8dp)。 ● グリッドを基準に作業。 ● 480x800pxで制作する場合も 一緒です。2011/09/17 主婦でもできる Android Layout 53
  54. 54. Inkscapeでのグリッド設定 ● ファイル(F)→ドキュメントの設定(D)→グリッド。 メジャーグリッドラインの頻度 制作画面サイズ 320x480pxなら 4 640x960pxなら 8 480x800pxでも 8 がいいと思う。2011/09/17 主婦でもできる Android Layout 54
  55. 55. パスからガイドを作成 ● パスで四角を描く。 ● 必要サイズに変更。 ● グリッドを基準に配置。 ● パスからガイドを作成。 ● ひたすら繰り返してガイドを 作る。 ● Inkscapeの場合も同様に。2011/09/17 主婦でもできる Android Layout 55
  56. 56. すべての余白と配置をガイドで ● ガイドで画像と文字のサイズ と配置箇所を作る。 ● コンテンツ別の基準ガイド。 ● 余白を含めた画像と文字の配 置箇所ガイド。 ● 最終画像サイズ用ガイド。最 終的にスライスに変更。2011/09/17 主婦でもできる Android Layout 56
  57. 57. サイズと余白が決まったので、 あとは絵を描くのみ。2011/09/17 主婦でもできる Android Layout 57
  58. 58. ざっくりと作業工程を。2011/09/17 主婦でもできる Android Layout 58
  59. 59. 画像制作工程:都築の場合 ● 基本的には、Illustlatorのみで制作してます。 ● 必要画像をレイアウト画面内で作る。 ● 最初はシェイプ(シルエット)のみで仕上げる。 ● 基本となる配色を決める。背景・文字・ボタンなど。 ● 必要ならPhotoshopのレイヤースタイルで仕上げ。 ● 仕上がり画像サイズはhdpi(density240)用で保存。 ● icon.png なら 72x72px。2011/09/17 主婦でもできる Android Layout 59
  60. 60. さて、やるか。 と、その前に。 良い資料があります。2011/09/17 主婦でもできる Android Layout 60
  61. 61. Android Bazaar and Conference 2011 Summer デザイントラックより。2011/09/17 主婦でもできる Android Layout 61
  62. 62. @tomorrowkey(エンジニア) /山本麻美(WEBデザイナー) Androidアプリデザイン入門編 講演資料 これ必読ですよ。2011/09/17 主婦でもできる Android Layout 62
  63. 63. では、 画像制作その1。 シェイプ画像のみ配置。2011/09/17 主婦でもできる Android Layout 63
  64. 64. レイアウトにシェイプ画像配置 ● 画像を白黒のみでシェイプ (ベースとなる形)を描く。 ● 仕上がりサイズ48x48pxな ら、40x40pxを基準に描く。 ● シェイプのみで描いておけ ば、ベクター画像なので後か ら拡縮しても大丈夫です。2011/09/17 主婦でもできる Android Layout 64
  65. 65. 続いて、 画像制作その2。 配色を決める。2011/09/17 主婦でもできる Android Layout 65
  66. 66. Kuler 一番人気 Honey Pot で配色 ユニバーサルデザインなら右4つ。 ボタン  defaultは黄土色  Focusedで黄色  Pressedでレンガ色 装飾  dividerにレンガ色2011/09/17 主婦でもできる Android Layout 66
  67. 67. COLOURlovers (◕ ” ◕) で配色 やりすぎ。ある意味ありだと思う。 ユニバーサルデザインなら左4つ。 ボタン  defaultはオレンジ  Focusedで黄色  Pressedで赤 装飾  dividerに赤2011/09/17 主婦でもできる Android Layout 67
  68. 68. 配色が決まったら。2011/09/17 主婦でもできる Android Layout 68
  69. 69. ドキュメントサイズをxhdpi向けに ● アートボードサイズを 640x960pxに変更。 ● ガイドとパスで描かれた画像一 式を縦横2倍に拡大する。 ● 文字はptではなくpxで指定。ア ウトライン化しないで、文字サ イズと配置箇所の説明を書いて おく。2011/09/17 主婦でもできる Android Layout 69
  70. 70. ボタン画像の作り方は、 ガイドラインのアイコンと 基本的には一緒です。2011/09/17 主婦でもできる Android Layout 70
  71. 71. ボタン画像の制作ポイント ● ランチャーアイコンの作り方を参考に。 ● 凹凸。グラデーション。光と影。 ● タップする画像だよ~とわかりやすいことが大事。 ● 人の指の大きさに配慮しましょう。 ● Launcher Icons | Android Developers 必ず読んで ください。2011/09/17 主婦でもできる Android Layout 71
  72. 72. ボタン画像の作り方と 配置に関する説明は、 こちら。2011/09/17 主婦でもできる Android Layout 72
  73. 73. Android女子部勉強会@関東(東京) 2011/04/16 Ustream Android UI モバイル 向けUI設計の基礎 by 矢野りん http://ustre.am/_WZwf:LHY2011/09/17 主婦でもできる Android Layout 73
  74. 74. 矢野りん さん と あんざいゆき さん に 頼りっぱなしですいません。2011/09/17 主婦でもできる Android Layout 74
  75. 75. Inkscapeの場合はこちら。 Inkscapeで、タダではじめる GUIデザイン http://www.slideshare.net/cocopon/inkscapegui2011/09/17 主婦でもできる Android Layout 75
  76. 76. ということで、 まとめ。2011/09/17 主婦でもできる Android Layout 76
  77. 77. 画面サイズ 480x800(854)pxで、 私がデザインしない理由。2011/09/17 主婦でもできる Android Layout 77
  78. 78. マルチデバイス対応 ● IS03のレイアウト崩れを未然に回避。 ● 余白を広げて配置することは、実装時に対応可能。 ● 逆に、出来上がった画像をそのまま使って、余白を 削って小さい画面に合わせるのは難しい。 ● 特定の端末のみに、別レイアウトを用意するのは最終 手段。 ● 作業工程が増えるのは極力避けたい。2011/09/17 主婦でもできる Android Layout 78
  79. 79. 『Small Screen first.』。2011/09/17 主婦でもできる Android Layout 79
  80. 80. ご清聴、 ありがとうございました。2011/09/17 主婦でもできる Android Layout 80
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×