Windows 7 ドロップダウン リスト & コンボ ボックス

Note

この設計ガイドは Windows 7 用に作成されたものであり、新しいバージョンの Windows 用には更新されていません。 ガイダンスの多くは引き続き原則として適用されますが、プレゼンテーションと例には現在の設計ガイダンスは反映されていません。

ドロップダウン リストまたはコンボ ボックスを使用すると、ユーザーは相互に排他的な値のリストから選択できます。 ユーザーはオプションを 1 つだけ選択できます。 標準ドロップダウン リストでは、ユーザーはリスト内の選択肢に制限されますが、コンボ ボックスを使用するとリストにない選択肢を入力できます。

一般的なコンボ ボックス。

この記事を読む際は、次の用語を理解しておくことが重要です。

• 標準リスト ボックスは、複数の項目のリストを含むボックスで、複数の項目が表示されます。
• ドロップダウン リストは、選択した項目が常に表示され、他の項目はドロップダウン ボタンをクリックしてオンデマンドで表示されるリストです。
• コンボ ボックスは、標準のリスト ボックスまたはドロップダウン リストと編集可能なテキスト ボックスの組み合わせであるためユーザーはリストにない値を入力できます。
  • 編集可能なドロップダウン リストは、ドロップダウン リストと編集可能なテキスト ボックスの組み合わせです。
  • 編集可能なリスト ボックスは、標準のリスト ボックスと編集可能なテキスト ボックスの組み合わせです。

Note

レイアウトに関連するガイドラインについては、別の記事で説明します。

これは適切なコントロールですか?

それを判断するには、以下の質問を考えます。

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

ドロップダウン リスト

• ほとんどの状況でほとんどのユーザーに推奨される既定のオプションはありますか。 選択したオプションを表示する方が、代替手段が表示されるよりもはるかに重要ですか。 選択肢を非表示にしてユーザーに変更を促さない場合、ドロップダウン リストの使用を検討してください。 そうでない場合、代替選択肢をより強調するラジオ ボタン、単一選択リスト、または編集可能なリスト ボックスを検討してください。

  

  この例では、最高の色品質がほとんどのユーザーにとって最適な選択であるため、代替案を既定値にしないドロップダウン リストが適しています。

• オプションに注目を集めたいと考えていますか。 その場合、画面スペースを多く占めて注目を集める傾向があるラジオ ボタン、単一選択リスト、または編集可能なリスト ボックスを検討してください。 ドロップダウン リストはコンパクトなので、あまり強調したくないオプションに適しています。

• 画面スペースが貴重ですか。 その場合は、ドロップダウン リストを使用してください。使用される画面スペースが固定されており、選択肢の数に依存しないためです。

• ウィンドウに他のドロップダウン リストはありますか。 その場合、一貫性のためにドロップダウン リストを使用することを検討してください。

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

ドロップダウン リストに適用される原則に加えて、以下の原則も適用されます。

• 選択可能な選択肢は制約ありですか。 その場合、代わりに通常のドロップダウン リストを使用します。 コンボ ボックスは、リストに現在含まれていない値をユーザーが入力する必要が生じることのある、制約のない入力用です。 入力が制約されていないため、ユーザーが無効なテキストを入力した場合、エラー メッセージでエラーを処理する必要があります。

• 最も可能性の高い選択肢を事前に列挙できますか。 そうでない場合、代わりにテキスト ボックスを使用してください。

• ドロップダウン リストは、前のユーザーによる入力の一覧に使用されていますか。 ユーザーが前の入力の完全なリストを確認する必要がない限り、代わりにオートコンプリート オプションを備えたテキスト ボックスを使用してください。

  

  この例では、ユーザーが前の入力を確認する必要が生じることがあるため、編集可能なドロップダウン リストを選択することをお勧めします。

  

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

• 有効な値を選択する点でユーザーは支援を必要としますか。 その場合、代わりに参照ボタンのあるテキスト ボックスを使用します。

  

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

• 別の選択肢を確認したり、変更を招待したりするようユーザーに勧めることは重要ですか。 その場合、代わりに編集可能リスト ボックスを使用することを検討してください。 編集可能ドロップダウン リストでは、ユーザーはリストが削除されるまで代替手段を認識しません。

