【アプリアイコン制作】必要なアイコンサイズまとめ&気をつけたいこと:※ iPhone 6 Plus追加
どうもこんにちはJBです。
最近アプリのアイコンを作成したりしているのですが、うっかり間違ったサイズを渡して「これ何のサイズやねん?」とツッこまれたことがあったので、戒めにまとめておきたいと思います。
iOSのアイコン
とにかく作るものが多い。
iOS Human Interface Guidelines
iOS App Programming Guide:App-Related Resources
[iOS 7] iOSアイコンファイル早見表(2013/9):Developers.IO
iOSアイコンサイズ
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なら作るサイズの半分です)、こまめに作成途中にチェックしています。
特に細かい部分は、コントラストが甘いと全部つながって見えるので、気をつけてみてください。
文字の必要性
ロゴは別として、あのサイズにその文字を入れる必要があるのかッ!ということです。わりとつぶれて見えなくなることが多いので、入れる際は必要最低限をかいつまんでいれた方がいいです。ビジュアルで見せてあげられるならそれがベストなんでしょうね…。
内容が本とかだったら…まあ…仕方ないかなあ…?
まとめ
いかがだったでしょうか?
アイコンはアプリの顔なのできちんと作りたいところですが、何しろ量が多い。余計な作業を増やさないためにも、きちんと頭に入れておきたいと思います!
それではー!
コメントをどうぞ