義援金の受付

東日本大震災の
復興支援へのご寄付
をお願い致します。

4.4 メニューデザイン


メニューデザインの概略

  • オプションメニューは現在のアクティビティに対する広範囲にわたるコマンドに対応します。
  • コンテキストメニューは現在の選択に適用されるコマンドに対応しています。
  • 最も頻繁に使用される操作を優先して配置します。
  • 画面に置く固定コマンドは最も重要なものだけにします。
  • アイテムを押し続けたときに現れるコンテキストメニューのコマンドは、目的のアクティビティ上でのアイテムを普通に押したときのものと重複していなければなりません。

このドキュメントの内容

  1. メニューのツアー
    1. オプションメニュー
    2. コンテキストメニュー
    3. オプション & コンテキストメニューの比較
    4. アクティビティ画面での固定コマンド
  2. ガイドライン
    1. 特化したコマンドと広範囲なコマンドを区別する
    2. 最も頻繁に使用されるものを先頭にする
    3. コンテキストメニューだけにコマンドを置かない
    4. コンテキストメニューの先頭のコマンドは直感で分かるものにすべき
    5. 選択するアイテムは直感で分かる操作を実行すべき
    6. コンテキストメニューは選択されたアイテムを識別すべき
    7. 画面に固定されたコマンドは最も重要なものだけを配置する
    8. オプションアイコンメニューには短い名前を使う
    9. ダイアログにオプションメニューがあってはならない
    10. オプションメニューがない場合は、メッセージを表示しない
    11. 利用できないアイテムは不鮮明にするか隠す

関連項目

  1. タッチモード
  2. アクティビティとタスクデザイン

メニューは、普段は隠れているコマンド ( ユーザアクション ) のセットを保持し、ボタン、キー、またはジェスチャーによりアクセスすることができます。メニューコマンドは、操作を実行し、対象のアプリケーションや他のアプリケーションの他部品にナビゲーションする手段を提供しています。メニューは、アプリケーションのコンテンツ領域にあるボタンやユーザコントロールで機能やナビゲーションを配置する代用品となり、画面のスペースを空けるのに有効です。

Android システムは、機能やナビゲーションを提供することができる 2 種類のメニューを用意しています。それらの間で、アプリケーションの機能やナビゲーションをまとめるようにしましょう。簡単に言うと以下です。

  • オプションメニュー は、現在のアクティビティに広範囲にわたり適用され、関連するアクティビティを開始する主要な機能を含んでいます。通常これはハードウェアの MENU というラベルのボタンで、ユーザから頻繁に呼び出されます。
  • コンテキストメニュー は、現在選択されているアイテムの補助的な機能含んでいます。通常これは、ユーザがアイテムを押し続けることにより呼び出されます。オプションメニューと同じように、操作は現在または別のアクティビティで実行可能です。

ほとんどすべてのアプリケーションにはメニューがあります。システムは自動的にメニューを配置し、ユーザがそれにアクセスする標準的な方法を提供します。 上記の意味で、ユーザがすべてのアプリケーションにわたって機能にアクセスする際の、親しみやすく信頼できる方法をメニューは提供しています。すべてのメニューはアクティビティ画面の前面に "浮かび上がる" パネルであり、全画面よりは小さいので、アプリケーションは、その周囲に見えています。メニューは、操作の仲介を行い、いちど使用した後は見えなくなる視覚的な案内役を担っています。

では、メニューのクイックツアーから始めましょう。


メニューのツアー

注意 - 作成したメニューと画面がこのドキュメントの見た目と異なっているかもしれません。これらは、Android のバージョンやデバイスにより異なります。

オプションメニュー

オプションメニューは、現在のアクティビティの広範囲にわた適用されるコマンドを含み、別のアクティビティを開始することができます。コンテンツの選択済みアイテムには適用されません ( コンテキストメニュー がそれを実現します ) 。

ほとんどのデバイスで、ユーザは下のスクリーンショットのように、オプションメニューにアクセスするために MENU ボタンを押します。メニューを閉じるには、ユーザは再度 MENU を押すか、BACK ボタンを押します ( MENU ボタンを押すか、メニューの外側に触っても同じです ) 。異なるデバイスでは、このメニューの呼び出し方法が異なることがあるかもしれません。

アクティビティ には、操作のセット、ひいては独自のオプションメニューがあります。アクティビティを複数持つアプリケーションは、それぞれのアクティビティで異なるオプションメニューを持つことになります。

たとえば、Eメールプログラムのビューリストのメッセージにおいては、オプションメニューでメッセージ検索、新しいメッセージの作成、リストの最新化、または Eメール設定といった操作をさせることがあるかもしれません。E メールプログラムの作成ビューではまた違い、CC フィールドの追加や、ファイル添付、またはメッセージの破棄といった、オプションメニューがあるでしょう。