• ユーザーは、大きなリストですばやく項目を見つける必要がありますか。 (Win32 のみ) その場合、ユーザーが完全な名前を入力して項目を選択できるため、コンボ ボックスを使用してください。 対照的に、Win32 ドロップダウン リストでは、入力された最後の文字のみに基づいて項目が選択されます (したがって、月のリストに「Jun」と入力すると、June ではなく November に一致します)。 この場合、選択可能な選択肢に制約がある場合でも、コンボ ボックスを使用してください。

編集可能リスト ボックス

• 選択可能な選択肢は制約ありですか。 その場合、代わりに単一選択リストまたは通常のドロップダウン リストを使用します。 コンボ ボックスは、リストに現在含まれていない値をユーザーが入力する必要が生じることのある、制約のない入力用です。 入力が制約されていないため、ユーザーが無効なテキストを入力した場合、エラー メッセージでエラーを処理する必要があります。
• 最も可能性の高い選択肢を事前に列挙できますか。 そうでない場合、代わりにテキスト ボックスを使用してください。
• 別の選択肢を確認したり、変更を招待したりするようユーザーに勧めることは重要ですか。 そうでない場合、代わりに編集可能ドロップダウン リストを検討してください。
• オプションに注目を集めたいと考えていますか。 そうでない場合、代わりに編集可能ドロップダウン リストを検討してください。 ドロップダウン リストはコンパクトなので、あまり強調したくないオプションに適しています。
• 画面スペースが貴重ですか。 その場合、編集可能ドロップダウン リストを使用してください。使用される画面スペースが固定されており、選択肢の数に依存しないためです。

ドロップダウン リストの場合、リスト内の項目数は数千から 1 つまでの範囲にわたるため、コントロールを選択する際の要素にはなりません。 編集可能ドロップダウン リストでは、ユーザーがリストにない値を入力できるため、数千の項目から 0 項目までの範囲で調整できます。 ドロップダウン リストはデータに使用されるため、項目の数は事前にわからない場合があり、保証できない可能性があります。 追加の画面スペースを正当化するため、編集可能なリスト ボックスには常に少なくとも 3 つの項目を含めます。

使用パターン

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

使用方法	例
ドロップダウン リスト 標準のドロップダウン リストで、固定された一連の事前設定された値が含まれます。	閉じると、選択した項目のみ表示されます。 ユーザーがドロップダウン ボタンをクリックすると、すべてのオプションが表示されます。 値を変更するには、ユーザーがリストを開き、別の値をクリックします。 この例では、リストは通常の状態です。 この例では、リストが削除されています。
[プレビュー] ドロップダウン リスト ユーザーが選択できるように選択の結果をプレビューするドロップダウン リストです。	これらの例では、ドロップダウン リストによって選択結果がプレビューされます。
編集可能なドロップダウン リスト ドロップダウン コンボ ボックスを使用すると、ユーザーはドロップダウン リストにない値を入力できます。	編集モードとドロップダウン モードでの編集可能なドロップダウン リストの例。 テキスト ボックスの柔軟性を確保しながら、考えられる選択肢の便利なリストを提供してユーザーを支援する場合は、このコントロールを使用します。
編集可能リスト ボックス 通常のコンボ ボックス。ユーザーは、常時表示されるリストにない値を入力できます。	これらの例では、編集可能リスト ボックスが常時表示されています。 ユーザーに代替の選択肢を確認したり変更を促したりすることが重要な場合、編集可能ドロップダウン リストよりもこのコントロールの方が適しています。

ガイドライン

全般

• ドロップダウン リストまたはコンボ ボックスの変更を使用しないでください。
  • コマンドを実行します。
  • 他のウィンドウ (ダイアログ ボックスなど) を表示して、より多くの入力を集めます。
  • 選択したコントロールに関連する他のコントロールを動的に表示する (スクリーン リーダーはそのようなイベントを検出できません)。

プレゼンテーション

• 関連性の高いオプションをグループ化したり、最も一般的なオプションを先頭に配置したり、アルファベット順を使用したりして、リスト項目を論理的な順序で並べ替えます。 名前をアルファベット順、数値順に並べ替え、日付を時系列で並べ替えます。 12 個以上の項目を含むリストは、項目を見つけやすくするため、アルファベット順に並べ替える必要があります。

  正しい:

  この例では、リスト項目は空間リレーションシップによって並べ替えられます。

  正しくない:

  この例では、リスト項目が非常に多いので、アルファベット順に並べ替える必要があります。

  正しい:

  この例では、すべての項目を表すオプションを除き、リスト項目はアルファベット順に並べ替えられています。

