連載
» 2011年04月13日 00時00分 UPDATE

一撃デザインの種明かし(14):スマートフォンアプリデザインに役立つ 基礎のまとめ! (3/4)

[林真由美, 田島絹絵,面白法人カヤック]

スマートフォンのデザインは画面サイズが重要!

 それぞれの画面サイズと必要な素材をまとめました。

iPhoneの画面サイズ

 iPhoneは、iPhone 4用とiPhone 3GS用の2つの画面サイズに合わせた画像を用意する必要があります。

 それぞれの画面サイズは以下です。

解像度 画面サイズ
3G/3GS 163ppi 320 x 480 pixels
4 326ppi 640 x 960 pixels
表1 iPhoneの画面サイズ

 以下は、アイコンファイルなどのサイズ一覧です。iPhone 4のディスプレイに対応させる画像の作り方としては「ファイル名+@2x.png」を付けて制作します。

ファイル名 画像サイズ
Icon.png 57 x 57 pixels
Icon@2x.png 114 x 114 pixels
Icon-Small.png 29 x 29 pixels
Icon-Small@2x.png 58 x 58 pixels
Default.png 320×480 pixels
Default@2x.png 640 x 960 pixels
表2 アイコンファイルなどのサイズ一覧(出典元:Technical Q&A QA1686

Androidの画面サイズ

 iPhoneと違い、機種ごとに画面サイズが違い、いくつも画面サイズが存在しますが、作り方としては、低解像度、中解像度、高解像度の3種類のサイズを用意します。ただ、低解像度の機種は、自動調整をしてくれるものがあるので、中解像度、高解像度だけに絞ってもいいかもしれません。

 解像度の分け方は以下の3タイプです。

低解像度(X-Peria miniなど) 中解像度(HT-03A、HTC Heroなど) 高解像度(X-Peria、HTC desire、Nexus oneなど)
QVGA(240x320)
WQVGA400(240x400)
WQVGA432(240x432)
HVGA(320x480) WVGA800(480x800)
WVGA854(480x854)
表3 解像度の分け方

 現在、分かっている機種の解像度です。

機種名 解像度
NTTドコモ
HT-03A 320×480ドット/HVGA
SO-01B 480×854ドット/FWVGA
SH-10B 480×960ドット/FWVGA++
SC-02B 480×800ドット/Visual WVGA
SC-01C 600×1024ドット/WSVGA
L-04C 320×480ドット/HVGA
L-06C 1280×768ドット/WXGA
N-04C 480×854ドット/FWVGA
NA75F/1A 800x480ドット /WXGA
SH-03C 480×800ドット/WVGA
SO-01C 480×854ドット/FWVGA
T-01C 854×480ドット/FWVGA
KDDI
IS01 480×960ドット/FWVGA++
IS03 960×640px/ダブルVGA
IS04 854×480ドット/WVGA+
IS05 854×480ドット/WVGA+
IS06 800×480ドット/WVGA
ISW11HT 800×480ドット/WVGA
ソフトバンクモバイル
001DL 800×480ドット/WVGA
001HT 800×480ドット/WVGA
003SH 800×480ドット/WVGA
003Z 800×480ドット/WVGA
004HW 480×320ドット/HVGA
005SH 800×480ドット/WVGA
X06HT 800×480ドット/WVGA
X06HTII 800×480ドット/WVGA
ディズニー・モバイル
DM009SH 800×480ドット/WVGA
日本通信
BM-SWU300 320×240ドット/QVGA
イー・モバイル
S31HW 320×240ドット/QVGA
S31HT 480×320ドット/HVGA
表4 日本で発売されているAndroidの機種と、解像度(2011年度発売予定も含む)

 以下は、各UIに必要となるアイコンのサイズです。

低解像度 中解像度 高解像度
ランチャー&メニュー 36 x 36 px 48 x 48 px 72 x 72 px
ステータスバー(Android 2.3 以降) 12w x 19h px 16w x 25h px 24w x 38h px
ステータスバー(Android 2.2 以前) 19 x 19 px 25 x 25 px 38 x 38 px
タブ 24 x 24 px 32 x 32 px 48 x 48 px
ダイアログ 24 x 24 px 32 x 32 px 48 x 48 px
リスト 24 x 24 px 32 x 32 px 48 x 48 px
表5 必要となるアイコンのサイズ一覧

 ファイル名は、すべて小文字で付けます。また、解像度によって画像を用意した場合は、以下のフォルダに同じファイル名で格納します。

  • drawable-h(高解像度)
  • drawable-m(中解像度)
  • drawable-l(低解像度)

Androidのための画像制作手法「Draw 9-patch」とは

 また画像の作り方として、Androidには、「Draw 9-patch」という作り方があります。これは、1つの画像を9分割して、さまざまな大きさに合わせられるようにする作り方です。詳しい作り方は、以下のサイトを参考にするといいでしょう。

Androidといえば、dip!

 dipとは、Density Independent Pix(密度非依存ピクセル)のことです。解像度に依存しない単位で、解像度の異なる端末で同じ単位を指定した場合も、この単位を使うと同じように表示できます。これは、Androidがマルチスクリーンに対応しているからです。

 計算方法としては、160dpi×1px=1dipです。320pdiの場合は、2pxになります。レイアウトなど、解像度を気にせずに指定できます。

Androidといえば、ウィジェット!

 Androidの特徴といえば、ウィジェットですね。簡単に説明すると、アプリのアイコン以外にも、HOME画面にアプリケーションを小さくしたものを表示できるものです。Windowsでいうガジェットですね。

r12image15.jpg

 このように、さまざまな形のウィジェットがあります。 ウィジェットのサイズは、決まっています。縦、横ともに、画面を4×4で分割したサイズに成ります。以下の計算方法でサイズを図れます。

  • dip = (セルの数 * 74dip) - 2dip

 「- 2dp」は、丸め誤差のための数値です。縦画面、横画面で、それぞれサイズが変わるので注意しましょう。

r12image05.jpg

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

Touch Barという新UIを得た「MacBook Pro」、プレゼント!

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。