メニュー


メニューは、人々がメニューを操作するとそのオプションが表示されるため、あなたのアプリやゲームでコマンドを表示するためのスペース効率の良い方法になります。



メニューはインターフェース全体どこでも存在しているため、ほとんどの人々はすでにメニューの使い方を知っています。あなたのアプリやゲームで一貫してメニューを使用すると、体験は親しみやすく、習得しやすくなります。


システムには、以下のようなさまざまな使用方法をサポートするいくつかの型のメニューが用意されています。


  • そのアクションに直接関連するオプションのメニューを表示するボタン (ポップアップボタンプルダウンボタン など)

  • 現在のビューまたはタスクに関連する少数の頻繁に使用されるアクションにアクセスするために表示できる非表示の コンテキストメニュー

  • 人々がアプリで実行できるすべてのコマンドを含む macOS アプリの メニューバー メニュー

  • 種類に関係なく、すべてのメニューには 1 つ以上の メニュー項目 がリストされま、各メニュー項目は、現在の選択やコンテキストに影響を与えるコマンド、オプション、または状態を表します。人々がメニュー項目を選択すると、アクションが発生し、通常はメニューが閉じます。


    ラベル


    各メニュー項目には、そのアクションを説明するテキストが表示され、意味を明確にするためにシンボルまたはインターフェイスアイコンが含まれる事があります。テキストとシンボルに加えて、メニュー項目には、関連するキーボード ショートカットを実行するために人々が入力する文字も表示できます (存在する場合)。他のほとんどの種類のメニューとは異なり、コンテキストメニューにはキーボードショートカットは表示されません。これは、タスク固有のアクションを取得するための簡単な方法が既に提供されているためです。


    メニュー項目の機能を人々が理解できるように、それを明確かつ簡潔に説明するラベルを書いて下さい。 説明している項目に応じて、以下のガイダンスを考慮してください。


  • アクションを開始するメニュー項目にラベルを付けるには、コピー、アプリの共有、閉じる など、アクションを説明する動詞または動詞句を使用します。

  • 属性または状態を切り替えるメニュー項目の状態を説明するときは、現在の状態を示します。たとえば、Show Completed (完全な物を示す) と Hide Completed (完全な物を隠す) のように、何かを表示または隠すメニュー項目に 1 組のラベルを使用したり、ラベルの横にチェックマークを表示して、会話で整理 など、状態または属性が有効であることを示します。

  • ラベルに一貫性を持たせるには、冠詞を含まない簡潔なスタイルを採用し、タイトルスタイルの大文字化化を使用します。 英語では、冠詞 a、an、 および the では常にラベルが長くなりますが、理解が深まることはめったにありません。たとえば、人々が メール でメッセージを開きたい場合、Open Message(メッセージを開く) メニュー項目が現在選択されているメッセージを参照していることを理解しているため、Open the Message(メッセージを開く) などの冠詞をラベルに追加しても、項目のアクションを明確にするのに役立ちません。


    アクションを完了する前に人々が追加情報を提供する必要がある場合は、メニュー項目のラベルに省略記号を追加します。 省略記号 (…) は、人々が情報を入力したり選択したりできる別のビューが開くことを示します。


    メニュー項目が利用できないとき人々に表示します。 利用できないメニュー項目はしばしば淡色表示され、操作に応答しません。メニューのすべての項目が利用できない場合は、メニュー自体が有効なままであることを確認して、人々がメニューを開いてメニューに含まれるコマンドについて学習できるようにします。



    切り替え項目


    人々が項目または属性を 2 つの状態間で切り替えるのを支援する場合、以下の 3 つの方法のいずれかでの切り替えをサポートできます。


  • Show Ruler(定規の表示])Hide Ruler(定規の非表示) など、現在の状態に応じて変化するラベルを表示する単一のメニュー項目。親メニューには一度に複数のラベルが表示されることは決してありません。

  • オンにすると横にチェックマークが表示される単一のメニュー項目。たとえば、太字 などのテキスト属性です。親メニューには常に項目がリストされ、現在の状態に応じてチェックマークが表示または削除されます。

  • メニュー項目のペア。それぞれに、2 つの反対のアクションまたは状態のいずれかを説明するラベルが付いています。たとえば、グリッド オングリッド オフ です。親メニューには常に両方のメニュー項目が表示されますが、現在有効なメニュー項目のみにチェックマークが表示されるか、選択されているように見えます (通常は淡色表示されます)。

  • 変更可能なタイトルを使用して、機能を表示および非表示にする項目の長いリストを短くすることを検討してください。 たとえば、メール の [View(表示)] メニューでは、変更可能なタイトルを使用して、タブバー、メールボックスリスト、ツールバー、またはお気に入りバーを表示または非表示にします。


    メニュー項目のペアをリストするのに十分なスペースがない場合は、変更可能なラベルを使用してください。 両方のタイトルが明確であることを確認する必要がある場合は、Turn Grid On (グリッドをオン) と Turn Grid Off (グリッドをオフ) のように、反対のアクションを明確に表す 2 つの動詞を使用することを検討してください。


    切り替えられた項目が現在有効な属性を表している場合は、チェックマークの使用を検討してください。 属性のリストでチェックマークをスキャンして、有効なものを見つけるのは簡単です。たとえば、標準の [書式] > [フォント] メニューでは、チェックマークを付けると、人々が選択したテキストに適用されるスタイルに簡単に気付くことができます。


    切り替えられた複数の属性を簡単に削除できるメニュー項目を提供することを検討してください。 たとえば、選択したテキストに複数のスタイルを人々が適用できるようにする場合は、適用されているすべての書式属性を一度に削除するメニュー項目 (プレーン など) を提供するとうまく機能します。


    明確にする場合は、切り替えられた 1 つのメニュー項目ではなく、2 つのメニュー項目を表示することを検討してください。 場合によっては、両方のアクションまたは状態を同時に表示できると便利です。たとえば、Mail のメールボックスメニューには、Take All Accounts Online (全てのアカウントをオンラインで取得) と Take All Accounts Offline (全てのアカウントをオフラインで取得) の両方の項目が含まれているため、誰かのアカウントがオンラインの場合、Take All Accounts Offline メニュー項目のみが有効に表示されます。



    整理


    人々が探している項目を見つけやすくするために、使用頻度、オブジェクトの重要性、機能カテゴリ、またはあなたのアプリの使用方法に適した別の優先順位付けスキームに従ってメニュー項目を整理できます。


    時として、編集コマンドの コピー、カット、ペースト など、メニュー内で論理的に関連する項目をグループ化することが理にかなっていることがあります。人々がグループを視覚的に区別できるようにするには、区切り記号を使用します。プラットフォームとメニューの型に応じて、区切り記号 はグループ間に水平線として表示されるか、メニューの背景の外観に短いギャップとして表示されます。


    優先順位付けスキームに従ってメニュー項目をリストします。 人々はメニューを上から順にスキャンする傾向があるため、優先度の高い項目やグループを最初にリストすると、メニュー全体をスキャンしなくても必要なものを見つけることがよくあります。


    すべてのコマンドの優先度が同じでなくても、論理的に関連するコマンドのグループを優先順位付けスキームで分離することは避けてください。 たとえば、人々は通常、ペースト よりも ペーストとスタイルの一致 を使用する頻度がはるかに低いですが、コピーカット などの他の関連する編集アクションを含む同じグループで両方のコマンドを見つけることを期待します.


    メニューの長さに注意してください。 長いメニューを読むには、人々はより多くの時間と注意が必要です。つまり、必要なコマンドを見逃す可能性があります。メニューが長い場合は、別のメニューに分割する必要があります。場合によっては、サブメニューを使用してリストを短縮できます。例外は、Safari の [履歴] メニューや [ブックマーク] メニューなど、ユーザー定義または動的に生成されたコンテンツを含むメニューです。この状況では、人々は追加する項目がメニューに収まることを期待しているため、長いメニューでも問題なく、スクロールも許容されます。




    時として、メニュー項目によって、サブメニュー と呼ばれる下位リスト内の一連の密接に関連する項目が表示されます。この場合、メニュー項目は、そのラベルの後にシェブロンのようなシンボルを表示することで、サブメニューの存在を示します。


    サブメニューは控えめに使用してください。 サブメニューごとにインターフェイスが複雑になり、それに含まれる項目が非表示になります。用語が同じグループの 2 つ以上のメニュー項目に表示される場合は、サブメニューの作成を検討してください。たとえば、日付で並べ替え、件名で並べ替え、未読で並べ替え の個別のメニュー項目を提供する代わりに、メールView (表示) メニューには、日付、件名、未読 などの項目を含む 並べ替え サブメニューが含まれています。このような場合、サブメニューラベル内で繰り返し用語を使用すると、人々が内容を予測するのに役立ちます。


    サブメニューの深さと長さを制限します。 複数レベルの階層サブメニューを表示するのは人々にとって難しい場合があるため、通常は 1 つのレベルに制限することをお勧めします。また、サブメニューにおよそ 5 つ以上の項目が含まれる場合は、新しいメニューを作成することを検討してください。


    入れ子にされたメニュー項目が利用できない場合でも、サブメニューを有効に保ちます。 すべてのメニュー項目と同様に、サブメニュー項目は、人々がそれを開いて、そこに含まれるコマンドについて学べるようにする必要があります。


    メニュー項目をインデントするよりも、サブメニューを使用することをお勧めします。 インデントの使用はシステムと矛盾しており、メニュー項目間の関係を明確に表現していません。



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


    macOS、tvOS、または watchOS に関する追加の考慮事項はありません。



    iOS、iPadOS


    iOS 16 および iPadOS 16 以降、メニューは以下の 3 つのレイアウトのいずれかで項目を表示できます。



  • 小。 メニューの上部、残りの項目を含むリストの上に 4 つの項目の行が表示されます。一番上の行の各項目について、メニューにはシンボルまたはアイコンが表示されますが、ラベルは表示されません。

  • 中。 メニューの上部、残りの項目を含むリストの上に 3 つの項目の行が表示されます。一番上の行の各項目について、メニューには短いラベルの上にシンボルまたはアイコンが表示されます。

  • 大 (デフォルト)。 メニューには、すべての項目がリストに表示されます。

  • 開発者向けガイダンスについては、preferredElementSize (preferredElementSize) を参照してください。


    人々の選択を合理化するのに役立つ場合は、小または中のメニューレイアウトを選択します。 人々が頻繁に実行する 3 つの重要なアクションがあなたのアプリにある場合は、中レイアウトの使用を検討してください。たとえば、Notes は中レイアウトを使用して、人々がスキャン、ロック、ピン留めのアクションをすばやく実行できるようにします。小レイアウトは、太字、斜体、下線、取り消し線など、通常はグループとして表示される密接に関連するアクションにのみ使用してください。各アクションごとに、人々がラベルなしでアクションを識別できるように、認識可能なシンボルを使用して下さい。



    リソース


    関連


    ポップアップボタン


    プルダウンボタン


    コンテキストメニュー


    メニューバー



    開発者用文書


    Menu — SwiftUI (Menu)


    メニューとショートカット - UIKit (Menus and shortcuts)


    Menus — AppKit (Menus)



    ビデオ



    変更記録


    2022 年 9月 14日iPadOS で小、中、大のメニューレイアウトを使用するためのガイドラインを追加しました。




    目次
    Xcode の新機能

  • new HIG
  • 基礎

    概要

    アクセシビリティ

    ベストプラクティス

    操作

    ボイスオーバー

    テキスト表示

    色と効果

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

    リソース


    アプリのアイコン

    ベストプラクティス

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

    仕様

    リソース


    ブランド化

    ベストプラクティス

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

    リソース


    カラー

    ベストプラクティス

    包括的カラー

    システムカラー

    カラーマネジメント

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

    仕様

    リソース


    ダークモード

    ベストプラクティス

    ダークモードの色

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

    リソース


    アイコン

    ベストプラクティス

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

    リソース


    イメージ

    拡大率

    フォーマット

    ベストプラクティス

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

    リソース


    含まれる物

    デザインによる包括

    言語の歓迎

    親しみやすい

    性同一性

    人と設定

    ステレオタイプの回避

    アクセシビリティ

    言語

    リソース


    レイアウト

    ガイドと安全なエリア

    ベストプラクティス

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

    リソース


    マテリアル(材料)

    ベストプラクティス

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

    リソース


    モーション

    ベストプラクティス

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

    リソース


    右から左へ

    テキストの配置

    数字と文字

    コントロール

    イメージ

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

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

    リソース


    SF シンボル

    ウェイトよスケール

    デザインバリアント

    カスタムシンボル

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

    リソース


    タイポグラフィ(印刷)

    ベストプラクティス

    システムフォントの使用

    カスタムフォントの使用

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

    仕様

    リソース




    パターン

    概観


    個人データへのアクセス

    許可を求める

    ロケーションボタン

    事前アラートスクリーン

    リクエストの追跡

    データの保護

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

    リソース


    データのグラフ化

    ベストプラクティス

    効果的なグラフの設計

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

    リソース

    変更記録

    協力と共有化

    ベストプラクティス

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

    リソース

    変更記録

    ドラッグアンドドロップ

    ベストプラクティス

    フィードバックの提供

    ドロップを受け入れる

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

    リソース


    データ入力

    ベストプラクティス

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

    リソース


    フィードバック

    ベストプラクティス

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

    リソース


    ファイル管理

    ベストプラクティス

    ファイルを開く

    作業の保存

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

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

    リソース


    全画面表示

    ベストプラクティス

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

    リソース


    起動

    ベストプラクティス

    起動画面

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

    リソース


    ライブビューのアプリ

    ベストプラクティス

    EPG の体験

    クラウド DVR

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

    リソース


    ロード中

    ベストプラクティス

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

    リソース


    アカウントの管理

    ベストプラクティス

    アカウントの削除

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

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

    リソース


    通知の管理

    フォーカスとの統合

    ベストプラクティス

    買い物通知の送信

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

    リソース


    モダリティ

    ベストプラクティス

    リソース


    マルチタスク

    ベストプラクティス

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

    リソース


    ヘルプの提供

    ベストプラクティス

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

    リソース


    搭載

    ベストプラクティス

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

    リソース


    オーディオの再生

    ベストプラクティス

    中断の処理

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

    リソース


    触覚の再生

    ベストプラクティス

    カスタムの触覚

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

    リソース


    ビデオの再生

    ベストプラクティス

    TV アプリとの統合

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

    リソース


    印刷

    ベストプラクティス

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

    リソース


    格付けとレビュー

    ベストプラクティス

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

    リソース


    検索

    ベストプラクティス

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

    リソース


    設定

    ベストプラクティス

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

    リソース


    取り消しとやり直し

    ベストプラクティス

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

    リソース


    トレーニング/a>

    ベストプラクティス

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

    リソース




    部品

    全ての部品


    コンテンツ

    イメージビュー

    テキストビュー

    Web ビュー


    レイアウトと構成

    ボックス

    コレクション

    コラムビュー

    開示コントロール

    ラベル

    リストと表

    ロックアップ

    アウトラインビュー

    スプリットビュー

    タブビュー

    メニューとアクション

    活動ビュー

    ボタン

    コンテキストメニュー

    ドックメニュー

    編集メニュー

    メニュー

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

    iPhone iPad

    macOS tvOS

    watchOS

  • ラベル
  • 切り替え項目
  • 整理
  • サブメニュー
  • プラットフォームの考慮事項
  • リソース
  • 変更記録

  • ポップアップボタン

    プルダウンボタン

    ツールバー


    ナビゲーションと検索

    ナビゲーションバー

    パスコントロール

    検索フィールド

    サイドバー

    タブバー

    トークンフィールド


    プレゼンテーション

    アクションシート

    アラート

    ページコントロール

    パネル

    ポップオーバー

    スクロールビュー

    シート

    ウィンドウ


    選択と入力

    カラーウェル

    コンボボックス

    数値入力ビュー

    イメージウェル

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

    ピッカー

    セグメントコントロール

    スライダー

    ステッパー

    テキストフィールド

    トグル(切り替え)


    状態

    活動リング

    ゲージ

    レベルインジケータ

    進捗インジケータ

    格付けインジケータ

    システムの体験

    複雑化

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

    ライブ活動

    メニューバー

    通知

    ステータスバー

    一番上の棚

    時計の文字盤

    ウィジェット




    入力

    概観


    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 で支払う

    財布

    序文

    パスのデザイン

    注文追跡のデザイン















    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