[Android アプリの UI デザイン] 画面密度の違いを知る

はじめに

今回から数回にかけて Androidアプリのデザインアセットの作りかた について、予め知っておいたほうがよい知識、便利なツールの使いかた、効率的な作りかたのコツなどを紹介していきたいと思います。 今回は Androidの画面密度の違いを考慮したデザインアセットの作りかた について紹介します。

画面密度の違いを知る

Androidアプリのデザインをする上で最重要視されるのが 端末の差異を考慮すること だと思います。 Androidアプリでは端末の画面解像度によって、以下のグループに分けられています。

解像度は徐々に上がっているので、最近は xhdpi の機種がどんどん増えてきています。 Android4.0を搭載している端末のほとんどは hdpi か xhdpi になっていると思います。 近いうちに xhdpi より高い画面密度の端末が出てくるかもしれませんね。

デザインアセットは3つ用意しなければいけない！

端末の画面密度がさまざまだということがわかりましたが、 ボタンのスキンなどのようなデザインアセットは原則的に 1パーツにつき画面密度ごとに3種類用意する必要があります。 3種類とは、 mdpi と hdpi と xhdpi です(ldpiは対象端末が少ないので、重点的に対応する必要はないと思います)。 画面密度ごとにファイルを用意しないと各端末で綺麗に表示させることができません。 ボタンスキンやアイコンなどのアセットファイルが対象になると思います。 画像ファイルのサイズは、 mdpi を等倍に、 hdpi では1.5倍、 xhdpi では2倍のサイズの画像ファイルを作ります。 例えば、アプリアイコンのファイルは以下のように用意します。

アセットの画像サイズは偶数で指定したほうがよい？

画像のサイズは mdpi を基準に、 hdpi は 1.5倍、 xhdpiでは2倍になっています。 そのため mdpi の画像が奇数だと、 hdpi の画像サイズで端数が出てしまいます。 (例えば、mdpi が 15px だと、 hdpi は 22.5px になってしまう) 小数点以下の値は切り上げ/切り下げしなければいけないので、 各画面密度で等間隔なサイズにすることができません。 そのため基準となる mdpi の画像サイズは偶数にしたほうが無難だと思います。 思わぬレイアウト崩れが発生する可能性もあるので、 デザインアセットを作る上で、この点は認識しておくべきですね。

まとめ

今回の内容は、Androidアプリをデザインする上でかなり基礎的なところなので、 確実に押さえていないといけないところだと思います。 次回は実装で使われるデザインアセットの種類について解説したいと思います！