• 残りの項目の並べ替え順序に関係なく、"すべて" または "なし" を表すオプションをリストの先頭に配置します。

• メタオプションはかっこで囲みます。

  

  この例では、"(なし)" は選択肢の有効な値ではなく、オプション自体が使用されていないことを説明しているため、メタオプションです。

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

ドロップダウン リスト

• 関連するコントロールのビューを変更するために単一のドロップダウン リストを使用する場合、別のコマンド ボタンを要求するのではなく、選択時にすぐにビューを変更します。リストのレンダリングにかなりの時間がかかる場合にのみ、別のコマンド ボタンを使用します。 ただし、リスト ヘッダーとメニュー ボタンは、この目的に適したコントロールです。

• 空のリスト項目を使用せず、代わりにメタオプションを使用してください。 ユーザーは空白項目をどのように解釈すればよいかわかりませんが、メタオプションの意味は明確です。

  正しい:

  正しくない:

  正しくない例では、空白オプションの意味が不明確です。

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

• テキストのみで説明するよりも画像で表示する方が適切な場合は、リスト項目でプレビューを使用します。

  

  この例では、プレビューでは、テキスト単独よりもはるかに優れたオプションについて説明しています。

• プレビューでは、不要で役に立たないアイコンを使用しないでください。

  正しくない:

  この例では、プレビュー アイコンは情報を伝達しないため、不要です。

コンボ ボックス

• 可能であれば、入力テキストの長さを制限してください。 たとえば、有効な入力が数値 0 ～ 999 の場合は、3 文字に制限されたコンボ ボックスを使用します。

• 可能なオプションが多数ある場合、最も可能性の高いオプションにリストの内容をフォーカスします。 ユーザーはリストにない値を入力できるため、コンボ ボックスにはすべての選択肢をリストする必要はなく、可能性のある選択肢または代表的なサンプルのみをリストすれば十分です。

  

  この例では、15 や 9.5 のようなハーフサイズのフォントなど、多くの有効な選択肢がリストされていません。

既定の値

• (データまたはシステム アクセスの損失を防ぐために) 最も安全で、最もキュアなオプションを既定で選択します。 安全性とセキュリティが要因でない場合、最も可能性の高いコマンドや便利なオプションを選択します。
  • 例外: コントロールが混合状態のプロパティを表す場合、空白の既定値を表示してください。これは、同じ設定を持たない複数のオブジェクトのプロパティを表示するときに発生します。

プロンプト

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

一般的なプロンプト。

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

• 画面スペースがかなり限られているため、ツールバーなどでラベルや指示を使用することが望ましくない。
• プロンプトは主に、リストの目的を簡潔に識別するためのものです。 コンボ ボックスの使用中にユーザーが確認する必要がある重要な情報にすることはできません。

ユーザーがリストから何かを選択したり、ボタンをクリックしたりするように指示するためだけにプロンプトを使用しないでください。 たとえば、"オプションを選択してください" や "ファイル名を入力してから [送信] をクリックしてください" などのプロンプトは不要です。

プロンプトを使用する場合:

• プロンプト テキストを斜体の灰色で、実際のテキストを通常の黒で描画します。 プロンプト テキストと実際のテキストを混同しないでください。
• プロンプト テキストは簡潔に保ってください。 完全な文の代わりにフラグメントを使用することができます。
• 文スタイルの大文字を使用します。
• 末尾の句読点や省略記号は使用しないでください。
• プロンプト テキストは編集不可であり、ユーザーがテキスト ボックスをクリックするかタブで入力すると消えます。
  • 例外: テキスト ボックスに既定の入力フォーカスがある場合、プロンプトが表示され、ユーザーが入力を開始したときのみ表示されなくなります。
• 入力フォーカスが失われたときにテキスト ボックスがまだ空の場合、プロンプト テキストが復元されます。

誤った例:

