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

Note

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

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

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

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

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

Note

レイアウトに関連するガイドラインは、別の記事で示されています。

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

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

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

ドロップダウン リスト

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

  

  この例では、最も高い色品質がほとんどのユーザーに最適な選択肢であるため、ドロップダウン リストを使用して代替候補をダウンプレイすることをお勧めします。

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

• 画面スペースはプレミアムですか? その場合は、使用される画面領域が固定され、選択肢の数に依存しないため、ドロップダウン リストを使用します。

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

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

ドロップダウン リストに対して提供された原則に加えて、次のことも適用されます。

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

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

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

  

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

  

  この例では、オートコンプリートを含むテキスト ボックスを選択することをお勧めします。

• ユーザーは有効な値の選択に関するサポートを必要としますか? その場合は、代わりに [参照] ボタン を含むテキスト ボックスを使用します。

  

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

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

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

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

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

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

使用パターン

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

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

ガイドライン

全般

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

プレゼンテーション

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

  正解:

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

  不正解:

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

  正解:

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

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

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

  

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

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

ドロップダウン リスト

• 関連付けられているコントロールのビューを変更するために 1 つのドロップダウン リストを使用する場合は、 別のコマンド ボタンを必要とするのではなく、選択時にすぐにビューを変更します。 リストのレンダリングにかなりの時間がかかる場合にのみ、別のコマンド ボタンを使用します。 ただし、この目的で推奨されるコントロールは、リスト ヘッダーと メニュー ボタン です。

• 代わりにメタオプションを使用する空のリストアイテムを持つ必要はありません。 ユーザーは空白の項目を解釈する方法を知りませんが、メタオプションの意味は明示的です。

  正解:何

  不正解:

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

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

• テキストのみを使用して説明するよりも、画像で表示する方が良い場合は、リスト アイテムでプレビューを使用します。

  

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

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

  不正解:

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

コンボ ボックス

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

• 可能なオプションが多数ある場合は、最も可能性の高いオプションにリストの内容に焦点を当てます。 ユーザーはリストにない値を入力できるため、コンボ ボックスはすべての選択肢を一覧表示する必要がなく、選択肢の可能性が高いサンプルや代表的なサンプルだけを一覧表示する必要はありません。

  

  この例では、15 や 9.5 などの半角フォントなど、多くの有効な選択肢が一覧に表示されません。

既定値

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

プロンプト

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

一般的なプロンプト。

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

• 画面領域は、ツール バーなど、ラベルや命令の使用が望ましくないほど高いレベルにあります。
• プロンプトは、主にリストの目的をコンパクトな方法で識別するために使用されます。 コンボ ボックスの使用中にユーザーが確認する必要がある重要な情報ではありません。

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

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

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

不正解:

この例では、画面領域は Premium ではありません。編集可能なドロップダウン リストが入力されると、ユーザーはそれが何のためにあるかを覚えておくのは困難です。プロンプト テキストは、実際のテキストと同じように編集可能で描画されます。

推奨されるサイズ設定と間隔

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

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

ラベル

コントロール ラベル

• ラベルを文ではなく単語または語句として書き込み、コロンで終わらせる。 例外:

  • スペースが Premium の場所にプロンプトが表示された編集可能なドロップダウン リスト。
  • ドロップダウン リストまたはコンボ ボックスがラジオ ボタンまたはチェック ボックスの下位であり、コロンで終わるラベルによって導入される場合は、コントロールに追加のラベルを配置しないでください。

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

• 文形式の大文字と小文字を使用します。

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

  正解:

  この例では、ラベルがコントロール テキストと正しく揃えられます。

  不正解:

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

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

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

オプション テキスト

• 各オプションに一意の名前を割り当てます。
• 項目が固有名詞でない限り、 文形式の大文字を使用します。
• ラベルを文としてではなく単語または語句として書き込み、終了句読点を使用しません。
• 並列フレージングを使用し、すべてのオプションで長さを同じに保つようにします。

指示テキスト

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

• 文形式の大文字と小文字を使用します。

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

  

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

ドキュメント

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

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

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

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

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

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