第5回ミーティング - 主婦でも出来るAndroidアプリ向けデザイン講座 †
開催日時 †
2011/9/17(土) 10:00 ~ 17:00
場所 †
静岡県西部地域交流プラザパレット ミーティングルーム B
参加者 †
16名
内容 †
- 「主婦でも出来るAndroidアプリ向けデザイン講座」
- 講師:都築博己氏( Android 名古屋 つくる部、Android 女子部 )
- 午前資料
- 午後資料
- LTは次回へ持ち越しとなりました。
長時間の講演ならびに聴講、ありがとうございました。
twitterの呟き抜粋 †
- @project_dev_tkの関連するつぶやき
- 端末の仕様確認は最初にやっとくこと。 (posted at 15:44:31)
- アイコンが小さくても余白をうまく持てば操作に支障がでない (posted at 14:55:03)
- Color Palいいな。 (posted at 11:34:26)
- なので、中間色つかって、色のトーンを下げるといいのね (posted at 11:31:50)
- 機種によって色の出方にばらつきがあるのね。 (posted at 11:30:52)
- ほかの方のつぶやき
- ターゲットとするユーザ層によって適切な UI は変わる (posted at 10:42:14)
- 画面の遷移、階層を最初に検討する。ユーザが迷子にならないように。 (posted at 10:45:11)
- 「戻る」キーの挙動に一貫性を持たせること。 (posted at 10:46:38)
- 必要に応じて物理キーを殺さないといけない (posted at 10:47:43)
- レイアウトは 4 つ。スマホの縦と横、タブレットの横と縦。 (posted at 10:52:13)
- 原則はスモール・スクリーン・ファースト (posted at 10:55:43)
- とにかく全部をスケッチブックに手描 (posted at 11:02:08)
- レイアウト作成ツール。Illustrator 、Inkscape 、Cacoo 、Stencil とか。 (posted at 11:04:37)
- レイアウト案を囲んで UI を検討 (posted at 11:06:05)
- 余白と UI と共通レイアウトを決める (posted at 11:08:10)
- 余白は誤操作を避けるため重要。UI は使い易い&分かり易いを優先。 (posted at 11:09:12)
- 共通レイアウト箇所を決める。Fragment 対応も考える。 (posted at 11:11:38)
- 共通部分をデザイナに発注するときはパーツ単位で頼むのが吉。 (posted at 11:14:01)
- 共通レイアウトは Fragment 対応が必須 (posted at 11:18:07)
- 必要な画像の一覧を作成すること (posted at 11:22:01)
- 画像ファイルの命名規則がある。Android Develpers>Icon Design Guidelines (posted at 11:23:17)
- 画像をデザイナに発注するときファイル名を指定してやること (posted at 11:24:49)
- 配色を決める。中間色を使う。基本は 3 色。カラーパレットを利用するといい。 (posted at 11:35:37)
- カラーパレット。Adobe Kuler 、COLOURlovers とか。#haghama(posted at 11:36:07)
- 視覚異常者に配慮するため同系色でコントラスト (posted at 11:37:41)
- 画像の作成について。手順の説明を聞いてて聞き慣れない用語もたくさん出てきてよく分からず。 (posted at 11:50:19)
- 開発者とデザイナの距離。仲介する存在が必要。 (posted at 12:05:13)
- エンジニアがデザイナに遠慮なく指示すること (posted at 12:15:11)
- WebView?+JavaScript? の使用は鬼門。JavaScript? の挙動が端末によってバラバラ。 (posted at 12:32:20)
- 「dp」Density-independent pixel 。Android 開発で使用するサイズの単位。px = dp * (dpi / 160) 。 (posted at 14:08:17)
- 用意する画像はシェアが高い hdpi 用に準備しておけば OK 。解像度が違う端末ではそれを拡大縮小して表示してくれる。 (posted at 14:25:27)
- 画像を他言語対応するとき。英語用が「drawable-hdpi」なら日本語用は「drawable-ja-hdpi」に置く。ファイル名は同じ。 (posted at 14:33:06)
- 次期の Android のデザインはどうなるか。最近 Google がリリースしてるウェブサイトや Android アプリのデザインの変化が気になる。 (posted at 14:49:16)
- アイコンのデザインガイド。Android Develper>User Interface Guidelines>Icon Design Guidelines 。 (posted at 14:55:19)
- ランチャアイコン。hdpi の場合。画像ファイルは 72×72px 。絵の部分は 60×60px ないし 56×56px に収まるように。 (posted at 15:02:15)
- ランチャアイコン。デザインガイドに推奨カラーも指定されてる。やっぱり中間色。 (posted at 15:08:04)
- ランチャアイコン。トップライトやドロップシャドウ、ノイズのエフェクト効果の指定もある。 (posted at 15:09:12)
- ランチャアイコン。要するに、3 色くらいまで、中間色、エフェクト効果……でアイコンらしくなる。 (posted at 15:11:53)
- ランチャアイコン。便利なウェブサイト。Android Asset Studio 、Android Vector Icon Template Pack など。 (posted at 15:13:33)
- グラデーションかかった画像に 9-patch 使うにはコツが要る (posted at 15:29:02)
参考 †