この例では、画面スペースが限られておらず、編集可能なドロップダウン リストに入力すると、ユーザーがそのリストの目的を思い出すのは困難です。また、プロンプト テキストは編集可能であり、実際のテキストと同じように描画されます。

サイズと間隔のお勧め設定

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

• 最も長い有効なデータに適した幅を選択します。 ドロップダウン リストは水平方向にスクロールできないため、ユーザーはコントロールに表示されているもののみ表示できます。 (ただし、コンボ ボックスで AutoScroll 機能を有効にできる点に注意してください)。
• ローカライズされるテキスト (数字は除く) には、さらに 30 パーセント (短いテキストの場合は最大 200 パーセント) を追加します。
• 不要な垂直スクロールがいらないリストの長さを選択してください。 ドロップダウン リストはオンデマンドで表示されるため、リストには最大 30 個の項目が表示されます。 編集可能リスト ボックス (ドロップダウン ボタンがないもの) には、3 ～ 12 個の項目が表示されます。

Labels

コントロール ラベル

• ラベルを文ではなく単語またはフレーズとして書き込み、コロンで終了します。 例外:

  • スペースが限られている場所に配置されたプロンプト付きの編集可能ドロップダウン リスト。
  • ドロップダウン リストまたはコンボ ボックスがラジオ ボタンまたはチェック ボックスの従属関係にあり、コロンで終わるラベルで始まる場合、コントロールに追加のラベルを配置しないでください。

• ラベルごとに一意のアクセス キーを割り当てます。 ガイドラインについては、「キーボード」をご覧ください。

• 文スタイルの大文字を使用します。

• ラベルをコントロールの左または上に配置し、ラベルをコントロールの左端に揃えます。 ラベルが左側にある場合は、ラベル テキストをコントロール テキストに対して垂直方向に配置します。

  正しい:

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

  正しくない:

  この例では、ラベルがコントロール テキストに正しく配置されていません。

• ラベルの後に、単位 (秒、接続など) をかっこで囲んで指定できます。

• ドロップダウン リストまたはコンボ ボックス (またはその単位ラベル) の内容は文の一部にしないでください。ローカライズできないためです。

オプション テキスト

• 各オプションに一意の名前を割り当てます。
• 項目が固有名詞でない限り、文スタイルの大文字/小文字を使用します。
• ラベルを文ではなく単語またはフレーズとして書き込み、末尾に句読点を使用しないでください。
• 並列フレージングを使用し、すべてのオプションで長さを同じにしてください。

指示テキスト

• ドロップダウン リストまたはコンボ ボックスに関する説明テキストを追加する必要がある場合、ラベルの上に追加します。 末尾に句読点を付けた完全な文を使用します。

• 文スタイルの大文字を使用します。

• 役に立つが不要な追加情報は、短くする必要があります。 この情報は、ラベルとコロンの間にかっこで囲むか、コントロールの下にかっこを付けずに配置します。

  

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

ドキュメント

ドロップダウン リストを参照する場合:

• 大文字/小文字を含む正確なラベル テキストを使用しますが、アクセス キーの下線やコロンを含めないでください。リストまたはボックスのうち、より明確な方を含めます。
• リスト オプションの場合、大文字/小文字を含む正確なオプション テキストを使用します。
• プログラミングやその他の技術ドキュメントでは、ドロップダウン リストをドロップダウン リストとして参照してください。 他の場所では、リストまたはボックスのどちらか明確な方を使用します。
• ユーザーの操作を説明するには、クリックを使用します。
• 可能であれば、ラベルとリスト オプションを太字テキストで書式設定します。 それ以外の場合、混乱を防ぐため、必要な場合にのみラベルとオプションを引用符で囲みます。

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

コンボ ボックスを参照する場合:

• 大文字と小文字を含む正確なラベル テキストを使用しますが、アクセス キーの下線やコロンは含めず、単語ボックスを含めます。
• リスト オプションの場合、大文字/小文字を含む正確なオプション テキストを使用します。
• プログラミングやその他の技術文書では、コンボ ボックスをコンボ ボックスとして参照してください。 他の場所では、ボックスを使用します。
• ユーザーの操作を説明するには、Enter を使用します。
• 可能であれば、ラベルとリスト オプションを太字テキストで書式設定します。 それ以外の場合、混乱を防ぐため、必要な場合にのみラベルとオプションを引用符で囲みます。

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