お使いのブラウザは、バージョンが古すぎます。

このサイトは、Internet Explore8・Internet Explore9には対応しておりません。
恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。

【アプリアイコン制作】必要なアイコンサイズまとめ&気をつけたいこと:※ iPhone 6 Plus追加

どうもこんにちはJBです。
最近アプリのアイコンを作成したりしているのですが、うっかり間違ったサイズを渡して「これ何のサイズやねん?」とツッこまれたことがあったので、戒めにまとめておきたいと思います。

iOSのアイコン

とにかく作るものが多い。

iOSアイコンサイズ

9/24追記:
iPhone6 Plusの分を追加しました。iPhone6はRatina HDですが、Ratinaと同じでいいみたいです…

iPhone(Ratina、@2x):iOS8・iOS7

種類 サイズ 角丸半径 必要度
ホーム画面アイコン 120×120 26px 必須
ストアアイコン 1024×1024 180px 必須
Spotlight用 80×80 18px あれば
設定用 58×58 10px あれば

iPhone6 Plus(Ratina HD、@3x):iOS8

種類 サイズ 角丸半径 必要度
ホーム画面アイコン 180×180 39px 必須
ストアアイコン 1024×1024 180px 必須
Spotlight用 120×120 26px あれば
設定用 87×87 19px あれば

iPhone(Ratina、@2x):iOS6

種類 サイズ 角丸半径 必要度
ホーム画面アイコン 114×114 20px 必須
ストアアイコン 1024×1024 180px 必須
Spotlight用 58×58 10px あれば
設定用 58×58 10px あれば

iPad(Ratina、@2x):iOS8・iOS7

種類 サイズ 角丸半径 必要度
ホーム画面アイコン 152×152 34px 必須
ストアアイコン 1024×1024 180px 必須
Spotlight用 80×80 18px あれば
設定用 58×58 10px あれば

iPad(Ratina、@2x):iOS6

種類 サイズ 角丸半径 必要度
ホーム画面アイコン 144×144 24px 必須
ストアアイコン 1024×1024 180px 必須
Spotlight用 100×100 20px あれば
設定用 100×100 20px あれば

App Store

種類 サイズ 角丸半径 必要度
ストアアイコン 1024×1024 180px 必須

Ratinaではないヤツの対応は、これの半分のサイズを作ればOKです。
うちでは大体、必要最低限の57×57、114×114、120×120、512×512、1024×1024、だけ作って投げています(iPhoneアプリの場合)。

角丸処理

角丸は、Appleの方で自動的にマスクをかけてくれます。が、角丸を利用したデザインとかにする際は、知っておいた方がいいと思います。
iOS6とiOS7では角丸具合が変わっているので面倒くさいですが…(iOS7の方がまるっこい)。

自ら角丸にして、うっかり丸くしすぎてしまう場合もあったりします。ホーム画面とかはまあアレですけど、AppStoreだと削れた部分が黒くなって若干恥ずかしい思いをするかもしれませんので、気をつけてみてください。残念ながら私はやりました…。

Android

Androidはもともと画面サイズや解像度がカオスなので、柔軟な方法がとられております。
最小サイズを基準に、2:3:4:6:8で5サイズ分用意すればよろしいとのこと。

Androidアイコンサイズ

種類 サイズ 解像度
MDPI 48×48 〜160dpi
HDPI 72×72 〜240dpi
XHDPI 96×96 〜320dpi
XXHDPI 144×144 〜480dpi
XXXHDPI 192×192 〜640dpi

更にGoogle Play用に512×512のアイコンを用意します。

形は割と自由

Androidはサイズ内であれば(推奨は目一杯で作成)、どんな形のアイコンでもOKです。iOSじゃ出来ない様なアイコンデザインも可能なので、色々遊んでみてもいいのではないかと思います。
とは言っても、iOSと両方出す場合はブランディング的には一緒の方がいいのか?でもAndroidユーザーがiOSのアイコンを見るのか…?とかいう葛藤もありますが…。Googl Playのアイコンを見ていても、割とiOSっぽいものが多いですしね!

アイコン作成時に気をつけること

これだけサイズがあると実働時に「あれ何か変」となることもあります。なる前にココだけはチェック。

全てのサイズで見え方を確認

アイコンリサイズ
大きいサイズで作って、各サイズにリサイズしてみると「何これ何だか良く分からない」というあるあるパターン。
私は実際に見えるサイズに縮小して(Ratinaなら作るサイズの半分です)、こまめに作成途中にチェックしています。
特に細かい部分は、コントラストが甘いと全部つながって見えるので、気をつけてみてください。

文字の必要性

ロゴは別として、あのサイズにその文字を入れる必要があるのかッ!ということです。わりとつぶれて見えなくなることが多いので、入れる際は必要最低限をかいつまんでいれた方がいいです。ビジュアルで見せてあげられるならそれがベストなんでしょうね…。
内容が本とかだったら…まあ…仕方ないかなあ…?

まとめ

いかがだったでしょうか?

アイコンはアプリの顔なのできちんと作りたいところですが、何しろ量が多い。余計な作業を増やさないためにも、きちんと頭に入れておきたいと思います!

それではー!

コメントをどうぞ

メールアドレスは公開されません。* が付いている欄は必須項目です。


お気軽にお問い合わせください。

日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。
アプリ開発・コンテンツ制作でお困りでしたら、お気軽にご相談ください。
ご連絡お待ちしております。

お問い合わせはこちらから

03-3541-1230

info@nvtrlab.jp

電話受付対応時間:平日AM9:30〜PM6:00