合同会社バックアップ
Blog

ブログ

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

Tech
2018.11.17
Contents
目次を非表示

    (2018 年 11 月更新)

    代表の岡田です。

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

    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 たて
    2208 x 1242 defaults-2208-l.png 5.5 inch Retina よこ
    1125 x 2436 defaults-2436.png iPhone X (5.8 inch Super Retina) たて
    2436 x 1125 defaults-2436-l.png iPhone X (5.8 inch Super Retina) よこ
    1242 x 2688 defaults-2688.png iPhone Xs Max (6.5 inch Super Retina) たて
    2688 x 1242 defaults-2688-l.png iPhone Xs Max (6.5 inch Super Retina) よこ
    768 x 1024 tablets-1024.png iPad 1x たて
    1536 x 2048 tablets-2048.png iPad 汎用の 2x たて
    1668 x 2224 tablets-2224.png iPad Pro 10.5 たて
    2048 x 2732 tablets-2732.png iPad Pro 12.9 たて
    1024 x 768 tablets-1024-l.png iPad 1x よこ
    2048 x 1536 tablets-2048-l.png iPad 汎用の 2x よこ
    2224 x 1668 tablets-2224-l.png iPad Pro 10.5 よこ
    2732 x 2048 tablets-2732-l.png 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)

    で作成します。2018 年 11 月現在では iPhone X 以降のサイズは任意です (スプラッシュと同じサイズです)。

    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 デザインとアプリデザインの違いって知られてないですよね。

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

    一緒に働くメンバーを募集しています
    img

    Backapp では受託/自社プロダクトともにアプリ開発を手掛けるディレクター、PM、デザイナーを募集しています。

    • 「折衝・調整や進行管理能力を生かして新たな分野の仕事にチャレンジしたい」
    • 「アプリ開発のスペシャリストとしてもっと幅広い・大きな案件をこなして成長したい」

    といった方はぜひ一度カジュアル面談でお話しましょう!