リストビュー

[アーティクル]
07/25/2024

Note

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

リストビューを使用すると、ユーザーは、単一選択または複数選択を使用して、データオブジェクトのコレクションを表示および操作できます。

列ヘッダーを含むリストビューのスクリーンショット

標準的なリストビュー

リストビューは、リストボックスよりも柔軟性と機能性が高くなっています。リストボックスとは異なり、ビューの変更、グループ化、見出し付きの複数の列、列による並べ替え、列の幅と順序の変更、ドラッグ元またはドロップ先としての使用、クリップボードへのデータのコピー、クリップボードからのデータのコピーがサポートされています。

Note

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

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

リストビューは、より柔軟で機能的なリストボックスであるだけでなく、その追加機能によってさまざまな用途に使用できます。次の表に、比較を示しています。

使用方法	リストボックス	一覧ビュー
データの種類	データとプログラムの両方のオプション。	データのみ。
Contents	ラベルのみ。	ラベルと補助データ (場合によっては複数の列)。
操作	選択を行う場合に使用します。	選択を行う際に使用できますが、多くの場合、データの表示と操作に使用されます。ドラッグ元またはドロップ先として使用できます。
プレゼンテーション	固定。	ユーザーは、ビューの変更、グループ化、列による並べ替え、列の幅と順序の変更を行うことができます。

これが適切なコントロールであるかどうかを判断するには、次の質問を検討してください。

リストには、プログラムオプションではなくデータが表示されますか。 そうでない場合、代わりにリストボックスの使用を検討してください。
ユーザーは、ビューの変更、グループ化、列による並べ替え、列の幅と順序の変更を行う必要がありますか。 そうでない場合、代わりにリストボックスを使用してください。
コントロールはドラッグ元またはドロップ先にする必要はありますか。 その場合、リストビューを使用してください。
リスト項目をクリップボードにコピーするか、クリップボードから貼り付ける必要がありますか。 その場合、リストビューを使用してください。

チェックボックスのリストビュー

コントロールは、データの一覧から 0 個以上の項目を選択するために使用されますか。 1 つの項目を選択するには、代わりに単一選択を使用してください。
複数選択はタスクに不可欠であるか、よく使用されていますか。 その場合、チェックボックスリストビューを使用して、(特にターゲットユーザーが高度でない場合に) 複数選択を明確にします。そうでない場合、チェックボックスによって複数選択が目立ちすぎたり、画面が乱雑になりすぎたりするのであれば、標準の複数選択リストビューを使用します。
複数選択の安定性は重要ですか。 その場合は、クリックすると一度に 1 つの項目のみが変更されるため、チェックボックスリスト、リストビルダー、または追加/削除リストを使用します。標準の複数選択リストを使用すると、誤ってすべての選択をクリアしてしまいやすくなります。

Note

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

使用パターン

すべてのビューでは、ユーザーが一度に 1 つの項目のみを選択できる単一選択と、ユーザーが任意の数の項目 (0 個を含む) を選択できる複数選択がサポートされています。リストビューでは拡張選択モードがサポートされています。ドラッグするか、Shift キーまたは Ctrl キーを押しながらクリックして、連続した値または隣接しない値のグループを選択することで選択範囲を拡張できます。リストボックスとは異なり、Shift キーや Ctrl キーに関係なく、任意の項目をクリックすると選択状態が切り替わる複数選択モードはサポートされていません。

標準リストビュー

リストビューコントロールでは、次の 5 つの標準ビューがサポートされています。

使用方法	例
タイル各項目は中アイコンとして表示され、右側にラベルとオプションの詳細が表示されます。	タイルビューでは、右側にラベルとオプションの詳細が付いた中サイズのアイコンが表示されます。
大アイコン各項目は、その下にラベルが付いた特大、大、または中のアイコンとして表示されます。	大きいアイコンビューでは、各項目が大きいアイコンとして表示され、その下にラベルが付いています。
小アイコン各アイテムは、右側にラベルが付いた小さなアイコンとして表示されます。	小さいアイコンビューでは、各項目が小さいアイコンとして表示され、右側にラベルが表示されます。
一覧取得各アイテムは、右側にラベルが付いた小さなアイコンとして表示されます。	リストモードでは、このビューにおいて列内の項目が並べ替えられ、水平スクロールバーが使用されます。これに対し、アイコンビューでは項目が行単位で並べ替えられ、垂直スクロールバーが使用されます。リストモードでは、各項目が小さなアイコンとして表示され、右側にラベルが表示されます。
詳細各項目は、表形式で行として表示されます。左端の列には項目の省略可能なアイコンとラベルの両方が含まれており、後続の列には項目のプロパティなどの追加情報が含まれています。	さらに、列を追加または削除したり、並べ替えやサイズ変更を行ったりすることもできます。行をグループ化し、列で並べ替えることができます。詳細ビューには、各項目が表形式の行として表示されます。

