シート
シートは、人々が現在のコンテキストに密接に関連する範囲を指定されたタスクを実行するのに役立ちます。
デフォルトでは、シートは モーダル であり、人々がシートを閉じるまで親ビューを操作できないようにするフォーカスされた体験を提供します(モーダル表示の詳細については、モダリティ を参照してください)。モーダルシートは、人々から特定の情報を要求したり、親ビューに戻る前に完了できる簡単なタスクを有効にしたりするのに役立ちます。たとえば、シートを使用すると、ファイルの添付、移動または保存する場所の選択、選択範囲の形式の指定など、アクションを完了するために必要な情報を人々が提供できます。
macOS および watchOS では、シートは常にモーダルですが、iOS および iPadOS では、シートはモーダルではなくすることもできます。モーダルでないシートがスクリーンに表示されている場合、人々はその機能を使用して、シートを閉じずに親ビューの現在のタスクに直接影響を与えます。たとえば、iPhone および iPad の Notes(メモ)では、モーダルでないシートを使用して、人々がノートを編集するときにさまざまなテキスト選択にさまざまな書式を適用できるようにします。
ベストプラクティス
シートを使用して、非没入型のコンテンツを表示したり、単純なタスクを有効にしたりします。 シートを使用すると、親ビューの一部を表示したままにできるため、人々がシートを操作する際に元のコンテキストを維持しておくのに役立ちます。
没入型のコンテンツを表示したり、複雑なタスクを可能にしたりするには、シートに代わるものを検討してください。 たとえば、iOS と iPadOS では、ビデオ、写真、カメラ ビューなどの没入型コンテンツや、ドキュメントや写真の編集などの複数ステップのタスクを表示するのに適したフルスクリーンスタイルのモーダルビューを提供します。(開発者向けのガイダンスについては、UIModalPresentationStyle.fullScreen (UIModalPresentationStyle.fullScreen)を参照してください。)macOS の体験では、シートを使用する代わりに、新しいウィンドウを開くか、人々がフルスクリーンモードに入るようにすることができます。たとえば、ドキュメントの編集などの自己完結型のタスクは、別のウィンドウでうまく機能しますが、フルスクリーン表示 は、人々がメディアを表示したり、より没入型のタスクを実行したりするのに役立ちます。
メインインターフェイスからは一度に 1 つのシートのみを表示します。 シートを閉じると、人々は親ビューまたはウィンドウに戻ることを期待します。シートを閉じて別のシートに戻ると、あなたのアプリ内のどこにいるかわからなります。シート内で何かを行った結果、別のシートが表示された場合は、新しいシートを表示する前に最初のシートを閉じてください。必要に応じて、人々が 2 番目のシートを閉じた後に、最初のシートを再度表示できます。
親ビューのメインタスクに影響する補足項目を表示したい場合は、モーダルでないビューを使用します。 macOS では、パネル を使用して、人々が必要な情報やアクションにアクセスできるようにしながら、メインウィンドウを操作し続けることができます。iOS および iPadOS では、モーダルでないシートを使用してこのワークフローを有効にできます。ガイダンスについては、iOS、iPadOS を参照してください。
プラットフォームの考慮事項
tvOS に関する追加の考慮事項はありません。
iOS、iPadOS
サイズ変更可能なシートは、人々がそのコンテンツをスクロールするか グラバー をドラッグすると拡大します。グラバーは、シートの上端に表示される小さな水平インジケータです。シートは 戻り止め に従ってサイズ変更され、戻り止めは、シートが自然に静止する特定の高さです。iPhone 用に設計された戻り止めは、シートが自然に静止する特定の高さを指定します。システムは 2 つの戻り止めを定義します。large(大) は完全に拡張されたシートの高さで、medium(中) は完全に拡張された高さの約半分です。
シートは自動的に大の戻り止めをサポートします。中の戻り止めを追加すると、シートを両方の高さで静止させることができますが、中のみを指定すると、シートが最大の高さまで拡張するのを防ぐことができます。開発者向けのガイダンスについては、detents を参照してください。
iPhone アプリでは、中の戻り止めをサポートして、シートのコンテンツを段階的に開示できるようにすることを検討してください。 たとえば、共有シートでは、最も関連性の高いアイテムが中の戻り止め内に表示され、サイズを変更しなくても表示されます。さらに項目を表示するには、シートをスクロールまたは拡大します。対照的に、シートのコンテンツが最大の高さで表示される方が便利な場合は、中の戻り止めをサポートしたくない場合があります。たとえば、メッセージ と メール の作成シートは、人々がコンテンツを作成するのに十分なスペースを確保するために、最大の高さでのみ表示されます。
サイズ変更可能なシートではグラバーを含めます。 グラバーは、シートをドラッグしてサイズを変更できることを人々に示します。また、タップして戻り止めを切り替えることもできます。グラバーはまた、サイズ変更可能な事を視覚的に示すだけでなく、VoiceOver とも連動するため、人々はスクリーンを見ずにシートのサイズを変更できます。開発者向けガイダンスについては、prefersGrabberVisible を参照してください。
シートを閉じるべきスワイプをサポートします。 シートを閉じるには、人々は閉じるボタンをタップするのではなく、縦方向にスワイプすることを期待しています。人々がシートを閉じるためにスワイプし始めたときにシートに保存されていない変更がある場合は、アクションシートを使用してアクションを確認できるようにします。
人々が期待するように、[完了] ボタンと [キャンセル] ボタンを配置します。 通常、[完了] または [閉じる] ボタンは、シートの右上隅 (左から右のレイアウト) または左上隅 (右から左のレイアウト) にあります。 [キャンセル] ボタンは、シートの左上 (左から右のレイアウト) または右上 (右から左のレイアウト) の隅にあります。
macOS
macOS では、シートは親ウィンドウの上に浮かぶ、角が丸いカード状のビューです。シートがスクリーン上に表示されている間、親ウィンドウは薄暗く表示され、人々がシートを閉じるまで親ウィンドウを操作できないことを示します。ただし、人々はシートを閉じる前に他のアプリウィンドウを操作できることを期待しています。
妥当なデフォルトサイズでシートを表示します。 一般に、人々がシートのサイズを変更することは想定されていないため、表示するコンテンツに適したサイズを使用することが重要です。ただし、人々がコンテンツを拡大してビューを見やすくする必要がある場合など、サイズ変更可能なシートが好まれる場合もあるため、サイズ変更をサポートすることをお勧めします。
人々が最初にシートを閉じることなく、他のアプリウィンドウを操作できるようにします。 シートが開くと、その親ウィンドウが前面に表示されます。親ウィンドウがドキュメントウィンドウの場合は、モードレスのドキュメント関連のパネルも前面に表示されます。人々があなたのアプリ内の他のウィンドウを操作したい場合は、シートをまだ閉じていなくても、それらのウィンドウを前面に表示できるようにしてください。
人々が期待するように、シートの閉じるボタンを配置します。 人々は、シートを閉じるボタン ([完了]、[OK]、[キャンセル] など) がすべて、ビューの下部の末尾の隅にあることを期待しています。
人々が入力を繰り返し提供し、結果を観察する必要がある場合は、シートの代わりにパネルを使用します。 たとえば、検索と置換パネルを使用すると、人々は置換を個別に開始できるため、各検索の結果が正しいかどうかを確認できます。ガイダンスについては、パネル を参照してください。
watchOS
watchOS では、シートはあなたのアプリの現在のスクリーン上をスライドするフルスクリーンビューです。
モーダルタスクでカスタムタイトルまたはカスタムのコンテンツの提示が必要な場合にのみ、シートを使用して下さい。 対照的に、人々に重要な情報を提供したり選択肢を与えたりする必要がある場合は、アラート または アクションシート を使用して下さい。
シートの操作は短く、不定期にします。 カスタムシートは、現在のワークフローの一時的な中断としてのみ使用し、重要なタスクを容易にするためにのみ使用してください。あなたのアプリのコンテンツを人々がナビゲートするためにシートを使用することは避けてください。
あなたのアプリで意味がある場合にのみ、閉じるコントロールのデフォルトのラベルを変更します。 デフォルトでは、システムはシートの上隅に [キャンセル] を表示します。シートで人々がアプリの動作やそれらのデータを変更できるようにする場合は、[キャンセル] を使用します。一方、タスクを有効にせずにシートに情報を表示するだけの場合は、人々が行った変更をキャンセルする方法を人々は必要としないため、[完了] または [却下] を使用します。選択したラベルに関係なく、システムは常にテキストを白で表示します。
デフォルトのラベルを変更する場合は、混乱を招く代替案を避けてください。 シートが階層的なナビゲーションインターフェースの一部であると人々に誤解させるようなラベルの使用は避けてください。また、上端隅のテキストがページまたはアプリのタイトルのように見える場合、またはボタンラベルを提供しない場合、人々はシートを閉じる方法がわかりません。
リソース
関連
開発者用文書
Sheet — SwiftUI (sheet(isPresented:onDismiss:content:))
UISheetPresentationController — UIKit (UISheetPresentationController)
presentAsSheet — AppKit (presentAsSheet(_:))
ビデオ
UIKit でのシートのカスタマイズとサイズ変更
WWDC21
UIKit の新規事項
WWDC21