リスト ボックス
Note
この設計ガイドは Windows 7 用に作成されたものであり、新しいバージョンの Windows 用には更新されていません。 ガイダンスの多くは引き続き原則として適用されますが、プレゼンテーションと例には現在の設計ガイダンスは反映されていません。
リスト ボックスを使用すると、ユーザーは、常に表示されるリストに表示される値のセットから選択できます。 単一選択リスト ボックスでは、ユーザーは相互に排他的な値の一覧から 1 つの項目を選択します。 複数選択リスト ボックスでは、ユーザーは値のリストから 0 個以上の項目を選択します。
一般的な単一選択リスト ボックス。
これは適切なコントロールですか?
それを判断するには、以下の質問を考えます。
- リストには、プログラム オプションではなくデータが表示されますか。 いずれの場合も、リスト ボックスは項目の数に関係なく適切な選択肢です。 対照的に、ラジオ ボタンやチェック ボックスは、少数のプログラム オプションにのみ適しています。
- ユーザーは、ビューの変更、グループ化、列による並べ替え、列の幅と順序の変更を行う必要がありますか。 その場合は、代わりにリスト ビューを使用します。
- コントロールはドラッグ元またはドロップ先にする必要はありますか。 その場合は、代わりにリスト ビューを使用します。
- リスト項目をクリップボードにコピーするか、クリップボードから貼り付ける必要がありますか。 その場合は、代わりにリスト ビューを使用します。
単一選択リスト
- コントロールは、相互に排他的な値のリストから 1 つのオプションを選択するために使用されますか。 そうでない場合、別のコントロールを使用します。 複数のオプションを選択するには、標準の複数選択リスト、チェック ボックス リスト、リスト ビルダー、または追加/削除リストを代わりに使用します。
- ほとんどの状況でほとんどのユーザーに推奨される既定のオプションはありますか。 選択したオプションを表示する方が、代替手段が表示されるよりもはるかに重要ですか。 その場合で、選択肢を非表示にしてユーザーに変更を促さない場合、ドロップダウン リストの使用を検討してください。
この例では、最高の色品質がほとんどのユーザーにとって最適な選択であるため、代替案を既定値にしないドロップダウン リストが適しています。
- リストには一定の相互作用が必要ですか。 その場合、単一選択リストを使用して操作を簡略化します。
この例では、ユーザーは表示項目リストで選択した項目を継続的に変更して、前景色と背景色を設定しています。 この場合、ドロップダウン リストを使用するのは非常に面倒です。
- 設定は相対量のように見えるでしょうか。設定変更の効果に関する即時フィードバックはユーザーにとって有益でしょうか。 その場合、代わりにスライダーを使用することを検討してください。
- リスト項目間に重要な階層関係はあるでしょうか。 その場合、代わりにツリー ビュー コントロールを使用します。
- 画面スペースが貴重ですか。 その場合、代わりにドロップダウン リストを使用します。これは、使用される画面領域が固定され、リスト項目の数に依存しないためです。
標準の複数選択リストとチェック ボックス リスト
- 複数選択はタスクに不可欠であるか、よく使用されていますか。 その場合、チェック ボックス リストを使用して、(特にターゲット ユーザーが高度でない場合に) 複数選択を明確にします。 多くのユーザーは、標準の複数選択リストが複数選択をサポートしていることを認識していません。 チェック ボックスによって複数選択が目立ちすぎたり、画面が乱雑になりすぎたりするのであれば、標準の複数選択リストを使用します。
- 複数選択の安定性は重要ですか。 その場合は、クリックすると一度に 1 つの項目のみが変更されるため、チェック ボックス リスト、リスト ビルダー、または追加/削除リストを使用します。 標準の複数選択リストを使用すると、誤ってすべての選択をクリアしてしまいやすくなります。
- コントロールは、値の一覧から 0 個以上の項目を選択するために使用されますか。 そうでない場合、別のコントロールを使用します。 1 つの項目を選択する場合、代わりに単一選択リストを使用します。
プレビュー リスト
- オプションは、テキスト単独よりも画像で選択する方が簡単ですか。 その場合は、プレビュー リストを使用します。
リスト ビルダーと追加/削除リスト
- コントロールは、値の一覧から 0 個以上の項目を選択するために使用されますか。 そうでない場合、別のコントロールを使用します。 1 つの項目を選択する場合、代わりに単一選択リストを使用します。
- 選択する項目の順序は重要ですか。 その場合、リスト ビルダーと追加/削除リスト パターンでは順序がサポートされますが、他の複数選択パターンではサポートされません。
- ユーザーが選択したすべての項目の概要を表示することは重要ですか。 その場合、リスト ビルダーと追加/削除リスト パターンには、選択した項目のみ表示されますが、他の複数選択パターンでは表示されません。
- 選択可能な選択肢は制約なしですか。 その場合、追加/削除リストを使用して、ユーザーがリストに現在含まれていない値を選択可能にします。
- リストに値を追加するには、オブジェクトを選択するための特別なダイアログ ボックスが必要ですか。 その場合、追加/削除リストを使用し、ユーザーが [追加] をクリックしたときにダイアログ ボックスを表示します。
- 画面スペースが貴重ですか。 その場合は、不要なときはオプションのセットを表示しないことによって画面スペースを節約できる追加/削除リストを代わりに使用します。
リスト ボックスの場合、リスト内の項目数は、コントロールを選択する際の要素にはなりません。これは、項目数が数千から単一選択リストの場合は 1 つ (複数選択リストの場合は 0) にまで減少するためです。 リスト ボックスはデータ用に使用されるため、項目の数が事前にわからない場合があります。
注: リスト ボックスのように見えるコントロールがリスト ビューを使用して実装される場合があり、その逆も同様です。 このような場合は、実装ではなく、使用に基づいてガイドラインを適用してください。
使用パターン
リスト ボックスにはいくつかの使用パターンがあります。
| Label | 値 |
|---|---|
| 単一選択リスト ユーザーが一度に 1 つの項目を選択可能です。 |
 この例では、ユーザーは 1 つの表示項目のみを選択できます。 |
