iPhone X
https://developer.apple.com/design/human-interface-guidelines/ios/overview/iphone-x/
iPhone X
iPhone X includes a large, high-resolution, rounded, edge-to-edge Super Retina display that delivers an immersive, content-rich experience like never before.
iPhone Xは、大型で高解像度で丸みを持った、画面全体を覆うスーパーレティナディスプレイを搭載し、かつてないほどの没入感とリッチなコンテンツ体験を提供します。
Screen Size
スクリーンサイズ
In portrait orientation, the width of the display on iPhone X matches the width of the 4.7" displays of iPhone 6, iPhone 7, and iPhone 8. The display on iPhone X, however, is 145pt taller than a 4.7" display, resulting in roughly 20 percent additional vertical space for content.
縦向きの場合、iPhone Xのディスプレイの幅は、iPhone 6、iPhone 7、およびiPhone 8の4.7インチディスプレイの幅に一致します。ただし、iPhone Xのディスプレイは4.7インチのディスプレイよりも145pt高く、コンテンツの垂直方向のスペースが約20％増加します。
Supply high-resolution images for all artwork in your app. iPhone X has a high-resolution Super Retina display with a scale factor of @3x. For glyphs and other flat, vector artwork, it's best to provide resolution-independent PDFs. For rasterized artwork, provide both @3x and @2x versions of your artwork. See Image Size and Resolution and Custom Icons.
アプリのすべてのアートワークの高解像度画像を提供しましょう。 iPhone Xは、3倍の倍高解像度のスーパーレティナディスプレイを搭載しています。 グリフやその他のフラットなベクターアートワークの場合は、解像度に依存しないPDFを提供することをお勧めします。 ラスタライズされたアートワークの場合、アートワークの@ 3xと@ 2xの両方のバージョンを提供して下さい。 詳しくは「イメージサイズ」と「解像度」と「カスタムアイコン」を参照してください。
Layout
レイアウト
When designing for iPhone X, you must ensure that layouts fill the screen and aren't obscured by the device's rounded corners, its sensor housing, or the indicator for accessing the Home screen.
iPhone X用に設計するときは、レイアウトが画面を満たしつつ、デバイスの丸い角、センサー配置、およびホーム画面アクセスインジケータによって邪魔されていないことを確認する必要があります。
Most apps that use standard, system-provided UI elements like navigation bars, tables, and collections automatically adapt to the device's new form factor. Background materials extend to the edges of the display, and UI elements are appropriately inset and positioned.
ナビゲーションバー、表、コレクションなどの標準的なシステム提供のUI要素を使用するほとんどのアプリケーションは、新形状のデバイスに自動的に適応します。 背景素材はディスプレイの端まで延び、UI要素は適切に挿入され、配置されます。
For apps with custom layouts, supporting iPhone X should also be relatively easy, especially if your app uses Auto Layout and adheres to safe area and margin layout guides.
カスタムレイアウトのアプリでは、特にあなたのアプリが Auto Layout を使用し、セーフエリアと余白のレイアウトガイドを遵守している場合、iPhone Xのサポートは比較的簡単です。
Preview your app on iPhone X. You can use Simulator (included with Xcode) to preview your app and check for clipping and other layout issues. If your app supports landscape mode, make sure your layouts look great regardless of whether the device was rotated left or right. Upside-down portrait mode is not supported on iPhone X. Some features, like wide color imagery, are best previewed on actual devices.
iPhone Xでアプリをプレビューする。Simulator（Xcodeに付属）を使用してアプリをプレビューし、クリッピングやその他のレイアウトの問題をチェックできます。 あなたのアプリがランドスケープモードをサポートしている場合は、デバイスが左右のいずれに回転しても、レイアウトが適切に見えるようにしてください。 上下逆のポートレートモードはiPhone Xではサポートされていません。大きなカラー画像などは、実際のデバイスでプレビューするのがベストです。
Provide a full-screen experience. Make sure backgrounds extend to the edges of the display, and that vertically scrollable layouts, like tables and collections, continue all the way to the bottom.
全画面表示を提供すること。 バックグラウンドがディスプレイの端まで広がっていること、およびテーブルやコレクションなどの垂直スクロール可能なレイアウトが一番下まで連続していることを確認してください。
Inset essential content to prevent clipping. In general, content should be centered and symmetrically inset so it looks great in any orientation and isn't clipped by corners or the device's sensor housing, or obscured by the indicator for accessing the Home screen. For best results, use standard, system-provided interface elements and Auto Layout to construct your interface. Apps should adhere to the safe area and layout margins defined by UIKit, which ensure appropriate insetting based on the device and context. The safe area also prevents content from underlapping the status bar, navigation bar, toolbar, and tab bar.
重要なコンテンツはクリップされないように内側に配置。 原則として、コンテンツは中央に配置し、左右対称な位置に挿入してください。そうすることで、ランドスケープ表示とポートレート表示の両方において、コーナーやデバイスのセンサーで切り取られることなく、ホーム画面にアクセスするためのインジケーターによって隠されることも防げます。 最良の結果を得るには、標準のシステム提供のインターフェイス要素と自動レイアウトを使用してインターフェイスを構築します。 アプリケーションは、UIKitで定義された安全領域とレイアウトマージンに準拠している必要があります。これにより、デバイスとコンテキストに基づいて適切な配置が自動的に行われます。 セーフエリアへの配置は、コンテンツがステータスバー、ナビゲーションバー、ツールバー、およびタブバーの下に隠れるのを防ぎます。
When the device is in landscape orientation, it may be appropriate for some apps—like games—to place tappable controls in the lower portion of the screen (extending below the safe area) to allow more room for content. Use matching insets when placing controls at the top and bottom of the screen, and leave ample space around the Home indicator so people don't accidentally target it when trying to interact with a control.
デバイスが横向きになっている場合、ゲームのようなアプリでは、コンテンツのスペース確保のためにスクリーンの下部（安全領域の下に及ぶエリア）にタップ可能なコントロールを配置しなけれならない場合があります。 その場合でも、ホーム操作インジケータや角丸コーナーに邪魔されない位置に配置し、誤ったタッチターゲットを操作してしまうことを防いでください。
Be mindful of the status bar height. The status bar is taller on iPhone X than on other iPhones. If your app assumes a fixed status bar height for positioning content below the status bar, you must update your app to dynamically position content based on the user's device. Note that the status bar on iPhone X doesn't change height when background tasks like voice recording and location tracking are active.
ステータスバーの高さに注意してください。 ステータスバーはiPhone Xでは他のiPhoneよりも高さがあります。 ステータスバーの高さが固定されている前提でコンテンツを配置している場合は、アプリを修正して、コンテンツをデバイスに基づいて動的に配置する必要があります。 ただし、ボイスレコーディングやロケーショントラッキングなどのバックグラウンドタスクがアクティブな場合のステータスバーの高さは従来のiPhoneと同様です。
If your app currently hides the status bar, reconsider that decision for iPhone X.The display height on iPhone provides more vertical space for content than the displays of 4.7" iPhones, and the status bar occupies an area of the screen your app probably won't fully utilize. The status bar also displays information people find useful. It should only be hidden in exchange for added value.
あなたのアプリが現在ステータスバーを隠している場合は、iPhone X用に再検討する必要があります。iPhoneのディスプレイの高さは、コンテンツの垂直方向のスペースが4.7インチのiPhoneよりも大きく、ステータスバーが場所をとるのは好ましくない場合もあります。とはいえ、ステータスバーにはユーザにとって便利な情報が表示されています。ステータスバーを隠してもいいのは、それと引き換えにして何らか付加価値を与えられる場合のみです。
Be mindful of aspect ratio differences when reusing existing artwork. iPhone X has a different aspect ratio than 4.7" iPhones. As a result, full-screen 4.7" iPhone artwork appears cropped or letterboxed when displayed full-screen on iPhone X. Likewise, full-screen iPhone X artwork appears cropped or pillarboxed when displayed full-screen on a 4.7" iPhone. Make sure that important visual content remains in view on both display sizes.
既存のアートワークを流用する際は、アスペクト比の違いに注意してください。 iPhone XはiPhone 4.7インチのiPhoneとはアスペクト比が異なるため、フルスクリーンの4.7インチiPhone用アートワークがiPhone Xでフルスクリーン表示されたときに切り取られたりレターボックス化（上下に余白が生じた状態）されたりします。同様にフルスクリーンiPhone Xアートワークは、 4.7インチiPhoneで切り取られたりピラーボックス化（左右に余白が生じた状態）されたりします。重要なビジュアルコンテンツがディスプレイ内に収まっていることを確認して下さい。
Avoid explicitly placing interactive controls at the very bottom of the screen and in corners. People use swipe gestures at the bottom edge of the display to access the Home screen and app switcher, and these gestures may cancel custom gestures you implement in this area. The far corners of the screen can be difficult areas for people to reach comfortably.
インタラクティブなコントロールを画面の最下部やコーナーのギリギリの箇所に配置しないでください。 ユーザーはディスプレイの下端にあるスワイプジェスチャーを使用してホーム画面とアプリの切り替えにアクセスし、また、同様のジェスチャー実装されたカスタムジェスチャーをキャンセルすることがあります。 画面の縁の部分は、ユーザーにとって快適に操作することが困難な領域になり得ます。
Inset full-width buttons. A button that extends to the edges of the screen might not look like a button. Respect the standard UIKit margins on the sides of full-width buttons. A full-width button appearing at the bottom of the screen looks best when it has rounded corners and is aligned with the bottom of the safe area—which also ensures that it doesn't conflict with the Home indicator.
フルサイズのボタンの配置について。 画面の端まで伸びるボタンは、ボタンらしく見えません。 全角ボタンの両側にある標準のUIKit用マージンを空けて下さい。 画面の下部に幅いっぱいに表示されたボタンは、角が丸く、セーフエリアの下部に揃えられるのが最適であり、ホームインジケータと競合しないことが保証されます。
Don't mask or call special attention to key display features. Don't attempt to hide the device's rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don't use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas, either.
キーとなる表示部にマスクをかけたり、過剰に目を引いたりしないでください。 画面の上部と下部に黒いバーを置いて、デバイスの丸まった角やセンサー領域、ホーム画面アクセスインジケーターを隠すことはしないで下さい。 また、ブラケット、ベゼル、図形、飾り文字などの視覚的な装飾を使用して、これらの領域に特別な注意を払うことは避けてください。
Allow auto-hiding of the indicator for accessing the Home screen sparingly. When auto-hiding is enabled, the indicator fades out if the user hasn't touched the screen for a few seconds. It reappears when the user touches the screen again. This behavior should be enabled only for passive viewing experiences like playing videos or photo slideshows.
ホーム画面にアクセスするためのインジケータの自動非表示の許可。 自動隠し機能が有効になっていると、ユーザーが数秒間画面に触れていないと、インジケータが消えます。 ユーザーが画面に再び触れると再び表示されます。 この動作は、ビデオや写真のスライドショーの再生などの受動的な視聴体験に対してのみ有効にする必要があります。
Color
色
The display on iPhone X supports a P3 color space, which can produce richer, more saturated colors than sRGB.
iPhone Xのディスプレイは、P3カラースペースをサポートしています。これにより、sRGBよりも豊かで彩度の高いカラーが生成されます。
Use wide color to enhance the visual experience.Photos and videos that use wide color are more lifelike, and visual data and status indicators that use wide color are more impactful. See Color Management.
ビジュアル体験を向上させるためにワイドカラーを使用します。 ワイドカラーを使用する写真やビデオは、よりリアルであり、ワイドカラーを使用するビジュアルデータとステータスインジケータにはよりインパクトがあります。 カラーマネージメントを参照してください。
Video
ビデオ
The system-provided video player offers two viewing modes: full-screen (aspect fill) and fit-to-screen (aspect). By default, the system selects a viewing mode based on a video's aspect ratio, and the user can switch modes during playback. For developer guidance, see AVPlayerViewController.
システム提供のビデオプレーヤーは、フルスクリーン（アスペクトフィル）と画面にフィット（アスペクト）の2つの表示モードを提供します。 デフォルトでは、ビデオのアスペクト比に基づいて表示モードが選択され、ユーザーは再生中にモードを切り替えることができます。 開発者ガイダンスについては、AVPlayerViewControllerを参照してください。
Full-screen (aspect-fill) viewing mode.The video scales to fill the display. Some edge cropping may occur. This is the default viewing mode for wide video (2:1 through 2.40:1). For developer guidance, see resizeAspectFill.
フルスクリーン（アスペクト・フィル）表示モード。 ビデオはディスプレイに表示されます。 エッジの切り抜きが発生することがあります。 これはワイドビデオ（2：1〜2.40：1）のデフォルトの表示モードです。 デベロッパー向けのガイダンスについては、resizeAspectFillを参照してください。
Fit-to-screen (aspect) viewing mode.The entire video is visible onscreen. Letterboxing or pillarboxing will occur. This is the default viewing mode for standard video (4:3, 16:9, and anything up to 2:1) and ultra-wide video (anything above 2.40:1). For developer guidance, see resizeAspect.
画面に合わせた（アスペクト）表示モード。 ビデオ全体が画面に表示されます。 レターボックスやピラボックスが発生します。 これは、標準ビデオ（4：3,16：9、および最大2：1）および超広域ビデオ（2.40：1を超えるもの）のデフォルトの表示モードです。 デベロッパー向けのガイダンスについては、resizeAspectを参照してください。
Make sure custom video players behave as expected. The objective is to fill the display by default when playing video content on iPhone X. However, if filling the display results in too much cropping, the video should be scaled to fit the screen. You should also allow users to switch between full-screen and fit-to-screen viewing based on their individual preferences. For developer guidance, see AVPlayerLayer.
カスタムビデオプレーヤーが期待どおりに動作することを確認します。 iPhone Xでビデオコンテンツを再生するときに、デフォルトでディスプレイいっぱいに表示することを意図してください。ただし、トリミング領域が多すぎると、ビデオは画面に合わせてスケーリングされます。 ユーザ個々の設定に基づいて、フルスクリーンと画面に合わせて表示を切り替えるよう設定することもできます。 デベロッパー向けのガイダンスについては、AVPlayerLayerを参照してください。
Always display video content at its original aspect ratio. If your video content uses embedded letterbox or pillarbox padding to conform to a specific aspect ratio, iOS will be unable to correctly scale the video based on the user's choice of viewing modes. Padding embedded within the video frame can cause videos to appear smaller in full-screen mode and fit-to-screen mode. It also prevents videos from being displayed correctly in edge-to-edge, non-full-screen contexts, like Picture in Picture mode on iPad.
常にオリジナルのアスペクト比でビデオコンテンツを表示します。動画にレターボックスやピラーボックスが埋め込まれていて特定のアスペクト非に合わせてあった場合、iOSはユーザーの選択した表示モードに基づいて動画を正確に拡大することができなくなります。 ビデオフレーム内に余白が埋め込まれていた場合も、フルスクリーンモードおよび画面フィットモードでビデオが小さく表示されることがあります。 また、エッジトゥエッジモード（端から端まで表示している状態）や、非フルスクリーンモード（iPadのピクチャインピクチャのような状態など）でも、正しく表示されない場合があります。
Gestures
ジェスチャ
The display on iPhone X uses screen-edge gestures to provide access to the Home screen, app switcher, Notification Center, and Control Center.
iPhone Xのディスプレイは、スクリーンエッジジェスチャーを使用して、ホームスクリーン、アプリスイッチャー、通知センター、およびコントロールセンターへのアクセスを提供します。
Avoid interfering with systemwide screen-edge gestures. People rely on these gestures to work in every app. In rare cases, immersive apps like games might require custom screen-edge gestures that take priority over the system's gestures—the first swipe invokes the app-specific gesture and a second swipe invokes the system gesture. This behavior (known as edge protect) should be implemented sparingly, as it makes it harder for people to access the system-level actions. For developer guidance, see the preferredScreenEdgesDeferringSystemGestures() method of UIViewController. To learn more about system gestures, see Gestures.
システム全体を通して、画面端でのジェスチャを妨害しないようにしてください。 ユーザは全アプリ共通で、これらのジェスチャーを利用します。 まれに、ゲームなどの没入型アプリでは、システムのジェスチャーよりも優先するカスタムのスクリーンエッジジェスチャーが必要になる場合があります。そういう場合、最初のスワイプではアプリ固有のジェスチャーが呼び出され、2回目のスワイプではシステムジェスチャーが呼び出されます。 このような動作（エッジプロテクトと呼ばれる）は、システムレベルのアクションにアクセスすることが難しくなるため、控えめに実装する必要があります。 開発者ガイダンスについては、UIViewControllerのpreferredScreenEdgesDeferringSystemGestures()メソッドを参照してください。 システムジェスチャーの詳細については、ジェスチャーを参照してください。
Additional Design Considerations
さらなるデザイン上の考慮事項
Reference authentication methods accurately. iPhone X supports Face ID for authentication. If your app integrates with Apple Pay or other system authentication features, don't reference Touch ID on iPhone X. Likewise, make sure your app doesn't refer to Face ID on devices that support Touch ID. See Authentication.
認証方法を正しく参照する。 iPhone Xは認証のためのFacd IDをサポートしています。 あなたのアプリがApple Payや他のシステム認証機能と連携している場合、iPhone XではTouch IDを参照しないでください。同様に、Touch IDをサポートするデバイスでFace IDを参照していないことを確認してください。 認証を参照してください。
Don't duplicate system-provided keyboard features. On iPhone X, the Emoji/Globe key and the Dictation key automatically appear beneath the keyboard—even when using custom keyboards. Your app can't affect these keys, so avoid causing confusion by repeating them in your keyboard. See Custom Keyboards.
システム標準のキーボード機能を複製しないでください。 iPhone Xでは、カスタムキーボードを使用していても、Emoji / GlobeキーとDictationキーが自動的にキーボードの下に表示されます。 あなたのアプリはこれらのキーにはアクセスできないので、カスタムキーボードの使用は混乱をまねきます。 カスタムキーボードを参照してください。
Make sure your website looks great on the edge-to-edge display of iPhone X. See Designing Websites for iPhone X on webkit.org.
あなたのウェブサイトがiPhone Xのエッジトゥエッジディスプレイ最適化されているかを確認してください。webkit.orgのiPhone Xのウェブサイトの設計を参照してください。
Resources
Download iPhone X UI design templates for Photoshop and Sketch in Resources.
Learn More
For related design and developer guidance, watch the following videos:
- Fall 2017: Designing for iPhone X
- Fall 2017: Building Apps for iPhone X
- WWDC 2017: Auto Layout Techniques in Interface Builder
- WWDC 2017: Designing Across Platforms
- WWDC 2017: Modern User Interaction on iOS
- WWDC 2017: Updating Your App for iOS 11
（最終更新日：2018.8.28）
