Adaptivity and Layout
Adaptivity and Layout
適応性とレイアウト
People generally want to be able to use their favorite apps on all of their devices and in any context. In iOS, interface elements and layouts can be configured to automatically change shape and size on different devices, during multitasking on iPad, in split view, when the screen is rotated, and more. It’s essential that you design an adaptable interface that provides a great experience in any environment.
一般的に、ユーザーは自分の好きなアプリをすべての端末やあらゆる状況で使用できるようにしたいと考えています。 iOSでは、iPad上のマルチタスク、分割ビュー、画面の回転などのさまざまなデバイスで、シェイプとサイズを自動的に変更するようにインターフェイスエレメントとレイアウトを設定できます。 どんな環境でも優れたエクスペリエンスを提供する適応可能なインターフェイスを設計することが不可欠です。
Device Screen Sizes and Orientations
デバイスの画面サイズと方向
iOS devices come in a variety of screen sizes and can be used in either portrait or landscape orientation.
iOSデバイスはさまざまな画面サイズで提供され、縦向きまたは横向きのいずれかで使用できます。
To learn how screen resolution impacts your app’s artwork, see Image Size and Resolution.
画面解像度がアプリケーションのアートワークにどのように影響するかを知るには、「画像サイズと解像度」を参照してください。
Auto Layout
オートレイアウト
Auto Layout is a development tool for constructing adaptive interfaces. Using Auto Layout, you can define rules (known as constraints) that govern the content in your app. For example, you can constrain a button so it’s always horizontally centered and positioned 8 points below an image, regardless of the available screen space.
オートレイアウトは、アダプティブインタフェースを構築するための開発ツールです。 オートレイアウトを使用すると、アプリ内のコンテンツを管理するルール（コンストレイントと呼ばれる）を定義できます。 たとえば、使用可能な画面領域に関係なく、画像を常に水平方向に中央に配置し、画像の8ポイント下に配置するようにボタン位置を固定することができます。
Auto Layout automatically readjusts layouts according to the specified constraints when certain environmental variations (known as traits) are detected. You can set your app to dynamically adapt to a wide range of traits, including:
自動レイアウトは、特定の環境変動（特性と呼ばれる）が検出されたときに、指定された制約に従ってレイアウトを自動的に再調整します。 次のようなさまざまな特質に動的に適応するようにアプリを設定できます：
- Different device screen sizes, resolutions, and color gamuts (sRGB/P3)
- Different device orientations (portrait/landscape)
- Split view
- Multitasking modes on iPad
- Dynamic Type text-size changes
- Internationalization features that are enabled based on locale (left-to-right/right-to-left layout direction, date/time/number formatting, font variation, text length)
ロケールに基づいて有効化された国際化機能（左から右へ/右から左へのレイアウト方向、日付/時刻/数値書式、フォントのバリエーション、テキストの長さ） - System feature availability (3D Touch)
For developer guidance, see Auto Layout Guide and UITraitCollection.
Layout Guides and Safe Area
レイアウトガイドとセーフエリア
Layout guides define rectangular regions that don’t actually appear visibly onscreen, but aid with the positioning, alignment, and spacing of content. The system includes predefined layout guides that make it easy to apply standard margins around content and restrict the width of text for optimal readability. You can also define custom layout guides.
レイアウトガイドは、画面上に実際には表示されないが、コンテンツの配置、整列、および間隔を助ける矩形領域を定義します。 このシステムには、コンテンツの周りに標準マージンを簡単に適用したり、テキストの幅を最適な読みやすさに制限したりするためのレイアウトガイドが含まれています。 カスタムレイアウトガイドを定義することもできます。
Adhere to the safe area and layout margins defined by UIKit. These layout guides 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. Standard system-provided views automatically adopt a safe area layout guide.
UIKitで定義された安全領域とレイアウトマージンを遵守してください。 これらのレイアウトガイドは、デバイスとコンテキストに基づいて適切に画面に内包することを保証します。 安全領域は、コンテンツがステータスバー、ナビゲーションバー、ツールバー、およびタブバーの下になるのを防ぎます。 標準的なシステム提供のビューは、安全領域レイアウトガイドを自動的に採用します。
For developer guidance, see UILayoutGuide, layoutMarginsGuide, readableContentGuide, and safeAreaLayoutGuide.
Size Classes
サイズクラス
Size classes are traits that are automatically assigned to content areas based on their size. The system defines two size classes, regular (denotes expansive space) and compact(denotes constrained space), which describe the height and width of a view.
サイズクラスは、サイズに基づいてコンテンツ領域に自動的に割り当てられる特性です。 システムは、ビューの高さと幅を表す2つのサイズクラスregular（広大な空間を表す）とcompact（狭い空間を表す）を定義します。
A view may possess any combination of size classes:
ビューは、サイズクラスの任意の組み合わせを持つことができます。
- Regular width, regular height
- Compact width, compact height
- Regular width, compact height
- Compact width, regular height
As with other environmental variations, iOS dynamically makes layout adjustments based on the size classes of a content area. For example, when the vertical size class changes from compact height to regular height, perhaps because the user rotated the device from landscape to portrait orientation, tab bars may become taller.
他の環境のバリエーションと同様に、iOSはコンテンツエリアのサイズクラスに基づいてレイアウトを動的に調整します。 たとえば、縦のサイズクラスがコンパクトな高さから通常の高さに変更された場合、おそらくユーザがデバイスを横向きに縦向きに回転させたため、タブバーが大きくなることでしょう。
Device Size Classes
デバイスサイズクラス
Different size class combinations apply to the full-screen experience on different devices, based on screen size.
画面サイズに基づいて、さまざまなデバイスでのフルスクリーンエクスペリエンスに異なるサイズクラスの組み合わせが適用されます。
Multitasking Size Classes
マルチタスクサイズクラス
On iPad, size classes also apply when your app runs in a multitasking configuration.
iPad上では、アプリがマルチタスク設定で実行されているときにサイズクラスが適用されます。
2/3 split view
1/2 split view
1/3 split view
Layout Considerations
レイアウトに関する考慮事項
Maintain focus on the current content during context changes. Content is your highest priority. Changing focus when the environment changes can be disorienting and frustrating, and can make people feel like they’ve lost control of the app.
コンテキストの変更時に現在のコンテンツに焦点を当てます。 コンテンツが最優先事項です。 環境が変化したときにフォーカスを変更すると、向きがわからなくなり、不満を感じ、アプリケーションを制御できなくなったような気分になる可能性があります。
Ensure that primary content is clear at its default size. People shouldn’t have to scroll horizontally to read important text, or zoom to see primary images, unless they choose to change the size.
重要コンテンツがデフォルトサイズでよく見えることを確認します。 重要なテキストを読むために横にスクロールしたり、拡大して主画像を表示する必要はありません。ユーザが能動的にサイズ変更を選択していない限りは。
Maintain an overall consistent appearance throughout your app. In general, elements with similar functions should look similar.
アプリ全体にわたって一貫した外観を維持します。 一般的に、同様の機能を持つ要素は類似しているはずです。
Use visual weight and balance to convey importance. Large items catch the eye and appear more important than smaller ones. Larger items are also easier to tap, which is especially important when an app is used in distracting surroundings, such as in the kitchen or a gym. In general, place principal items in the upper half of the screen and—in a left-to-right reading context—near the left side of the screen.
ビジュアルウェイトとバランスを使用して重要性を伝えます。 大きなアイテムは目を引くもので、小さいアイテムよりも重要なアイテムです。 大きなアイテムはタップしやすいので、キッチンやジムなど周囲の気が散るところでアプリを使用する場合は特に重要です。 一般的には、プリンシパル項目を画面の上半分に配置し、左から右の読み込みコンテキストでは画面の左側に配置します。
Use alignment to ease scanning and to communicate organization and hierarchy.Alignment makes an app look neat and organized, helps people focus while scrolling, and makes it easier to find information. Indentation and alignment can also indicate how groups of content are related.
整列を使用して俯瞰しやすくし、組織や階層を伝えることができます。アライメントは、アプリをきれいに整理し、人々がスクロールしながらフォーカスしやすくし、情報を見つけやすくします。 インデントとアライメントは、コンテンツのグループがどのように関連しているかを示すこともできます。
Extend visual elements to fill the screen. Your app should take advantage of all available screen space.
視覚的要素で画面を満たします。 あなたのアプリは利用可能なすべての画面領域を利用する必要があります。
Ensure adequate margins and spacing around content. In general, content should be comfortably spaced and inset slightly from the edges of the screen. In general, content works best centered and symmetrically inset so it looks good in any orientation. For best results, use standard, system-provided interface elements, Auto Layout, and standard margins, and adhere to safe area layout guides.
適切なマージンとコンテンツの周りのスペースを確保します。 一般的に、コンテンツは、快適に間隔を置いて、画面の端からわずかに間を開けて配置する必要があります。 一般的に、コンテンツは中央に配置され、対称的に挿入されるため、あらゆる方向で良好に見えます。 最良の結果を得るには、標準のシステム提供のインターフェイス要素、自動レイアウト、および標準マージンを使用し、セーフエリアレイアウトガイドを遵守してください。
Apply readability margins when displaying text on larger devices. These margins keep text lines short enough to ensure a comfortable reading experience.
より大きいデバイスにテキストを表示するときに読みやすさを配慮してマージンを適用します。 これらの余白は、快適な読書体験を確実にするためにテキスト行を短く保ちます。
Provide ample touch targets for interactive elements. Try to maintain a minimum tappable area of 44pt x 44pt for all controls.
インタラクティブな要素に十分なタッチターゲットを提供します。 すべてのコントロールで44pt x 44ptの最小タップ可能領域を維持してください。
Avoid gratuitous layout changes. When someone rotates a device, the entire layout doesn’t have to change. For example, if your app shows a grid of images in portrait mode, it doesn’t have to present the same images as a list in landscape mode. Instead, it might simply adjust the dimensions of the grid. Try to maintain a comparable experience in all contexts.
意義のないレイアウト変更を避ける。 誰かがデバイスを回転させると、レイアウト全体が変更される必要はありません。 たとえば、アプリがポートレートモードの画像のグリッドを表示する場合、横長モードのリストと同じ画像を表示する必要はありません。 代わりに、単にグリッドの寸法を調整することができます。 すべての文脈で同等の経験を維持することを目指してください。
If possible, support both portrait and landscape orientations. People prefer to use apps in different orientations, so it’s best when you can fulfill that expectation.
可能な場合は、ポートレートとランドスケープの両方の方向をサポートします。 人々は、さまざまな方向でアプリを使用することを好むので、その期待を満たすことができることが最良です。
If it’s essential that your app run in a single orientation, support both variants. An app that runs only in landscape mode should be usable regardless of whether the user rotates the device left or right. An app that runs only in portrait mode should rotate its content 180 degrees when the user rotates the device 180 degrees—except on iPhone X, which doesn’t support upside-down portrait mode. If your app doesn’t rotate automatically when someone holds the device in the wrong orientation, they’ll know instinctively to rotate it. You don’t need to tell them.
アプリが単一の方向で動作することが不可欠な場合は、上下の順逆両方のバリエーションをサポートしてください。 ランドスケープモードでのみ動作するアプリは、ユーザーがデバイスを左右に回転させるかどうかにかかわらず使用可能でなければなりません。 ポートレートモードでのみ動作するアプリは、逆さまのポートレートモードをサポートしていないiPhone Xを除いて、ユーザーが端末を180度回転させるとコンテンツを180度回転させる必要があります。 あなたのアプリが間違った向きでデバイスを保持しているときにアプリが自動的に回転しない場合、あなたは本能的にそれを回転させることを知ります。 あなたはそれらを伝える必要はありません。
Customize your app’s response to rotation according to context. A game that lets people move a character by rotating the device, for example, probably shouldn’t switch orientations during gameplay. It could, however, display menus and intro sequences based on the current orientation.
コンテキストに応じてアプリの回転に対する反応をカスタマイズします。 たとえば、デバイスを回転させてキャラクターを移動させるゲームでは、ゲームプレイ中に方向を切り替えるべきではないでしょう。 しかし、現在の方向に基づいてメニューやイントロシーケンスを表示することもできます。
Be prepared for text-size changes. People expect most apps to respond appropriately when they choose a different text size in Settings. To accommodate some text-size changes, you might need to adjust the layout. For more information about text usage in your app, see Typography.
テキストサイズの変更に備えてください。多くのアプリは、[設定]で別のテキストサイズを選択すると、適切に反応することが期待されます。 一部のテキストサイズの変更に対応するには、レイアウトを調整する必要があります。 アプリケーションでのテキストの使用方法の詳細については、「タイポグラフィ」を参照してください。
Make sure your app works on iPad, not just on iPhone. Users appreciate having the flexibility to run your app on either type of iOS device. Even if you expect most people to use your app on iPhone, interface elements should remain visible and functional on iPad. If certain features of your app require iPhone-specific hardware—like 3D Touch—consider hiding or disabling those features on iPad and letting people use your app's other features.
あなたのアプリがiPhoneだけでなく、iPadで動作することを確認してください。 いずれのタイプのiOS端末でもアプリを実行できる柔軟性があります。 ほとんどの人がiPhoneであなたのアプリを使用することを期待していても、インターフェイスの要素はiPad上で表示され、機能し続ける必要があります。 アプリの特定の機能にiPhone固有のハードウェア（3D Touchなど）が必要な場合は、iPad上でこれらの機能を隠すか無効にして、他の機能を使用させることを検討してください。
