アプリの構造とナビゲーション


多くの場合、iOS アプリと macOS アプリは同様の方法でデータを整理しますが、異なるコントロールと視覚的インジケーターを使用して、人々がデータを理解し、ナビゲートできるようにします。iOS アプリを Mac Catalyst で Mac に導入する場合は、時間をかけてあなたのアプリの構造とナビゲーションを変更し、Mac の規則に従うように計画してください。


通常、iPad アプリは以下の UIKit コントロールを使用してコンテンツと機能を整理します。


  • 分割ビュー。 分割ビューを使用すると、主な列、オプションの補助列、およびコンテンツの第二次ペインを表示する 2 列または 3 列のインターフェイスで構成される階層ナビゲーションが可能になります。多くの場合、アプリは主な列を使用してサイドバーベースのインターフェイスを作成し、サイドバーの変更によってオプションの補助列が変更され、それがコンテンツペインのコンテンツに影響を与えます。

  • タブバー。 タブバーは、スクリーン下部の常設バーに最上位のカテゴリを表示することで、フラットなナビゲーションをサポートします。

  • ページコントロール。 ページコントロールは、ページのフラットリスト内の現在のページの位置を示すドットをスクリーンの下部に表示します。

  • あなたの iPad アプリでタブバーを使用する場合は、サイドバー付きの分割ビューまたはセグメントコントロールの使用を検討してください。 どちらの項目も macOS のナビゲーション規則に似ています。分割ビューまたはセグメントコントロールを選択するには、以下の点を考慮してください。


  • サイドバー付きの分割ビューには、最上位項目のリストが表示され、それぞれが子項目のリストを表示できます。サイドバーを使用すると、ユーザーはサイドバー内で各タブのコンテンツを表示できるため、ナビゲーションが合理化されます。iPad と Mac の両方でサイドバーを使用することで、iPad ユーザーが Mac アプリの使用を簡単に開始できるようにする一貫したレイアウトを作成して下さい。ユーザーがコンテンツを整理しやすくするために、サイドバーにはラベル、並べ替え、フィルタリングなどの機能を提供できます。さらに、サイドバーはグリフを利用して最上位項目を区別することができます。

  • セグメントコントロールとタブバーはどちらも、相互に排他的な選択など、同様の操作に対応します。一般に、タブバーの代わりに分割ビューを使用すると、セグメントコントロールよりもうまく機能します。ただし、あなたのアプリがフラットなナビゲーション階層を使用している場合、セグメントコントロールは Mac で適切に機能します。

  • タブバーをどのように適応させるかに関係なく、macOS の [表示] メニューからサイドバーの項目などの最高位項目に人々がすばやくアクセスできるようにしてください。ガイダンスについては、アプリメニュー を参照してください。


    あなたのアプリで入れ子にされた最上位のナビゲーション構造を使用している場合は、よりフラットなナビゲーション階層を作成する方法を検討してください。 iPhone で生まれた iPad アプリの多くは、深く入れ子にされたナビゲーションコントローラーを使用しているため、人々がアプリ内をナビゲートするのが難しくなっています。可能な場合は、入れ子にされた最上位のナビゲーション階層は避けてください。代わりに、サイドバー付きの分割ビューを採用し、iPad と Mac の追加のスクリーンスペースを利用して、よりフラットな階層を作成します。


    あなたの Mac アプリで分割ビューを使用していて、深いコンテンツ階層を避けられない場合は、[戻る] ボタンを含めて下さい。 あなたのコンテンツ階層が、分割ビューでサポートされている列の数よりも深い場合、主なビューと現在のコンテンツペインの間の中間レベルが表示されない場合があります。iPad では、人々はジェスチャを使用して、コンテンツ階層の隠れた中間レベルにナビゲートできます。人々が Mac で自分の手順をたどることができるようにするには、ツールバーに [戻る] ボタンを含め、[表示] メニューに、対応するナビゲーション項目を含めて下さい。


    あなたの Mac アプリでセグメントコントロールを使用する場合は、Mac アプリのレイアウトの上部に配置して下さい。 Mac ユーザーはトップダウンのユーザーフローに慣れており、Mac アプリのウィンドウの下部が常に表示されているとは限りません。


    ナビゲーションに水平方向のページングを使用する場合は、ページ間をナビゲートするために Mac ユーザー固有のコントロールを提供して下さい。 指で横方向にはじいたりドラッグしてナビゲートするのは簡単ですが、マウスボタンを押したまま横方向にドラッグするのは面倒です。これは特に、水平スクロールホイールのないマウスを使用している場合に当てはまります。このタイプの横方向のナビゲーションをサポートしている場合は、メニューにナビゲーションコマンドを配置して、人々があなたの Mac アプリのページ間をナビゲートできるようにします。さらに、人々が次または前のページにナビゲートできるようにするボタンをツールバーに表示します。たとえば、macOS の Stocks (株式) では、ツールバーに [戻る] ボタンが表示され、[表示] メニューに [次のストーリー] コマンドと [前のストーリー] コマンドの両方が表示されます。


    タブのサポートを追加します。 ユーザーは、macOS アプリで文書やその他のコンテンツを新しいウィンドウではなく新しいタブで開けることを期待します。さらに、[システム設定] を使用して、ウィンドウよりもタブを優先することができます。この場合、システムは、[表示] > [タブ バーを表示] や [ウィンドウ] > [次のタブを表示] など、関連するメニュー項目をアプリのメニューに動的に追加します。



    リソース


    関連


    macOS 用デザイン



    開発者用文書


    Mac Catalyst (Mac Catalyst)



    ビデオ





    目次
    Xcode の新機能

  • new HIG
  • 基礎

    概要

    アクセシビリティ

    ベストプラクティス

    操作

    ボイスオーバー

    テキスト表示

    色と効果

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

    リソース


    アプリのアイコン

    ベストプラクティス

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

    仕様

    リソース


    ブランド化

    ベストプラクティス

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

    リソース


    カラー

    ベストプラクティス

    包括的カラー

    システムカラー

    カラーマネジメント

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

    仕様

    リソース


    ダークモード

    ベストプラクティス

    ダークモードの色

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

    リソース


    アイコン

    ベストプラクティス

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

    リソース


    イメージ

    拡大率

    フォーマット

    ベストプラクティス

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

    リソース


    含まれる物

    デザインによる包括

    言語の歓迎

    親しみやすい

    性同一性

    人と設定

    ステレオタイプの回避

    アクセシビリティ

    言語

    リソース


    レイアウト

    ガイドと安全なエリア

    ベストプラクティス

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

    リソース


    マテリアル(材料)

    ベストプラクティス

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

    リソース


    モーション

    ベストプラクティス

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

    リソース


    右から左へ

    テキストの配置

    数字と文字

    コントロール

    イメージ

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

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

    リソース


    SF シンボル

    ウェイトよスケール

    デザインバリアント

    カスタムシンボル

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

    リソース


    タイポグラフィ(印刷)

    ベストプラクティス

    システムフォントの使用

    カスタムフォントの使用

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

    仕様

    リソース




    パターン

    概観


    個人データへのアクセス

    許可を求める

    ロケーションボタン

    事前アラートスクリーン

    リクエストの追跡

    データの保護

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

    リソース


    データのグラフ化

    ベストプラクティス

    効果的なグラフの設計

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

    リソース

    変更記録

    協力と共有化

    ベストプラクティス

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

    リソース

    変更記録

    ドラッグアンドドロップ

    ベストプラクティス

    フィードバックの提供

    ドロップを受け入れる

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

    リソース


    データ入力

    ベストプラクティス

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

    リソース


    フィードバック

    ベストプラクティス

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

    リソース


    ファイル管理

    ベストプラクティス

    ファイルを開く

    作業の保存

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

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

    リソース


    全画面表示

    ベストプラクティス

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

    リソース


    起動

    ベストプラクティス

    起動画面

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

    リソース


    ライブビューのアプリ

    ベストプラクティス

    EPG の体験

    クラウド DVR

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

    リソース


    ロード中

    ベストプラクティス

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

    リソース


    アカウントの管理

    ベストプラクティス

    アカウントの削除

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

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

    リソース


    通知の管理

    フォーカスとの統合

    ベストプラクティス

    買い物通知の送信

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

    リソース


    モダリティ

    ベストプラクティス

    リソース


    マルチタスク

    ベストプラクティス

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

    リソース


    ヘルプの提供

    ベストプラクティス

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

    リソース


    搭載

    ベストプラクティス

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

    リソース


    オーディオの再生

    ベストプラクティス

    中断の処理

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

    リソース


    触覚の再生

    ベストプラクティス

    カスタムの触覚

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

    リソース


    ビデオの再生

    ベストプラクティス

    TV アプリとの統合

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

    リソース


    印刷

    ベストプラクティス

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

    リソース


    格付けとレビュー

    ベストプラクティス

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

    リソース


    検索

    ベストプラクティス

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

    リソース


    設定

    ベストプラクティス

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

    リソース


    取り消しとやり直し

    ベストプラクティス

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

    リソース


    トレーニング

    ベストプラクティス

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

    リソース




    部品

    全ての部品


    コンテンツ

    グラフ

    イメージビュー

    テキストビュー

    Web ビュー


    レイアウトと構成

    ボックス

    コレクション

    コラムビュー

    開示コントロール

    ラベル

    リストと表

    ロックアップ

    アウトラインビュー

    スプリットビュー

    タブビュー

    メニューとアクション

    活動ビュー

    ボタン

    コンテキストメニュー

    ドックメニュー

    編集メニュー

    メニュー

    ポップアップボタン

    プルダウンボタン

    ツールバー


    ナビゲーションと検索

    ナビゲーションバー

    パスコントロール

    検索フィールド

    サイドバー

    タブバー

    トークンフィールド


    プレゼンテーション

    アクションシート

    アラート

    ページコントロール

    パネル

    ポップオーバー

    スクロールビュー

    シート

    ウィンドウ


    選択と入力

    カラーウェル

    コンボボックス

    数値入力ビュー

    イメージウェル

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

    ピッカー

    セグメントコントロール

    スライダー

    ステッパー

    テキストフィールド

    トグル(切り替え)


    状態

    活動リング

    ゲージ

    レベルインジケータ

    進捗インジケータ

    格付けインジケータ

    システムの体験

    複雑化

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

    ライブ活動

    メニューバー

    通知

    ステータスバー

    一番上の棚

    時計の文字盤

    ウィジェット




    入力

    概観


    アクションボタン

  • ベストプラクティス
  • プラットフォームの考慮事項
  • リソース
  • 変更記録
  • Apple Pencil と落書き

  • ベストプラクティス
  • ホバー
  • ダブルタップ
  • 落書き

  • カスタムの描画
  • プラットフォームの考慮事項
  • リソース
  • 変更記録
  • デジタルの竜頭

    ベストプラクティス

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

    リソース


    焦点と選択

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

  • ゲームコントローラ

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

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

    ベストプラクティス

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

    リソース


    キーボード

  • ベストプラクティス
  • キーボードショートカット
  • カスタムキーボードショートカット
  • プラットフォームの考慮事項
  • 仕様
  • リソース

  • ポインティングデバイス

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

  • リモコン

  • ベストプラクティス
  • ジェスチャ
  • ボタン
  • 互換性のあるリモコン
  • プラットフォームの考慮事項
  • リソース

  • 空間的相互作用

  • ベストプラクティス
  • デバイスの使用法
  • プラットフォームの考慮事項
  • リソース

  • タッチバー

  • ジェスチャ
  • ベストプラクティス
  • インターフェイスアイコン
  • コントロールとビュー
  • プラットフォームの考慮事項
  • リソース

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

  • ベストプラクティス
  • 標準的なジェスチャ
  • プラットフォームの考慮事項
  • リソース



  • プラットフォーム

    概観

    iOS 用デザイン

  • ベストプラクティス
  • リソース

  • iPadOS 用デザイン

  • ベストプラクティス
  • リソース

  • macOS 用デザイン

    ベストプラクティス

    リソース


    tvOS 用デザイン

    ベストプラクティス

    リソース


    watchOS 用デザイン

  • ベストプラクティス
  • リソース



  • テクノロジー

    全てのテクノロジー

    AirPlay

    序文

    アイコン

    編集者用

    常にオン

    アプリクリップ

    序文

    ユーザー体験

    アプリクリップカード

    アプリクリップのコード

    印刷ガイドライン

    法的要件


    Apple Pay

    序文

    Apple Pay の提供

    チェックアウトと支払い

    エラー処理

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

    ボタンとマーク

    編集者用


    拡張現実

    CareKit

    序文

    データとプライバシー

    ビュー

    ユーザー体験

    シンボルとブランド化

    CarPlay

    序文

    アーキテクチャ

    操作

    視覚的デザイン

    アイコンとイメージ

    システム要素

    ゲームセンター

    序文

    アクセス・ポイント

    ダッシュボード

    成果

    リーダーボード

    多数のプレイヤー

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


    HealthKit

    HomeKit

    序文

    用語とレイアウト

    設定

    Siri の操作

    カスタム機能

    アイコン

    編集者用


    iCloud

    アプリ内購入

    ライブ写真

    Mac Catalyst

    序文

    アプリの構造

    iPad macOS

    tvOS

  • リソース

  • ユーザーの操作

    視覚的デザイン

    Mac の様式


    機械学習

    序文

    機械学習の役割

    明示的なフィードバック

    暗黙のフィードバック

    較正

    訂正

    間違い

    複数のオプション

    自信

    属性

    制限事項


    マップ

    序文

    Apple Watch のマップ

    屋内のマップ


    ビジネス向けメッセージ

    序文

    ブランド化

    ボタン

    ダークモード

    ロゴ

    メッセージバブルの内容

    スクリーンショット


    NFC

    写真編集

    ResearchKit

    SharePlay

    ShazamKit

    Apple でサインイン

    序文

    データ管理

    ボタン


    Siri

    序文

    システムの意図

    カスタムの意図

    ショートカットと提案

    編集者用


    タップして iPhone で支払う

    財布

    序文

    パスのデザイン

    注文追跡のデザイン









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