たくさんの数のメニューアイテムをハンドリングするために、オプションメニューが 2 段階で現れます。

  • オプションアイコンメニュー - MENU ボタン押すと、最初に画面の下にスクロールがないアイコンのグリッドが表示されます ( G1 phone では、通常最大 6 個のボタンが現れます ) 。
  • オプション展開メニュー - アクティビティにアイコンメニューに収まらないくらいのメニューアイテムがある場合、最後のアイコンに "More" というラベルが付けられます。それを選択するといくつでもメニューアイテムを含められ、必要に応じてスクロールされるリストが表示されます。

Android のバージョンによっては、MENU ボタンを押し続けることによりアイコンメニューのキーボードショートカットをユーザに表示するものもあります。アイコンメニューのテキストはコマンド名とキーボードショートカット ( もしあれば ) を切り替えます。

コンテキストメニュー

コンテキストメニューは、デスクトップオペレーティングシステムの右クリックによるコンテキストメニューに似ています。普通は重複するコマンドがどこかにあり、これはそのショートカットです。

ユーザは、画面上のコンテンツを押し続けることにより、以下のスクリーンショットに示すようなコンテキストメニューにアクセスすることができます ( それがある場合 ) 。コンテキストメニューは、選択されたコンテンツ上で操作可能なメニューアイテム ( コマンド ) のリストです。コマンドは、現在のアクティビティの一部であるかまたは、システムが別のアクティビティにある操作と合致する選択済みのコンテンツを渡すことができます。 ( インテント を手段として ).

たとえばユーザは、Eメールメッセージリストの上を押し続け、コンテキストメニューにある、読み込み、アーカイブ、またはメッセージの削除を開くことができます。

またユーザは、画面のロケーションを押し続け、コンテキストメニューにアクセスすることもできます。ユーザが Home 画面のなにもない部分を押し続けたとき、コンテキストメニューが現れ、そのメニューからアイテムを選択すると、その場所にアイコンが配置されるのもその一例です。

コンテキストメニューはショートカット

上の例は、ユーザがコンタクトの "Obi Wan Kenobi" の上を押し続けた場合に、コンテキストメニューが開く様子です。このコンテキストメニューで提供される複数のコマンドは、このコンタクトで実行可能なアクションの完全なセットです。

コンテンツにあるアイテムを普通にタッチして、この選択肢でもっとも選んでみたいコマンドを活性化しましょう。このケースでは "View contact" でしょうか。このもっとも選んでみたいコマンドがコンテキストメニューの最初のアイテムとしてリストされているというのをお勧めします。この例では、コンタクトの "Obi Wan Kenobi" を選択することで、コンテキストメニューのリストの先頭にある "View contact" と同じコマンドが実行されます。

下のスクリーンショットに示すように、コンテキストメニューと次の画面はともに、このコンタクトで実行可能なコマンドの完全な同一のセットを保持していることにも注意してください。コンテキストメニューはリストでコマンドを表示する一方、 "View contact" アクティビティは、オプションメニューでそれらをアイコンボタンやリストアイテムの異なるアイテムに分割します。

この重複により、コンテキストメニューを使用することは、次の画面に行き、そこで操作をするためのショートカットと考えられます。コンテキストメニューは画面上に固定されたボタンやオプションメニューに比べたら発見される可能性は少ないでしょう。多くのユーザは、コンテキストメニューを見つけることも使うこともないでしょう。だからこそほとんどの場合は、コンテキストメニューのコマンドはどれももっとも選びたい操作の画面で現れるようにすべきです。次のセクションでも説明しますが、"Select text" のようなテキスト操作は、コンテキストメニューのみで現れるほうがいいでしょう。また、ブラウザなどのリッチなアプリケーションは、それ自体がウェブアプリケーションを含めることができ、他では使用できないコンテキストメニューのコマンドがあるかもしれません。

コンテキストメニューのテキストコマンド

コンテンツのテキストリンクとテキストフィールドはともに、すべてのアプリケーションに対してシステムで提供済みの "すべて選択"、"すべてコピー"、および "辞書に追加" などの共通の操作を持っています。テキストフィールドが編集可能であれば、"すべて切り取り"、および "入力方法" など、またテキストがクリップボードにあれば "貼り付け" があります。システムは、下のスクリーンショットに示すように、テキストリンクとテキストフィールドのコンテキストメニューに適切なメニューアイテムを自動的に挿入します。

オプションメニューとコンテキストメニューの比較

オプションメニューはアクティビティに広範囲なコマンドを保持する一方で、コンテキストメニューはこのコンテンツのアイテムのみに適用されるコマンドを保持しています。これらのダイアログで示すように、ユーザはメニューにナビゲートし、アクションを実行したりダイアログを開くためにメニューのアイテムにタッチします。

