リスト ボックス

Note

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

リスト ボックスを使用すると、ユーザーは常に表示されるリストに表示される値のセットから選択できます。 1 つの選択リスト ボックスを使用すると、ユーザーは相互に排他的な値の一覧から 1 つの項目を選択します。 複数選択リスト ボックスを使用すると、ユーザーは値のリストから 0 個以上の項目を選択します。

一般的な単一選択リスト ボックス。

Note

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

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

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

• リストには、プログラム オプションではなくデータが表示されますか? いずれの場合も、リスト ボックスは項目の数に関係なく適切な選択肢です。 これに対し、ラジオ ボタンまたはチェック ボックスは、少数のプログラム オプションにのみ適しています。
• ユーザーは、ビューの変更、グループ化、列による並べ替え、列の幅と順序の変更を行う必要がありますか? その場合は、代わりに リスト ビュー を使用します。
• コントロールはドラッグ ソースまたはドロップ ターゲットである必要がありますか? その場合は、代わりにリスト ビューを使用します。
• リスト アイテムをクリップボードにコピーするか、クリップボードから貼り付ける必要がありますか? その場合は、代わりにリスト ビューを使用します。

単一選択リスト

• コントロールは、相互に排他的な値の一覧から 1 つのオプションを選択するために使用されますか? そうでない場合は、別のコントロールを使います。 複数のオプションを選択するには、標準の複数選択リスト、チェックボックス リスト、リスト ビルダー、またはリストの追加と削除を使用します。
• ほとんどの状況でほとんどのユーザーに推奨される既定のオプションはありますか? 選択したオプションが表示される方が、代替手段を見るよりもはるかに重要ですか? その場合は、代替手段を非表示にしてユーザーに変更を促したくない場合は、 ドロップダウン リスト の使用を検討してください。

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

• リストには一定の相互作用が必要ですか? その場合は、単一選択リストを使用して操作を簡略化します。

この例では、ユーザーは常に前景色と背景色を設定するために、[アイテムの表示] ボックスの一覧で選択した項目を変更しています。 この場合、ドロップダウン リストを使用するのは非常に面倒です。

• 設定は相対的な数量のように見えますか?ユーザーは 、変更の設定の効果に関するインスタント フィードバックの恩恵を受けますか? その場合は、代わりに スライダー を使用することを検討してください。
• リスト アイテム間に重要な階層関係はありますか? その場合は、 代わりにツリー ビュー コントロールを使用します。
• 画面領域はプレミアムですか? その場合は、代わりにドロップダウン リストを使用します。使用される画面領域は固定であり、リストアイテムの数に依存しないためです。

標準の複数選択リストとチェック ボックス リスト

• 複数選択はタスクに不可欠ですか、または一般的に使用されますか? その場合は、特にターゲット ユーザーが高度でない場合は、チェック ボックス リストを使用して複数の選択を明確にします。 多くのユーザーは、標準の複数選択リストが複数の選択をサポートしていることを認識しません。 チェック ボックスが複数の選択に注意を引きすぎたり、画面が乱雑になりすぎたりする場合は、標準の複数選択リストを使用します。
• 複数選択の安定性は重要ですか? その場合は、クリックすると一度に 1 つのアイテムのみが変更されるため、チェック ボックス リスト、リスト ビルダー、またはリストの追加と削除を使用します。 標準の複数選択リストを使用すると、誤ってすべての選択をクリアすることは非常に簡単です。
• コントロールは、値のリストから 0 個以上の項目を選択するために使用されますか? そうでない場合は、別のコントロールを使います。 1 つの項目を選択する場合は、代わりに単一選択リストを使用します。

プレビュー リスト

• オプションは、テキストだけで選択するよりも画像で選択する方が簡単ですか? その場合は、プレビュー リストを使用します。

リスト ビルダーとリストの追加と削除

• コントロールは、値のリストから 0 個以上の項目を選択するために使用されますか? そうでない場合は、別のコントロールを使います。 1 つの項目を選択する場合は、代わりに単一選択リストを使用します。
• 選択したアイテムの順序は重要ですか? その場合、リスト ビルダーとリストの追加/削除パターンは順序をサポートしますが、他の複数選択パターンではサポートされません。
• ユーザーが選択したすべての項目の概要を表示することが重要ですか? その場合、リスト ビルダーとリストの追加/削除パターンには、選択したアイテムのみが表示されますが、他の複数選択パターンは表示されません。
• 可能な選択肢は制約されていませんか? その場合は、リストに現在存在しない値をユーザーが選択できるように、追加/削除リストを使用します。
• リストに値を追加するには、オブジェクトを選択するための特殊なダイアログ ボックスが必要ですか? その場合は、追加/削除リストを使用し、ユーザーが [追加] をクリックしたときにダイアログ ボックスを表示します。
• 画面領域はプレミアムですか? その場合は、オプションのセットが常に表示されるとは限らないため、代わりに追加/削除リストを使用してください。

リスト ボックスの場合、 リスト内の項目の数はコントロールを選択する要因になりません 。これは、数千の項目から単一選択リストの場合は 1 つまで拡大されるためです (複数選択リストの場合はなし)。 リスト ボックスはデータに使用できるため、アイテムの数が事前にわかっていない可能性があります。

メモ： リスト ボックスのように見えるコントロールがリスト ビューを使用して実装され、その逆も行われる場合があります。 このような場合は、実装ではなく、使用に基づいてガイドラインを適用します。

使用パターン

リスト ボックスには、いくつかの使用パターンがあります。

Label	値
単一選択リスト ユーザーが一度に 1 つの項目を選択できるようにします。	この例では、ユーザーは 1 つの表示項目のみを選択できます。
標準の複数選択リスト ユーザーが任意の数の項目 (なしを含む) を選択できるようにします。	標準の複数選択リストの外観は単一選択リストとまったく同じであるため、リスト ボックスが複数の選択をサポートするという視覚的な手掛かりはありません。 ユーザーはこの機能を検出する必要があるため、このリスト パターンは、複数の選択が必須ではなく、ほとんど使用されないタスクに最適です。 複数選択モードには、 複数 と 拡張の 2 つの異なるモードがあります。 拡張選択モード は、ドラッグまたは Shift + クリックと Ctrl + クリックで選択範囲を拡張して、隣接する値と隣接しない値のグループを選択する場合に、はるかに一般的です。 複数選択モードでは、Shift キーと Ctrl キーに関係なく、項目をクリックすると選択状態が切り替わります。 この異常な動作を考えると、複数選択モードは非推奨となり、代わりにボックス リストチェック使用する必要があります。 この例では、ユーザーは複数選択モードを使用して任意の数の項目を選択できます。
チェック ボックス の一覧標準の複数選択リスト ボックスと同様に、チェック ボックス リストを使用すると、ユーザーは何も含め、任意の数の項目を選択できます。	標準の複数選択リストとは異なり、チェックボックスは複数の選択が可能であることを明確に示しています。 このリスト パターンは、複数の選択が必須または一般的に使用されるタスクに使用します。 この例では、ユーザーは通常、複数の項目を選択して、チェック ボックス リストを使用します。 複数選択のこの明確な表示を考えると、標準の複数選択リストよりチェックボックス リストが望ましいと想定できます。 実際には、複数の選択を必要としたり、頻繁に使用したりするタスクはほとんどありません。このような場合にチェックボックス リストを使用すると、選択に注意が必要になります。 したがって、 標準の複数選択リストの方がはるかに一般的です。
プレビュー リスト 1 つまたは複数の選択範囲を指定できますが、テキストだけでなく、選択範囲の効果のプレビューが表示されます。	この例では、各オプションのプレビューでは、選択の効果が明確に示されています。これは、テキストのみを使用するよりも効果的です。
リスト ビルダー 一度に 1 つの項目を追加し、必要に応じてリストの順序を設定することで、ユーザーが選択肢のリストを作成できるようにします。	リスト ビルダーは、2 つの単一選択リストで構成されます。左側のリストは固定のオプション セットで、右側のリストは作成中のリストです。 リストの間には、次の 2 つのコマンド ボタンがあります。 現在選択されているオプションを作成中のリストに移動し、選択した項目の前に挿入する [追加] ボタン。 (オプション項目をダブルクリックすると、同じ効果が得られます。 [ 削除] ボタンをクリックすると、選択した項目がビルドされたリストから削除され、オプション リストに返されます。 (ビルドされたリスト内の項目をダブルクリックすると、同じ効果が得られます。組み込みリストには、リスト アイテムを並べ替えるために、必要に応じて [上へ移動 ] コマンドと [下へ移動 ] コマンドを使用できます。 この例では、リスト ビルダーを使用して、使用可能な一連のオプションから項目を選択し、その順序を設定することで、ツール バーを作成します。
リストの追加と削除 一度に 1 つ以上の項目を追加し、必要に応じてリストの順序 (リスト ビルダーなど) を設定することで、ユーザーが選択肢のリストを作成できるようにします。	リスト ビルダーとは異なり、[ 追加 ] をクリックすると、リストに追加する項目を選択するダイアログ ボックスが表示されます。 個別のダイアログ ボックスを使用すると、特殊なオブジェクト ピッカーや一般的なダイアログを使用できるアイテムを柔軟に選択できます。 リスト ビルダーと比較すると、このバリエーションはよりコンパクトですが、項目を追加するには少し多くの労力が必要です。 この例では、ユーザーはメニューのツールを追加または削除したり、順序を設定したりできます。 リスト ビルダーとリストの追加/削除パターンは、他の複数選択リストよりも大幅に重くなりますが、次の 2 つの固有の利点があります。 ユーザーは、リストの作成中と後の両方で、リストの順序を制御できます。 ユーザーは、選択した項目の概要を確認できます。これは、選択肢の数が多い場合に大きな利点になる可能性があります。 欠点は、より多くの画面領域が必要であり、最初から項目の大きなリストを作成するときに使用するのが難しい場合があることです。 そのため、短いリストを作成したり、既に存在するリストを変更したりするのに最適です。

ガイドライン

プレゼンテーション

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

正解:

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

不正解:

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

正解:

この例では、リスト アイテムはアルファベット順に並べ替えられているため、見つけやすくなります。 ただし、アイテム "すべての Windows 製品" は、並べ替え順序に関係なく、リストの先頭にあります。

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

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

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

不正解:

この例では、空白項目の意味が不明です。

正解:何

この例では、代わりに "(none)" メタオプションが使用されています。

相互作用

• ダブルクリック動作を指定することを検討してください。 ダブルクリックすると、項目を選択して既定のコマンドを実行するのと同じ効果が得られます。
• ダブルクリック動作を冗長にします。 常に、同じ効果を持つコマンド ボタンまたはコンテキスト メニュー コマンドが存在する必要があります。
• 選択したアイテムに対してユーザーが何もできない場合は、選択を許可しないでください。

正解:

このリスト ボックスには、変更の読み取り専用リストが表示されます。選択する必要はありません。

• リスト ボックスを無効にする場合は、関連付けられているラベルとコマンド ボタンも無効にします。
• リスト ボックスで選択した項目の変更を使用して、次の手順を実行しないでください。
  • コマンドを実行します。
  • 他のウィンドウ (ダイアログ ボックスなど) を表示して、より多くの入力を収集します。
  • 選択したコントロールに関連する他のコントロールを動的に表示します (スクリーン リーダーはこのようなイベントを検出できません)。 例外： 選択した項目の説明に使用される静的テキストを動的に変更できます。

受け入れ可能:

この例では、選択した項目を変更すると説明が変更されます。

• 水平スクロールは避けてください。 複数列のリストは水平スクロールに依存します。これは通常、垂直スクロールよりも使いにくいです。 水平方向のスクロールを必要とする複数列のリストは、アルファベット順に並べ替えられた項目が多数あり、ワイド コントロールに十分な画面領域がある場合に使用できます。

受け入れ可能:

この例では、横スクロールを必要とする複数の列が使用されます。これは、多くの項目があり、ワイド コントロールに十分な画面領域があるためです。

複数選択リスト

• 特にユーザーが複数の項目を選択する可能性がある場合は、選択した項目の数を一覧の下に表示することを検討してください。 この情報は有用なフィードバックを提供するだけでなく、リスト ボックスが複数の選択をサポートしていることを明確に示しています。

この例では、選択した項目の数が一覧の下に表示されます。

• 選択に必要なリソースなど、より意味のあるその他の選択メトリックを指定できます。

この例では、コンポーネントのインストールに必要なディスク領域は、選択した項目の数よりも意味があります。

• リスト アイテムが多数存在する可能性があり、そのすべてを選択またはクリアする可能性がある場合は、[すべて選択] ボタンと [すべてクリア] コマンド ボタンを追加します。
• 標準の複数選択リストでは、この選択モードは非推奨とされているため、複数選択モードを使用しないでください。 同等の動作の場合は、代わりに チェック ボックスリストを使用してください。

既定値

• 既定では、最も安全なオプション (データまたはシステム アクセスの損失を防ぐため) と最も安全なオプションを選択します。 安全性とセキュリティが要因ではない場合は、最も可能性の高いオプションまたは便利なオプションを選択します。

例外： コントロールが 混合状態のプロパティを表す場合は、項目を選択しないでください。これは、同じ設定を持たない複数のオブジェクトのプロパティを表示するときに発生します。

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

リスト ボックスに推奨されるサイズ設定と間隔。

• 最も長い有効なデータに適したリスト ボックスの幅を選択します。 標準のリスト ボックスは水平方向にスクロールできないため、ユーザーはコントロールに表示されている内容のみを表示できます。
• ローカライズされるテキスト (数字ではなく) に対して、さらに 30% (短いテキストの場合は最大 200%) を含めます。
• 項目の整数を表示するリスト ボックスの高さを選択します。 項目を垂直方向に切り捨てないようにします。
• 不要な垂直スクロールを排除するリスト ボックスの高さを選択します。 リスト ボックスは、スクロールせずに 3 ~ 20 個のアイテムを表示する必要があります。 これにより垂直スクロール バーが削除される場合は、リスト ボックスを少し長くすることを検討してください。 一度にさらに多くの項目を表示し、スクロール バーを配置しやすくすることで、スクロールを容易にするために、アイテムが多い可能性があるリストには、少なくとも 5 つの項目が表示されます。
• ユーザーがリスト ボックスを大きくするメリットがある場合は、リスト ボックスとその親ウィンドウのサイズを変更できるようにします。 これにより、ユーザーは必要に応じてリスト ボックスのサイズを調整できます。 ただし、サイズ変更可能なリスト ボックスには、3 つ以下の項目が表示されます。

ラベル

コントロール ラベル

• すべてのリスト ボックスにはラベルが必要です。 ラベルを文としてではなく、単語または語句として書き込みます。ラベルの末尾にコロンを使用します。

例外：ダイアログ ボックスのメイン命令の単なる修正である場合は、ラベルを省略します。 この場合、メイン命令はコロン (質問でない限り) とアクセス キーを受け取ります。

Acceptable:

この例では、リスト ボックスのラベルは、メイン命令を修正するだけです。

Better:

この例では、冗長ラベルが削除されるため、メイン命令はコロンとアクセス キーを受け取ります。

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

この例では、リスト ボックスはラジオ ボタンに従属し、そのラベルを共有します。

• 一意の アクセス キーを割り当てます。 ガイドラインについては、「 キーボード」を参照してください。
• 文形式の大文字を使用します。
• ラベルをコントロールの左側または上に配置し、ラベルをコントロールの左端に揃えます。
  • ラベルが左側にある場合は、ラベル テキストをコントロール内のテキストの最初の行に垂直方向に揃えます。

正解:)

これらの例では、上部のラベルはリスト ボックスの左端に揃え、左側のラベルはリスト ボックスのテキストと一致します。

不正解:左にトップスクリーンショット

これらの正しくない例では、上部のラベルがリスト ボックスのテキストに合わせられ、左側のラベルがリスト ボックスの上部に揃えられます。

• 複数選択リスト ボックスの場合は、複数選択が可能であることを明確に示すラベルを使用します。 チェック ボックスリストのラベルは、より明示的でなくすることができます。

正解:

この例では、ラベルは複数の選択が可能であることを明確に示しています。

不正解:

この例では、ラベルは複数選択に関する明確な情報を提供しません。

Best:

この例では、チェック ボックスは複数の選択が可能であることを明確に示しているため、ラベルを明示的にする必要はありません。

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

オプション テキスト

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

説明と補足テキスト

• リスト ボックスに関する説明テキストを追加する必要がある場合は、ラベルの上に追加します。 終了句読点で完全な文を使用します。
• 文形式の大文字を使用します。
• 役に立ちますが、必要ない追加情報は短くしておく必要があります。 このテキストは、ラベルとコロンの間にかっこで囲むか、コントロールの下にかっこなしで配置します。

この例では、補足テキストを一覧の下に配置します。

ドキュメント

リスト ボックスを参照する場合:

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

例: [移動先] ボックス の 一覧で [ブックマーク] を選択 します。