FRMSKI開発ブログ

iOS開発、AR/VR、UI / UX、仕事、読書のことなど、日々の記録を綴ります

【iOSデザインガイドライン和訳】綺麗なグラフィックのための画像サイズと解像度

iOSヒューマン・インターフェース・ガイドラインの「画像サイズと解像度」について和訳です。
解像度への理解は綺麗で正確なグラフィックを再現するには必須の知識となります。以下和訳です。

画像サイズと解像度

 iOSが画面上にコンテンツを配置するために使用する座標系は、ポイント内の測定値に基づいており、ポイントはディスプレイのピクセルマッピングされます。標準解像度のディスプレイは、1ピクセルの密度(@ 1x)を持ち、1ピクセルは1ポイントに等しい。高解像度ディスプレイは、ピクセル密度が高く、2.0または3.0のスケールファクタ(@ 2xおよび@ 3x)を提供します。結果として、高解像度ディスプレイは、より多くのピクセルを有する画像を必要とする。

f:id:frmski:20181204135028p:plain:w500

たとえば、100px×100pxの標準解像度(@ 1x)の画像があるとします。この画像の@ 2xバージョンは200px×200px、@ 3xバージョンは300px×300pxになります。

アプリでサポートされているすべてのデバイスのアプリ内のすべてのアートワークの高解像度画像を提供してください。バイスに応じて、各イメージのピクセル数に特定の倍率を掛けて計算します。

端末 スケール因子
12.9" iPad Pro @2x
11" iPad Pro @2x
10.5" iPad Pro @2x
9.7" iPad @2x
7.9" iPad mini 4 @2x
iPhone XS Max @3x
iPhone XS @3x
iPhone XR @2x
iPhone X @3x
iPhone 8 Plus @3x
iPhone 8 @2x
iPhone 7 Plus @3x
iPhone 7 @2x
iPhone 6s Plus @3x
iPhone 6s @2x
iPhone SE @2x

高解像度アートワークのデザイン

  • 8px x 8pxのグリッドを使用します
     グリッドは線をシャープに保ち、すべてのサイズで内容ができるだけ鮮明になり、レタッチやシャープネスが少なくて済みます。画像の境界線をグリッドにスナップすると、縮小時に発生するハーフピクセルとぼやけた細部が最小限に抑えられます。

  • アートワークを適切なフォーマットで作成します
     一般に、ビットマップ/ラスタアートワークのためにインターレース解除されたPNGファイルを使用します。 PNGは透明性をサポートしており、ロスレスであるため、圧縮アーチファクトは重要な詳細をぼかしたり色を変えたりしません。シェーディング、テクスチャ、ハイライトなどのエフェクトが必要な複雑なアートワークに適しています。写真にはJPEGを使用します。その圧縮アルゴリズムは、通常、ロスレスフォーマットよりも小さいサイズを生成し、アーティファクトは写真では識別しにくい。ただし、現実的なアプリのアイコンはPNGとして最もよく見えます。グリフや、高解像度スケーリングを必要とするフラットなベクトルアートワークには、PDFを使用します。

  • 完全な24ビットカラーを必要としないPNGグラフィックには、8ビットのカラーパレットを使用します
      8ビットのカラーパレットを使用すると、画質を低下させることなくファイルサイズが小さくなります。このパレットは写真には適していません。

  • サイズと品質のバランスを見つけるためにJPEGファイルを最適化します
     ほとんどのJPEGファイルは、結果として生じるイメージの顕著な劣化なしに圧縮することができます。少量の圧縮でもかなりのディスク容量を節約できます。許容可能な結果を​​もたらす最適な値を見つけるために、各画像の圧縮設定を試してみてください。

  • 画像とアイコンの代替テキストラベルを提供する
     代わりのテキストラベルは画面上には表示されませんが、VoiceOverは画面上に表示されているものを音声で表現できるため、視覚障害のある方にとってナビゲーションが容易になります。