Design Fetch & Pull – iPhone X特別編

こんにちは、戦略人事クラウド「HRMOS（ハーモス）」でUIデザイナー＆フロントエンドエンジニアを担当している庄です。

今回のDesign Fetch & Pullでは、iPhone X特別編として、現時点で一般に公開されているAppleの動画、ガイド、リソースなどに基づいて、iPhone Xでアプリをデザイン、開発、ウェブサイト対応する際の注意点をまとめてみました。みなさまのiPhone X対応のご参考になれば幸いです。

全般

（引用元：https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/ ）

まず、何と言っても公式のヒューマン・インターフェイス・ガイドライン（HIG）が１番大事且つ、正しい情報源です。他の情報をみる前にまず、これだけは熟読しておきたいです。

他にも、アップルの開発者サイトでいくつか動画が公開されています。主にHIGの内容と重複していますが、動画でみたい方はこちらを参照してもいいかもしれません。

公式デザインリソースはこちらでダウンロードできます（Photoshop, Sketch, Adobe XDファイルあり）。

基本操作

（引用元：http://www.businessinsider.com/comparing-the-specs-of-apples-iphone-x-to-top-android-smartphones-2017-9 ）

iPhone Xでは、iPhone 8まで存在していたHomeボタンが取り除かれました。さらに、電源ボタンがサイドボタンに変更された為、これら絡みの操作はすべて変わります。

• ホーム画面に戻る：home indicator（画面下部）から上へスワイプする
• マルチタスキング：home indicatorから上へスワイプして一回止めて、マルチタスキング画面が出たあと指を離す
• アプリの切り替え：home indicatorより左/右へスワイプする
• Siri：サイドボタンを長押しする
• Apple Pay: サイドボタンを2回押す
• アクセシビリティショートカット：サイドボタンを3回押す
• 通知センター：画面の左上か真ん中上よりスワイプダウン
• コントロールセンター：画面の右上よりスワイプダウン
• スクリーンショット：音量上げるボタンとサイドボタンを同時に押す
• Face IDを一時OFFする：音量上げる/下がるボタンとサイドボタンを同時に長押しする
• 電源オフ：音量上げるボタンとサイドボタンを同時に長押しして、画面上出て来るボタンをスワイプする

Face ID

（引用元：https://www.forbes.com/sites/chunkamui/2017/09/22/faceid-good-bad-or-insignificant/#5ba0dfb31700 ）

iPhone Xの目玉機能であり、新たに採用した顔認証システムFace ID。Touch IDの代わりに認証スピードや信頼性が向上しています。

• iPhone X 1台につき1人の顔しか登録できない
• 注目する時しか発動されないので、寝ている時は作動せず安全
• 開発者は生のFace IDデータを取得することは出来ないが、代わりに深度マップデータを取得してARKitで使用可能

Sensor housing

（引用元：https://9to5mac.com/2017/09/19/kgi-touch-id-face-id-2018-iphones/ ）

iPhone Xフロントの上のセンサー部分の公式名称です。非公式的によく「notch」とも呼ばれます。

基本的に、UI上にわざとこの部分を隠すことは公式的には推奨されていません。この部分を隠すNotchKitというライブラリがGithubにで公開されていますが、あまり使わないほうがいいでしょう。

代わりにこのエリアと画面下部のhome Indicatorのコンテンツへの影響を除くために、アプリの内容の部分はSafe Area（システムコンポーネントが確保しているスペース以外の領域）の内部に収めたほうが良さそうです（HIG参照）。

発表イベントの時は、iPhone Xで動画再生する際に、一部がsensor housingで切れている現象がありましたが、ダブルタップすると動画が画面いっぱいに表示されてsensor housingの部分が切れてしまうだけで、動画を再生する際は、デフォルトでは動画全体がスクリーンに表示されます。

Animoji

（引用元：https://www.macrumors.com/2017/09/12/animoji-iphone-x-exclusive-feature/ ）

iPhone Xのもう一つの目玉機能としてのAnimojiは、ユーザーの表情や言葉を読み取りアニメーションに変換する機能です。

今現在サポートしているAnimojiは12個のみで（👽、🦊、🐵、🐶、🐷、 💩、🐼、🐱、🐔、🐰、🤖、🦄）、 選択したキャラによって、録音した声は変わります（いずれも、使用者本人の声ではないです）。

iOS 11をインストールしたiPhoneが、Animojiを受け取ることができ、長さは10秒までの制限があります。

Web

（引用元：https://webkit.org/blog/7929/designing-websites-for-iphone-x/ ）

iPhone Xの特別の角丸やsensor housing部分のスクリーン欠けの為、ウェブサイトのLandscapeモードはiPhone X用に特別に対応が必要です。

htmlもしくはbodyタグにbackground-color属性設定されてない場合、画面左と右の余白は白と表示されます。設定される場合、余白は設定された色でレンダリングされます。

基本画面の左右のSafe Area以外の部分は、コンテンツは表示されません。viewport-fit=cover を設定することで、ウェブページは画面いっぱいで表示されます。モバイルSafariが新たにCSSのsafe-area-inset-*という値が追加され、portrait/landscapeに応じて自動的に４つの余白が調整されます。

Home indicator

（引用元：http://www.businessinsider.com/apple-iphone-x-vs-iphone-8-2017-9/#4-the-iphone-x-has-a-better-selfie-camera-4 ）

画面下にほぼ常に表示される横の線のことです。

誤操作防止するため、home indicatorの近くにジェスチャー使う部品を置かないほうがよいでしょう。 フルスクリーンゲームや動画再生など以外は、home indicatorを隠さない方が良いと、HIGで明確に書かれてます。

おまけ

（引用元：https://www.weibo.com/1446101324/Fm63BqxMI ）

ニュースアプリ「iDaily」は、先週iPhone Xに対応したv3.0をApp Storeでリリースしました。現時点iPhone X実機でこのアプリの表示確認をすることは出来ませんが、開発元会社のファウンダーよりアプリのiPhone Xでのスクリーンショットが公開されたので、iPhone X対応に参考になるのではないでしょうか。（もし、スクリーンショットのリンクを開いた際に画面が真っ白になる場合、もう一回リンクを開くと解決できます）

iOS11に最適化してないアプリは、iPhone Xでは上下に黒い帯が入るレターボックスで表示されますので、対策が必要です。

最後に

いかがでしょうか？今後新しい情報が公開される際は、この記事で更新していく予定です！また、Twitter @BIZREACH_Design もこのブログの更新やデザイン情報をつぶやいておりますので是非フォローしてみてくださいね。それでは！