web関連

2014/09/10

iPhone5のデザインをiPhone6とiPhone6 Plusに移行するにあたって考えてみた

ip6-cover

こんにちは、デザイナーのさっちゃんです。
iPhone6ついに19日発売決定!で周りがそわそわしてますね。
デザイナー的にも解像度がなぜか2種類に増え、さらにAndroidみたいに縦横比も違うということで戦々恐々としております。

今後5と5s対応のアプリデザインを6と6 plusに対応していかなければならないにあたり、どれくらい具体的に差異が出るのか、数字を出してみました。

iphone5デザインをiphone6に対応させる

まずは、640*1136をそのままの比率で横750にしてみました。

640を750にするには1.171875倍!
小数点が出てくる時点で既に嫌な予感です。

すると

画面ip6-blog

縦1331.25 px

iPhone6の縦解像度が1334pxなので

誤差-2.75pxでした

iphone5デザインをiphone6 Plusに対応させる

まずは、640*1136をそのままの比率で横1080にしてみました。

640を1080にするには1.6875倍!

すると

画面ip6-blog2

縦1917px

iPhone6 Plusの縦解像度が1920pxなので

誤差-3pxでした

iphone6をiphone6 Plusサイズに拡大してみる

次に、iPhone6(750*1134)をiPhone6プラスの横サイズにそのまま拡大すると…

1.44倍なので縦1920.96 px

画面ip6-blog3

誤差+0.96pxでした

どうするのがいいか

非retinaからretinaの時みたいに単純に2倍!とかはできなさそうなことが改めてわかりました。

640*1136で作ったデザインをそれぞれ1.171875倍と1.6875倍にして端数を調整、が良さそうです…。

960が1136に!くらいの変化があるならいっそのこと上下隙間開けようとか思うんですが拡大すればそれなりに近くなるのでそれはそれで悩ましいですね。

おまけ:iphone6とiphone6 Plusのモックpsd

カバー画像で使用しているiPhnoe6とiPhone6 Plusのモック画像は、こちらから頂きましたヽ(´∀`。)ノ
仕事速くて素敵

ip6mock

http://wellgraphic.com/portfolio/apple-iphone-6-and-iphone-6-plus-mockup-psd

いかがでしたでしょうか。
こうするとiphone5→6(Plus)へのデザイン移行が楽だよ!というのがあれば教えて下さい。

では(^O^)/