ホーム » ブログ » iOS(iPhone、iPad)とMac OSアプリに必要なサイズのアイコンを一度に書き出す方法

iOS(iPhone、iPad)とMac OSアプリに必要なサイズのアイコンを一度に書き出す方法

photo: Photo Giddy cc
iOSやMac OSアプリの開発をしていて面倒なことといえば、アイコンの各種サイズを用意することが挙げられると思います。

最近では高解像度ディスプレイ用のサイズも必要になって、ますます種類が増えています。

iOSアプリの場合をとってみると、アイコンのサイズは以下の10種類にもなります。

iOSアプリに必要なアイコンのサイズ

# ファイル名 サイズ 用途  
1 Icon.png 57 x 57 App Store
iPhoneのホーム画面
 
2 Icon@2x.png 114 x 114 App Store
iPhoneのホーム画面
Retina用
3 Icon-72.png 72 x 72 iPadのホーム画面  
4 Icon-72@2x.png 144 x 144 iPadのホーム画面 Retina用
5 Icon-Small.png 29 x 29 iPhoneのSpotlightと設定画面
iPadの設定画面
 
6 Icon-Small@2x.png 58 x 58 iPhoneのSpotlightと設定画面
iPadの設定画面
Retina用
7 Icon-Small-50.png 50 x 50 iPadのSpotlight  
8 Icon-Small-50@2x.png 100 x 100 iPadのSpotlight Retina用
9 iTunesArtwork 512 x 512 App Store  
10 iTunesArtwork@2x 1024 x 1024 App Store Retina用

これら全てを揃えることは必須ではありませんが、せっかく開発したアプリのアイコンがサイズが合っていないためにぼやけて表示されたら嫌ですよね。

そうなるとやはり可能な限り全てのサイズを用意した方がよいということになります。

私はこのリサイズの作業が本当に苦痛だったので、これを自動化するアプリAppIconを作りました。


AppIcon (¥85)
ジャンル:開発ツール
AppIcon - HAPPY*TRAP


AppIconは、元になる高解像度のアイコン画像をひとつ用意するだけで、iOSアプリとMac OSアプリに必要なサイズのアイコンを一度に書きだしてくれる便利なアプリケーションです。

もちろん、Mac OSアプリ用のアイコンの場合は、.icnsファイル(Apple アイコンイメージ)にまとめて書き出すことも可能です。


使い方は簡単です。AppIconの小窓に、アイコンの元になる画像ファイル(PNG形式)をドロップして、「Export」ボタンをクリックします。


じゃじゃん!

なんとこれだけで全サイズのアイコンが書き出されました。どうですか?簡単ですよね?

AppIconで書き出せるサイズは以下になります。

iOSアプリ用のアイコン

ファイル名 キャンバスサイズ (ピクセル)
Icon.png 57 x 57
Icon@2x.png 114 x 114
Icon-72.png 72 x 72
Icon-72@2x.png 144 x 144
Icon-Small.png 29 x 29
Icon-Small@2x.png 58 x 58
Icon-Small-50.png 50 x 50
Icon-Small-50@2x.png 100 x 100
iTunesArtwork 512 x 512
iTunesArtwork@2x 1024 x 1024

Mac OSアプリ用のアイコン

ファイル名 キャンバスサイズ (ピクセル)
icon_16x16 .png 16 x 16
icon_16x16@2x .png 32 x 32
icon_32x32 .png 32 x 32
icon_32x32@2x .png 64 x 64
icon_128x128 .png 128 x 128
icon_128x128@2x .png 256 x 256
icon_256x256 .png 256 x 256
icon_256x256@2x .png 512 x 512
icon_512x512 .png 512 x 512
icon_512x512@2x .png 1024 x 1024

.icnsファイル(Apple アイコンイメージ)を書き出す方法

Mac OSアプリ用のアイコンの場合、オプションの「in one icns file」にチェックを入れると.icnsファイル(Apple アイコンイメージ)として書き出されます。



ファイル名は、Icon.icnsになります。

Icon.icnsファイルをプレビュー.appで開くと各サイズのアイコン情報が含まれていることが確認できます。

Androidアプリ用のアイコン

ファイル名 キャンバスサイズ (ピクセル)
icon_36x36 .png 36 x 36
icon_48x48 .png 48 x 48
icon_72x72 .png 72 x 72
icon_96x96 .png 96 x 96

いかがでしたでしょうか?私の場合はこれでアプリ開発のワークフローを少し改善することができましたので、同じようにリサイズ作業を煩わしいと思っていらっしゃる方は、ぜひAppIconを試してみてください。

AppIcon (¥85)
ジャンル:開発ツール
AppIcon - HAPPY*TRAP


参考サイト

前の記事 «
次の記事 »