tande lab.

Androidアプリのデザインの幅を広げるコツとTips 総集編 #aadesigns at GDG2012 に参加してきた

総集編、参加してきました!

今までの総まとめに相応しく、更に分かりやすいスライドです!
@tommmmy さん、毎回本当にありがとうございます。すごすぎる。

総集編も、やっぱりエンジニアの方の参加が多かったです。

イベント概要

イベント名 デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
日時 2012.10.25 Thu. 19:00〜
場所 Google
参加者 ? 名 結構いたよ

4回目までは、ほんとにデザイナー向け内容だったと思うのですが、今回の総集編ではエンジニアがデザイナーに対して Android デザインについてお願いするならこう伝えると良い、というポイントがまとまっているイベントだなと感じました。

以下、メモです。

開催理由

デザイナーとエンジニアがもう少し歩み寄れればいいな、と思って開催。
コードからつかんだデザインのコツを 5つにまとめました。

今日の裏テーマとしては、エンジニアさん向けに、
デザイナーさんにわかりやすく興味を持ってもらうための内容を紹介します。

残念なデザインになる理由は?

エンジニアがデザインを分かっていないから

  • 余白が足りない
  • 1px のハイラインが入ってない
  • 影がない
  • テキストにシャドウをつけたのにない

などなど細かなところを全て無視されて帰ってくる。
でもデザインを勉強していない人だと、そこまで細かなところに気づきにくい。

エンジニアさんに押さえて欲しいポイント

  • 余白

これに注意してもらえれば、かなり解決するはず。

デザイナーが Android デザインの基礎を理解していない

エンジニアさん、無理やり押し付けるのではなく実装しやすいデザインレギュレーションみたいなのを、デザイナーに仕込むというのはどうですか?

デザイナーに dp とか言っても受け入れてくれないと思う。

デザイナーさんの身近な言葉で責める。

デザイナーに分かりやすく興味もってもらうための5つのポイント

ポイント1 : 制作するデザイン案のサイズ

  1. 640*1066 px (ex. Galaxy)
  2. 720*1280 px (ex. Galaxy Nexus)

どちらかで作るといい。
Android Design Guideline では dp単位 で書いてあるけど、それを px に直してみたもの。
デザイナーが dp についてあまり理解していないようだったら、 px で伝えてあげるといいのでは。

  • xhdpi(最高解像度の320dpi) でつくる。
  • デザインを確認する端末によってどちらで作るか決める。
  • Android Design Previre ツールを使う。

ポイント2 : 96px と 4の倍数

48dp Rhythm
Android Design Guidline でも 48dp でデザインするといい、ということが記載されています。

xhdpi だと 48dp = 96px になるので
96px をベースに色々デザインしていくといい。

ポイント3 : 伸縮幅と固定幅

どこが伸縮・固定なのかをはっきりさせるといい。

  • 640px でつくっていたら 720px ではどこが伸びるのか。
  • 720px でつくっていたら 640px ではどこが縮むのか。
  • 余白は固定値としたほうがオススメ。
  • ボタン幅も、1:2 など絶対値ではなく比率で指定すると良い。

4px, 12px, 16px など余白の種類を作っておいて色分けで指示するとかの工夫をして、エンジニアに伝えると、残念なデザインになりにくいハズ。

ポイント4 : 9patch

画像を伸ばすテクニック。

画像を9分割して、四隅は固定、その他を伸びてもいいようにする。

デザイナーはグラデーションボタンなどは、かなりこだわって作っていることが多いはず。
光具合などを計算している場合が多いので勝手に変えられると嫌だと思っています。

デザイナーは、どこが伸びるか指定しよう。
エンジニアは、ちょっと伸び過ぎちゃったとか変に感じたらデザイナーに相談しよう。

お互い、思いやりを持つと良い。

デザイナーと協業するために

  • 実際にデバイスで見るとどう伸びるかを一緒に体験する。
  • Draw9Patch がデザイナーの PC で動くようにする。
  • SDK をインストールするのが敷居高いデザイナー多いはず。

@tommmmy さんの工夫
Draw9Patch を使いやすくするため、オートメーターを使って普通のアプリのように起動できるようにしてる。

ポイント5 : 矩形 <shape>

Web デザインをやっている方ならとっつきやすいハズ。
コードで表現できる矩形のことを知っておいてもらうと良い。

効率的な進め方 -制作フローの再考-

従来の制作フロー
http://www.slideshare.net/toooommmmmmmmy/4androidtips-15080493/126

理想の制作フロー
http://www.slideshare.net/toooommmmmmmmy/4androidtips-15080493/136

ワイヤーフレームさえ決めてしまえば、開発とデザインは同時進行できる。
XMLスタイリングは最後にする。

9patch で画像を作るより <shape> でやったほうが実は楽!!

デザイナーさんも XML 分からなくても <shape> でできることを今回のスライドを利用するなどしてエンジニアさんに伝えて、希望のデザインを叶えてください。

きれいなデザインをするためには

  • 数少ない表現方法でも知っていれば、それなりに組み合わせてきれいなデザインを作れる。
  • 残念になるのは両方が勉強不足?

会場からでた Android デザインの工夫・質問

4px グリッド方眼の上に、デザインカンプを載せるようにして、デザイナーもエンジニアもすぐ見れるようにしてる。

なるほど!

Nexus 10 とか高解像度な Tablet がでてきたが、xhdpi よりも大きいパーツを作らないといけないのか?

残念なお知らせ… xxhdpi というのが存在します。
が、Nexus 10 はギリギリ xhdpi だよ!

Android App Designs アンケート結果発表

デザイナー / エンジニア 双方の意見が聞けて面白かったです。

このパートは詳しくはスライドで見たほうが面白いと思います^-^

感想

総集編、ポイントが総ナメでとても分かりやすかったです。
で、これをどうやって自分の中で消化して周りに伝えていくかが、今後の課題だなぁ。。

前回までの詳細はコチラにまとめています

詳細な内容を見たい場合は各回のまとめ記事をどうぞ!
ほんとにこれ以上分かりやすい Android デザインの勉強会みたことない!!