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

これまで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

iphone6_size

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

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

pixelratio

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

jvvleasw5q4vm6wq3yln

上記画像を見ると一目瞭然。左上に親指が届かない。。。

下記プラグインの様に右下固定ナビゲーションなどを使用する場面がでてきそうです。

http://codyhouse.co/gem/smart-fixed-navigation/

画面サイズ、devicePixelRatioの差はこれまでの対応と大きな変化はなさそうですが、UIの部分には変化が起きてくるような気がします。

Share

  • このエントリーをはてなブックマークに追加
  • 31

Follow(SNSで定期購読)

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>