レイアウト

アプリのレイアウトは、ユーザがアプリを開いた瞬間からコンテンツを把握するのに役立ちます。ユーザは、コントロールとコンテンツの間に慣れ親しんだ関係があることで、アプリの機能を使いやすく探しやすくなると期待しています。この点を考慮してレイアウトをデザインすることで、プラットフォームでのアプリの使用感が親しみやすいものになります。

Appleは、Appleテクノロジーを組み込み、すべてのAppleプラットフォームで実行できるアプリやゲームの設計に役立つように、テンプレートやガイドなどのリソースを提供しています。Appleデザインリソースを参照してください。

ベストプラクティス

関連のある項目をグループ分けして必要な情報を見つけやすくする。例えば、余白、背景の形状、カラー、マテリアル、区切り線を使って、要素同士を関連付けたり、情報を明確な領域に分けることをおすすめします。その際、コンテンツとコントロールが明確に区別されていることを確認してください。

周りに十分なスペースを確保して重要な情報を見つけやすくする。最も重要な情報は早く見たいものです。些末な情報を詰め込んだために肝心の情報が埋もれてしまったということがないようにしましょう。副次的な情報は、ウインドウのほかの部分で確認できるようにするか、追加のビューに含めるようにしてください。

コンテンツを画面またはウインドウいっぱいに拡張する。バックグラウンドやフルスクリーンのアートワークがディスプレイの端まで拡張されていることを確認します。また、スクロール可能なレイアウトの場合は、デバイスの画面の下や左右まで続いていることを確認します。サイドバーやタブバーなどのコントロールやナビゲーションコンポーネントは、同じ平面ではなくコンテンツに重ねて表示されます。レイアウトではこの点を考慮することが重要です。

コンテンツがウインドウ全体に広がっていない場合は、背景拡張ビューを使用して、サイドバーやインスペクタの下など、コントロールレイヤーの後ろにコンテンツを表示します。デベロッパ向けのガイダンスは、backgroundExtensionEffect()およびUIBackgroundExtensionViewを参照してください。

視覚的階層

コントロールとコンテンツを区別する。Liquid Glassマテリアルを活用して、コントロールの明確な見た目をiOS、iPadOS、macOSで一貫したものにします。背景の代わりに、スクロールエッジエフェクトを使用して、コンテンツとコントロール領域の間の遷移を表現します。ガイダンスは、スクロールビューを参照してください。

相対的重要性を伝えるように項目を配置する。多くのユーザは、上から下、先頭側から末尾側というように、横書きの文章を読むときの順で項目を見ていくので、特に重要な項目は、ウインドウ、ディスプレイ、視野の左上付近に配置しておくと基本的にうまくいきます。言語によって読む方向が異なる点に注意し、右から左に記述する言語を考慮してデザインしてください。

コンポーネント同士を位置合わせすることでスキャンを容易にし、構成や階層構造を分かりやすく伝える。位置を合わせるとアプリの表示内容がきれいに整理されるほか、スクロールしているときや目を動かしているときでもコンテンツを追いやすくなるため、より情報を見つけやすくなります。インデントと同様、位置合わせには、情報の階層構造が理解しやすくなるメリットもあります。

現在見えているもの以外にもコンテンツがあることが分かるように段階的な表示を利用する。大きなコレクション内の全項目を一度に表示することができない場合などは、現在見えているもの以外にも項目があることを示す必要があります。プラットフォームによりますが、例えば開閉コントロールを使用したり、項目の一部が見えるようにしておけば、ビューのスクロールなどによってさらにコンテンツが現れることが伝わります。

コントロールが使いやすくなるように、周囲に十分なスペースを確保し、論理的なセクションにグループ分けする。関係のないコントロール同士の距離が近すぎたり、ほかのコンテンツを周りに詰め込んだりすると、コントロールを区別したり機能を理解したりするのが難しくなることがあります。こうなると、アプリやゲームが使いにくくなってしまうかもしれません。ガイダンスは、ツールバーを参照してください。

適応性

すべてのアプリやゲームは、デバイスやシステムのコンテキストが変化したときに適応する必要があります。iOS、iPadOS、tvOS、visionOSでは、アプリやゲームの見た目に影響することがあるデバイス環境の違いを特徴付ける、一連の特性が定義されています。SwiftUIまたはAuto Layoutを使用すると、次のようなさまざまな特性やコンテキストの変化にインターフェイスを動的に適応させることができます。これらのツールを使わない場合は、別の方法を使ってこれを行う必要があります。

特に一般的で対処が必要になるデバイスとシステムのバリエーションには、以下のようなものがあります:

• デバイスの複数の画面サイズ、解像度、色空間

• デバイスの複数の向き（縦向き/横向き）

• Dynamic Islandやカメラコントロールなどのシステム機能

