えー、私のアプリのアイコンは見事にぼやけております。iPhone4 で採用された Retina Display。キレイですよね。ただし、気をつけないとアプリのアイコンがぼやけた感じになってしまいます。iPhone4 用に2倍の大きさのアイコンを作成しないといけないのです。当然といえば当然なのですが。。。
iPhone4 で色々なアプリのアイコンを見ているとなんかぼやけている感じのアイコンとクッキリハッキリしたアイコンがあるのが分かると思います。その原因が iPhone4 用のアイコンを用意していないためです。同様の現象は iPad でも置きます。iPhone 用のアプリを iPad にインストールすると57px のアイコンが 72px に拡大表示されるためぼやけたようなアイコンになります。
アイコンの大きさのまとめ
iPhone3GS 以前、iPhone4, iPad でそれぞれ必要なアイコンの画像サイズとデフォルトのファイル名をまとめてみました。設定アプリやSpotlite用のアイコンはなければ自動でリサイズされますが、できれば作成しておいたほうがいいでしょう。
| 表示種別 | サイズ | ファイル名 | アイコン | |
|---|---|---|---|---|
| iPhone3G,3GS iPod touch |
通常アイコン | 57×57 | Icon.png | |
| 設定アプリ内 Spotlite |
29×29 | Icon-Small.png | ||
| iPhone4 | 通常アイコン | 114×114 | Icon@2x.png | |
| 設定アプリ内 Spotlite |
58×58 | Icon-Small@2x.png | ||
| iPad | 通常アイコン | 72×72 | Icoc-72.png | |
| 設定アプリ内 | 29×29 | Icon-Small.png | ||
| Spotlite | 50×50 | Icon-Small-50.png |
アイコンを実際に表示してみた
上記のデフォルトのファイル名を使用する場合は特に設定の必要もなく、Resouce に全てのアイコン画像ファイルを入れるだけでそれぞれの機種に応じて表示されるようになります。
実際に自分のアプリのアイコンで iPhone4 での見え方の違いを比べてみました。
57px のアイコン
114px のアイコン
ということで、ぼやけてたアイコンがクッキリハッキリしましたw
参考サイト
一つのアプリでiPhone3G/iPhone4/iPad用のアイコンを入れる方法|中村智武のCTO記
関連する投稿
6 Responses to “[iPhone] あなたのアプリのアイコン、ぼやけてませんか?”
Leave a Reply
Additional comments powered by BackType
8月 5th, 2010 at 3:07 pm
なるほど。RT @syuhari [iPhone] あなたのアプリのアイコン、ぼやけてませんか? | Sun Limited Mt. http://bit.ly/dmqUwH
This comment was originally posted on Twitter
8月 5th, 2010 at 3:21 pm
(´・∀・`)ヘー RT @RucKyGAMES: こんなに種類があったとは。 RT @syuhari: [blog] [iPhone] あなたのアプリのアイコン、ぼやけてませんか? http://is.gd/e3BQZ
This comment was originally posted on Twitter
8月 5th, 2010 at 9:12 pm
各種アイコンサイズまとめ。『あなたのアプリのアイコン、ぼやけてませんか?』 http://bit.ly/ci1RPa
This comment was originally posted on Twitter
8月 5th, 2010 at 11:45 pm
後で読みます RT @syuhari [blog] [iPhone] あなたのアプリのアイコン、ぼやけてませんか? http://is.gd/e3BQZ
This comment was originally posted on Twitter
4月 26th, 2011 at 9:31 pm
有難いデータをまとめて頂き。
お世話になっております。
ひとつ気になったのですが、
『Icoc-72.png』は『Icon-72.png』ではないですか?
5月 10th, 2011 at 3:35 pm
[...] http://blog.syuhari.jp/archives/2194 カテゴリー: iPhone パーマリンク ← iPhoneアプリ「圏外通知」 [...]