ドロップダウン リストとコンボ ボックス

適切なコントロールかどうかの判断基準
使用パターン
ガイドライン
   全般
   提示方法
   ドロップダウン リスト
   プレビュー ドロップダウン リスト
   コンボ ボックス
   既定値
プロンプト
推奨されるサイズと間隔
ラベル
ドキュメント

"ドロップダウン リスト" または "コンボ ボックス" を使用すると、ユーザーは相互に排他的な値の一覧の中から選択できます。ユーザーが選択できるオプションは、いずれか 1 つのみです。標準的なドロップダウン リストの場合、選択肢は一覧の中にあるものに限られます。これに対してコンボ ボックスの場合は、一覧にない選択肢をユーザーが入力して選ぶことができます。

[アラーム時刻] コンボ ボックスのスクリーン ショット

典型的なコンボ ボックス

この項目を理解するために重要となる単語を以下に示します。

  • "リスト ボックス" は、複数のアイテムの一覧を含むボックスで、複数のアイテムが見える状態になっています。
  • "ドロップダウン リスト" は、選択されているアイテムが常に見えるようになっており、選択されていない項目は必要に応じて、ドロップダウン ボタンをクリックすることにより見ることができる一覧です。
  • "コンボ ボックス" は、リスト ボックスまたはドロップダウン リストと、編集可能なテキスト ボックスを組み合わせたものであるため、ユーザーは一覧にない値を入力できます。
    • "編集可能なドロップダウン リスト" は、ドロップダウン リストと編集可能なテキスト ボックスを組み合わせたものです。
    • "編集可能なリスト ボックス" は、リスト ボックスと編集可能なテキスト ボックスを組み合わせたものです。

注: レイアウトに関するガイドラインは、別の項目として記載しています。

適切なコントロールかどうかの判断基準

以下の点に基づいて判断します。

  • 相互に排他的な値の一覧から 1 つのオプションを選択するためのコントロールであるか。該当しない場合は、別のコントロールを使用します。複数のオプションを選択する場合は、代わりに標準の複数選択リストチェック ボックス リストリスト ビルダー、または追加/削除リストを使用します。
  • オプションがコマンドであるかどうか。該当する場合は、代わりにメニュー ボタンまたは分割ボタンを使用します。ドロップダウン リストとコンボ ボックスは、オブジェクト (名詞) や属性 (形容詞) に使用し、コマンド (動詞) には使用しません。
  • 一覧に表示されるものが、プログラム オプションではないデータかどうか。オプションでもデータでも、ドロップダウン リストまたはコンボ ボックスは適切な選択です。これに対して、ラジオ ボタンは数が少ないプログラム オプションにのみ適しています。

ドロップダウン リスト

  • ほとんどの状況下で大多数のユーザーに推奨される既定のオプションがあるかどうか。他のオプションよりも、選択したオプションを表示する重要性がはるかに大きいかどうかを判断します。ユーザーにオプションの変更を勧めない場合は、ドロップダウン リストを使用して他のオプションを隠すことを検討します。該当しない場合は、他の選択肢がもっと目立つよう、ラジオ ボタン、単一選択リスト、または編集可能なリスト ボックスの使用を検討します。

    [最高品質] が既定のボタンに設定されたスクリーン ショット

    この例では、画面の色質を最高に設定することがほとんどのユーザーにとって最適な選択となるので、他のコントロールよりドロップダウン リストが適しています。

  • オプションに注意を引く必要があるかどうか。該当する場合は、ラジオ ボタン、単一選択リスト、または編集可能なリスト ボックスの使用を検討します。これらのコントロールは占める画面領域が広いので、注意を引きやすくなります。ドロップダウン リストは小さいので、あまり目立たせる必要のないオプションに向いています。
  • 画面領域が貴重か。該当する場合は、必要な画面領域が一定で選択肢の数に依存しない、ドロップダウン リストを使用します。
  • 同じウィンドウ上に他のドロップダウン リストがあるか。該当する場合は、一貫性を保つためにドロップダウン リストの使用を検討します。

編集可能なドロップダウン リスト

