特殊な形、どうデザインする？「iPhoneX」のアプリデザインで知っておきたいことまとめ

更新日: 2018年01月31日

スマートフォン

マイページにお気に入り

iPhone Xでのデザイン、注意点は？

実はまだ多くは明かされていないiPhone Xのデザインですが、すでに気にかけておきたい点に関してはいくつかあります。

フルスクリーンとコンテンツ配置の範囲

画像引用元：iOS Human Interface Guidelines

まず、これまでの歴代iPhoneとは大きく違う点があります。
それは、iPhone Xがフルスクリーンを採用しているという点です。

先ほど*「いままで通りの四角い画面をデザインすれば問題ない」と書きましたが、ある意味これはUIデザイナー側の都合であり、ユーザーエクスペリエンスを考えると、「フルスクリーン体験」とも呼べるUXを考える必要があります。
AppleのiPhone Xに関するiOS Human Interface Guidelinesによれば、アプリのコンテンツ自身は中央のセーフエリア*に配置されますが、上下左右にマージンがあり、そこを隠さないようにデザインすることが求められています。
ポートレート表示(デバイスを縦にして表示する方法)でもランドスケープ表示(デバイスを横にして表示する方法)でも、ステータスバーなどの高さは変わりませんが、その分の高さを考慮したUIの配置を行う必要があります。

逆に言えば、アプリのコンテンツは自動的に中央のセーフエリアに配置されるので、オートレイアウトでデザインを行なっている場合は角を隠したり、センサーやホームインディケーターを隠すことはできない、ということを理解しておきましょう。

新しいステータスバー

画像引用元：iOS Human Interface Guidelines

新しいステータスバーは、これまでのiPhoneとは少し性格が違います。
これまで、アプリによっては上部のステータスバーはコンテンツエリアとは別に黒く塗りつぶされたりして、隔離していました。
あるいは、ゲームなどの没入感を大切にするアプリケーションのように、ステータスバーを意図的に隠す設計をしていたかもしれません。

しかし、この新しいiPhoneでは、ディスプレイ上部にあるフロントカメラによって、ステータスバーは2箇所に分裂しています。
以前は20ptだった高さが、iPhone Xでは44ptまで緩やかに確保され、基本的にはステータスバー専用の背景を敷かないようになっています。

面白いことに、iOS Human Interface Guidelinesでは、できるだけステータスバーの存在(あるいは高さ)を意識してデザインするようにデザイナーに呼びかけています。
これは、2箇所に分裂しているステータスバーこそがiPhone Xのアイデンティティであり、iPhone Xにとっては重要なパーツであることを示唆しているのです。

スクリーンサイズとフルスクリーン画像の扱い

画像引用元：iOS Human Interface Guidelines

ポートレート表示の場合、iPhone 6〜8で採用されている4.7インチディスプレイ(375 x 667 pt)に比べておよそ20％広いサイズ(375 x 812 pt)を採用しています。

画像引用元：iOS Human Interface Guidelines

また、iPhone Xはこれまでにないほどの高解像度を有しており、従来の@2Xの倍率ではなく*@3Xの倍率まで拡大することができるので、画像の表示はJPGやPNGよりもSVG*のほうがよいでしょう。

画像引用元：iOS Human Interface Guidelines

画像を全画面で配置したい場合には、4.7インチのiPhoneで表示できるのと同じ比率で作成するのがオススメです。
以下の画像でわかるように、結局のところ上下にステータスバーやホームインディケーターの位置が確保されるのと、iPhoneX用に全画面の画像を作った場合は4.7インチiPhoneで表示したときに左右に余白ができてしまうからです。