メニューの詳しい技術的な情報は、メニューの作成 を参照してください。

アクティビティ画面での固定コマンド

コマンドは画面に直接固定することも可能で、それらは通常、テキストボタン、グラフィックボタン、またはリストアイテムのコマンドです。ここでの配置がコマンドにとって圧倒的にもっとも発見されやすい場所でしょう。ユーザは、最初のボタンを経由する必要もなく、すぐにこのコマンドを見つけることができます。このように見た目を目立たせることで、そういったユーザコントロールが窮屈でスペースが犠牲になり、見た目のデザイン的にも煩雑となりデザインセンスも犠牲になります。


ガイドライン

提示するメニューの正しい種類を選択し、一貫したメニューを使用することは、信頼性のあるアプリケーションにとって大変重要な要素になってきます。以下のガイドラインがユーザへの操作性を設計する人とアプリケーション開発者が目指す先へと導いてくれるに違いありません。

広範囲なコマンドと特化したコマンドを区別する

オプションメニューで現在のアクティビティに対する広範囲な任意のコマンドを置くか、アクティビティの画面に固定されたコマンドを置くかしますが、その逆にコンテキストメニューには、現在の選択を適用するコマンドを置きます ( どんな場合でも、コマンドは今のアクティビティの一部または別のアクティビティを開始できます ) 。

開発者はメニューに配置するコマンドの操作を決定することができますが、画面で選択されたコンテンツ ( または特定の ロケーション ) 上でコマンドが動作する場合は、そのコンテンツ用のコンテキストメニューにそのコマンドを置いてください。特定のコンテンツやロケーションがなくコマンドが動作する場合は、それをオプションメニューに置いてください。これらのコマンドは、以下の方式でシステムにより区別が強制されています。オプションメニューを表示するために MENU ボタンを押したとき、選択されたコンテンツは未選択となり、それにより操作できなくなります。コンテンツが未選択となる理由についての説明は、タッチモード の記事を参照してください。

特化したコンテキストメニューは、ユーザがコンタクトのリストビューで、ある人名を押し続けたときがその例として挙げられます。コンテキストメニューには、通常 "コンタクトの参照"、"コンタクトの呼び出し"、および "コンタクトの編集" コマンドが含まれることになるでしょう。

最も頻繁に使用される操作を先頭にする

画面の高さには限りがあるので、メニューにスクロールが付くことがありえるので、もっとも重要なコマンドがスクロールせずに見える場所にあることが大切です。オプションメニューのケースでは、もっとも頻繁に使用される操作をその アイコンメニュー に配置しますが、ユーザは残りを見るには "More" を選択する必要性がでてきます。また、同じ場所に似たようなコマンドを配置するのも便利です。たとえば、検索を提供するいくつかのアクティビティを行き来して検索アイコンはオプションメニューのいつも先頭にあります。

コンテキストメニューでは、いちばん直感で分かるコマンドにすべきで、使用頻度が少なくなるにつれ下になり、最も使用されないものが最下位にきます。

コンテキストメニュー だけに コマンドを置かない

ユーザがコンテキストメニューを使用せずにアプリケーションのすべてにアクセスできたとしたら、それは正しく設計されています!一般に、コンテキストメニューを使用せずにアプリケーションの部品にアクセスできない場合は、どこか別の場所にそれらのコマンドを重複させる必要があります。

コンテキストメニューを開く前に、その存在を識別する視覚的な表示がないと ( それに反してオプションメニューには、MENU ボタンがあります ) 、それは特に見つけにくいものです。したがって一般的には、コンテキストメニューは、対応するアクティビティ画面で見つけられるコマンドを重複させるべきです。 たとえば、コンタクトのリストの名前を押し続けることで呼び出されるコンテキストメニューから、ユーザが電話をできるようにすることが便利である一方で、その操作がコンタクトの詳細を参照したときにその詳細にある電話番号をタッチしても同じことが できるようにすべきです。この例の解説は、 ショートカット を参照してください。

コンテキストメニューの先頭のコマンドは直感で分かるコマンドにすべき

ショートカット でも説明したように、コンテンツのアイテムにタッチするとコンテキストメニュの最初のアイテムをタッチしたとき同じコマンドが動くべきです。どちらのケースもそのアイテムがなにかを直感で分かる操作にすべきです。

コンテンツで選択されたアイテムは最も直感で分かる操作を実行すべき

作成するアプリケーションでは、ユーザが任意の動作可能なテキスト ( リンクやリストアイテムなど ) やイメージ ( 写真アイコンなど ) をタッチしたとき、ユーザがもっとも期待するような操作を実行しましょう。

