本日、SafariのウェブブラウザエンジンであるWebKitのチームが、デザイナーがiPhone X向けにサイトを構築する際の詳細なガイドラインを発表しました。次期iPhoneのセンサーハウジング、いわゆる「ノッチ」は、デザイナーと開発者双方にとって新たな課題となっています。そのため、この問題に対する独創的な「解決策」がいくつか生まれています。WebKitがiPhone Xの公式ガイドラインを策定したことで、世界中のウェブ開発者にとって大きな助けとなるでしょう。
iPhone Xのセンサーハウジングは、現状のウェブサイトのデザインに課題をもたらすでしょう。Appleはこの問題を早期に軽減するため、サイトのコンテンツを左右にパディングしました。しかし、9to5Macのように全幅コンテンツを持つサイトの場合、この対策はAppleの意図した以上に見栄えを悪くする可能性があります。多くのウェブ開発者は、次期iPhone Xでサイトを可能な限り美しく見せるために、微調整を加えることを検討するかもしれません。WebKitチームがiPhone X向けのデザインについて投稿した記事では、開発者がどのような変更を加えることができるか、ビフォーアフターの例が紹介されています。
本日のドキュメントは、Stephen Radford氏が以前CSSについて分析したものと似ています。WebKitブログでは、まず開発者はiPhone Xを横向きに表示した際に画面サイズを最大限に活用すべきだと説明されています。そのためには、開発者はviewport-fit=coverサイトのメタタグに実装する必要があります。実装しないと、サイトが画面を横幅いっぱいに引き伸ばして活用できず、見栄えが悪くなる可能性があります。
調整後viewport、コンテンツがセンサーハウジングとホームインジケーターの下に隠れてしまう可能性があります。Appleは、次のステップとしてiPhone Xのセーフエリアを考慮する必要があると述べています。セーフエリアを考慮することで、ウェブ開発者はコンテンツがセンサーハウジング、ホームインジケーター、または丸い角に隠れないようにすることができます。
これはデザイナーにとっての核心です。ベゼルレス設計のため、iPhone X はソフトウェアにベゼルを再導入しただけです。
AppleのiPhone Xのデザインウェブサイトより:
これを実現するために、iOS 11のWebKitには新しいCSS関数constant()と、safe-area-inset-left、safe-area-inset-right、safe-area-inset-top、safe-area-inset-bottomという4つの定義済み定数が含まれています。これらを組み合わせることで、スタイル宣言で各サイドのセーフエリアインセットの現在のサイズを参照できるようになります。
これら2つの変更だけで、Web開発者は新しいiPhone Xでサイトを可能な限り美しく見せることができます。興味深いことに、Appleはmin()とmax()関数についても言及しています。どちらもCSSでは比較的新しいものですが、Safari 11やiOS 11ではどちらも利用できません。（Appleは、これらの関数はSafari Technology Previewの将来のバージョンで利用可能になると発表しています。）
9to5Macは、iPhone Xのセンサーハウジングを考慮に入れるため、サイトのコードに実験を重ねてきました。技術的には難しくありませんが、複雑なサイトレイアウトではかなりの作業量になる可能性があります。幸いなことに、iPhone Xの発売延期が報じられていることで、センサーハウジングが一般市場に普及するまでの時間をウェブ開発者に与えることができるかもしれません。
Apple のニュースをもっと知りたい場合は、YouTube の 9to5Mac をご覧ください。
limaine.com を Google ニュース フィードに追加します。
FTC: 収益を生み出す自動アフィリエイトリンクを使用しています。詳細はこちら。
![AppleがiPod nanoとshuffleの販売終了を決定したことについてどう思いますか？[アンケート]c](https://image.limaine.com/miommiod/d8/d4/9to5mac-default.webp)