上記のドロップダウン リストに対する原則のほか、以下の事項も含まれます。

  • 選択肢に制約があるかどうか。該当する場合は、代わりに通常のドロップダウン リストを使用します。コンボ ボックスでは入力に制約がなく、一覧にない値でも入力できます。入力の制約がないので、有効ではないテキストをユーザーが入力した場合に、エラー メッセージを使ってエラー処理を行う必要があります。
  • 選択される可能性が高い選択肢をあらかじめ列挙できるかどうか。該当しない場合は、代わりにテキスト ボックスを使用します。
  • ドロップダウン リストが、以前のユーザー入力を一覧表示するために使われるかどうか。ユーザーが以前の入力全部の一覧を見直す必要がなければ、代わりにオートコンプリート オプション付きのテキスト ボックスを使用します。

    ドロップダウン リストを使用した [ファイル名を指定して実行] ダイアログ ボックスのスクリーン ショット

    この例では、以前の入力をユーザーが見直すことがあるので、編集可能なドロップダウン リストが適切です。

    Outlook の [宛先] 行とオートコンプリートのスクリーン ショット

    この例では、オートコンプリート付きのテキスト ボックスが適切です。

  • ユーザーが有効な値を選択するために、補助が必要かどうか。該当する場合は、参照ボタン付きのテキスト ボックスを代わりに使用します。

    Outlook の [宛先] 行と参照ボタンのスクリーン ショット

    この例では、ユーザーは [宛先] をクリックして、有効な値を選択しやすくなっています。

  • 他の選択肢を確認することや、変更を促すことが重要であるかどうか。該当する場合は、代わりに編集可能なリスト ボックスの使用を検討します。編集可能なドロップダウン リストの場合、リストを展開するまでユーザーは他の選択肢があることがわかりません。
  • ユーザーは多くのアイテムが含まれる一覧から 1 つのアイテムをすばやく見つける必要があるかどうか。(Win32 のみ) 該当する場合は、コンボ ボックスを使用し、アイテムの名前全体を入力してアイテムを選択できるようにします。これに対して、Win32 ドロップダウン リストでは、最後に入力された文字だけを基に項目が選択されます (たとえば、月のリストに「12」と入力すると [12 月] ではなく [2 月] が選択されます)。したがって、この場合は選択肢に制約があっても、コンボ ボックスを使用します。

編集可能なリスト ボックス

  • 選択肢に制約があるかどうか。該当する場合は、代わりに単一選択リストまたは通常のドロップダウン リストを使用します。コンボ ボックスでは入力に制約がなく、一覧にない値でも入力できます。入力の制約がないので、有効ではないテキストをユーザーが入力した場合に、エラー メッセージを使ってエラー処理を行う必要があります。
  • 選択される可能性が高い選択肢をあらかじめ列挙できるかどうか。該当しない場合は、代わりにテキスト ボックスを使用します。
  • 他の選択肢を確認することや、変更を促すことが重要であるかどうか。該当しない場合は、代わりに編集可能なドロップダウン リストを使用することを検討します。
  • オプションに注意を引く必要があるかどうか。該当しない場合は、代わりに編集可能なドロップダウン リストを使用することを検討します。ドロップダウン リストは小さいので、あまり目立たせる必要のないオプションに向いています。
  • 画面領域が貴重か。該当する場合は、必要な画面領域が一定で選択肢の数に依存しない、編集可能なドロップダウン リストを使用します。

ドロップダウン リストは、数千アイテムから 1 アイテムまで対応できるので、一覧のアイテム数はコントロールを選択する際の判断要素にはなりません。編集可能なドロップダウン リストでは、ユーザーが一覧にない値を入力できるので、数千アイテムからゼロ アイテムまで対応できます。ドロップダウン リストはデータに使用できるので、アイテム数が事前にはわからなかったり、確実でない可能性があります。追加の画面領域を揃えるため、編集可能なリスト ボックスには常に、少なくともアイテムを 3 つ含めます。

使用パターン

ドロップダウン リストとコンボ ボックスにはいくつかの使用パターンがあります。

ドロップダウン リスト
事前設定された値の固定セットを持つ標準的なドロップダウン リストです。                                 

閉じられた状態では、選択されているアイテムのみが表示されます。ドロップダウン ボタンをクリックすると、すべてのオプションが表示されます。値を変更するには、一覧を開いて別の値をクリックします。

オプションが非表示になっているドロップダウン リストのスクリーン ショット

この例は、通常時の状態を示しています。

オプションが表示されているドロップダウン リストのスクリーン ショット

この例は、展開された状態を示しています。

