主婦でもできる Android Layout
Upcoming SlideShare
Loading in...5
×
 

主婦でもできる Android Layout

on

  • 7,470 views

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

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

Statistics

Views

Total Views
7,470
Views on SlideShare
7,460
Embed Views
10

Actions

Likes
17
Downloads
30
Comments
0

4 Embeds 10

http://paper.li 4
https://twitter.com 3
http://s.deeeki.com 2
https://www.chatwork.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

主婦でもできる Android Layout 主婦でもできる Android Layout Presentation Transcript

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