Retinaディスプレイで画像リソースをキレイに表示するには?
iPadがRetinaディスプレイになったことで、また1つ、解像度の異なるiOSデバイスが増えました。
どれだけの種類があるかというのは、List of iOS devices - Wikipedia, the free encyclopedia
にまとめられています。
ここから、ディスプレイの解像度に関する情報だけ抜き出してみると、以下の4パターンになります。
- 480 × 320 px - 〜iPhone 3GS, 〜iPod touch 3G
- 960 × 640 px(Retina) - iPhone 4/4S, iPod touch 4G
- 1024×768 px - iPad, iPad2
- 2048×1536 px(Retina) - new iPad
アプリのユーザインタフェースでは、さまざまな箇所で画像リソースを使用していますが、各デバイスの解像度に適合したサイズのものを用意しないと、それらがキレイに表示されなくなってしまいます。
実際にどのような考慮が必要なのか、例を挙げてまとめてみました。
Application icon
各解像度に対して、以下の4種類のサイズが必要になります。
| 解像度 | デバイス | アイコン画像サイズ |
|---|---|---|
| 480 × 320 px | 〜iPhone 3GS, 〜iPod touch 3G | 57 x 57 |
| 960 × 640 px(Retina) | iPhone 4/4S, iPod touch 4G | 114 x 114 |
| 1024×768 px | iPad, iPad2 | 72 x 72 |
| 2048×1536 px(Retina) | new iPad | 144 x 144 |
簡単に言ってしまうと、
- iPhone/iPod touchとiPadは、画面の大きさが違うので、表示するアイコンのサイズが違う。
- Retinaは2倍の解像度なので、サイズも2倍にしないと、粗い画像になってしまう。
ということですね。
SysStats Monitorというアプリの場合は、480 × 320 pxのデバイスしか存在しないころにリリースしたものなので、新しい解像度のデバイスが出るたびに、アイコンを追加しています。
上記のアイコンは「Small App Icon」と呼ばれるもので、アプリの中にバンドルするものです。
それに加えて、もう一つApp Storeで表示するときのアートワーク画像用として、512 x 512の「Large App Icon」も用意する必要があります*1。こちらは、iTunes Connectでアプリの申請をするときのメタデータとして登録します。
私の場合、それを縮小して各アイコンを作っているので、これに関してはあまり手間をかけずにできています。
裏を返せば、まず最初に「Large App Icon」を作成しておく方が、よいということですね。
これから、iPhoneアプリ開発を始める方は、ご注意ください。
Tab bar icon
それ以外にも、アプリの中のTab barのボタンに使う画像も、解像度を考慮する必要があります。
こちらは、iPhoneとiPadの違いはないので、Retinaか、そうでないかの2種類になります。
私の場合、当初、30 x 30で作成してしまったので、もう一度60 x 60を作り直す必要があり、やや手間がかかってしまいました。
なので、こちらも、最初から大きめのサイズで作っておくのが無難ですね。
その他の画像
これ以外にも、Launch image(起動時のスプラッシュ画像)や、Spotlightの検索結果や設定画面で表示されるアイコンなど、いくつか画像リソースの種類があります。
以下のドキュメントには、全般的な説明が書かれています。
iOS Human Interface Guidelines - Custom Icon and Image Creation Guidelines
その他の画像については、こちらを参照してください。
