秋葉ちひろのAndroidアプリデザイン入門（5）
第5回 ガイドラインからみたAndroidアプリデザインの特徴3
2013年4月18日
解説・文：秋葉ちひろ
いよいよ5回目となりました。Androidの多すぎる解像度や画面密度にうんざりしていませんか？ この回では、マルチデバイスに対応するために、デザインを作成するときのサイズについて詳しくみていきましょう。
2013年4月18日
解説・文：秋葉ちひろ
いよいよ5回目となりました。Androidの多すぎる解像度や画面密度にうんざりしていませんか？ この回では、マルチデバイスに対応するために、デザインを作成するときのサイズについて詳しくみていきましょう。
■Android端末の画面サイズについて
アプリデザインを考える上でベースとなり、最も重要なのが画面サイズです。しかし、第2回でもお伝えしましたが、Androidには書ききれないほどの画面サイズ／解像度があり、縦横比さえもまったくバラバラです。それでは、Androidアプリのデザインを依頼されたときには、いったいどれぐらいの大きさで作ればよいのでしょうか。
●解像度とピクセル密度/密度グループ
解像度というのは、「px（ピクセル）」という単位であらわされる画面のサイズです。Webサイトを作るときにも使っている、あのピクセルです。現在発売されている中でいちばん大きな解像度のスマートフォンは、「1080×1920px」という大きさで、これは普段使っているパソコンやモニターと比較してみると、ほぼ21インチワイドのモニターと同じ大きさに匹敵します。
スマートフォンとPCの画面（21インチワイド）に、
同じ1080×1920pxの画像を表示させている状態
（クリックすると拡大します）
なぜ解像度が同じなのに物理的なサイズがこんなにちがうのかというと、これはピクセル密度のちがいによるものです。ピクセル密度はppi（Pixel Per Inch）という単位であらわされ、1平方インチあたり何個のピクセルが入るかというのを意味しています。
写真のスマートフォンはピクセル密度が440ppi、パソコンのモニターは110ppiなので、スマートフォンではパソコンの約4分の1の大きさにピクセルが凝縮されていることになります。ピクセル密度の高いスマートフォンでは、ひとつぶのピクセルの大きさも小さくなり、いわゆる「高画質」と呼ばれるわけです。
写真のスマートフォンはピクセル密度が440ppi、パソコンのモニターは110ppiなので、スマートフォンではパソコンの約4分の1の大きさにピクセルが凝縮されていることになります。ピクセル密度の高いスマートフォンでは、ひとつぶのピクセルの大きさも小さくなり、いわゆる「高画質」と呼ばれるわけです。
ピクセル密度のちがい（クリックすると拡大します）
Androidのピクセル密度は端末によってまちまちですが、ある程度まとめて考えられるよう、「密度グループ」というものが定められており、それぞれに名前がついています。
ピクセル密度と密度グループ、割合の比較
現在主流となっている密度グループは「hdpi」と「xhdpi」ですが、まだ使われているであろう「mdpi」と、現在の最新端末の「xxhdpi」までカバーしておくのがいいと思います。
●Androidアプリ特有の単位
Androidアプリを実装するときには、特有の単位を使います。それは「dp（もしくはdip）」と表記し、「Device Independent Pixel」つまり「デバイスに依存しないピクセル」というものです。
では、デバイスに依存しないピクセルとはどういったものでしょうか。これは、Web制作をしているときの「viewport」の概念によく似ています。
たとえば、スマートフォン用のWebサイトを作っているときには、viewportを設定すると思います。このとき、iPhone 3G/3GS の場合、横幅が320pxというのは納得できるのですが、iPhone 4以降のretinaディスプレイの場合、物理的な横幅は640pxなのに、viewportを設定すると横幅は320pxと解釈されます。
これと同じようにAndroid端末でも、物理的なピクセル数はちがっても同じ数値で扱おうとするのが「dp」という単位なのです。この「dp」という単位は、mdpiのときに1px＝1dpとなるように定義されています。従って、mdpiでは物理的な横幅が320pxですので320dpと表現されます。
また、hdpiでは物理的な横幅は480pxですが、これも320dpと表現しますので、実質的に1.5px＝1dpという計算になり、ちょっと変な感じがします。各密度グループでまとめると下表のようになります。
各密度グループにおける物理的なピクセル数とdpの関係
現在主流となっている端末におけるdpの値は、その端末によって決まっています。少し古いもので320dp、最新端末だと360dpのほぼ2種類しかありません。各密度グループによって実装時にすべての数値を変えるのは大変なので、こういったdpという単位を使って実装が楽にできるように工夫されています。
しかし、ビットマップ画像を使う場合には、それぞれの物理的なピクセル数で作成するのがベストです。小さなサイズの画像しかない場合だと高ピクセル密度の端末でみたときには画像が荒れてしまいますし、逆に大きなサイズの画像しかない場合だと、低ピクセル密度の端末でみたときに無駄に大きなサイズの画像を表示させなければならなくなってしまうからです。
つまり、mdpi、hdpi、xhdpi、xxhdpiの密度グループに対応したアプリを作るとすれば、4種類のサイズのビットマップ画像が必要になってくるわけです。とはいえ、すべての大きさで作ることは大変面倒ですので、いちばん大きなxxhdpi用をひととおり作っておいて、低ピクセル密度用には縮小するのがいいでしょう。
| 密度グループ | 密度グループの名前 |
|---|---|
| 160 | mdpi |
| 240 | hdpi |
| 320 | xhdpi |
| 480 | xxhdpi |
現在主流となっている密度グループは「hdpi」と「xhdpi」ですが、まだ使われているであろう「mdpi」と、現在の最新端末の「xxhdpi」までカバーしておくのがいいと思います。
●Androidアプリ特有の単位
Androidアプリを実装するときには、特有の単位を使います。それは「dp（もしくはdip）」と表記し、「Device Independent Pixel」つまり「デバイスに依存しないピクセル」というものです。
では、デバイスに依存しないピクセルとはどういったものでしょうか。これは、Web制作をしているときの「viewport」の概念によく似ています。
たとえば、スマートフォン用のWebサイトを作っているときには、viewportを設定すると思います。このとき、iPhone 3G/3GS の場合、横幅が320pxというのは納得できるのですが、iPhone 4以降のretinaディスプレイの場合、物理的な横幅は640pxなのに、viewportを設定すると横幅は320pxと解釈されます。
これと同じようにAndroid端末でも、物理的なピクセル数はちがっても同じ数値で扱おうとするのが「dp」という単位なのです。この「dp」という単位は、mdpiのときに1px＝1dpとなるように定義されています。従って、mdpiでは物理的な横幅が320pxですので320dpと表現されます。
また、hdpiでは物理的な横幅は480pxですが、これも320dpと表現しますので、実質的に1.5px＝1dpという計算になり、ちょっと変な感じがします。各密度グループでまとめると下表のようになります。
| 密度グループ | 物理的なピクセル数 | dp | |
|---|---|---|---|
| mdpi(160dpi) | 320px | 320dp | 1px＝1dp |
| hdpi(240dpi) | 480px | 320dp | 1.5px＝1dp |
| xhdpi(320dpi) | 720px | 360dp | 2px＝1dp |
| xxhdpi(480dpi) | 1080px | 360dp | 3px＝1dp |
現在主流となっている端末におけるdpの値は、その端末によって決まっています。少し古いもので320dp、最新端末だと360dpのほぼ2種類しかありません。各密度グループによって実装時にすべての数値を変えるのは大変なので、こういったdpという単位を使って実装が楽にできるように工夫されています。
しかし、ビットマップ画像を使う場合には、それぞれの物理的なピクセル数で作成するのがベストです。小さなサイズの画像しかない場合だと高ピクセル密度の端末でみたときには画像が荒れてしまいますし、逆に大きなサイズの画像しかない場合だと、低ピクセル密度の端末でみたときに無駄に大きなサイズの画像を表示させなければならなくなってしまうからです。
つまり、mdpi、hdpi、xhdpi、xxhdpiの密度グループに対応したアプリを作るとすれば、4種類のサイズのビットマップ画像が必要になってくるわけです。とはいえ、すべての大きさで作ることは大変面倒ですので、いちばん大きなxxhdpi用をひととおり作っておいて、低ピクセル密度用には縮小するのがいいでしょう。
■マルチデバイス対応させるためのコツ
細かい話を気にしているとどんどん難しいと思う気持ちが出てくるかもしれませんが、マルチデバイスに対応させるためのコツはたったひとつです。
●ビットマップ画像を作成するときは、「6の倍数」
それでは、実際にパーツを作成するときの例を見てみましょう。まず、xxhdpi用に画面を作り、ビットマップ画像を切り出します。
xxhdpi用の画面と、切り出したビットマップ画像（クリックすると拡大します）
＃実際のアプリ：「カンペ・リモート」
このサンプルでは、ビットマップ画像の大きさは258×342pxです。では、切り出した画像をそれぞれの密度グループごとにリサイズしていきます。下表をみてください。
密度グループをみると、[mdpi：hdpi：xhdpi：xxhdpi ＝ 1：1.5：2：3]という比になっていますので、xxhdpiの画像の大きさを基準にすれば、必要な画像の大きさは自動的に決まっていきます。
このサンプルでは、どの密度グループ用に計算しても、値はすべて整数になりましたが、そのためにはコツが必要です。それが「6の倍数」なのです。xxhdpi用で6の倍数のピクセルであれば、どの密度グループにリサイズしても、値はきちんと整数になります。
計算方法は、次のとおりです。
このサンプルでは、ビットマップ画像の大きさは258×342pxです。では、切り出した画像をそれぞれの密度グループごとにリサイズしていきます。下表をみてください。
| 密度グループ | ビットマップ画像の大きさ(px) |
|---|---|
| mdpi(160dpi) | 86x114 |
| hdpi(240dpi) | 129x171 |
| xhdpi(320dpi) | 172x228 |
| xxhdpi(480dpi) | 258x342（基準） |
密度グループをみると、[mdpi：hdpi：xhdpi：xxhdpi ＝ 1：1.5：2：3]という比になっていますので、xxhdpiの画像の大きさを基準にすれば、必要な画像の大きさは自動的に決まっていきます。
このサンプルでは、どの密度グループ用に計算しても、値はすべて整数になりましたが、そのためにはコツが必要です。それが「6の倍数」なのです。xxhdpi用で6の倍数のピクセルであれば、どの密度グループにリサイズしても、値はきちんと整数になります。
計算方法は、次のとおりです。
ビットマップ画像を縮小するときのしくみ（クリックすると拡大します）
密度グループごとのリサイズをエンジニアにまかせる場合でも、xxhdpi用で6の倍数のビットマップ画像を作って渡すと、きっと喜ばれると思います。
ちなみにmdpiよりも小さい密度グループに「ldpi（120dpi）」があります。現在使われている割合は非常に少ないので、対応することはほとんどないと思いますが、もしldpiにも対応しなければならない場合は、「xxhdpi用で12の倍数のサイズのビットマップ画像」にすると、すべての密度グループで整数になります。
次回はいよいよこの連載の最終回となります。今までの内容をふまえた上で、Androidアプリのデザインについて総括的にまとめていきたいと思います。
ちなみにmdpiよりも小さい密度グループに「ldpi（120dpi）」があります。現在使われている割合は非常に少ないので、対応することはほとんどないと思いますが、もしldpiにも対応しなければならない場合は、「xxhdpi用で12の倍数のサイズのビットマップ画像」にすると、すべての密度グループで整数になります。
次回はいよいよこの連載の最終回となります。今までの内容をふまえた上で、Androidアプリのデザインについて総括的にまとめていきたいと思います。
[記事リンク]
>>> 「秋葉ちひろのAndroidアプリデザイン入門」目次へ戻る
>>> 第1回「iPhoneアプリとAndroidアプリのデザインの違い（前編）」はこちら（2/21公開）
>>> 第2回「iPhoneアプリとAndroidアプリのデザインの違い（後編）」はこちら（3/7公開）
>>> 第3回「ガイドラインからみた、Androidアプリデザインの特徴1」はこちら（3/21公開）
>>> 第4回「ガイドラインからみた、Androidアプリデザインの特徴2」（4/4公開）
>>> 第5回「ガイドラインからみた、Androidアプリデザインの特徴3」（4/18公開）
>>> 第6回「これからのアプリデザインに必要な知識とスキル、それをとりまく環境」（5/2公開予定）
>>> 「秋葉ちひろのAndroidアプリデザイン入門」目次へ戻る
>>> 第1回「iPhoneアプリとAndroidアプリのデザインの違い（前編）」はこちら（2/21公開）
>>> 第2回「iPhoneアプリとAndroidアプリのデザインの違い（後編）」はこちら（3/7公開）
>>> 第3回「ガイドラインからみた、Androidアプリデザインの特徴1」はこちら（3/21公開）
>>> 第4回「ガイドラインからみた、Androidアプリデザインの特徴2」（4/4公開）
>>> 第5回「ガイドラインからみた、Androidアプリデザインの特徴3」（4/18公開）
>>> 第6回「これからのアプリデザインに必要な知識とスキル、それをとりまく環境」（5/2公開予定）
【著者プロフィール】
株式会社ツクロア
デザイナー／アートディレクター 秋葉ちひろ（あきばちひろ）
●Web制作に従事する傍らAndroidデザイン・XML実装までを担当。デザインや実装に関する講演、執筆、寄稿なども多数手がける。2012年後半はBaidu JapanにてAndroidアプリ⌈Simeji⌋の開発に携わる。2013年4月に株式会社ツクロアを設立。言われたデザインをただ指示通りに作るだけでなく、構造や仕様もデザイナー側から言及できるよう、ハードウェアやソフトウェアプログラミングなどの勉強にも余念がない。技術にとらわれずに体験からデザインを考えるコミュニティ⌈デザイナーズハック⌋を運営。もの作りが好きなことが原点。
●株式会社ツクロア：http://tuqulore.com
●Lady Beetle Design（個人ブログ）：http://www.ladybeetle-design.com
●Twitter：@tommmmy
