iPhone6登場によるサイト制作の変化＆画面サイズやdevicePixelRatio等のまとめ

2014/9/22 2016/4/21 Smart device, UI/UX

これまでAppleは初代iPhoneから一貫して画面サイズを横幅320px(640px)というルールを守ってきましたが、iPhone6でとうとうその画面サイズに変化が起きました。
スティーブ・ジョブズは片手で楽に操作できなくなるという理由からiPhone 4Sの3.5インチディスプレイをその他スマホメーカー等の様にサイズアップすることを否定していたそうですが。。。
このiPhone6の登場で今後のサイト制作にどのような影響が出てくるのでしょうか？
下記サイトで取り上げられていたiPhone6情報をでまとめてみました。

画面サイズやdevicePixelRatio等の仕様

iPhone 6 Screens Demystified

http://www.paintcodeapp.com/news/iphone-6-screens-demystified

まずは画面サイズ、devicePixelRatioの関係の情報ですが、
iPhone6は横幅「375px(750px)」iPhone6Plusは「414px(1242px)」となっています。devicePixelRatioは
iPhone6が「2倍」iPhone6Plusは「3倍」となっています。

ここで気になるのは下記devicePixelRatio同スケールで表示したときの画像の粗さです。devicePixelRatio等倍から2倍は非常に粗いですが、2倍から3倍はそれよりも粗く感じられません。

The Ultimate Guide To iPhone Resolutions(iPhone歴代サイズ)

http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

→ちなみにこちらは歴代のiPhoneデバイスサイズ

Screen Sizes

http://screensiz.es/phone

→比較用にその他スマートデバイスの画面サイズサイトを記載しました。

サイト制作にどのような影響がでるか？考察

iPhone 6でのスマートフォンデザイン/to-R

http://blog.webcreativepark.net/2014/09/18-011637.html

→既にスマホサイトはリキッド制作してるからこれまで通りの対応でよく、
画像に関しても2倍と3倍の差はそれほど感じられないためiPhone6用画像作成等は必要ないとの考察

タップ領域は下にまとめるのが吉かもしれない。iPhone 6 plusを買ってみて/面白法人カヤックのデザイナーブログ

http://design.kayac.com/topics/2014/09/ui-iphone6.php

→iPhone6Plusは画面上部に親指が届かなくなっているため、ボタン等のUIは画面下にまとめる等の対応が必要としています。
こちらはアプリの記事ではありますが、WEBサイト制作にも同じ事が言えると思います。例えば固定ヘッダーで上部にGメニューなんか使っている場合はユーザーは片手では使えなくなる事になります。

スマホ大画面時代、親指リーチ範囲が鍵となる新たなインターフェースデザイン/gizmodo

http://www.gizmodo.jp/2014/09/post_15582.html