プレビュー ドロップダウン リスト
選択しやすいよう、アイテムをプレビュー表示するドロップダウン リストです。

色とテキストのオプションのスクリーン ショット

これらの例では、ドロップダウン リストにアイテムがプレビュー表示されています。

編集可能なドロップダウン リスト
ドロップダウン リストにない値をユーザーが入力できるドロップダウン コンボ ボックスです。

Aa511458.DropDownLists27(ja-jp,MSDN.10).png
編集可能な [フォント サイズ] コンボ ボックスのスクリーン ショット

編集モードおよび展開モードにある編集可能なドロップダウン リストの例です。

テキスト ボックスの柔軟性を提供しながらも、選択される可能性が高い選択肢を便利な一覧で提供してユーザーを補助する場合に、このコントロールを使用します。

編集可能なリスト ボックス
常に表示されている一覧にない値をユーザーが入力できる通常のコンボ ボックスです。

フォント オプションのドロップダウン リストのスクリーン ショット

これらの例では、編集可能なリスト ボックスが常に表示されています。

他の選択肢をユーザーが確認することや、変更を促すことが重要な場合は、編集可能なドロップダウン リストよりもこのコントロールの方が適しています。

ガイドライン

全般

  • ドロップダウン リストやコンボ ボックスでのアイテムの変更は、以下の動作に結び付けません。
    • コマンドの実行。
    • 追加の情報入力を行うためのダイアログ ボックスなど、他のウィンドウの表示。
    • 選択されているコントロールに関連する、他のコントロールの動的な表示 (このようなイベントは、スクリーン リーダーで検出できません)。

提示方法

  • アイテムを論理的な順序で一覧にします。関連性が高いオプションをまとめてグループにする、最も一般的なオプションを先頭にする、またはアルファベット順にするなどの方法をとります。名前はアルファベットまたは五十音順、数字は番号順、日付は時系列に基づいて並べ替えます。12 項目以上ある一覧は、項目を見つけやすいようにアルファベット順または五十音順に並べる必要があります。

    正しい例:
    論理的に並べられたドロップダウン リストのスクリーン ショット

    この例では、リスト アイテムが位置関係に基づいて並べられています。

    間違った例:
    整理が必要なドロップダウン リストのスクリーン ショット

    この例では、リスト アイテム数が多すぎるので、アルファベット順に並べる必要があります。

    正しい例:
    アルファベット順に並べられたドロップダウン リストのスクリーン ショット

    この例では、すべてのアイテムを示すオプション以外のアイテムが、アルファベット順に並べられています。

  • 他のアイテムの並び順に関係なく、一覧の先頭に "すべて" または "なし" を示すオプションを配置します。
  • メタオプションはかっこで囲みます。

    ドロップダウン リストで [(なし)] が選択されたスクリーン ショット

    この例では、[(なし)] がメタオプションです。選択肢として有効な値ではなく、オプション自体が使用されていないことを示します。

  • ドロップダウン リストまたはコンボ ボックスを無効にするときは、関連するラベルやコマンド ボタンも無効にします。

ドロップダウン リスト

  • 関連付けた別のコントロールの表示を変更するために、単一のドロップダウン リストを使用する場合は、別のコマンド ボタンをクリックしなくても、選択の時点で直ちに表示が変更されるようにします。表示の変更に長時間かかる場合に限り、別のコマンド ボタンを使用します。ただし、このような目的では、リスト ヘッダーおよびメニュー ボタン コントロールの使用をお勧めします。
  • 一覧には空白のアイテムは使用しないで、代わりにメタオプションを使用します。メタオプションの意味は明示的であるのに対して、空白のアイテムはどのように解釈するのかユーザーにはわかりません。

    正しい例:
    ドロップダウン リストで [(なし)] が選択されたスクリーン ショット

    間違った例:
    ドロップダウン リストで空白が選択されたスクリーン ショット

    この間違った例では、空白のオプションの意味が不明確です。

プレビュー ドロップダウン リスト

  • テキストだけを使用して説明するよりもイメージと併せて示す方が適切な場合は、リスト アイテムのプレビューを使用します。

    プレビューが付いたフォントのドロップダウン リストのスクリーン ショット

    この例では、テキストだけで示すよりもプレビューを使う方がオプションの説明としてはるかに適切です。

  • 不必要な参考にならないアイコンはプレビューで使用しません。

    間違った例:
    ラベルにアイコンが付いたドロップダウン リストのスクリーン ショット

    この例では、プレビュー アイコンが何も情報を伝えていないので不必要です。