リストビューのバリエーション

Label	Value
列の選択リストビューには非常に多くの列が含まれることがあるため、すべてを表示するのは実用的ではありません。この場合、最も有用な列を既定で表示し、ユーザーが必要に応じて列を追加または削除できるようにするのが最善のアプローチです。	列見出しを右クリックすると、ユーザーが列を追加または削除できるコンテキストメニューが表示されます。列ヘッダーのコンテキストメニューで [その他] をクリックすると、[列の選択] ダイアログボックスが表示され、ユーザーは列を追加または削除したり、並べ替えたりすることができます。
チェックボックスのリストビューユーザーが複数の項目を選択可能にします。	複数選択リストビューの外観は、単一選択リストビューとまったく同じであるため、複数選択がサポートされているという視覚的な手がかりはありません。チェックボックスリストビューを使用すると、複数選択が可能であることを明確に示すことができます。したがって、このパターンは、複数選択が必須であるかよくに使用されるタスクに使用する必要があります。この例では、タスクに複数選択が不可欠であるため、小さいアイコンビューではチェックボックスが使用されます。
グループのあるリストビューデータをグループにまとめます。	詳細ビューでは、多くの場合、任意の列によるデータの並べ替えがサポートされていますが、リストビューを使用すると、ユーザーは項目をグループに整理できます。グループ化の利点は次のとおりです。グループはすべてのビュー (リストを除く) で動作するため、たとえば、ユーザーはアルバムの非常に大きなアイコンビューをアーティスト別にグループ化することができます。グループは全体的なコレクションにすることができ、多くの場合、データを直接グループ化するよりもわかりやすくなります。たとえば、Windows エクスプローラーでは、日付が今日、昨日、先週、今年の初め、ずっと前にグループ化されます。この例では、Windows ウェルカムセンターのリストビューにグループ化された項目が表示されています。

ガイドライン

プレゼンテーション

リスト項目を論理的な順序で並べ替えます。 名前をアルファベット順、数値順に並べ替え、日付を時系列で並べ替えます。
必要に応じて、ユーザーが並べ替え順序を変更できるようにします。 リストに多数の項目がある場合、または既定以外の並べ替え順序を使用した方が項目をより効率的に見つけられるシナリオがある場合、ユーザーによる並べ替えは重要です。
コントロールにフォーカスがない場合でも、ユーザーが選択されている項目を簡単に判断できるよう、"常に選択項目を表示" 属性を使用します。
空のリストビューは表示しないでください。 ユーザーがリストを作成する場合、ユーザーが必要とする可能性がある手順または項目の例を使用してリストを初期化します。

この例では、最初に検索リストビューに指示が表示されます。
ユーザーがビューを変更したり、グループ化したり、列で並べ替えたり、列とその幅や順序を変更したりできる場合は、それらの設定を永続化して、次回リストビューが表示されたときに有効になるようにします。リストビューごと、ユーザーごとに永続化します。

相互作用

ユーザーが指しているリスト項目を選択するには、シングルクリックを使用します。例外: コマンドリンクリストパターンの場合、シングルクリックで項目が選択され、ウィンドウが閉じられるか、次のページに移動します。
ダブルクリック動作を指定することを検討してください。 ダブルクリックすると、項目を選択してその既定のコマンドを実行するのと同じ効果が得られなければなりません。
ダブルクリック動作を冗長にしてください。 同じ効果を持つコマンドボタンまたはコンテキストメニューコマンドが常に存在していなければなりません。
リスト項目にさらに説明が必要な場合、情報ヒントで説明を提供します。完全な文と終了句読点を使用します。

この例では、情報ヒントを使用して詳細情報を提供します。
関連するコマンドのコンテキストメニューを提供します。 このようなコマンドには、切り取り、コピー、貼り付け、削除、削除、名前の変更、プロパティが含まれます。
ユーザーが並べ替え順序とグループ化を変更できる場合、[並べ替え] と [グループ化] コンテキストメニューを指定します。 列名を最初にクリックすると、その列のリストが昇順で並べ替えまたはグループ化され、2 回目のクリックでは降順で並べ替えまたはグループ化されます。前の順序 (別の列から) をセカンダリキーとして使用します。