• iPadでの外部ディスプレイへの対応、拡大表示、サイズ変更可能なウインドウ

• ダイナミックタイプでのテキストサイズの変化

• 左から右/右から左のレイアウト方向、日付/時刻/数字フォーマット、フォントのバリエーション、テキストの長さなど、ロケールに応じた国際化機能

認識の一貫性を保ちつつ、コンテキストの変更にうまく適応できるレイアウトをデザインする。ユーザは、デバイスの回転、ウインドウのサイズ変更、ディスプレイの追加、デバイスの切り替えなどを行っても、問題なく機能して違和感を抱かせないアプリ体験を期待しています。システムで定義されているセーフエリア、マージン、ガイドを守り、レイアウトモディファイアでインターフェイス内のビューの配置を細かく調整すると、インターフェイスの適応性を確保するのに役立ちます。

テキストサイズの変更に対応できるようにしておく。ユーザは、異なるテキストサイズに対応できるアプリやゲームを高く評価します。iOS、iPadOS、tvOS、visionOS、watchOSでユーザが表示中のテキストのサイズを選択できるダイナミックタイプに対応すると、ユーザがテキストのサイズを調整したときにアプリやゲームを適切に対応させることができます。Unityベースのゲームでダイナミックタイプに対応するには、Appleのアクセシビリティプラグインを使用します（デベロッパ向けのガイダンスは、Apple – アクセシビリティを参照してください）。アプリ内でのテキストの表示についてのガイダンスは、タイポグラフィを参照してください。

複数の向き、ローカリゼーション、テキストサイズを使って複数のデバイスでアプリをプレビューする。さまざまな体験のうち、最大と最小のレイアウトを使用するものからテストを始めると、テストプロセスを合理化できます。一般的には広色域などの機能を実際のデバイスでプレビューすることが最善ですが、Xcode Simulatorを使ってクリッピングやその他のレイアウト上の問題を確認できます。例えば、横向きモードに対応しているiOSのアプリやゲームの場合、Simulatorを使って、デバイスが左右どちらに回転してもレイアウトが美しく表示されることを確認できます。

必要な場合はディスプレイの変化に合わせてアートワークの倍率を変える。例えば、アプリやゲームを見るコンテキストが変わった場合（アスペクト比の異なる画面で開かれた場合など）は、アートワークが切り取られたり、レターボックスまたはピラーボックスで表示されたりすることがあります。その場合は、アートワークのアスペクト比は変更せず、代わりにアートワークを拡大/縮小して重要な視覚コンテンツが隠れないようにしてください。visionOSでは、ウインドウがZ軸方向に移動するときには自動的にスケールが調整されます。

ガイドとセーフエリア

レイアウトガイドは、コンテンツを画面上に配置し、位置を揃え、スペースを調整することができる四角形の領域を定義するものです。システムには、定義済みのレイアウトガイドが含まれています。それらを使うと、コンテンツの周囲に標準のマージンを適用したり、テキストを読みやすくするために幅を制限したりすることが容易になります。また、カスタムレイアウトガイドを定義することもできます。デベロッパ向けのガイダンスは、UILayoutGuideおよびNSLayoutGuideを参照してください。

セーフエリアは、ツールバー、タブバー、その他ウインドウで提供されるビューで覆われないディスプレイの領域を定義するものです。セーフエリアは、iPhoneのDynamic IslandやMacの一部の機種のカメラハウジングなど、デバイスのインタラクティブ機能や表示機能との干渉を回避するために欠かせません。デベロッパ向けのガイダンスは、SafeAreaRegionsおよびセーフエリアと相対的にコンテンツを配置するを参照してください。

各プラットフォームのディスプレイおよびシステムの主要な特徴に配慮する。アプリやゲームがそのような特徴に対応していないと、プラットフォームになじまず、ユーザが使いづらいと感じることがあります。セーフエリアを使用すると、ディスプレイやシステムの特徴との干渉を避けるのに役立つだけでなく、バーなどのインタラクティブなコンポーネントを考慮に入れて、サイズ変更の際にコンテンツを動的に再配置することができます。

各プラットフォーム向けのガイドやセーフエリアが含まれるテンプレートについては、「Appleデザインリソース」を参照してください。

プラットフォームの考慮事項

iOS

なるべく縦向きと横向きの両方に対応する。デバイスの向きが変わってもうまく動作するアプリやゲームは、高く評価されます。ただし、縦向きのみまたは横向きのみで実行する必要がある体験もあります。これに該当する場合、両方の向きを試して対応する向きを見つける操作は、ユーザに任せることができます。ユーザにデバイスを回転するよう伝える必要はありません。アプリやゲームが横向きのみに対応している場合、ユーザがデバイスを左右どちらに回転させてもアプリが同じように正常に動作することを確認しましょう。