コンボ ボックス

  • 可能な場合は、入力テキストの長さを制限します。たとえば、有効な入力値が 0 から 999 までの数値の場合は、入力を 3 文字に制限するコンボ ボックスを使用します。
  • 選択可能なオプションが多数ある場合は、最も可能性が高いオプションに絞り込んで一覧に表示します。コンボ ボックスでは一覧にない値を入力できるので、すべての選択肢を一覧表示する必要はなく、可能性が高い選択肢や代表的な例を一覧表示するだけでかまいません。

    フォント サイズのドロップダウン リストのスクリーン ショット

    この例では、フォント サイズ 15 や中間サイズのフォント 9.5 など、多くの有効な選択肢が一覧表示されていません。

既定値

  • 最も安全 (データの消失やシステム アクセスが失われることを防ぐため) で、最もセキュリティの高いオプションを既定で選択します。安全性およびセキュリティを判断要素として考える必要がない場合は、最もよく使用されるオプションまたは最も便利なオプションを選択します。
    • 例外: コントロールのプロパティが混在状態である場合は、空白の既定値を表示します。混在状態は、設定が同じでない複数のオブジェクトのプロパティを表示するときに発生します。

プロンプト

プロンプトは、編集可能なドロップダウン リスト内に既定値として配置されているラベルまたは短い指示です。静的テキストとは違い、ユーザーがコンボ ボックスに入力を開始するかテキスト ボックスに入力フォーカスが移動すると、プロンプトは画面から消去されます。

検索ボックスのスクリーン ショット

典型的なプロンプト

プロンプトは、次の場合に使用します。

  • テキスト ボックスがツール バーのような特別な領域にあり、ラベルや説明がない方が良い場合。
  • 主に一覧の目的を省スペースで示す場合。コンボ ボックスの使用中にユーザーが確認する必要のある重要な情報は、プロンプトでは示しません。

ユーザーに対して一覧からの選択やボタンのクリックを指示するだけのプロンプトは使用しません。たとえば、"オプションを選択" や "ファイル名を入力して [送信] をクリック" などのプロンプトは必要ありません。

プロンプトを使用するときは、以下のことに留意します。

  • プロンプト テキストは灰色で表示し、実際に入力されたテキストは通常の黒色で表示します。プロンプト テキストと実際に入力されたテキストが混同されないようにします。
  • プロンプト テキストは常に簡潔にします。文ではなく語句にすることもできます。
  • センテンス スタイルの大文字化を使用します。
  • 末尾に句読点や省略記号は付けません。
  • プロンプト テキストは編集可能にしません。ユーザーがテキスト ボックス内をクリックしたり、Tab キーでテキスト ボックスに移動したら、画面からプロンプト テキストを消去します。
    • 例外: テキスト ボックスに既定で入力フォーカスがある場合は、プロンプトを表示し、ユーザーが入力を開始したときに画面から消去します。
  • テキスト ボックスから入力フォーカスが移動したときに、テキスト ボックスが空白のままの場合は、プロンプト テキストを復元します。

間違った例:
6 つの編集可能なドロップダウン リストのスクリーン ショット

この例では、画面領域が効率的に使用されていません。編集可能なドロップダウン リストにいったん入力すると、何のための入力項目だったかわかりづらくなります。さらに、プロンプト テキストが編集可能で、外観も実際に入力されたテキストと同じになっています。

推奨されるサイズと間隔

ドロップダウン リストとその仕様を示すスクリーン ショット

ドロップダウン リストとコンボ ボックスの推奨されるサイズと間隔

  • 有効な最長データが適切に表示される幅を選択します。ドロップダウン リストは水平方向にスクロールできないので、ユーザーにはコントロールに表示されている部分しか見えません (ただし、コンボ ボックスの場合は、自動スクロール機能を有効にできます)。
  • ローカライズの対象となるすべてのテキスト (数値以外) について、30% (短いテキストの場合は最大 200%) の余白を追加します。
  • 一覧の長さは、垂直方向のスクロール操作ができるだけ少なくて済むサイズにします。ドロップダウン リストは必要なときに表示するので、一覧には最大 30 アイテムまで表示することをお勧めします。ドロップダウン ボタンがない編集可能なリスト ボックスでは、3 ~ 12 個のアイテムの表示をお勧めします。

