Excite Designer's Blog

Androidアプリーリソース画像サイズ&種類ー

iPhone・iPadアプリを制作する時、リソース画像は

① 従来のディスプレイ用
② Retina ディスプレイ用

上記の2種類が必要ですね。

Androidアプリも同じようにdpiごとにリソース画像を用意する必要があります。
今回は

1. 必要となるリソース画像サイズの種類
2. デザインする時の画面サイズ
3. アイコンサイズのガイドライン

などAndroidアプリのリソース画像を作る時に役に立つ情報をまとめてみました。




必要となるリソース画像サイズの種類

Androidアプリのリソース画像は対応するdpiによって用意する画像サイズが変わります。

まず、dpiって何でしょう。
dpiは『Dot Per Inch』、1インチ辺りのピクセル数を意味します。つまりdpi数値が高くなるとディスプレイが鮮明できれいになります。

dpiは主にldpi(低解像度)、mdpi(中解像度)、hdpi(高解像度)、xhdpi(超高解像度)、xxhdpi(超高解像度)のようにグループが分けられます。

各グループのdpi数値は以下のようになります。

<表1>
 ldpi
(低解像度)
mdpi
(中解像度)
hdpi
(高解像度)
xhdpi
(超高解像度)
xxhdpi
(超超高解像度)
dpi数値120160240320480


以下はAndroid端末のディスプレイdpiのシェア率です。
(参考)http://developer.android.com/about/dashboards/index.html#OpenGL

<表2>
 端末の例シェア率
(※1)
ldpi(120dpi) 2.2%
mdpi(160dpi)Kindle Fire(参考:iPhone3、iPad1、iPad2、iPad mini)18%
hdpi(240dpi)Nexus 7、Galaxy S、Galaxy S Ⅱ、Xperia arc51.1%
xhdpi(320dpi)Galaxy Nexus(参考:iPhone4以降、iPad3、iPad4)28.7%
xxhdpi(480dpi)2012年冬・2013年春モデル-
(※1)2012年10月、最終7日間google playにアクセスしたAndroid端末数を計算

上記の表のようにldpiのシェア率はかなり低いのでldpi用のリソース画像を用意する必要はほぼありません。
基本的には、mdpi、hdpi、xhdpi用の画像を用意すれば良いです。
2012年冬からxxhdpiディスプレイの端末が登場したので、今後はxxhdpiも対応しなければなりません。
代わりにmdpiのシェア率がかなり低くなって来たので(国内だともっと低いはず)、mdpi対応はそろそろ要らなくなるのかと思います。


デザインする時の画面サイズ

iPhoneの場合はmdpi(iPhone3・iPhone3s)とxhdpi(iPhone4以降)の2種類のリソース画像が必要ですが(表2を参考)Android端末だとmdpi、hdpi、xhdpi、xxhdpiの4種類のリソース画像を用意しなければなりません。(場合のよってはhdpi、xhdpi、xxhdpiの3種類)

しかも端末によって縦横のサイズやその比率がバラバラなので、どれくらいの画面サイズでデザインすればいいのか悩みます。
私はとりあえず以下のようにdpiごとに画面サイズを決めて作業しています。

<表3>
 比率画面サイズ備考
mdpi(160dpi)baseline360×640px320×480px、
320×432pxなど
hdpi(240dpi)1.5x540×960px480×800px、
480×854pxなど
xhdpi(320dpi)2x720×1280px640×960pxなど
xxhdpi(480dpi)3x1080×1920px 

最初にデザインする画面サイズは一番大きいxxhdpiの1080×1920pxにしてdpiごとに縮小するか、ベースラインとなるmdpiの360×640pxからデザインして拡大していくかですね。
ひとつ気をつけてほしいのは備考のように同じdpiでも端末によって縦横サイズが違いますので縦横サイズが多少変わっても安全なデザインにすることです。

アイコンサイズのガイドライン

最後にUI構成に必要なdpiごとのアイコンサイズをまとめました。
(参考)http://developer.android.com/guide/practices/ui_guideline/icon_design.html

xhdpi、xxhdpiのサイズを追記しました。
(参考)表3の比率を参考して計算

<表4>
 ldpi
mdpihdpi
xhdpixxhdpi
ランチャーアイコン36×36px48×48px72×72px96×96px144×144px
メニューアイコン
(Android3.0以降からアクションバーが代る)
24×24px
(余白含めて36×36px)
32×32px
(余白含めて48×48px)
48×48px
(余白含めて72×72px)
--
アクションバーのアイコン18×18px24×24px36×36px48×48px72×72px
ステータスバーのアイコン18×18px24×24px36×36px48×48px72×72px
タブアイコン22×22px
(余白含めて24×24px)
28×28px
(余白含めて32×32px)
42×42px
(余白含めて48×48px)
56×56px
(余白含めて64×64px)
86×86px
(余白含めて96×96px)
ダイアログのアイコン24×24px32×32px48×48px64×64px96×96px
リストビューのアイコン24×24px32×32px48×48px64×64px96×96px

by spdesigner | 2013-02-18 17:59 | Tips | Comments(0)


Exciteのデザイナーのブログです。


by spdesigner

検索

カテゴリ

design
アプリ紹介
検証
Tips
ブックマーク
iOS

タグ

外部リンク