読者です 読者をやめる 読者になる 読者になる

Retinaディスプレイで画像リソースをキレイに表示するには?

iPadRetinaディスプレイになったことで、また1つ、解像度の異なるiOSデバイスが増えました。

どれだけの種類があるかというのは、List of iOS devices - Wikipedia, the free encyclopedia
にまとめられています。

ここから、ディスプレイの解像度に関する情報だけ抜き出してみると、以下の4パターンになります。

アプリのユーザインタフェースでは、さまざまな箇所で画像リソースを使用していますが、各デバイスの解像度に適合したサイズのものを用意しないと、それらがキレイに表示されなくなってしまいます。
実際にどのような考慮が必要なのか、例を挙げてまとめてみました。

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 touchiPadは、画面の大きさが違うので、表示するアイコンのサイズが違う。
  • 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のボタンに使う画像も、解像度を考慮する必要があります。
こちらは、iPhoneiPadの違いはないので、Retinaか、そうでないかの2種類になります。

私の場合、当初、30 x 30で作成してしまったので、もう一度60 x 60を作り直す必要があり、やや手間がかかってしまいました。
なので、こちらも、最初から大きめのサイズで作っておくのが無難ですね。

その他の画像

これ以外にも、Launch image(起動時のスプラッシュ画像)や、Spotlightの検索結果や設定画面で表示されるアイコンなど、いくつか画像リソースの種類があります。
以下のドキュメントには、全般的な説明が書かれています。

iOS Human Interface Guidelines - Custom Icon and Image Creation Guidelines

その他の画像については、こちらを参照してください。

*1:必須ではありませんが、Retina用に1024 x 1024のものも作成することが推奨されています。