XCode 13.4 日本語化計画：New Human Interface Guideline

サイドバー

サイドバーを使用すると、アプリのナビゲーションが可能になり、あなたのアプリやゲームの最上位レベルのコンテンツのコレクションにすばやくアクセスできます。

サイドバー という用語は、最上位レベルのアプリ領域とコレクションのリストを指し、ほとんどの場合、スプリットビュー の一次ペインに表示されます。人々がサイドバーで項目を選択すると、スプリットビューの 2 次ペインに項目の詳細が表示されます。項目にリストが含まれている場合は、2 次ペインにリストが表示され、3 次ペインに詳細が表示されます。たとえば、iOS、iPadOS、および macOS の メール は、サイドバーのスタイルと動作を使用して、アカウントとメールボックスのリストを表示します。通常、メッセージリストは 2 次ペインに表示され、メッセージの内容は 3 次ペインに表示されます。

サイドバーのレイアウトは、特にサイドバーとそれに付随するペインをスクリーン上に同時に表示したい場合に、多くの水平スペースを必要とします。コンパクトな環境では、タブバー などの代替コンポーネントを検討することをお勧めします。

ベストプラクティス

サイドバーを使用して、あなたのアプリの主要な領域や、フォルダーやプレイリストなどのコンテンツの最上位コレクションにすばやくナビゲートできるようにします。 サイドバーは、情報階層をフラットにするのに役立ち、人々が複数のピアな情報カテゴリやモードに同時にアクセスできるようにします。

可能であれば、人々がサイドバーのコンテンツをカスタマイズできるようにします。 サイドバーを使用すると、人々はあなたのアプリ内の重要な領域にナビゲートできるため、最も重要な領域と表示順序を人々が決定できる場合に効果的です。

人々がサイドバーを非表示にできるように検討してください。 人々はサイドバーを非表示にして、コンテンツの詳細を表示するスペースを増やしたい場合があります。可能であれば、人々が既に知っているプラットフォーム固有の操作を使用して、サイドバーを非表示にしたり表示したりできるようにします。たとえば、iPadOS では、人々は組み込みの端でスワイプするジェスチャを使用することを期待しています。macOS では、表示/非表示ボタンを含めたり、あなたのアプリの [表示] メニューに [サイドバーを表示] および [サイドバーを非表示] コマンドを追加できます。デフォルトでサイドバーを非表示にしないで、見つけられるようにします。

一般に、サイドバーには 2 レベル以下の階層を表示します。 データ階層が 2 レベルよりも深い場合は、サイドバーの項目と詳細ビューの間にコンテンツリストを含むスプリットビューインターフェイスの使用を検討してください。

サイドバーに 2 レベルの階層を含める必要がある場合は、簡潔でわかりやすいラベルを使用して各グループにタイトルを付けます。 ラベルを短くするために、不要な単語を省略します。たとえば、Mail は各メールボックスのタイトルから Messages (メッセージ) という単語を省略し、Flagged (フラグ付き) や Drafts (下書き) などのより簡潔な用語を使用します。

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

tvOS に関する追加の考慮事項はありません。watchOS ではサポートされていません。

iOS、iPadOS

iOS アプリでは、サイドバーの代わりにタブバーを使用することを検討してください。 サイドバーインターフェイスは、横方向に多くのスペースを必要とし、特にポートレイト向きの場合、iPhone では混雑しすぎる可能性があります。対照的に、タブバーは、各セクション内の現在のナビゲーション状態を維持しながら、人々があなたのアプリの最上位セクションをすばやく切り替えるのに適しています。

iPadOS アプリでは、タブバーの代わりにサイドバーを使用することを検討してください。 サイドバーには多数の項目を表示できるため、iPad アプリのナビゲートがより効率的になります。また、人々がサイドバーの項目をカスタマイズして非表示にして、コンテンツ用のスペースを増やすこともできます。

必要に応じて、正しい外観をサイドバーに適用します。 サイドバーの作成に SwiftUI を使用していない場合は、コレクションビューリストレイアウトのサイドバーの外観を使用できます。開発者向けガイダンスについては、UICollectionLayoutListConfiguration.Appearance を参照してください。

macOS

macOS では、サイドバー (ソースリスト とも呼ばれます) がウィンドウの高さいっぱいまで伸び、選択項目のハイライトに丸みを帯びた角の外観を使用します。

サイドバーの行の高さ、テキスト、グリフのサイズは、全体のサイズ (小、中、大) によって異なります。サイズはプログラムで設定できますが、人々は 一般設定 で別のサイドバーアイコンサイズを選択して変更することもできます。以下の表は、macOS のサイドバーのデフォルトの寸法を示しています。

* 場合によっては、小さなサイドバーがデフォルトで小さなスケールの SF シンボルを使用します。

サイドバーの項目を表すために、おなじみのシンボルを使用することを検討してください。 SF シンボル は、あなたのアプリ内の項目を表すために使用できる、カスタマイズ可能な幅広いシンボルを提供します。サイドバー用のカスタムインターフェイスアイコンを作成するために、ビットマップイメージを使用する必要がある場合は、@1x と @2x の両方の解像度で、上の表に示す小、中、大のサイズでイメージを作成します。

すべてのサイドバーアイコンに固定色を指定して、あなたのアプリのスタイルを設定することは避けてください。 デフォルトでは、サイドバーアイコンは現在の accent color (アクセントカラー) を使用し、人々は使用するすべてのアプリで選択したアクセントカラーが表示されることを期待しています。固定色はアイコンの意味を明確にするのに役立ちますが、ほとんどのサイドバーアイコンは人々が選択した色で表示されるようにする必要があります。

必要に応じて、正しい背景の外観をサイドバーに適用します。 SwiftUI を使用してあなたの macOS アプリでサイドバーを作成していない場合で、ウィンドウに複数のサイドバーが含まれている場合、またはパネルや設定ウィンドウでサイドバーを使用している場合は、不透明な背景を指定する必要がある場合があります。他のすべての使用例では、サイドバーに半透明の背景を使用します。

コンテナウィンドウのサイズが変更されたときに、サイドバーを自動的に隠したり表示したりすることを検討してください。 たとえば、メール ビューアウィンドウのサイズを小さくすると、サイドバーが自動的に折りたたまれ、メッセージコンテンツ用のスペースが増えます。

編集可能なサイドバーでは、ビューの下端に編集ボタンを配置しないでください。 項目に関する情報を追加、削除、操作、または取得するためのボタンを提供することを検討してください。ウィンドウの下端がスクリーン外にある場合、サイドバーの下部にあるボタンを非表示にすることができます。人々が新しいサイドバーグループを追加できるようにするには、グループのラベルの末尾、開示三角 の横に追加 (+) ボタンを含めます。コンテキストメニューまたはメニューバーメニューで、削除などの他のアクションを有効にします。たとえば、コンテキストメニューに New Mailbox コマンドを提供するだけでなく、Mail はそれを Mailbox メニューにもリストします。

リソース

関連

スプリットビュー

タブバー

ナビゲーションバー

開発者用文書

Sidebar — SwiftUI

NavigationView — SwiftUI   廃止  

NavigationSplitView — SwiftUI (NavigationSplitView)

UICollectionLayoutListConfiguration — UIKit (UICollectionLayoutListConfiguration)

NSSplitViewController — AppKit (NSSplitViewController)

ビデオ