チェック ボックス
Note
この設計ガイドは Windows 7 用に作成されており、新しいバージョンの Windows では更新されていません。 ガイダンスの多くは原則として適用されますが、プレゼンテーションと例には 現在の設計ガイダンスは反映されていません。
チェック ボックスを使用すると、ユーザーは明確に反対の 2 つの選択肢の間で決定を下します。 チェック ボックスラベルは選択された状態を示しますが、クリアされた状態の意味は、選択した状態の明確な反対である必要があります。 したがって、チェック ボックスは、オプションのオンとオフの切り替え、または項目の選択または選択解除を行う場合にのみ使用する必要があります。
チェック ボックスの一般的なグループ。
Note
レイアウトに関連するガイドラインについては、別の記事で説明します。
これは適切なコントロールですか?
それを判断するには、以下の質問を考えます。
チェック ボックスは、オプションのオンとオフを切り替えたり、項目を選択または選択解除したりするために使用されますか? そうでない場合は、別のコントロールを使います。
選択された状態とクリアされた状態は明確で明確な反対ですか? そうでない場合は、 ラジオ ボタン または ドロップダウン リスト を使用して、状態に個別にラベルを付けることができます。
グループで使用する場合、グループは独立した選択肢で構成され、どのユーザーから 0 個以上を選択できますか? そうでない場合は、ラジオ ボタンやチェック ボックス ツリー ビューなど、依存する選択肢のコントロールを検討してください。
グループで使用する場合、グループは依存する選択肢で構成され、どのユーザーから 1 つ以上を選択する必要がありますか? その場合は、チェック ボックスのグループを使用し、オプションが選択されていない場合にエラーを処理します。
グループ内のオプションの数は 10 個以下ですか? 使用される画面領域はオプションの数に比例するため、チェックボックスの数は 10 以下のままにします。 10 個を超えるオプションの場合は、チェック ボックスリストを使用します。
ラジオ ボタンの方が適していますか? チェックボックスは、オプションのオンとオフの切り替えにのみ適している場合は、ラジオ ボタンを使用して完全に異なるオプションを使用できます。 両方のソリューションが可能な場合:
クリアされたチェックボックスの意味が完全に明らかでない場合は、ラジオ ボタンを使用します。
正しくない:
この例では、[横] からの反対の選択肢は明確ではないので、[チェック] ボックスは適していません。
正確:
この例では、選択肢は反対ではありません。そのため、ラジオ ボタンの方が適しています。
ウィザード ページのラジオ ボタンを使用して、チェック ボックスが許容される場合でも、代替手段を明確にします。
十分な画面領域があり、その画面領域を十分に使用するのに十分なオプションが重要な場合は、ラジオ ボタンを使用します。 それ以外の場合は、チェック ボックスまたはドロップダウン リストを使用します。
正しくない:
この例では、オプションはラジオ ボタンを使用するのに十分な重要ではありません。
正確:
この例では、チェック ボックスは、この周辺機器オプションの画面領域を効率的に使用します。
ウィンドウに他のチェック ボックスがある場合は、チェック ボックスを使用します。
このオプションでは、データではなくプログラム オプションが表示されますか? オプションの値は、コンテキストやその他のデータに基づくべきではありません。 データの場合は、チェック ボックスリストまたは複数選択リストを使用します。
使用パターン
チェック ボックスには、いくつかの使用パターンがあります。
| 使用法 | 例 |
|---|---|
|
個々の選択肢1 つのチェック ボックスを使用して、個々の選択肢を選択します。 |
1 つのチェック ボックスは、個々の選択に使用されます。 |
|
独立した選択肢 (0 個以上)チェック ボックスのグループは、0 個以上の選択肢のセットから選択するために使用されます。 |
ラジオ ボタンなどの単一選択コントロールとは異なり、ユーザーは、チェック ボックスのグループ内のオプションの任意の組み合わせを選択できます。
チェック ボックスのグループは、独立した選択肢に使用されます。 |
|
依存する選択肢 (1 つ以上)チェック ボックスのグループを使用して、1 つまたは複数の選択肢のセットから選択することもできます。 |
1 つ以上の依存する選択肢の選択を表す必要がある場合があります。 microsoft?windows にはこの種類の入力を直接サポートするコントロールがないため、最適な解決策は、チェック ボックスのグループを使用し、オプションが選択されていない場合にエラーを処理することです。
少なくとも 1 つのプロトコルを選択する必要があるチェック ボックスのグループが使用されます。 |
|
混合選択選択した状態とクリアされた状態に加えて、チェック ボックスには複数の選択が混在した状態があり、一部のオブジェクト (すべてではない) に対してオプションが設定されていることを示します。 |
混合状態のチェック ボックス。 |
ガイドライン
全般
関連するチェック ボックスをグループ化します。 必要に応じて複数のグループを使用して、関連するオプションを結合し、関連のないオプションを 10 以下のグループに分割します。
関連する独立したオプションのグループの例。
グループ ボックスを使用してチェック ボックスのグループを整理し直すと、多くの場合、不要な画面が乱雑になります。
関連度の高いオプションをグループ化したり、最も一般的なオプションを最初に配置したり、他の自然な進行に従ったりするなど、チェックボックスを論理的な順序で一覧表示します。 アルファベット順は言語に依存するため、ローカライズできないため、推奨されません。
ボックスチェック水平方向ではなく垂直方向に配置します。 水平方向の配置は読みにくいです。
正確:
この例では、チェック ボックスが正しく配置されています。
正しくない:
この例では、水平方向の配置は読みにくいです。
混合状態を使用して 3 番目の状態を表さないでください。 混合状態は、子オブジェクトの一部 (すべてではない) に対してオプションが設定されていることを示すために使用されます。 ユーザーは、混合状態を直接設定することはできませんが、混合状態は子オブジェクトのリフレクションです。 混合状態は、個々のアイテムの 3 番目の状態としては使用されません。 3 番目の状態を表すには、代わりにラジオ ボタンまたはドロップダウン リストを使用します。
正しくない:
この例では、混合状態は Theme サービスがインストールされていないことを示すことになっています。
正確:
この例では、ユーザーは 3 つの明確なオプションの一覧から選択できます。
[混合状態] チェックボックスをクリックすると、選択されているすべての状態、すべてクリアされた状態、および元の混合状態が切り替わります。 許可のためには、設定が複雑であるか、ユーザーに不明である可能性があるため、元の混合状態を復元できることが重要です。 それ以外の場合、自信を持って混合状態を復元する唯一の方法は、タスクを取り消してやり直す方法です。
進行状況インジケーターとしてチェック ボックスを使用しないでください。 代わりに 進行状況インジケーター コントロールを使用してください。
正しくない:
この例では、チェック ボックスが進行状況インジケーターとして正しく使用されていません。
正確:
一般的な進行状況バーの例。
正しい選択状態を使用して無効チェックボックスを表示します。 ユーザーは変更できませんが、無効チェックボックスは情報を伝達するため、結果と一致する必要があります。
正しくない:
この例では、オプションを無効にするとセクションが読み上げられないため、[このセクションを常に読み上げる] オプションをオフにする必要があります。
次の場合は、チェック ボックスの選択を使用しないでください。
- コマンドを実行します。
- 他のウィンドウ (ダイアログ ボックスなど) を表示して、より多くの入力を収集します。
- 選択したコントロールに関連する他のコントロールを動的に表示します (スクリーン リーダーはこのようなイベントを検出できません)。
この <アイテム> をもう一度表示しない
- 代わりの方法がない場合にのみ、ユーザーが定期的なダイアログ ボックスを表示しないようにするには、[この <アイテム> をもう一度表示しない] オプションを使用することを検討してください。 ユーザーが本当にダイアログを必要としているかどうかを事前に判断してみてください。表示する場合は常にダイアログを表示し、表示しない場合はダイアログを削除します。
その他のガイドラインと例については、「 ダイアログ ボックス」を参照してください。
下位コントロール
下位コントロールを、チェック ボックスとそのラベルの右側 (インデント、チェック ボックス ラベルでフラッシュ) します。 チェック ボックスのラベルをコロンで終了します。
この例では、チェック ボックスとその下位コントロールは、チェック ボックス ラベルとそのアクセス キーを共有します。
チェック ボックスのラベルを共有する場合は、依存する編集可能なテキスト ボックスとドロップダウン リストを有効のままにします。 ユーザーがボックスに何かを入力または貼り付けると、対応するオプションが自動的に選択されます。 これにより、操作が簡略化されます。
この例では、ヘッダーまたはフッターを入力すると、オプションが自動的に選択されます。
チェック ボックスをラジオ ボタンやその他のチェック ボックスと入れ子にする場合は、高レベル オプションが選択されるまで、これらの下位コントロールを無効にします。 これにより、下位コントロールの意味に関する混乱が回避されます。
タブ オーダーのチェック ボックスで連続するチェック ボックスに下位コントロールを作成します。
オプションを選択すると下位のチェック ボックスを選択することを意味する場合は、それらのチェック ボックスを明示的に選択して、リレーションシップを明確にします。
正しくない:
この例では、下位のチェック ボックスは選択されていません。
正確:
この例では、下位のチェック ボックスが選択され、選択したオプションとのリレーションシップがクリアされます。
代替手段で不要な複雑さが増す場合は、依存するチェック ボックスを使用します。 チェックボックスは独立したオプションである必要がある一方で、ラジオ ボタンなどの代替手段によって不要な複雑さが増す場合があります。
正確:
この例では、ラジオ ボタンの使用は正確ですが、不要な複雑さを生み出します。
より適切な例:
この例では、チェック ボックスの使用が簡単になり、ユーザーは複雑な関係ではなく目的のオプションを選択することに集中できます。
重要: このガイドラインは非常にまれな状況でのみ適用します。依存関係を表示すると、明確さを追加することなく、大幅な複雑さが増します。 前の例では、ユーザーが上付き文字と下付き文字の両方を選択しようとする可能性は低く、選択した場合は、排他的なオプションであることが簡単に理解できます。
既定値
- チェック ボックスがユーザー オプション用の場合は、既定で最も安全な状態 (データまたはシステム アクセスの損失を防ぐために) を設定します。安全性とセキュリティが要因でない場合は、最も可能性の高い値または便利な値を選択します。
推奨されるサイズ設定と間隔
チェック ボックスに推奨されるサイズ設定と間隔。
ラベル
チェック ボックス ラベル
すべてのチェック ボックスにラベルを付けます。
ラベルを語句または命令文として記述し、終了句読点を使用しません。
- 例外：チェック ボックス ラベルの後に下位コントロールにもラベルを付ける場合は、ラベルをコロンで終了します。
チェック ボックスの選択した状態を説明するようにラベルを書き込みます。
チェック ボックスのグループの場合は、平行フレージングを使用し、すべてのラベルで長さを同じに保つようにします。
チェック ボックスのグループの場合は、オプション間の違いにラベル テキストをフォーカスします。 すべてのオプションに同じ入門テキストがある場合は、そのテキストをグループ ラベルに移動します。
正のフレージングを使用します。 チェック ボックスを選択するとアクションを実行しないようにラベルをフレーズしないでください。
- 例外:この<項目>を再びチェックボックスに表示しないでください。
正しくない:
この例では、 オプションでは正のフレージングは使用されません。
ラベルを含むオプションのみを説明します。 メッセージやドキュメントでラベルを簡単に参照できるように、ラベルを簡潔に保ちます。 オプションでさらに説明が必要な場合は、完全な文と終了句読点を使用して 、静的テキスト コントロールで説明を指定します。
Note
グループ内の 1 つのチェック ボックスに説明を追加しても、グループ内のすべてのチェック ボックスに説明を入力する必要はありません。 可能であればラベルに関連情報を入力し、必要な場合にのみ説明を使用します。 一貫性のためにラベルを単に修正しないでください。
この例では、チェック ボックス ラベルの下に追加の説明テキストがあります。
オプションを強く推奨する場合は、ラベルに "(recommended)" を追加することを検討してください。 補足メモではなく、必ずコントロール ラベルにを追加してください。
複数行ラベルを使用する必要がある場合は、ラベルの上部を [チェック] ボックスに合わせます。
下位コントロール、それに含まれる値、またはその単位ラベルを使用して文やフレーズを作成しないでください。 文の構造は言語によって異なるため、このような設計はローカライズできません。
正しくない:
この例では、テキスト ボックスがチェック ボックス ラベル内に正しく配置されていません。
チェック ボックス グループ ラベル
グループ ラベルを使用して、選択方法ではなく、グループの目的を説明します。 ユーザーがチェック ボックスの使い方を知っているとします。 たとえば、"次のいずれかの選択肢を選択してください" と言ってはいけません。
各ラベルをコロンで終了します。
ラベルにアクセス キーを割り当てないでください。 そうする必要はありませんし、他のアクセス キーの割り当てを困難にします。
1 つ以上の依存する選択肢を選択する場合は、ラベルの要件について説明します。
正確:
この例では、ユーザーは 1 つの選択しかできないと考える場合があります。
より適切な例:
この例では、ユーザーが複数の選択を行うことができることは明らかです。
ドキュメント
チェックボックスを参照する場合:
大文字と小文字を含む正確なラベル テキストを使用しますが、アクセス キーのアンダースコアやコロンは含めないでください。 [チェック ボックス] という単語を含めます。
ボックスだけがローカライザーに対してあいまいであるため、チェック ボックスはオプション、チェックボックス、または単一ボックスではなく、チェック ボックスとして参照します。
ユーザーの操作について説明するには、select と clear を使用します。
可能な場合は、太字のテキストを使用してラベルの書式を設定します。 それ以外の場合は、混乱を防ぐために必要な場合にのみ、ラベルを引用符で囲みます。
例: [下線のチェック] ボックスを選択します。