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>
以下はAndroid端末のディスプレイdpiのシェア率です。
(参考)http://developer.android.com/about/dashboards/index.html#OpenGL
<表2>
(※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>
最初にデザインする画面サイズは一番大きい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>
① 従来のディスプレイ用
② 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数値 | 120 | 160 | 240 | 320 | 480 |
以下は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 arc | 51.1% |
xhdpi(320dpi) | Galaxy Nexus(参考:iPhone4以降、iPad3、iPad4) | 28.7% |
xxhdpi(480dpi) | 2012年冬・2013年春モデル | - |
上記の表のように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) | baseline | 360×640px | 320×480px、 320×432pxなど |
hdpi(240dpi) | 1.5x | 540×960px | 480×800px、 480×854pxなど |
xhdpi(320dpi) | 2x | 720×1280px | 640×960pxなど |
xxhdpi(480dpi) | 3x | 1080×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 | mdpi | hdpi | xhdpi | xxhdpi | |
ランチャーアイコン | 36×36px | 48×48px | 72×72px | 96×96px | 144×144px |
メニューアイコン (Android3.0以降からアクションバーが代る) | 24×24px (余白含めて36×36px) | 32×32px (余白含めて48×48px) | 48×48px (余白含めて72×72px) | - | - |
アクションバーのアイコン | 18×18px | 24×24px | 36×36px | 48×48px | 72×72px |
ステータスバーのアイコン | 18×18px | 24×24px | 36×36px | 48×48px | 72×72px |
タブアイコン | 22×22px (余白含めて24×24px) | 28×28px (余白含めて32×32px) | 42×42px (余白含めて48×48px) | 56×56px (余白含めて64×64px) | 86×86px (余白含めて96×96px) |
ダイアログのアイコン | 24×24px | 32×32px | 48×48px | 64×64px | 96×96px |
リストビューのアイコン | 24×24px | 32×32px | 48×48px | 64×64px | 96×96px |
by spdesigner
| 2013-02-18 17:59
| Tips
|
Comments(0)