ゲームでは、フルブリードのインターフェイスを優先する。角丸半径、センサーハウジング、Dynamic Islandなどの機能に対応しつつ、画面いっぱいに美しいインターフェイスを提供するようにします。必要な場合は、レターボックスやピラーボックスでゲームを表示するオプションをプレイヤーに提供することを検討します。

フルサイズ幅のボタンは避ける。ボタンは、システム定義のマージンを尊重し、画面の端から離して配置すると、iOSらしくなります。フルサイズ幅のボタンを含める必要がある場合は、ハードウェアの曲線と調和し、隣接するセーフエリアと揃えるようにしてください。

ステータスバーを非表示にするのはアプリの価値や体験が向上する場合のみにする。ステータスバーにはユーザにとって有意義な情報が表示されます。また、占有している領域はほとんどのアプリで十分に活用できない領域であるため、通常は表示しておくことをおすすめします。例外は、ゲームプレイやメディアの視聴などの深い体験を提供しており、ステータスバーを非表示にするのが妥当である場合です。

iPadOS

macOSでのウインドウの動作と同じように、ウインドウのサイズを最小幅や最小高さにまで自由に変更することができます。レイアウトをデザインする際には、このサイズ変更の動作と、可能なウインドウサイズの全範囲を考慮することが重要です。ガイダンスは、マルチタスクとウインドウを参照してください。

ユーザがウインドウのサイズを変更した場合、できるだけコンパクトビューへの切り替えを遅らせる。最初にフルスクリーンビュー用にデザインし、フルレイアウトが収まらなくなった場合にのみコンパクトビューに切り替えるようにします。これにより、できるだけ多くの状況でUIがより安定し、見慣れたものになります。分割ビューなどのより複雑なレイアウトの場合は、ビューが狭くなるにつれて、インスペクタなど3次の列を非表示にすることをおすすめします。

一般的なシステムで提供されるサイズでレイアウトをテストし、遷移がスムーズになるようにする。ウインドウコントロールには、ウインドウを画面の半分、3分の1、4分の1に配置するオプションが用意されています。そのため、さまざまなデバイスで、各サイズのレイアウトを確認することが重要です。ユーザがウインドウサイズを最小から最大まで調整する際の予期しないUIの変化を最小限に抑えるようにしてください。

適応型ナビゲーションには変換可能なタブバーを検討する。多くのアプリでは、ナビゲーションにタブバーとサイドバーのいずれかを選択する必要はありません。その代わりに、両方を備えたタブバースタイルを採用できます。アプリは、まずサイドバーまたはタブバーのいずれか選択した方で起動しますが、ユーザはタップして切り替えることができます。ビューのサイズが変更されると、ビューの幅に合わせて表示スタイルも変更されます。ガイダンスは、タブバーを参照してください。デベロッパ向けのガイダンスは、sidebarAdaptableを参照してください。

macOS

コントロールや重要な情報をウインドウの下部に配置することを避ける。ユーザがウインドウを動かして、ウインドウの下端が画面の下端より下になることがよくあります。

ウインドウ上端のカメラハウジングにコンテンツを表示しない。デベロッパ向けのガイダンスは、NSPrefersDisplaySafeAreaCompatibilityModeを参照してください。

tvOS

さまざまなサイズのテレビに対応する。Apple TVでは、iPhoneやiPadのようにレイアウトが画面のサイズに自動的に適応せず、どのディスプレイでもアプリやゲームの同じインターフェイスが表示されます。さまざまな画面サイズで美しく見えるように、レイアウトのデザインには細心の注意を払ってください。

画面のセーフエリアに従う。プライマリコンテンツは、画面の上端と下端から60ポイント、左端と右端から80ポイント離して配置します。画面の端に近いコンテンツは見づらく、古いテレビではオーバースキャンにより意図せず切れてしまうこともあります。このゾーンの外は、意図的に画面の外にはみ出させるコンテンツや要素を部分的に表示する場合にのみ使用してください。

フォーカス可能な要素間に適切なパディングを含める。UIKitとフォーカスAPIを使用する場合、いずれかの要素にフォーカスが移動するとその要素が大きくなります。フォーカスが置かれたときに要素がどのように表示されるかを考慮に入れ、重要な情報に重ならないようにします。デベロッパ向けのガイダンスは、Apple TVのフォーカス操作についてを参照してください。

グリッド

以下のグリッドレイアウトを使用すると、閲覧体験を最適化することができます。フォーカスのない行や列の間に適切な間隔を設けて、項目にフォーカスが移動したときに重ならないようにしてください。

UIKitのコレクションビューのフローエレメントを使用すると、コンテンツの幅と間隔に基づいてグリッドの列数が自動的に決定されます。デベロッパ向けのガイダンスは、UICollectionViewFlowLayoutを参照してください。

