logo

back DEVELOPMENT

初めてAndroidアプリをデザインするときの基本の「き」

2014年08月28日

Androidアプリのデザインを初めてするときに知っておきたいようなtipsを中心にまとめてみました。ぼくもあんまりAndroidアプリのデザインには慣れてはいないのですが、最近本格的にとりかかる機会があり、わからないながらもあれこれ調べてメモしていたものをまとめました。

これから初めてAndroidアプリをデザインするデザイナーさんが安心して作業にとりかかれるようになればいいなぁ。


デザインを始める前に知っておきたいこと

まずAndroidのアプリデザインをする上でハードウェア(ディスプレイ)について理解する必要があります。単にディスプレイといってもAndroidには画面密度が複数あり、見かけ上同じサイズに見えても密度が違っていることがあります。これはiPhoneでいうところのRetinaと非Retinaみたいな感じ

ここを理解できるかが鬼門ですが、考え方さえわかってしまえば簡単なので頑張るぞい!

pxではなくdipで考える

画面密度の種類は代表的なものでmdpi、hdpi、xhdpi、xxhdpiの4種類あると覚えておきましょう。mdpiを1として、その1.5倍がhdpi、2倍がxhdpi、3倍がxxhdpiという関係性になっています。

それぞれの画面をピクセルで例えてしまうと、例えばmdpiだと100pxだったものが同じみかけなのにxhdpiだと200pxになってしまったりかなりわかりづらい状態になってしまいます。そこでAndroidではdip(dp)という単位が採用されており、dip(dp)はmdpiを1として、その1.5倍がhdpi、2倍がxhdpi、3倍がxxhdpiと換算されエンジニアとはpxではなくdip(dp)という単位を使ってコミュニケーションするだけでどの画面密度であっても同じ大きさで指定することができます。

ポイント

  • pxではなくdip(dp)という単位を使ってコミュニケーションする
  • dip(dp)はmdpiを1として、その1.5倍がhdpi、2倍がxhdpi、3倍がxxhdpi
  • 一番大事なのはdipでサイズ指定できること
  • dp↔pxのチートシートを作ってみました

デザインを始める

ディスプレイサイズについて理解したところで、実際にPhotoshopなどでデザイン作業に入ります。新規作成のキャンバスサイズの決め方としては、画面横幅は480系(480px、640px)と540系(540px、720px、1080px)があるのですが、いまは540系が主流なのでxhdpiの720pxかxxhdpiの1080pxかで作るのが好ましいようです。

xhdpi(720×1280)で作るパターン

xxhdpi(1080×1920)で作るパターン

参考:Androidのdip(dp)ってpxに換算すると何なのさ!-めんどくさいのでDip Calc作りました-

ポイント

  • キャンバスサイズの横幅は540系(540px、720px、1080px)にあわせる
  • **xhdpiだと720px、xxhdpiだと1080px **
  • xhdpiで作ると4px単位でdpが扱えるのでわりと作りやすい

UIで知っておきたいこと

ここからはGoogleのデザインガイドラインの話になります。一部大事そうなところを抜粋してみました。絶対これに沿って作らないとダメ!というものではありませんが、ある程度沿うことでAndroidっぽい印象を与えたり他アプリとの親和性も高まると思います。

UI要素のサイズ

iOSだと88pxがボタンやテーブルセルの大きさの基準になっていますが、Androidでは48dp(= xhdpiでいう96px)を基準につくることが推奨されています。これに合わせることでAndroidに慣れたユーザーがデザイン的なストレスを感じることなくボタンタップすることが少なくなります。

マージンのサイズ

マージンは16dp、8dpくらいにするとちょうどいいとガイドラインには明記されています。どのようなマージンサイズやボックスサイズにしろ、dipは偶数になるようデザインするとhdpiでも整数pxになるので意識しておくといいです。

参考:Metrics and Grids

フォントサイズについて

Androidではフォントサイズの単位はspが使われています。spとはユーザのフォントサイズ設定に準じる設定ですが、デフォルトの設定にしているときに合わせるならば基本的にdpと同じと思っても大丈夫です。

具体的な数値でいうと、Androidの本文の標準のフォントサイズは14sp。その他フォントサイズはガイドラインを参考にするといいかもしれません。(アルファベットでの最適サイズなので、日本語の場合少し小さめにするなど調整は必要ですが)

参考:Material Design – Style > Typography

Androidのタブ

Androidのタブはナビゲーションバー(App Bar)のすぐ下にあります。iPhoneアプリのデザインの要領で下にタブを設置してしまうと、AndroidのOSメニューと重なって2段になってしまうので注意しましょう。

また、このタブはそれぞれ横フリックでシームレスに移動できるのが特徴。タップして移動するというより基本的にタブはタップしないでフリック(ジェスチャ)で切り替えることが一般的で、ユーザーもその動作にかなり習熟しているのであると便利な模様。

参考:Material Design – Components > Tabs

公式の素材

Googleが公式で配布している、アイコンやUIパーツなどの素材データがいくつかあるのでそれもチェックしておくといいでしょう。

参考:Developers – Downloads
参考:Material Design – Resources > Sticker Sheets

ポイント

  • UI要素の基準は48dpで作る
  • 偶数dpにしておくとあとあと融通が効きそう
  • 標準のフォントサイズは14sp
  • Androidのタブはナビゲーションバーのすぐ下にあるのが一般的

というわけでぼくなりに調べてみたり実際に手を動かして不明に思ったところなどを中心にtipsをまとめてみました。もし間違っているところやご指摘などあればこちらからご連絡ください。

シェアしてね

2014年08月28日

, , , , , , , , , , , , , , , , , ,

top TOP
自己紹介
picture
KEISUKE TSUKAYOSHI

UX Designer / UI Designer.

株式会社Fablicでフリマアプリ"FRIL"などの事業サービスのプロダクトマネジメントやデザインを担当しています。

実績など詳しくはこちら

copyrights(c) Keisuke Tsukayoshi.