ブログ

iOS/Android アプリ開発で必要な画像のサイズ一覧 (アイコン・スプラッシュ等)

(2018 年 7 月更新)

代表の岡田です。

スマホアプリの開発では、さまざまなサイズの画像が必要になるので備忘録も兼ねて以下にまとめてみました。
用途別に並べてもよかったのですが、実際に画像を書き出したりプロジェクトに組み込んだりする際はサイズごとに行なった方が効率が良いので、その他並び順になっています

異なる用途で同じサイズのものは省いています。

iOS (iPhone/iPad) アプリのアイコン類

サイズ 名称(例) 用途
1024 x 1024 Icon-1024.png AppStore
180 x 180 Icon-180.png iPhoneアプリアイコン@3x
167 x 167 Icon-167.png iPad Proアプリアイコン@2x
152 x 152 Icon-152.png iPadアプリアイコン@2x
120 x 120 Icon-120.png iPhoneアプリアイコン@2x,スポットライトアイコン@3x
87 x 87 Icon-87.png 設定アイコン@3x
80 x 80 Icon-80.png スポットライトアイコン@2x
76 x 76 Icon-76.png iPadアプリアイコン
60 x 60 Icon-60.png iPhone通知アイコン (iOS 10以降)
58 x 58 Icon-58.png 設定アイコン@2x
40 x 40 Icon-40.png スポットライトアイコン,iPhone通知アイコン (iOS 10以降)
29 x 29 Icon-29.png 設定アイコン
20 x 20 Icon-20.png iPad通知アイコン (iOS 10以降)

初めてスマホアプリ開発に携わる方は種類の多さに戸惑われることが多いですが、「iOS アイコン 変換」などで検索すると一括でリサイズしてくれるサービスがいくつか出てきます。

Androidのアイコン

サイズ 名称(例) 用途
512 x 512 Icon-512.png Google Play ストアアイコン
192 x 192 Icon-192.png xxxhdpi
144 x 144 Icon-144.png xxhdpi
96 x 96 Icon-96.png xhdpi
72 x 72 Icon-72.png hdpi
48 x 48 Icon-48.png mdpi
36 x 36 Icon-36.png ldpi

ストア用の大きいサイズのアイコンは、ホーム画面用のアイコンと同じデザインである必要はありません。これは開発ではなく運用のフェーズになりますが、キャンペーン中は特別な画像を用意することもよくあります (iOS アプリと違ってローカライズすることができるので、文字を含めることも可能です)。

iOSの起動 (スプラッシュ) 画面

サイズ(px) 画像名(例) ディスプレイ
640 x 960 default-960.png 3.5 inch Retina
640 x 1136 defaults-1136.png 4.0 inch Retina
750 x 1334 defaults-1334.png 4.7 inch Retina
1242 x 2208 defaults-2208.png 5.5 inch Retina たて
1125 x 2436 defaults-2436.png 5.5 inch Retina よこ
768 x 1024   iPad 1x たて
1536 x 2048   iPad 汎用の 2x たて
1668 x 2224   iPad Pro 10.5 たて
2048 x 2732   iPad Pro 12.9 たて
1024 x 768   iPad 1x よこ
2048 x 1536   iPad 汎用の 2x よこ
2224 x 1668   iPad Pro 10.5 よこ
2732 x 2048   iPad Pro 12.9 よこ

基本的に Android はスプラッシュ画像が不要ですが、どうしても付けたい場合は

  • 720 x 1280
  • 1080 x 1920
  • 1440 x 2560

のサイズで用意しておけば無難だと思います。

AppStore/GooglePlay 用の宣伝画像

開発したアプリのスクリーンショットは

  • 1242 × 2208 (iPhone たて)
  • 2208 x 1242 (iPhone よこ)
  • 2048 × 2732 (iPad たて)
  • 2732 × 2048 (iPad よこ)
  • 1 辺が 320〜3840 (Android)

で作成します。

Android 開発まわりの話だと、最近のアップデートで Google Play への申請の際にヘッダー画像が必須になりました。社外のデザイナーさんに外注している場合、1,024 x 500 px の JPEG または 24 ビット PNG 形式で忘れずに発注しておきましょう。

プロモーション画像は必須にはなっていませんが、面倒でなければ 180 x 120 px の JPEG または 24 ビット PNG 形式で用意しておきましょう。

アプリストアの画像は iOS/Android ともにアルファなしのものが必要なので注意しましょう。

初めてのアプリデザインで詰まりがち、Android の dp と iOS の Retina 対応

二つともここまでの表でさらっと書いてきましたが、アプリの経験がないデザイナーさんが苦労するのはこのあたりだと思います。未経験だと仕方ない部分はあるのですが、できれば事前に調べておくと開発チームとスムーズにやりとりが進むと思います。

iOS の画像サイズにおける「1x, 2x, 3x」とは

簡単に言うと、2x あるいは 3x とは「画面を美しく見せるために、見せたいサイズの 2倍、あるいは 3 倍の画像を圧縮して (高密度で) 表示させる」という仕様です (※参考) 。ですので、iOS の端末で 29 x 29 のアイコンを表示するには、ほとんど場合 58 x 58 や 87 x 87 の画像が必要になります。

たとえば 3x の retina ディスプレイに 64 x 64 など、一辺の長さが 3 で割り切れない画像を使ってしまうと、実機上で綺麗に見えなくなってしまいます。デザイナーの仕事としては必ず対応してほしいところです。

Android の解像度単位「dpi」とは

Android の画面の見せ方はもうちょっと複雑です。Android 端末は多くのメーカーが開発しており、端末やバージョンによって画面の解像度も仕様もバラバラだからです。

今だと解像度でいえばフルハイビジョン (width = 1920) の端末が多いのですが、1 インチの中に何ドット含まれているかという画面密度を表す「dpi (dots per inch)」がそれぞれ異なります。端的に言うと 2x, 3x 以外のものもあるわけです。

ですので、Android アプリのデザインをするときは通常のピクセルではなく「dp (density-independent pixels)」という仮想ピクセルでタテ・ヨコを指定しておき、端末の dpi に応じて px に変換する、という流れになります。

密度単位 4dp あたりに含まれる px 表示倍率
ldpi 3px 0.75x
mdpi 4px 1x
hdpi 6px 1.5x
xhdpi 8px 2x
xxhdpi 12px 3x
xxxhdpi 16px 4x

アイコンなどのアセット画像だけなら指定されたサイズで用意すればいいのですが、dp を理解していないと画面のデザインで苦労します。アプリ開発の経験がないデザイナーさんが普段通り px(ピクセル)単位でマージンなどのサイズを指定しているとちょっと混乱するので、気をつけていただけると助かります。

アプリ開発初心者向けのデザインの話でいうと、下記の記事もぜひご一読いただけると幸いです。意外と web デザインとアプリデザインの違いって知られてないですよね。

「そのこだわり、本当に必要ですか?」制作会社が考える、スマホアプリのデザインの作り方

BackApp のメルマガを購読しませんか

このような記事を定期的に読みたいと思っていただけましたら、ぜひご登録ください。

月に一度ほど、アプリ開発を検討する際のポイントや運用開始後のお役立ち情報などをお届けします。

必須お名前
必須E-mail

0
  関連記事