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