| 標準複数選択リスト ユーザーが任意の数の項目 (0 も可) を選択可能にします。 |
標準複数選択リストの外観は単一選択リストとまったく同じであるため、リスト ボックスが複数の選択をサポートするという視覚的な手がかりはありません。 ユーザーがこの機能に気付く必要があるため、このリスト パターンは、複数選択が必須ではなく、めったに使用されないタスクに最適です。 複数選択モードには、複数と拡張の 2 種類があります。 拡張選択モードの方がはるかに一般的であり、ドラッグするか、Shift キーまたは Ctrl キーを押しながらクリックして、それぞれ連続した値と隣接しない値のグループを選択することにより、選択範囲を拡張できます。 複数選択モードでは項目をクリックすると、Shift キーか Ctrl キーに関係なく、選択状態が切り替わります。 通常とは異なるこの動作を考慮に入れると、複数選択モードは非推奨となります。代わりにチェック ボックス リストを使用してください。  この例では、ユーザーが複数選択モードを使用して任意の数の項目を選択できます。 |
| チェック ボックス リスト 標準の複数選択リスト ボックスと同様、チェック ボックス リストを使用すると、ユーザーは任意の数の項目 (0 も可) を選択できます。 |
標準の複数選択リストとは異なり、チェック ボックスは複数の選択が可能であることを明確に示します。 このリスト パターンは、複数の選択が必須であるか、よく使用されるタスクに使用します。  この例では、ユーザーは通常、複数の項目を選択して、チェック ボックス リストを使用します。 このように複数選択が明確に示されていることから、標準の複数選択リストよりもチェック ボックス リストの方が適していると思われるかもしれません。 実際には、複数選択が必要なタスクや、複数選択を頻繁に使用するタスクはほとんどありません。そのような場合にチェック ボックス リストを使用すると、選択に注意が向きすぎてしまいます。 したがって、標準の複数選択リストの方がはるかに一般的です。 |
| プレビュー リスト 単一または複数選択が可能ですが、テキストだけでなく選択の効果のプレビューが表示されます。 |
![[ウィンドウの色] オプションのプレビューのスクリーンショット](images/ctrl-list-boxes-image7.png) この例では、各オプションのプレビューによって選択の効果が明確に示されており、テキストのみを使用するよりも効果的です。 |
| リスト ビルダー ユーザーが一度に 1 つの項目を追加し、必要に応じてリストの順序を設定することで、選択肢の一覧を作成可能にします。 |
リスト ビルダーは 2 つの単一選択リストから構成されます。左側のリストは固定されたオプション セットであり、右側のリストは構築中のリストです。 リストの間には、次の 2 つのコマンド ボタンがあります。
 この例では、リスト ビルダーを使用して、使用可能な一連のオプションから項目を選択し、その順序を設定することで、ツール バーを作成します。 |
