ブランディング・アズ・ア・サービス | 株式会社フラクタ(FRACTA Inc.)

JOURNAL


TECHNOLOGY

2017.12.06

iPhone Xに見る画面サイズの考え方




11月3日にリリースされたiPhone X。新機能はさることながら、発売前から大きな注目を浴びていたのがディスプレイ領域の広さです。そこで今回は、ディスプレイサイズの変更に伴い、既存サイト等の表示はどう変わるのか調べてみました。



iPhone X / iPhone 8 Plus / iPhone 8の違い

まずは、現時点のApple最新モデル3体の違いを見てみましょう。



ディスプレイサイズだけで言えば、iPhone8より1.1インチ、iPhone 8 Plusなら0.3インチほどiPhone Xの方が上回る結果に(1インチ=25.4㎜)。数値で見るとそこまで大きくなった印象はありませんが、実物はオールスクリーンディスプレイになった分、迫力があります。


【iPhone X と 従来のiPhoneで同じ画像を表示した場合】


左:iPhone X  右:iPhone 8 と同じ4.7インチのiPhone7(いずれも画面の明るさはMAXの状態)


なお、パネルは有機ELを搭載した「Super Retina」を採用。従来の液晶パネル以上に色の再現精度や輝度に優れています。


既存サイトの表示はどう変わる?

次は、同じwebページを表示してみました。


iPhone Xには、既存コンテンツを正しい寸法で表示するための「セーフエリア」が設定されています。表示位置などを指定していない一般的なwebサイトやアプリケーションなら、自動的に適正サイズで表示。また画面上のステータスバーの下にも、適切なスペースを確保してくれるようです。
ちなみに横に傾けた場合は、画面左右に余白のある表示となります。




 iPhone X 画面表示のまとめ


①アプリケーションに合わせて表示方法が変わる仕様であるものの、
 場合によっては表示崩れを起こす可能性もあるので注意が必要

②これからwebサイトを制作するなら、iPhone X での表示も視野に入れた構築を
 (iPhone X の特性を上手に生かすことで、サイトの注目度向上にも繋がるはず)

③有機ELパネルにより鮮やかな表示が可能になったため、今後ますます高い精度の写真が求められる

【参考サイト】
https://www.apple.com/jp/iphone/compare/
https://developer.apple.com/ios/update-apps-for-iphone-x/



次回は、少しの工夫で写真の精度が高まる「撮影のコツ」をご紹介したいと思います。