iPhone 6 & 6 plusのデザイン対応について【随時更新】

iPhone 6とiPhone 6 plusが発表されましたが、アプリのデザインを担当している私がもっとも気になるのが「今のアプリのデザインをどう変える必要があるのか？」。

実際、Appleは謎の解像度にしてしまったため、単純に拡大すれば良いってわけじゃなさそうなので、私なりに調べたこと・わかったことを随時更新していこうと思います！

最終的には、こうしたら上手くいった！リデザインはこうしたら良い！までもっていけたらと思ってます。

目次
1、画面解像度について
 2、画像サイズやデザイン作業について
 その他

1、画面解像度について

解像度などを比較するインフォグラフィックス

↓ 2014/09/16 up

海外でこんなサイトが公開されていました！

iPhone 6 Screens Demystified – PaintCode

解像度がわかりやすく紹介されています。
iPhone6 plusは、キュッと1920×1080に縮小されるようですね。

↓ 2014/09/19 up

上記のサイトに歴代iPhoneからiPadまで対応した表が追加されていました！
iPhone6と6plusの拡大表示（Display Zoom）に関しても載っているので興味深いです。

The Ultimate Guide To iPhone Resolutions – PaintCode

参考リンク先など

2、画像サイズやデザイン作業について

ワークフローに関する記事

↓ 2014/09/16 up

デザインアセットをiPhone6に対応するワークフロー – ワザノバ | wazanova

今まで解像度や画面サイズの話しばかりでしたが、こちらはいよいよPhotoshopのことが出てきました！ですが、読めば読むほど難しいです…。

以下、引用文です。

Photoshopを利用した具体的なワークフローは、

iPhone4 or iPhone5のレイアウト/アセットを利用して、まずキャンバスをiPhone6の解像度 750×1334 pixelsに拡大する。

ナビゲーションのエレメンツやボタンなどは同じサイズのままで、新しいキャンバスにフィットするように再配置。

大きめのエレメンツ、バックグランド等、full width / full heightとしているものは全てつくり直す。

イメージサイズ全体を @2xから@3xに変更。

キャンバスをiPhone6+のサイズにする。iPhone6 @2xスクリーンは 750×1334 pixelsになり、それを@3xにした際は 1125×2001 pixels (375×667 pointsを3倍にした数) になるはず。そしてキャンバスを1242×2208 pixels（414×736 pointsを3倍にした数）にする。

@3xにしたアセットを再配置する。

Xcode6のiOSシミュレーターでスクショした画面を比較してみました

（1）iPhone5sとiPhone6

↓ 2014/09/17 up

Xcode6を入れてもらえたので、さっそくスクショして測ってみました！
とりあえず、iPhone5sとiPhone6の比較です。

まずは、すでに出ていますがスクリーン画面全体のピクセル数のおさらいです。

分裂して各パーツの高さを測ってみました。

iPhone5sとiPhone6では高さが同じでした。
同様にフォントサイズとアイコンも一緒で、640から750pxに広がった横幅を余白で調節している感じです。

一方、Apple純正の写真アプリのサムネイル写真は、横幅に合わせて大きくなってます。
ですが、余白が4pxから2pxになっていたりと、部分的にこのような細かい微調整が必要かもしれません。

ここまでの印象（iPhone5sからiPhone6への対応について）

@2xで、アイコン的に使っているものは作り直しの必要はなさそう。
640px横幅いっぱいに作っている画像、余白で調節したときに違和感がある画像は再度作り直しが必要かも。
画像をたくさん使っているアプリほど大変そう。

（2）iPhone6 plus

↓ 2014/10/24 up

iPhone6 plusもサイズ測ってみました。

こう見ると、iPhone6plusで使う@3xの画像サイズは【1.5倍】になります。

例えば、タブバーの高さでいうと
6では98pxですが、6plusは1.5倍で147pxになるわけですね。

ですが、この1.5倍は今回測ったバーなどの高さで言えることで、
全体の解像度は6の750×1334pxの1.5倍でも、5sの640×1136pxの1.5倍でもありません。

なので、やっぱり6plusも個別で余白やレイアウトの微調整が必要のようです。

アプリのアイコンやスプラッシュ画面について

↓ 2014/09/19 up

カヤックさんがさっそく記事を書いてくださってます！
これからも更新されるそう。要チェックですね。

デザイナー向け！iPhone6対応について（情報追加中！） | KAYAC DESIGNER’S BLOG – デザインやマークアップの話

参考になったこと

公式サイトのアプリアイコンとスプラッシュのサイズ表：iOS Human Interface Guidelines: Icon and Image Sizes
アプリアイコンのPSDテンプレート：App Icon Template
スプラッシュ画面のPNG画像を複数作らなくてもよくなるかも？（XIBまたはstoryboardというXcode6の新しいオプション）

この記事でも書かれていましたが、アプリもスマホサイトもレスポンシブがどんどん加速していきそうですね。

その他

画面サイズ比較

Here, of course, is what it looks like for anybody who still supports iOS 6 in their apps; 3x is staggering pic.twitter.com/8CNYe5E76p
— Steve T-S (@stroughtonsmith) 2014, 9月 10

↑初代からの画面を並べたもの。ここ数年の出来事なのにどんどん進化してる！

ダウンロード素材

↓ 2014/10/20 up

Teehan+LaxのiOS素材でiPhone6版が追加されました！これはダウンロードしておくべし！

iPhone GUI PSD | Teehan+Lax

鈴木：みなさまからの情報も嬉しいです！ぜひ、教えてください！

（トップ画像：Apple – iPhone – モデルを比較するより）

Pocket