| 追加/削除リスト ユーザーが一度に 1 つ以上の項目を追加し、オプションでリストの順序を設定することで選択肢のリストを作成できるようにします (リスト ビルダーなど)。 |
リスト ビルダーとは異なり、[追加] をクリックすると、リストに追加する項目を選択するためのダイアログ ボックスが表示されます。 別個のダイアログ ボックスを使用すると、専用のオブジェクト選択ツールや共通ダイアログを使用して項目を選択する際の柔軟性が大幅に高まります。 リスト ビルダーと比較すると、このバリエーションはよりコンパクトですが、項目を追加するには少し多くの労力が必要です。  この例では、ユーザーがメニューのツールを追加または削除したり、順序を設定したりできます。 リスト ビルダーと追加/削除リスト パターンは、他の複数選択リストよりも大幅に重くなりますが、次の 2 つの独自の利点があります。
|
ガイドライン
プレゼンテーション
- 関連するオプションをグループ化したり、最も頻繁に使用される項目を先頭に配置したり、アルファベット順を使用したりして、リスト項目を論理的な順序で並べ替えます。 名前をアルファベット順、数値順に並べ替え、日付を時系列で並べ替えます。 12 個以上の項目を含むリストは、項目を見つけやすくするため、アルファベット順に並べ替える必要があります。
正しい: 
この例では、リスト ボックス項目は空間リレーションシップによって並べ替えられます。
正しくない: 
この例では、リスト項目が非常に多いので、アルファベット順に並べ替える必要があります。
正しい: 
この例では、リスト アイテムはアルファベット順に並べ替えられているため、見つけやすくなります。 ただし、項目 "すべての Windows 製品" は、並べ替え順序に関係なく、リストの先頭にあります。
- 残りの項目の並べ替え順序に関係なく、"すべて" または "なし" を表すオプションをリストの先頭に配置します。
- メタオプションはかっこで囲みます。
この例では、"(なし)" は選択肢の有効な値ではなく、オプション自体が使用されていないことを示しているため、メタオプションです。
- 空のリスト項目を使用せず、代わりにメタオプションを使用してください。 ユーザーは空白項目をどのように解釈すればよいかわかりませんが、メタオプションの意味は明確です。
正しくない: 
この例では、空白項目の意味が不明です。
正しい:
この例では、代わりに "(なし)" メタ オプションが使用されています。
相互作用
- ダブルクリック動作を指定することを検討してください。 ダブル クリックすると、項目を選択してその既定のコマンドを実行するのと同じ効果が得られなければなりません。
- ダブルクリック動作を冗長にしてください。 同じ効果を持つコマンド ボタンまたはコンテキスト メニュー コマンドが常に存在していなければなりません。
- ユーザーが選択した項目に対して何もできない場合、選択を許可しないでください。
正しい: 
このリスト ボックスには、変更の読み取り専用リストが表示されます。選択する必要はありません。
- リスト ボックスを無効にする場合、関連付けられているラベルとコマンド ボタンも無効にします。
- リスト ボックスで選択された項目の変更を次の目的で使用しないでください。
- コマンドを実行します。
- 他のウィンドウ (ダイアログ ボックスなど) を表示して、より多くの入力を集めます。
- 選択したコントロールに関連する他のコントロールを動的に表示する (スクリーン リーダーはそのようなイベントを検出できません)。 例外: 選択した項目の説明に使用する静的テキストを動的に変更することができます。
許容可能: 
この例では、選択した項目を変更すると説明が変更されます。
- 水平スクロールを避けてください。 複数列のリストは水平スクロールに依存します。これは通常、垂直スクロールよりも使いにくくなります。 アルファベット順に並べられた項目が多く、幅広いコントロールに十分な画面スペースがある場合、水平スクロールを必要とする複数列のリストを使用できます。
許容可能: 
この例では、項目が多く、幅の広いコントロールに十分な画面スペースがあるため、水平スクロールを必要とする複数の列が使用されています。
複数選択リスト
- 特にユーザーが複数の項目を選択する可能性がある場合、リストの下に選択した項目の数を表示することを検討してください。 この情報は、有用なフィードバックを提供するだけでなく、リスト ボックスが複数選択をサポートしていることを明確に示しています。
この例では、選択した項目の数が一覧の下に表示されています。
- 選択に必要なリソースなど、よりわかりやすい他の選択メトリックを提供できます。
この例では、選択した項目の数よりも、コンポーネントをインストールするために必要なディスク容量の方が重要です。
- リスト項目が多数あり、すべてを選択またはクリアする可能性が高い場合、[すべて選択] および [すべてクリア] コマンド ボタンを追加します。
- 標準の複数選択リストでは、この選択モードは非推奨とされているため、複数選択モードを使用しないでください。 同等の動作の場合、代わりにチェック ボックス リストを使用します。
既定の値
- (データまたはシステム アクセスの損失を防ぐために) 最も安全で、最もキュアなオプションを既定で選択します。 安全性とセキュリティが要因でない場合、最も可能性の高いコマンドや便利なオプションを選択します。
例外: コントロールが混合状態のプロパティを表す場合、項目を選択しないでください。これは、同じ設定を持たない複数のオブジェクトのプロパティを表示するときに発生します。
サイズと間隔のお勧め設定
リスト ボックスに推奨されるサイズ設定と間隔。
- 最長の有効なデータに適したリスト ボックスの幅を選択します。 標準のリスト ボックスは水平方向にスクロールできないため、ユーザーはコントロールに表示されているもののみ表示できます。
- ローカライズされるテキスト (数字は除く) には、さらに 30 パーセント (短いテキストの場合は最大 200 パーセント) を追加します。
- 項目の整数を表示するリスト ボックスの高さを選択します。 項目を垂直方向に切り捨てないでください。
- 不要な垂直スクロールがいらないリスト ボックスの高さを選択してください。 リスト ボックスには、スクロールしなくても 3 ～ 20 個の項目が表示されます。 垂直スクロール バーが表示されなくなる場合、リスト ボックスを少し長くすることを検討してください。 多数の項目が含まれる可能性のあるリストでは、一度に表示される項目を増やしてスクロール バーを配置しやすくすることでスクロールを容易にするため、少なくとも 5 つの項目を表示する必要があります。
- ユーザーがリスト ボックスを大きくするメリットがある場合、リスト ボックスとその親ウィンドウのサイズを変更できるようにします。 これにより、ユーザーは必要に応じてリスト ボックスのサイズを調整できます。 ただし、サイズ変更可能なリスト ボックスには、3 つ以上の項目が表示されます。
Labels
コントロール ラベル
- すべてのリスト ボックスにはラベルが必要です。 文としてではなく、単語またはフレーズとしてラベルを作成します。ラベルの末尾にコロンを使用してください。
例外: ダイアログ ボックスのメイン指示を単に言い換えただけの場合、ラベルを省略します。 この場合、メイン命令はコロン (質問でない限り) とアクセス キーを受け取ります。
許容可能: 
この例では、リスト ボックス ラベルはメイン命令を言い換えているだけです。
良い: 
この例では、冗長なラベルが削除されるため、メイン指示はコロンとアクセス キーを受け取ります。
- リスト ボックスがラジオ ボタンまたはチェック ボックスの従属関係にあり、そのコントロールのラベルがコロンで終わる場合、リスト ボックス コントロールに追加のラベルを配置しないでください。
この例では、リスト ボックスはラジオ ボタンに従属し、そのラベルを共有しています。
- 一意のアクセス キーを割り当てます。 ガイドラインについては、「キーボード」をご覧ください。
- 文スタイルの大文字を使用します。
- ラベルをコントロールの左または上に配置し、ラベルをコントロールの左端に揃えます。
- ラベルが左側にある場合、ラベル テキストをコントロール内のテキストの最初の行に垂直方向に配置します。
正しい: 
これらの例では、上部のラベルはリスト ボックスの左端に揃えられ、左側のラベルはリスト ボックス内のテキストに揃えられます。
正しくない: 
これらの誤った例では、上部のラベルがリスト ボックス内のテキストと揃っており、左側のラベルがリスト ボックスの上部と揃っています。
- 複数選択リスト ボックスの場合、複数選択が可能であることを明確に示すラベルを使用します。 チェック ボックス リスト ラベルは、それほど明確でない場合があります。
正しい: 
この例では、ラベルは複数選択が可能であることを明確に示しています。
正しくない: 
この例では、ラベルは複数選択に関する明確な情報を提供していません。
最良: 
この例では、チェックボックスによって複数選択が可能であることが明確に示されているため、ラベルを明示的にする必要はありません。
- ラベルの後に、単位 (秒、接続など) をかっこで囲んで指定できます。
オプション テキスト
- 各オプションに一意の名前を割り当てます。
- 項目が固有名詞でない限り、文スタイルの大文字/小文字を使用します。
- ラベルを文ではなく単語またはフレーズとして書き込み、末尾に句読点を使用しないでください。
- 並列フレージングを使用し、すべてのオプションで長さを同じにしてください。
説明文と補足文
- リスト ボックスに関する説明テキストを追加する必要がある場合、ラベルの上に追加します。 末尾に句読点を付けた完全な文を使用します。
- 文スタイルの大文字を使用します。
- 役に立つが不要な追加情報は、短くする必要があります。 このテキストは、ラベルとコロンの間にかっこで囲むか、コントロールの下にかっこを付けずに配置します。
この例では、補足テキストが一覧の下に配置されます。
ドキュメント
リスト ボックスを参照する場合:
- 大文字と小文字を含む正確なラベル テキストを使用しますが、アクセス キーの下線やコロンは含めないでください。 単語リストを含めます。 リスト ボックスをリスト ボックスまたはフィールドとして参照しないでください。
- リスト項目の場合は、大文字/小文字を含む正確な項目テキストを使用します。
- プログラミングやその他の技術文書では、リスト ボックスをリスト ボックスとして参照してください。 他のすべての場所ではリストが使用されます。
- ユーザーの操作を説明するには、"選択" を使用します。
- 可能であれば、ラベルとリスト項目を太字テキストで書式設定します。 それ以外の場合、混乱を防ぐため、必要な場合にのみラベルと項目を引用符で囲みます。
例: [移動先] リストで、[ブックマーク] を選択します。