発表されたiPhone6のサイズからして、予想はしてましたが、MerchbarのEdward Atenがまとめてくれたブログを読むと、改めて対応の工数を認識させられます。

iPhoneのレイアウト/解像度がどう変更されてきたか

• iPhone3 -> iPhone4: キャンバスのサイズは 320x480 pointsと同じなのでレイアウトは変更なし。解像度が 640x960 pixelesに倍増するので、アセットをアップグレードする対応。
• iPhone4 -> iPhone5: キャンバスが縦方向に伸びて 568 pointsに。内製のアセット（tabバー / statusバー / バナー)は topとbottomが揃っているので、間を少し伸ばすだけで対応可能。
• iPhone5 -> iPhone6: レイアウトと解像度を両方変更することになる。

iPhone6のケース

• 解像度は@2xのままだが、キャンバスのサイズは375x667 pointsに。
• 例えば、statusバーは、高さ 20 points (40 pixels) のままだが、幅を 320 points (640 pixels) から375 points (750 pixels)に変更する。今までのアセットをそのまま拡大するというわけにはいかないので、作り直しになる。

iPhone6+のケース

• 解像度は@3xとなり、キャンパスのサイズは414x736 points (1242x2208 pixels)。
• iPhone5の素材でiPhone6+対応する場合、キャンバスのサイズを広げて、かつ解像度を上げる必要があある。
• iPhone6のために、20x320 pointsから 20x375 pointsにしたstatusバーは、更に iPhone+用に、20x414 pointsに変更。ピクセルベースだと、40x640 (iPhone5) -> 40x750 (iPhone6) -> 60x1242 (iPhone6+) となる。

どうやって変更するか

• PaintCodeのまとめは画面サイズの変更を理解するのにはとてもよいが、レイアウトのやり繰りまではイメージできない。
• Photoshopを利用した具体的なワークフローは、
  • iPhone4 or iPhone5のレイアウト/アセットを利用して、まずキャンバスをiPhone6の解像度 750x1334 pixelsに拡大する。
  • ナビゲーションのエレメンツやボタンなどは同じサイズのままで、新しいキャンバスにフィットするように再配置。
  • 大きめのエレメンツ、バックグランド等、full width / full heightとしているものは全てつくり直す。
  • イメージサイズ全体を @2xから@3xに変更。
  • キャンバスをiPhone6+のサイズにする。iPhone6 @2xスクリーンは 750x1334 pixelsになり、それを@3xにした際は 1125x2001 pixels (375x667 pointsを3倍にした数) になるはず。そしてキャンバスを1242x2208 pixels（414x736 pointsを3倍にした数）にする。
  • @3xにしたアセットを再配置する。

#iphone #ios #デザイン

ワザノバTop200アクセスランキング