この例では、[並べ替え] コンテキストメニューによって並べ替え順序が変更されます。 [名前] を 1 回クリックすると、名前が昇順で並べ替えられます。 [名前] をもう一度クリックすると、名前が降順で並べ替えられます。
キーボードを使用してリストビューの列ヘッダーにアクセスできるようにします。
- 開発者: 列ヘッダーコントロールにフォーカスを設定することにより、これを行うことができます。この機能は、Windows Vista の新機能です。
リストビューを無効にする場合、関連付けられているラベルとコマンドボタンも無効にします。
水平スクロールを避けてください。 リストモードでは、水平スクロールが使用されます。通常、このモードは最もコンパクトですが、水平スクロールは通常、垂直スクロールよりも使いにくくなります。コンパクトさが重要でない場合、小さいアイコンビューを代わりに使用することを検討してください。ただし、アルファベット順に並べられた項目が多く、幅広いコントロールを表示するのに十分な画面スペースがある場合は、リストモードが適しています。

許容可能:

この例では、項目が多く、幅の広いコントロールに十分な画面スペースがあるため、リストモードが使用されています。

複数選択リスト

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

この例では、選択した項目の数が一覧の下に表示されています。
あるいは、選択された項目の数の代わりに、選択に必要なリソースなど、より意味のある他の選択メトリックを指定することもできます。

この例では、選択したコンポーネントの数よりも、コンポーネントをインストールするために必要なディスク容量の方が重要です。
チェックボックスリストビューでは、項目が多数存在する可能性があり、そのすべてを選択またはクリアする可能性が高い場合は、[すべて選択] および [すべてクリア] コマンドボタンを追加します。
コンテナー内の項目の部分的な選択を示すには、混合状態のチェックボックスを使用します。 混合状態は、個々の項目の 3 番目の状態としては使用されません。

ビューの変更

ユーザーがビューを変更できる場合:

最も便利なビューを既定で選択します。 ユーザーが行った変更は、リストビューごと、ユーザーごとに永続的に保存される必要があります。
分割ボタン、メニューボタン、またはドロップダウンリストを使用してビューを変更します。 可能な場合は常に、ツールバーの分割ボタンを使用し、現在のビューを反映するようボタンのラベルを変更します。

この例では、ツールバーの分割ボタンを使用してビューを変更します。
[表示] コンテキストメニューを指定します。

この例では、[表示] コンテキストメニューを使用してビューを変更します。

詳細ビュー

タイルビューを使用して読みやすくすることを検討してください。

許容可能:

この例では、データが多すぎ、ウィンドウ、リスト、列が小さすぎるため、リスト項目が読みにくくなっています。

良い:

この例では、タイルビューに切り捨てなしでデータが表示されています。
最も長いデータに適した既定の列幅を選択します。 リストビューでは、長いデータが省略記号付きで自動的に切り捨てられるため、既定で表示される省略記号が少ない場合は列の幅が適切になります。ユーザーが列のサイズを変更できるが、他のソリューションを希望する場合:
- 各列の幅をデータに合わせてサイズ変更します。
- コントロールの幅を、列に加えてスクロールバーに合わせてサイズを変更します。
- 必要に応じて、水平スクロールを使用します。
- データの切り捨ては、奇数サイズの項目の場合、または最後の手段としてのみ行います。
通常サイズのデータを既定で切り捨てる必要がある場合、ウィンドウとリストビューをサイズ変更可能にします。ローカライズされるテキスト (数字は除く) には、さらに 30 パーセント (短いテキストの場合は最大 200 パーセント) を追加します。

誤った例:

この例では、ほとんどのデータが切り捨てられています。多くの省略記号は、コントロールと列の幅がデータに対して小さすぎることを明確に示しています。

誤った例:

この例では、データは理由なく切り捨てられています。
適切な既定の列の順序を選択してください。 通常、次のように列を並べ替えます。
- まず、項目名または識別データです。
- 次に、リスト項目を区別するのに役立つその他のデータです。
- 次に、最も有用な (できれば短いまたは固定長の) データです。
- 次に、有用性が低い (短いか固定長が望ましい) データです。
- 最後に、長い可変長データです。
長い可変長データは、水平スクロールの必要性を減らすため、最後の列に配置されます。これらのカテゴリ内で、関連情報を論理的な順序でまとめて配置します。
必要に応じて、ユーザーに列の追加と削除を許可し、順序を変更可能にします。 最も役に立つ列を既定で表示します。これは、ヘッダードラッグドロップ属性を使用して実現されます。
データに適した配置を選択します。次のルールを使用します。
- 数値、通貨、時刻を右揃えにします。
- テキスト、ID (数値の場合でも)、日付を左揃えにします。
並べ替え可能な列見出しの場合、見出しを最初にクリックすると、列のリストが昇順で並べ替えられ、2 回目のクリックで降順で並べ替えられます。以前の並べ替え順序 (別の列から) を 2 番目の並べ替えキーとして使用します。

