さて、今回はAndroidアプリのUIまわりについて書いてみたいと思います。
iPhoneアプリに比べて、AndroidアプリのUI仕様は、わりとWebに近いところがあります。Webの仕事の経験があるデザイナーさんは入りやすいところもあるのですが、マルチディスプレイ対応など面倒なところもあります。
デザイナーさんに聞かれた質問について簡単にまとめてみたいと思います。
1. iPhoneアプリのデザインって流用できますか？
流用はできるだけ避けたいです。
たとえばTwitterやFacebookのアプリなど、両プラットフォームに多くのユーザーを持つアプリを見ても、iPhoneとAndroidではデザインが変わっているのが分かると思います。
Androidのデザインは、OSの標準UIが、iPhoneと比べてフラットでシャープな感じなので、アプリのデザインの方もできればそれに合わせたいところです。
アプリのナビゲーションも、「戻る」「メニュー」ボタンがあることでだいぶ変わってきます。
具体的な違いについては、iPhoneとAndroid両方でているアプリをたくさん見比べるのがいいと思いますが、まとまった資料としては、Google UIチームが昨年5月に行った「Android UI design patterns」というセッションのビデオ・スライドがおすすめです。
iPhoneには「iOS Human Interface Guidelines」というドキュメントがあって、デザイン全体の要点をまとめていますが、このセッションでは同じように、Googleの開発チームによるAndroidデザインの考え方に触れることができます。
それに加えて、使い回しのきく5つのデザインパターンと、そのケーススタディとして、Twitterアプリが紹介されています。
2. pxは使えないんですか？
Androidではアプリのビュー（見た目）はXMLで記述します。WebアプリがビューにHTMLのテンプレートを使うのと似た感じで、記述もHTMLとよく似ています。
このXMLで、フォントや画像、コンテナの大きさを指定するときには、おもにdpという単位を使います。
正式名はdensity independent pixelといって、ピクセルに解像度の高さを掛けたものです。ややこしいですが、こうすると解像度が異なる端末でも見かけの大きさが揃うようになります。
逆にいえば、pxでサイズ指定すると、解像度によって表示される大きさがばらばらになってしまいます。
こんな感じです。そこで大きさの単位にはdpを使うことが推奨されています。
Androidはディスプレイの解像度の高さを3段階（最新ドキュメントでは4段階）に分けています。中解像度、160dpiが基準で、このとき1dp=1pxとなります。240dpiでは1dp=1.5pxです。
| インチ数 | 100dp | |
| 低解像度 | 120dpi | 75px |
| 中解像度 | 160dpi | 75px |
| 高解像度 | 240dpi | 150px |
現行機種では、次のようにディスプレイは高解像度のものが多いです。
| インチ数 | ドット数 | 解像度 | |
| Galaxy S | 4型 | 480×800 | 240dpi |
| IS03 | 3.5型 | 640x960 | 320dpi |
| Lynx 3D | 3.8型 | 480×800 | 240dpi |
| Xperia | 4型 | 480×854 | 240dpi |
| Galaxy Tab | 7型 | 600×1024 | 240dpi |
3. 素材の画像はどう出力すればいいんですか？
dpはAndroid独自の単位なので、素材の画像はpxで書き出します。そのとき何pxで出力すればいいのか、という点が問題ですが、大きくふたつの方法があります。
オートスケール
Androidには、解像度に合わせて画像を拡縮する機能があります。
ひとつの画像でも、低解像度向けには小さく、高解像度向けには大きく、サイズを調整して表示してくれます。
この方法の問題は、拡大された画像が粗くなって見える場合があることです。
そこで、アイコンやロゴなど、どの解像度向けにもきれいに表示させたい場合には、次のプレスケールと呼ばれる方法を使います。
プレスケール
プレスケールは、こちら側で解像度別に素材を用意する方法です。たとえば、100dp × 30dpのロゴを、中解像度と高解像度向けに用意する場合、100px × 30px（中）、150px × 45px（高）の画像を２つ書き出すことになります。
それを解像度別のフォルダに入れます。
drawableというフォルダが、画像などリソース場所の置き場ですが、その下に-hdpi、-mdpiなどがついたフォルダがあります。これが解像度別のフォルダになるので、高解像度用は-hdpiに、中解像度用は-mdpiに入れます。するとそれぞれの環境で使い分けがされます。
このオートスケール、プレスケールを使い分けて、画像の素材を準備していくことになります。
Androidはディスプレイがさまざまなので、それを考慮したデザインが必要ですが、解像度やディスプレイサイズの違いを吸収するしくみもありますので、それをうまく利用したUI設計をしたいですね。