2017年9月、iPhone 8とともに新しいiPhone「iPhone X」が発表されました。

Webデザイナーやスマートフォンのアプリエンジニアの方々は。発売後すぐにデザインに対応できるように準備を進めているのではないでしょうか。
1125 x 2436ピクセルのスーパーRetinaディスプレイだけでなく、全画面のディスプレイに頭上に切り抜かれたようなフロントカメラの存在が特徴的です。

この新しいiPhone向けにデザインするためには、解像度や独特な形、UIの位置などを念頭においておく必要があります。
今回は、iPhoneXのアプリデザインで知っておきたいことをまとめていきます。

特異な形、デザイン手法は変わる？

11.png
画像引用元：iOS Human Interface Guidelines

まず最初にはっきりさせておきたいことは、ホームボタンがなくなったりフロントカメラのでっぱりがあることが、デザインをする上での障害になるのか、ということです。
結論から言えば、デザイナーはそうした諸々のiPhone Xの特異な形を気にすることなく、いままで通りの四角い画面をデザインすれば問題ないということです。

10.png
画像引用元：iOS Human Interface Guidelines

ホームボタンがなくなった代わりに、iPhone Xではホームインディケーターと呼ばれる横長の棒が下部に位置します。
ホームボタンを押すのではなく、この棒を下から上にスワイプすることでホームスクリーンに戻るか、マルチタスクを行うことになります。

iOSのネイティブアプリをすでに作っている場合は、もちろんiPhone X用にアプリを作り直す必要はなく、そのままiPhone Xにも利用できるようになります。
下記の写真でもわかる通り、ナビゲーションバーやテーブル、コレクションビューやタブなどは、そのまま自動的に配置されますが、iPhone 8よりもiPhone Xのほうが表示領域は若干大きくなっています。

1.png
画像引用元：iOS Human Interface Guidelines

ただし、Xcodeなどでカスタムレイアウトを採用している場合には、新しいスクリーンレイアウトを採用する必要があります。
オートレイアウトを採用している場合は、デザイナーの手間を煩わせることはあまりないでしょう。

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

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

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

8.png
画像引用元：iOS Human Interface Guidelines

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

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

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

新しいステータスバー

9.png
画像引用元：iOS Human Interface Guidelines

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

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

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

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

5.png
画像引用元：iOS Human Interface Guidelines

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

2.png
画像引用元：iOS Human Interface Guidelines

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

6.png
画像引用元：iOS Human Interface Guidelines

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

ボトム位置に置くコントロールボタン

7.png
画像引用元：prototypr

iOS Human Interface Guidelinesではスクリーン下部にインタラクティブなボタンをたくさん置きすぎるのを推奨していません。

これはホームインディケーターの存在が原因で、あまりにもたくさんのボタンがありすぎると、ホーム画面に戻りたいのに誤って別のボタンを押してしまう可能性があるからです。

Face IDを使ったユーザー体験

これまでのiPhoneではTouch IDと呼ばれる指紋認証機能があり、デバイスをアンロックするのにパスワード不要でホームボタンに行ける機能がありました。

ホームボタン自体がiPhone Xではなくなってしまったので、アプリケーション開発者はFace IDを使った認証について考える必要が出てきます。
アプリケーションによってはTouch IDを使っていたものもあるかと思いますが、Face IDを使った認証に置き換えていくことを考えましょう。

まとめ

どのiPhoneよりも広く、高画質で、丸い縁を帯び、全画面という、ユーザーにとっては未踏の体験ができそうなiPhone Xですが、その特別な体験をもたらす鍵を握っているのは、デザイナーであるあなたかもしれません。

重要なので特に繰り返しておきたい点は、「解像度が3倍になったこと」「ステータスバーは隠すことができないこと」「ホームインディケーターに気をつけてデザインすべきこと」の3点です。
しかしながら、オートレイアウトであれば、それほど神経質になる必要はないということです。