この例では、最初に [名前] 列をクリックし、[種類] 列をクリックしました。その結果、昇順の "種類"がプライマリ並べ替えキーとなり、昇順の "名前" がセカンダリ並べ替えキーとなります。
ユーザーがすべての列で選択された項目を簡単に判断できるよう、全行選択属性を使用します。
データを並べ替えることができない場合、並べ替え可能な列ヘッダーを使用しないでください。
列が 1 つだけで、並べ替えを逆にする必要がない場合、列ヘッダーを使用しないでください。 代わりにラベルを使用してデータを識別します。

誤った例:

正しい例:

正しい例では、列ヘッダーの代わりにラベルが使用されています。

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

リストのサイズ設定と間隔のスクリーンショット

リストビューの推奨サイズと間隔。

項目の整数を表示するリストビューの高さを選択します。 項目を垂直方向に切り捨てないでください。
サポートされているすべてのビューで不要な垂直スクロールと水平スクロールを表示されなくするリストビューサイズを選択します。 リストビューには、3 ～ 20 個の項目が表示されます。スクロールバーが表示されなくなる場合、リストビューを少し大きくすることを検討してください。多数の項目が含まれる可能性のあるリストでは、一度に表示される項目を増やしてスクロールバーを配置しやすくすることでスクロールを容易にするため、少なくとも 5 つの項目を表示する必要があります。
ユーザーがリストビューを大きくするメリットがある場合、リストビューとその親ウィンドウのサイズを変更できるようにします。 これにより、ユーザーは必要に応じてリストビューのサイズを調整できます。ただし、サイズ変更可能なリストビューには、3 つ以上の項目が表示されます。

Labels

コントロールラベル

すべてのリストビューにはラベルが必要です。ラベルは、文としてではなく、静的テキストを使用してコロンで終わる単語またはフレーズとして書き込みます。
ラベルごとに一意のアクセスキーを割り当てます。ガイドラインについては、「キーボード」をご覧ください。
文スタイルの大文字を使用します。
ラベルをコントロールの上に配置し、ラベルをコントロールの左端に揃えます。
複数選択リストビューの場合、複数選択が可能であることを明確に示すラベルを記述します。チェックボックスのリストビューのラベルは、それほど明確でない場合があります。

正しい例:

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

誤った例:

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

許容可能:

この例では、チェックボックスによって複数選択が可能であることが明確に示されているため、ラベルを明示的にする必要はありません。
ラベルの後に、単位 (秒、接続など) をかっこで囲んで指定できます。

見出しラベル

見出しラベルは簡潔にします (3 語以下)。
単一の名詞または名詞フレーズを使用し、句読点は使用しないでください。
文スタイルの大文字を使用します。
見出しは、データと同じ方法で配置します。

グループラベル

全体的なコレクションには、次のグループラベルを使用します。
- 名前: 名前または文字範囲の最初の文字を使用します。
- サイズ: 指定なし、0 KB、0 ～ 10 KB、10 ～ 100 KB、100 KB ～ 1 MB、1 ～ 16 MB、16 ～ 128 MB
- 日付: 今日、昨日、先週、今年の初め、ずっと前。
それ以外の場合、グループラベルでは、大文字と小文字、句読点など、グループ化されるデータの正確なテキストが使用されます。

データテキスト

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

指示テキスト

リストビューに関する説明テキストを追加する必要がある場合、ラベルの上に追加します。末尾に句読点を付けた完全な文を使用します。
文スタイルの大文字を使用します。
役に立つが不要な追加情報は、短くする必要があります。この情報は、ラベルとコロンの間にかっこで囲むか、コントロールの下にかっこを付けずに配置します。

ドキュメント

リストビューを参照する場合:

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

例: [プログラムとサービス] の一覧で、[ファイルとプリンターの共有] を選択します。

リストビューでチェックボックスを参照する場合:

大文字/小文字を含む正確なラベルテキストを使用し、単語のチェックボックスを含めます。アクセスキーの下線は含めないでください。
ユーザーの操作について説明するには、選択とクリアを使用します。
可能な場合は、太字のテキストを使用してラベルを書式設定してください。それ以外の場合、混乱を防ぐため、必要な場合にのみラベルを引用符で囲みます。

例: [下線] チェックボックスをオンにします。

次の方法で共有

リストビュー