ついに発売!iPhone X web制作への影響について調べてみる

ついに発売!iPhone X web制作への影響について調べてみる

きたる11月3日に発売されるiphone x。
発売前から色々と話題になってますが、とりわけIT、web関連の方々はザワザワしてるんじゃないでしょうか?

なぜならiphone x。ディスプレイの形が変わり、web制作やアプリ制作にだいぶ影響が出るんじゃないの?という話が出ているからです。

かつてのスマホ最適化の時のように、レイアウトがあぁ、端末動作があぁ、となる訳なんですが、
調べてみるとホームページ界隈にとってはさほど大きな変更点はなさそうです。

かといって無対策、という訳にはいかないので、今回は注意すべき変更点について調べていきたいと思います。

iphone x 従来からの変更点

処理能力の向上はもちろんのことですが、機能の面でいくとiphone xには顔認証機能が加わり、さらにカメラ機能もかなり評価が高いようです。

液晶画面は有機ELで、画像処理も2xから3xにランクアップ、、!いったいどこまで良くなるんだ、、、

そして外見。ここが今回のポイントになりますが、ホームボタンがなくなり、ディスプレイのサイズが大きくなりました。さらにノッチと呼ばれるカメラが付いている出っ張りの部分までディスプレイを拡げることで、今までにないディスプレイの形になっています。

以上をふまえ、サイト制作の観点から注意点を考えると、2点に絞られます。

サイト制作上の注意点

  1. ノッチ(出っ張りの部分)をふまえてサイトを構成しないといけない?
  2. カメラの処理能力が上がったので、更に大きな画像を用意しないといけない?

※顔認証やカメラ機能については、全てのサイト制作に共通するものではないので、ひとまず除外します。では実際にどう影響があり、どう対策していけばよいのか調べてみることにしましょう。

ノッチをふまえてホームページのレイアウトを決めないといけない?

ノッチノッチ言ってるとなんだか人の名前を呼んでいるようで複雑な気持ちになるのは私だけでしょうか?

なんか別の呼び名決めたい、、、、
まあそれは後にして、ノッチについて調べよう。

調べてみると実はこのノッチ、
考慮しなくてもレイアウトできるようApple側が配慮してくれてます。

基本的にノッチの影響がでるとされていたのは、画面を横向きにした時の左右の端
フル画面だとカメラ部分にかかった表示になってしまう?というところだったのですが、
この両端にセーフエリアという余白が設けられており、コンテンツに関しては従来どおりの表示ができるようになっています。

セーフエリア

セーフエリアがあることで従来の長方形表示になるため、特別なレイアウトをしなくていいようになってるんですね。

一応セーフエリアは解除可能。以下のmetaタグを設置することで、解除をすることができます。

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>解除が出来るんだから、きっとコレを生かしたレイアウトなんてのも出てくるんでしょうねぇ。
フル画面表示のビジュアルで何か面白いの作れそうな予感、、、

画像処理3x!用意する画像サイズは?

これはもうそのままです。配置する画像を3倍の解像度にすることで、スマホ表示キレー。を実現できます。

しかし3倍って、、、
仮に300pxのサムネイルなんかを設置するとしたら900pxの画像が必要になり、メインビジュアルにいたってはもう、、、、、

こうなると、ビットマップよりSVGなどの活用がより必要になってきそうですね。
毎回大きな画像たくさん貼ってたらあっという間にパンパンになっちゃいそうだし。

調査報告。今まで通りスマホ最適化に注力しましょう

調査の結果からすると、それほど大きな対応変更はしなくてもよさそうですね。

ノッチもセーフエリアがあれば今までと基本変わらないし、解像度に関しても対応方法は2xの時と一緒ですし。恐怖におののいていましたが安堵いたしました。
もちろん制作を進めるうえで、不具合が生じる部分も出てくる可能性はありますが、それはそれで都度対策を練っていけばいいでしょう。

一応サイト制作のガイドラインが出てましたので、掲載しておきます。
ご興味ある方はどうぞ。

Webkit サイト制作ガイドライン

また、xcodeのシュミレーターでiphone xのプレビューができるようなので、なじみのある方は併せて使ってみてください。

xcodeの公式サイト

それではまた!

制作に役立つカテゴリの最新記事