ラベル

コントロール ラベル

  • ラベルは文ではなく語句にして、末尾にコロンを付けます。

    次の場合は例外です。
    • 画面領域が貴重な場所に配置するプロンプト付きの編集可能なドロップダウン リストの場合、ラベルは付けません。
    • ラジオ ボタンまたはチェック ボックスに従属し、コロンで終わるラベルの後に配置するドロップダウン リストまたはコンボ ボックスには、追加のラベルを付けません。
  • 各ラベルに、一意なアクセス キーを割り当てます。ガイドラインについては、「キーボード」を参照してください。
  • センテンス スタイルの大文字化を使用します。
  • ラベルはコントロールの左側に配置するか、または上に配置してコントロールの左端と揃えます。ラベルを左側に配置する場合は、ラベルのテキストとコントロール内のテキストが水平になるようにします。

    正しい例:
    ドロップダウン リストのラベルの配置方法を示すスクリーン ショット

    この例では、ラベルとコントロール内のテキストが適切に配置されています。

    間違った例:
    適切に配置されていないドロップダウン リストのスクリーン ショット

    この例では、ラベルとコントロールのテキストの配置が不適切です。

  • ラベルの後ろに単位 (秒、接続など) をかっこで囲んで指定することができます。
  • ドロップダウン リストまたはコンボ ボックスの内容 (もしくはその表示単位ラベル) を文の一部にしないでください。ローカライズに問題が生じます。

オプション テキスト

  • 各オプションに一意な名前を割り当てます。
  • アイテムが固有名詞である場合を除き、センテンス スタイルの大文字化を使用します。
  • ラベルは文ではなく語句にして、末尾に句読点は付けません。
  • 同じ文法構造の表現を使用し、すべてのオプションの長さがおおよそ同じになるようにします。

指示テキスト

  • ドロップダウン リストまたはコンボ ボックスについての指示テキストを追加する必要がある場合は、ラベルの上に追加します。文を使用し、末尾に句点を付けます。
  • センテンス スタイルの大文字化を使用します。
  • 必須ではなく参考程度の追加情報は、短くまとめます。このような情報はラベルとコロンとの間に配置してかっこで囲むか、コントロールの下にかっこで囲まずに配置します。

    追加データが添えられたドロップダウン リストのスクリーン ショット

    この例では、追加情報がコントロールの下に配置されています。

ドキュメント

ドロップダウン リストに言及するときは、以下のことに留意します。

  • 大文字と小文字の区別を含め、ラベルのテキストを正確に引用します。ただし、アクセス キーを示すかっこや下線付き文字、およびコロンは除外し、内容に応じて "ボックスの一覧" または "ボックス" のいずれか適切な方を付け加えます。
  • 一覧内のオプションについては、大文字と小文字の区別を含め、オプション テキストを正確に引用します。
  • プログラミングおよびその他の技術文書では、"ドロップダウン リスト" と記述します。それ以外のドキュメントでは、"ボックスの一覧" または "ボックス" のどちらか適切な方を使用します。
  • ユーザー操作を説明する場合は、"クリック" を使用します。
  • ラベルおよび一覧内のアイテムは半角の角かっこ ([ ]) で囲み、可能な場合は太字にします。

例: [フォント サイズ] ボックスの一覧の [大きいフォント] をクリックします。

コンボ ボックスに言及するときは、以下のことに留意します。

  • 大文字と小文字の区別を含め、ラベルのテキストを正確に引用します。ただし、アクセス キーを示すかっこや下線付き文字、およびコロンは除外し、内容に応じて "ボックスの一覧" または "ボックス" のいずれか適切な方を付け加えます。
  • 一覧内のオプションについては、大文字と小文字の区別を含め、オプションのテキストを正確に引用します。
  • プログラミングおよびその他の技術文書では、"コンボ ボックス" と記述します。それ以外のドキュメントでは、"ボックスの一覧" または "ボックス" のどちらか適切な方を使用します。
  • ユーザー操作を説明するには、"クリック" または "入力" を使用します。
  • ラベルおよび一覧内のアイテムは半角の角かっこ ([ ]) で囲み、可能な場合は太字にします。

例: [フォント] ボックスに使用するフォントを入力します。

表示: