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

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

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

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

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

画像引用元：iOS Human Interface Guidelines

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

画像引用元：iOS Human Interface Guidelines

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

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

画像引用元：iOS Human Interface Guidelines

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

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で表示したときに左右に余白ができてしまうからです。

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

画像引用元：prototypr

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

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

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

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

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

まとめ

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

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