サイドバー


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



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


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

開発者ノート

SwiftUI を使用してサイドバーインターフェイスを構築すると、プラットフォームに適した外観と動作が自動的に得られます。開発者向けガイダンスについては、NavigationSplitView (NavigationSplitView) を参照してください。 SwiftUI を使用しない場合は、代わりに UISplitViewController (UISplitViewController) または NSSplitViewController (NSSplitViewController) を使用できます。


ベストプラクティス


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


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


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


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


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



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


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



iOS、iPadOS


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


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


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


macOS


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


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


サイドバーのサイズサイドバーの部分デフォルトの寸法
行の高さ24 pt
SF Symbol のスケール中 *
アイコンのサイズ16x16 px @1x
テキストのサイズ(スタイル)11 pt(小見出し)
行の高さ28 pt
SF Symbol のスケール
アイコンのサイズ20x20 px @1x
テキストのサイズ(スタイル)13 pt(本体)
行の高さ32 pt
SF Symbol のスケール
アイコンのサイズ24x24 px @1x
テキストのサイズ(スタイル)15 pt(タイトル 3)
全てセル間の水平の間隔17 pt
セル間の垂直の間隔0 pt

* 場合によっては、小さなサイドバーがデフォルトで小さなスケールの 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)



ビデオ





目次
Xcode の新機能

  • new HIG
  • 基礎

    概要

    アクセシビリティ

    ベストプラクティス

    操作

    ボイスオーバー

    テキスト表示

    色と効果

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

    リソース


    アプリのアイコン

    ベストプラクティス

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

    仕様

    リソース


    ブランド化

    ベストプラクティス

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

    リソース


    カラー

    ベストプラクティス

    包括的カラー

    システムカラー

    カラーマネジメント

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

    仕様

    リソース


    ダークモード

    ベストプラクティス

    ダークモードの色

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

    リソース


    アイコン

    ベストプラクティス

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

    リソース


    イメージ

    拡大率

    フォーマット

    ベストプラクティス

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

    リソース


    含まれる物

    デザインによる包括

    言語の歓迎

    親しみやすい

    性同一性

    人と設定

    ステレオタイプの回避

    アクセシビリティ

    言語

    リソース


    レイアウト

    ガイドと安全なエリア

    ベストプラクティス

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

    リソース


    マテリアル(材料)

    ベストプラクティス

    プラットフォームに関する考慮事項

    リソース


    モーション

    ベストプラクティス

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

    リソース


    右から左へ

    テキストの配置

    数字と文字

    コントロール

    イメージ

    インターフェイスアイコン

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

    リソース


    SF シンボル

    ウェイトよスケール

    デザインバリアント

    カスタムシンボル

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

    リソース


    タイポグラフィ(印刷)

    ベストプラクティス

    システムフォントの使用

    カスタムフォントの使用

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

    仕様

    リソース




    パターン

    概観


    個人データへのアクセス

    許可を求める

    ロケーションボタン

    事前アラートスクリーン

    リクエストの追跡

    データの保護

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

    リソース


    データのグラフ化

    ベストプラクティス

    効果的なグラフの設計

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

    リソース

    変更記録

    協力と共有化

    ベストプラクティス

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

    リソース

    変更記録

    ドラッグアンドドロップ

    ベストプラクティス

    フィードバックの提供

    ドロップを受け入れる

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

    リソース


    データ入力

    ベストプラクティス

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

    リソース


    フィードバック

    ベストプラクティス

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

    リソース


    ファイル管理

    ベストプラクティス

    ファイルを開く

    作業の保存

    クイックルックプレビュー

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

    リソース


    全画面表示

    ベストプラクティス

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

    リソース


    起動

    ベストプラクティス

    起動画面

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

    リソース


    ライブビューのアプリ

    ベストプラクティス

    EPG の体験

    クラウド DVR

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

    リソース


    ロード中

    ベストプラクティス

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

    リソース


    アカウントの管理

    ベストプラクティス

    アカウントの削除

    TV プロバイダーアカウント

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

    リソース


    通知の管理

    フォーカスとの統合

    ベストプラクティス

    買い物通知の送信

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

    リソース


    モダリティ

    ベストプラクティス

    リソース


    マルチタスク

    ベストプラクティス

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

    リソース


    ヘルプの提供

    ベストプラクティス

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

    リソース


    搭載

    ベストプラクティス

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

    リソース


    オーディオの再生

    ベストプラクティス

    中断の処理

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

    リソース


    触覚の再生

    ベストプラクティス

    カスタムの触覚

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

    リソース


    ビデオの再生

    ベストプラクティス

    TV アプリとの統合

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

    リソース


    印刷

    ベストプラクティス

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

    リソース


    格付けとレビュー

    ベストプラクティス

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

    リソース


    検索

    ベストプラクティス

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

    リソース


    設定

    ベストプラクティス

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

    リソース


    取り消しとやり直し

    ベストプラクティス

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

    リソース


    トレーニング/a>

    ベストプラクティス

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

    リソース




    部品

    全ての部品


    コンテンツ

    イメージビュー

    テキストビュー

    Web ビュー


    レイアウトと構成

    ボックス

    コレクション

    コラムビュー

    開示コントロール

    ラベル

    リストと表

    ロックアップ

    アウトラインビュー

    スプリットビュー

    タブビュー

    メニューとアクション

    活動ビュー

    ボタン

    コンテキストメニュー

    ドックメニュー

    編集メニュー

    メニュー

    ポップアップボタン

    プルダウンボタン/a>

    ツールバー


    ナビゲーションと検索

    ナビゲーションバー

    パスコントロール

    検索フィールド

    サイドバー

    サポートされる
    プラットフォーム

    iPhone iPad

    macOS tvOS

  • ベストプラクティス
  • プラットフォームの考慮事項
  • リソース

  • タブバー

    トークンフィールド


    プレゼンテーション

    アクションシート

    アラート

    ページコントロール

    パネル

    ポップオーバー

    スクロールビュー

    シート

    ウィンドウ


    選択と入力

    カラーウェル

    コンボボックス

    数値入力ビュー

    イメージウェル

    スクリーン上のキーボード

    ピッカー

    セグメントコントロール

    スライダー

    ステッパー

    テキストフィールド

    トグル(切り替え)


    状態

    活動リング

    ゲージ

    レベルインジケータ

    進捗インジケータ

    格付けインジケータ

    システムの体験

    複雑化

    ホーム画面のクイックアクション

    ライブ活動

    メニューバー

    通知

    ステータスバー

    一番上の棚

    時計の文字盤

    ウィジェット




    入力

    概観


    Apple Pencil と落書き

    ベストプラクティス

    落書きのサポート

    カスタムの描画

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

    リソース


    デジタルの竜頭

    ベストプラクティス

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

    リソース


    焦点と選択

    ベストプラクティス

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

    リソース


    ゲームコントローラー

    ベストプラクティス

    ボタン

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

    リソース


    ジャイロスコープと加速度計

    ベストプラクティス

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

    リソース


    キーボード

    ベストプラクティス

    キーボードショートカット

    カスタムキーボードショートカット

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

    仕様

    リソース


    ポインティングデバイス

    ベストプラクティス

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

    リソース


    リモコン

    ベストプラクティス

    ジェスチャ

    ボタン

    互換性のあるリモコン

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

    リソース


    空間的相互作用

    ベストプラクティス

    デバイスの使用法

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

    リソース


    タッチバー

    ジェスチャ

    ベストプラクティス

    インターフェイスアイコン

    コントロールとビュー

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

    リソース


    タッチスクリーンジェスチャ

    ベストプラクティス

    標準的なジェスチャ

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

    リソース




    プラットフォーム

    概観

    iOS 用デザイン

    ベストプラクティス

    リソース


    iPadOS 用デザイン

    ベストプラクティス

    リソース


    macOS 用デザイン

    ベストプラクティス

    リソース


    tvOS 用デザイン

    ベストプラクティス

    リソース


    watchOS 用デザイン

    ベストプラクティス

    リソース




    テクノロジー

    AirPlay

    序文

    アイコン

    編集者用


    常にオン

    アプリクリップ

    序文

    ユーザー体験

    アプリクリップカード

    アプリクリップのコード

    印刷ガイドライン

    法的要件


    Apple Pay

    序文

    Apple Pay の提供

    チェックアウトと支払い

    エラー処理

    サブスクリプションと寄付

    ボタンとマーク

    編集者用


    拡張現実

    CareKit

    序文

    データとプライバシー

    ビュー

    ユーザー体験

    シンボルとブランド化


    CarPlay

    序文

    アーキテクチャ

    操作

    視覚的デザイン

    アイコンとイメージ

    システム要素


    ゲームセンター

    序文

    アクセス・ポイント

    ダッシュボード

    成果

    リーダーボード

    多数のプレイヤー

    カスタムダッシュボードのリンク


    HealthKit

    HomeKit

    序文

    用語とレイアウト

    設定

    Siri の操作

    カスタム機能

    アイコン

    編集者用


    iCloud

    アプリ内購入

    序文

    自動更新可能なサブスクリプト


    ライブ写真

    Mac Catalyst

    序章

    アプリの構造

    ユーザーの操作

    視覚的デザイン

    Mac の慣用句


    機械学習

    序文

    機械学習の役割

    明示的なフィードバック

    暗黙のフィードバック

    較正

    訂正

    間違い

    複数のオプション

    自信

    属性

    制限事項


    マップ

    序文

    Apple Watch のマップ

    屋内のマップ


    ビジネス向けメッセージ

    序文

    ブランド化

    ボタン

    ダークモード

    ロゴ

    メッセージバブルの内容

    スクリーンショット


    NFC

    写真編集

    ResearchKit

    SharePlay

    ShazamKit

    Apple でサインイン

    序文

    データ管理

    ボタン


    Siri

    序文

    システムの意図

    カスタムの意図

    ショートカットと提案

    編集者用


    タップして iPhone で支払う

    財布

    序文

    パスのデザイン

    注文追跡のデザイン















    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