以下は主な操作の例です。

  • イメージを選択すると "イメージ参照" を実行する
  • メディアアイコンとまたはファイル名を選択すると "再生" を実行する
  • URL リンクを選択すると "リンクを開く" を実行する
  • ( マップアプリケーションで ) アドレスを選択すると "アドレスに行く" を実行する

異なるコンテキストで同じアイテムを選択じても、異なる操作が呼び出されるあることに注意してください。

  • コンタクトアプリケーションで、コンタクトを選択すると "詳細を参照" を実行する
  • IM アプリケーションで、コンタクトを選択すると、 "チャットを開始" を実行する
  • Eメールアプリケーションで、コンタクトブックを介して "To" フィールドに受信者を追加したとき、コンタクトを選択すると "受信者リストに追加" が実行される

コンテキストメニューは選択済みのアイテムを識別すべき

ユーザがあるアイテムの上を押し続けたとき、コンテキストメニューは選択されたアイテムの名前を含めるべきです。したがって、コンテキストメニューを作成するときは、ユーザにコンテキストがなにかを明確に示す意味で、必ずタイトルと選択されたアイテムの名前を含めます。たとえば、ユーザがコンタクトで "Joan od Arc" を選択したら、そのコンテキストメニューのタイトルにその名前を設定します ( setHeaderTitle を使用して ) 。同じように、コンタクトを編集するコマンドはただの "編集" ではなく、"コンタクトの編集" で呼び出されるべきです。

画面に固定されたコマンドは最も重要なものだけを配置する

コマンドをメニューに置くことにより、画面の広くしコンテンツの領域を確保できます。その一方で、アクティビティのコンテンツ領域での固定コマンドにより、より目立ち、操作性を向上することもできます。

アクティビティの画面に固定コマンドを配置する重要ないくつかの理由があり、それらは以下です。

  • もっとも目立たせたいコマンドを提供するために、コマンドを確実に際立たせ、見落とされないようにするため。
    例: 買い物アプリケーションでの "購入" ボタン。
  • コマンドへのクイックアクセスが重要なときと、メニューまでいくのが面倒で遅いとき。
    例: イメージ参照アプリケーションでの、次へや前へボタン、または拡大や縮小ボタン。
  • 完了させなければならない操作のとき。
    例: イメージ編集アクティビティでの保存や破棄ボタン
  • ダイアログとウィザード。
    例: OK やキャンセルボタン
  • 直接操作用。
    例: Home 画面でのゴミ箱へのアイコンドラッグ。

オプションアイコンメニューには短い名前を使う

オプションアイコンメニュー でラベルが長いと、システムはその中間部分を切り詰めてしまいます。そうなると、"Create Notification" は切り詰められ "Create…ication" のような感じになります。この切り詰めを制御することができないないので、その最善策はテキストを短くしておくことです。Android のバージョンによってはナビゲーションキー ( トラックボールなどの ) によってアイコンがハイライトされたときに、説明文全体が看板のように表示され、スクロールされるごとにその文章が読めるものもあります。

ダイアログにオプションメニューがあってはならない

ダイアログが表示されたときに MENU ボタンを押しても何もすべきではありません。これはダイアログに似ているアクティビティでも同じことが言えます。ダイアログボックスは全画面より小さいことで見分けがつき、ボタンも 3 つまでで、スクロールなしでチェックボタンやラジオボタンを含めるこかができる選択可能なリストにもなり得ます。

メニューを持たない理由として、ダイアログが表示されたときはそもそもユーザは操作の最中であり、新たに広範囲なタスク ( これはオプションメニューで提供するものです ) を開始することを許してはならないからです。

アクティビティにオプションメニューがない場合は、メッセージを表示しない

ユーザが MENU ボタンを押したとき、そこにオプションメニューがない場合は、システムでは現時点でなにもしません。なんのアクション ( メッセージ表示といった ) も起こさないことを推奨します。そういった振る舞いの方が、ユーザにとってはアプリケーションの操作性が一貫していていいでしょう。

現在のコンテキストで利用できないアイテムは不鮮明にするか隠す

メニューのアクションを実行できないときが時折ありますが、その例としては、ブラウザでの "Forward" ボタンは、"Back" が押されるまで機能しません。以下の動作を推奨します。

  • オプションメニューでは - メニューアイテムを無効にし、テキストとアイコンをグレーに変えて不鮮明にします。これはアイコンメニューと "More" メニュー両方のメニューアイテムに適用されます。これはアイコンメニューを 6 アイテムから 5 アイテムに変更してしまうことで混乱しないようにするためで、"More" メニューも同じ扱いにします。
  • コンテキストメニューでは - メニューアイテムを隠します。これにより、ユーザが利用可能な選択肢だけしか見えなくなるようにメニューが短くなります ( 同様にスクロール量もいくらか減ります ) 。