タイトルがある行は縦方向の間隔を広げる。いずれかの行にタイトルが含まれる場合は、フォーカスのない前の行の下端とタイトルの中央までの間隔を十分に取って、詰まりすぎないようにします。また、タイトルの下端から行内のフォーカスのない項目の上端までも間隔を開けます。

間隔に一貫性を持たせる。コンテンツの間隔に一貫性がないとグリッドらしく見えなくなり、スキャンしにくくなります。

部分的に隠れているコンテンツが対称に見えるようにする。完全に表示されているコンテンツに注意が向かうように、画面の両端で画面外に部分的に隠れているコンテンツの表示部分を同じ幅にします。

visionOS

以下は、馴染みのある使いやすい操作感をvisionOSのアプリやゲームで実現するための、ウインドウ内でのコンテンツのレイアウトに関するガイダンスです。空間内でのウインドウの表示方法に関するガイダンスや、visionOSアプリでの奥行き、スケール、視野の使い方のベストプラクティスについては、空間レイアウトを参照してください。visionOSのウインドウコンポーネントについて詳しくは、ウインドウ > visionOSを参照してください。

アプリやゲームで最も重要なコンテンツやコントロールをなるべく中央に配置する。ウインドウが大きい場合は特に、ウインドウの中央付近にあるコンテンツの方が、ユーザにとって見つけやすく操作もしやすくなります。

ウインドウのコンテンツが境界からはみ出さないようにする。visionOSでは、ウインドウのXY平面の境界のすぐ外にウインドウコントロールが表示されます。例えば、「共有」メニューはウインドウの上に表示され、サイズ変更や移動を行ったり、ウインドウを閉じたりするためのコントロールはウインドウの下に表示されます。2Dや3Dのコンテンツがこれらの領域に重なっていると、特にウインドウの下に表示されるシステム定義のコントロールが使いにくくなってしまいます。

ウインドウ内に置くのが適切でないコントロールを追加で表示する場合はオーナメントを使用する。オーナメントを使うと、システム定義のコントロールに干渉せずにアプリコントロールとウインドウを視覚的に関連付けておくことができます。例えば、ウインドウのツールバーとタブバーはオーナメントとして表示されます。ガイダンスはオーナメントを参照してください。

ウインドウのインタラクティブなコンポーネントを簡単に注視できるようにする。インタラクティブなコンポーネントを楽に目で見て判別できるようにし、かつ、システム定義のホバーエフェクトがほかのコンテンツにかからないようにするには、インタラクティブなコンポーネントの周りに十分なスペースを確保する必要があります。例えばボタンの場合は、中心間の距離が60ポイント以上になるように配置してください。ガイダンスは、視線、空間レイアウト、ボタン＞visionOSを参照してください。

watchOS

コンテンツが画面の一方の端から他方の端までいっぱいに広がるようにデザインする。Apple Watchのベゼルは、コンテンツの周囲に視覚的なパディングを提供します。貴重なスペースを無駄にしないために、要素間のパディングを最小にすることを検討してください。

インターフェイス内で3つまたは4つ以上のコントロールを並べて配置しない。一般的なルールとして、グリフを含むボタンの場合は4つ以上、テキストを含むボタンの場合は3つ以上を並べて表示しないでください。通常、テキストのボタンは画面の幅いっぱいに表示することが推奨されますが、画面のスクロールが必要にならない限り、短いテキストラベルの2つのボタンを横に並べてもよいでしょう。

ユーザがほかの人に見せたい場合に備えて、表示の自動回転に対応する。ユーザが手首を返すと通常はその動きに反応してディスプレイがスリープ状態になりますが、コンテンツを自動回転させた方がよい場合もあります。例えば、装着している人が画像を友達に見せたり、QRコードをリーダーにかざしたりしたい場合などです。デベロッパ向けのガイダンスは、isAutorotatingを参照してください。

仕様

iOS、iPadOSデバイスの画面サイズ

iOS、iPadOSデバイスのサイズクラス

サイズクラスは、レギュラーまたはコンパクトのどちらかの値になります。レギュラーは大きな画面または横向きの画面のことを指し、コンパクトは小さな画面または縦向きの画面のことを指します。デベロッパ向けのガイダンスは、UserInterfaceSizeClassを参照してください。

異なるデバイスにおけるフルスクリーン体験では、画面サイズに応じてサイズクラスのさまざまな組み合わせが適用されます。

watchOSデバイスの画面サイズ

リソース

関連情報

右から左

空間レイアウト

レイアウトと編成

デベロッパ向けドキュメント

SwiftUIによるカスタムレイアウトの作成 — SwiftUI

ビデオ

新しいデザインシステムの理解

SwiftUIによるカスタムレイアウトの作成

デザインの基本原則

変更履歴