チェック ボックス

適切なコントロールかどうかの判断基準
使用パターン
ガイドライン
   全般
   今後、この <アイテム> を表示しない
   従属コントロール
   既定値
推奨されるサイズと間隔
ラベル
ドキュメント

"チェック ボックス" を使うと、ユーザーは正反対の 2 つの選択肢のうちどちらかを選ぶことができます。チェック ボックスのラベルは、チェック ボックスをオンにした場合の状態を表します。一方、オンになっているときと正反対の状態が、オフで表されます。したがって、チェック ボックスは、オプションのオンとオフを切り替える場合、またはあるアイテムを選択するかどうかを選ぶ場合にのみ使用する必要があります。

4 つあるチェック ボックスの 1 つがオンになったスクリーン ショット

典型的なチェック ボックスのグループ

注: レイアウトに関するガイドラインは、別の項目として記載しています。

適切なコントロールかどうかの判断基準

以下の点に基づいて判断します。

  • チェック ボックスが、オプションのオンとオフの切り替え、またはあるアイテムの選択/選択解除に使用されるかどうか。該当しない場合は、別のコントロールを使用します。
  • オンにしたときの状態とオフにしたときの状態が正反対で、意味があいまいではないかどうか。該当しない場合は、ラジオ ボタンまたはドロップダウン リストを使って、それぞれの状態ごとにラベル付けできます。
  • グループ化して使用する場合、グループが独立型選択肢で構成され、ユーザーが 1 つも選択しないことも、1 つ以上選択することも可能であるかどうか。該当しない場合は、ラジオ ボタンやチェック ボックスのツリー ビューなど、依存型選択肢向けのコントロールを検討します。
  • グループ化して使用する場合、グループが依存型選択肢で構成され、ユーザーが 1 つ以上選択する必要があるかどうか。該当する場合は、チェック ボックスのグループを使用し、オプションが何も選択されていない場合にエラーとして処理されるようにします。
  • グループ内のオプションの数が 10 項目以下であるかどうか。使用する画面領域はオプションの数に比例するので、チェック ボックスの数は 10 個以下になるようにします。オプションが 10 項目を超える場合はチェック ボックス リストを使用します。
  • ラジオ ボタンの方が適していないか。チェック ボックスが適しているのは、オプションのオン/オフを切り替える場合のみです。性質の異なる複数のオプションの中から選ぶ場合は、ラジオ ボタンを使用できます。チェック ボックスとラジオ ボタンの両方が考えられる場合は、以下に従います。
    • チェック ボックスがオフになっていることによって示される意味がはっきりしない場合は、ラジオ ボタンを使用します。

      間違った例:
      [Landscape] (横長) というラベルが付いたチェック ボックスのスクリーン ショット

      この例では、[Landscape] (横長) の反対の選択肢が明確ではないので、チェック ボックスは適しません。

      正しい例:
      2 つのラジオ ボタンのスクリーン ショット

      この例では、選択肢が相反するものではないため、ラジオ ボタンの方が適しています。

    • 通常はチェック ボックスを使ってもかまわないような場合でも、可能な選択肢をはっきりと示すために、ウィザード ページではラジオ ボタンを使います。
    • 十分な画面領域を確保でき、画面領域を多く使用するだけの重要性を持つオプションであれば、ラジオ ボタンを使用します。それ以外の場合は、チェック ボックスまたはドロップダウン リストを使用します。

      間違った例:
      "表示する"/"表示しない" ラジオ ボタンのスクリーン ショット

      この例のオプションは、ラジオ ボタンを使うほど重要ではありません。

      正しい例:
      "メッセージを表示しない" チェック ボックスのスクリーン ショット

      この例のオプションは、それほど重要ではないので、チェック ボックスを使用すると画面領域を節約できます。

    • ウィンドウ上に他にもチェック ボックスがある場合は、チェック ボックスを使用します。
  • オプションの内容がデータではないプログラム オプションかどうか。オプションの値は、コンテキストや他のデータに基づかない値である必要があります。データの場合は、チェック ボックス リストまたは複数選択リストを使用します。

使用パターン

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

単独の選択
単独の選択には、単独のチェック ボックスを使用します。                                 

"通知する" というラベルが付いたチェック ボックスのスクリーン ショット

単独の選択には、単独のチェック ボックスを使用します。

独立型選択肢 (選択しない、または 1 項目以上の選択が可能)
何も選択しない、または 1 件以上を選択できるようにする場合は、チェック ボックスのグループを使用します。

ラジオ ボタンなどの択一のコントロールとは異なり、ユーザーはチェック ボックスのグループの中から、各オプションを好きに組み合わせて選択できます。

3 つあるチェック ボックスの 2 つがオンになったスクリーン ショット

独立型選択肢の場合は、チェック ボックスのグループを使用します。

依存型選択肢 (1 件以上の選択が必要)
1 件以上を選択する場合も、チェック ボックスのグループを使用できます。

依存型選択肢を 1 項目以上選択するよう示しておくことが必要な場合があります。Microsoft® Windows® にはこのような入力を直接サポートするコントロールがないため、チェック ボックスのグループを使用して、オプションがまったく選択されていない場合にはエラーとして処理するのが最も良い方法です。

2 つあるチェック ボックスの 1 つがオンになったスクリーン ショット

チェック ボックスのグループが使用されています。ここではプロトコルを少なくとも 1 つ選択する必要があります。

選択の混在
チェック ボックスにはオン/オフの状態のほか、選択項目が複数ある場合に使用される混在状態もあります。オブジェクトのすべてではなく、一部についてオプションが設定されていることを表します。

青色で塗りつぶされた [読み取り専用] チェック ボックスのスクリーン ショット

混在状態のチェック ボックス。

ガイドライン

全般

  • 関連するチェック ボックスをグループ化します。関連性のあるオプションをまとめ、関連性のないオプションを別にすることで、10 個以下のオプションを含むグループにし、必要に応じて複数のグループを使用します。

    関連性のあるチェック ボックスと関連性のないチェック ボックスのスクリーン ショット

    互いに関連する独立したオプションのグループの例。

  • チェック ボックスのグループをグループ ボックスを使って整理することを再検討します。これは画面上に不要な混乱を招きやすくなるので注意します。
  • チェック ボックスを論理的な順序で一覧にします。関連性が高いオプションをまとめてグループにする、最も一般的なオプションを先頭にするなど、自然な順序に従います。アルファベット順は言語に依存し、ローカライズ時に順序を再現できないのでお勧めしません。
  • チェック ボックスを並べる方向は、横ではなく縦にします。横方向に並べると読みにくくなります。

    正しい例:
    縦方向に並んだチェック ボックスのスクリーン ショット

    この例では、チェック ボックスが正しく並んでいます。

    間違った例:
    横方向に並んだチェック ボックスのスクリーン ショット

    この例では、横方向に並んでいるため読みにくくなっています。

  • 第 3 の状態を表す目的には、混在状態を使用しません。混在状態は、オプションが、子オブジェクトのすべてではなく、一部にだけ設定されていることを表すために使用します。混在状態は、ユーザーが自らこれを設定できるようにするのではなく、子オブジェクトの選択によって反映されるようにする必要があります。混在状態は、単独のアイテムの第 3 の状態としては使用しません。第 3 の状態を表すには、代わりにラジオ ボタンまたはドロップダウン リストを使います。

    間違った例:
    青色で塗りつぶされた [テーマ サービス] チェック ボックスのスクリーン ショット

    この例では、混在状態を使用して、テーマ サービスがインストールされていないことを示そうとしています。

    正しい例:
    3 つのオプションを含むドロップダウン リストのスクリーン ショット

    この例では、ユーザーは 3 つの明確なオプションから選択できます。

  • 混在状態のチェック ボックスをクリックすると、すべて選択、すべてクリア、元の混在状態が繰り返されるようにします。ユーザーにとって設定が複雑であったり、未知のものであったりする場合があるため、寛容性を確保する観点から、元の混在状態に戻せるようにしておくことが重要です。これが不可能な場合、確実に元の混在状態に戻すには、タスクを取り消して最初からやり直すしかありません。
  • チェック ボックスは、進行状況のインジケーターとして使用しません。代わりに、進行状況のインジケーターコントロールを使います。

    間違った例:
    進行状況を示す 4 つのチェック ボックスのスクリーン ショット

    これは、チェック ボックスを進行状況のインジケーターとして使った間違った例です。

    正しい例:
    途中まで進行している進行状況バーのスクリーン ショット

    典型的な進行状況バーの例です。

  • 無効化されたチェック ボックスを正しい選択状態で表示します。無効化されたチェック ボックスの選択状態をユーザーが変更することはできませんが、無効化されたチェック ボックスは、実際の結果と合致する状態を示している必要があります。

    間違った例:
    2 つあるチェック ボックスの 1 つが薄く表示されたスクリーン ショット

    この例では、チェック ボックスが無効化されている場合に音声は読み上げられないため、[このセクションの内容を常に音声で読み上げます] チェック ボックスはオフになっている必要があります。

  • チェック ボックスによる選択は、以下の目的には使用しません
    • コマンドの実行。
    • 追加の情報入力を行うためのダイアログ ボックスなど、他のウィンドウの表示。
    • 選択されているコントロールに関連する、他のコントロールの動的な表示 (このようなイベントは、スクリーン リーダーで検出できません)。

今後、この <アイテム> を表示しない

  • "今後、この <アイテム> を表示しない" というオプションの使用を検討します。これにより、ユーザーは同じダイアログ ボックスを繰り返し表示しないように指定できます。ただし、これは他に良い手段がない場合に限ります。まずは、そのダイアログがユーザーにとって本当に必要かどうかを判断します。ユーザーにとって本当に必要なダイアログであれば常に表示し、そうでなければそのダイアログを省きます。

ガイドラインの詳細と例については、「ダイアログ ボックス」を参照してください。

従属コントロール

  • 従属コントロールは、チェック ボックスおよびそのラベルの右側または下方に配置します。下方に配置する際は、インデントしてチェック ボックスのラベルに揃えます。チェック ボックスのラベルの末尾には、コロンを付けます。

    チェック ボックス ラベルの下にあるテキスト ボックスのスクリーン ショット

    この例では、チェック ボックスおよびその従属コントロールは、ラジオ ボタンのラベルおよびそのアクセス キーを共有しています。

  • 従属している編集可能なテキスト ボックスおよびドロップダウン リストがチェック ボックスのラベルを共有している場合は、それらのボックスを有効なままにしておきます。ユーザーがボックスに入力したり何かを貼り付けたりしたときに、対応するオプションが自動的に選択されるようにし、対話操作を単純化します。

    [ヘッダーとフッター] テキスト ボックスのスクリーン ショット

    この例では、ヘッダーやフッターを入力すると、オプションが自動的に選択されます。

  • チェック ボックスを、ラジオ ボタンまたは他のチェック ボックスと入れ子にする場合、上位レベルのオプションが選択されるまで、従属コントロールを無効にしておきます。こうすることで、従属コントロールの意図に関する混乱を回避できます。
  • チェック ボックスとその従属コントロールは、タブ オーダーで隣接させます。
  • オプションを選択すると従属チェック ボックスがオンになることを示す場合は、関係を明確にするために、これらのチェック ボックスを明示的にオンにします。

    間違った例:
    スクリーン ショット: 選択されたボタンとオフになったチェック ボックス

    この例では、従属チェック ボックスがオンになっていません。

    正しい例:
    スクリーン ショット: 選択されたボタンとオンになったチェック ボックス

    この例では、従属チェック ボックスがオンになっているので、選択したオプションとの関係が明確になっています。

  • 他の方法ではかえって複雑になる場合は、依存型チェック ボックスを使用します。チェック ボックスは独立型のオプションに使用することが推奨されますが、ラジオ ボタンなど他の方法を用いるとかえって複雑になることがあります。

    正しい例:
    ボタンとチェック ボックスが使用され紛らわしいスクリーン ショット

    この例では、ラジオ ボタンが正しく使用されていますが、不必要に複雑になっています。

    より良い例:
    チェック ボックスのみのスクリーン ショット

    この例では、チェック ボックスが使用されてシンプルになっているので、ユーザーはオプション間の複雑な関係に惑わされることなく、目的のオプションの選択に集中できます。

    重要: このガイドラインを適用できる状況は、きわめて限られています。依存関係を示すことが明確さの助けにはならず、かえってひどく複雑にすることになる場合にのみ適用します。上記の例では、ユーザーが上付きと下付きを同時に選択しようとすることはあまりなく、仮にこれを行おうとしても、2 つのオプションが排他的なものであることは容易にわかります。

既定値

  • ユーザー オプションのチェック ボックスでは、最も安全 (データの消失やシステム アクセスが失われることを防ぐため) で、最もセキュリティの高い、プライベートな状態を既定に設定します。安全性およびセキュリティを判断要素として考える必要がない場合は、最もよく使用される値または最も便利な値を選択します。

推奨されるサイズと間隔

チェック ボックスの推奨サイズと間隔を示す図

チェック ボックスに推奨されるサイズと間隔

ラベル

チェック ボックスのラベル

  • すべてのチェック ボックスにラベルを付けます。
  • 各ラベルに、一意なアクセス キーを割り当てます。ガイドラインについては、「キーボード」を参照してください。
  • センテンス スタイルの大文字化を使用します。
  • ラベルには語句または "...する" などの言い切りの文を使用し、末尾に句読点は付けません。
    • 例外: チェック ボックスのラベルが従属コントロールのラベルでもあり、ラベルの後ろに従属コントロールが続く場合は、ラベルの末尾にコロンを使用します。
  • ラベルはそのチェック ボックスがオンのときの状態を説明するものにします。
  • チェック ボックスのグループでは、同じ文法構造の表現を使用し、すべてのラベルの長さがおおよそ同じになるようにします。
  • チェック ボックスのグループでは、オプション間の違いがわかるラベル テキストにします。すべてのオプションが同じテキストで始まっている場合は、そのテキストをグループ ラベルに移動します。
  • 肯定的な表現を使用します。アクションが実行されないなどの否定的な意味を持つ言い回しはラベルに使用しません。
    • 例外: [今後、この <アイテム> を表示しない] チェック ボックス。

    間違った例:
    "無効にする" という否定的なラベルのスクリーン ショット

    この例のオプションでは、肯定的な表現が用いられていません。

  • ラベルではオプションのみを説明します。ラベルを簡潔にすることで、メッセージおよびドキュメントで言及することが容易になります。オプションに詳細な説明が必要な場合は、句点を付けた完全な文として静的テキスト コントロール内で説明します。

    注: 1 つのチェック ボックスに説明を追加したからといって、すべてのチェック ボックスに説明を追加する必要はありません。関連情報は可能な限りラベルで提供し、必要がある場合にのみ説明を追加します。ラベルの言い回しを変えただけの説明は、一貫性を保つためであっても追加しないでください。

    チェック ボックス、ラベル、および説明のスクリーン ショット

    この例では、チェック ボックスのラベルの下に説明テキストが追加されています。

  • 強く推奨されるオプションに対しては、ラベルに "(推奨)" を追加することを検討します。補足的なメモに対してではなく、コントロール ラベルに追加するようにします。
  • 複数行にまたがるラベルを使用する必要がある場合は、ラベルの先頭をチェック ボックスと揃えます。
  • 従属コントロール、それに含まれる値、または単位のラベルを、文や句の中に挿入しないでください。文の構造は言語ごとに異なるので、このように設計するとローカライズできなくなります。

    間違った例:
    ラベルにテキスト ボックスを含むチェック ボックスのスクリーン ショット

    この例では、チェック ボックスのラベル内にテキスト ボックスが配置されているので不適切です。

チェック ボックス グループのラベル

  • グループ ラベルは、グループの目的を説明するために使用します。選択方法を説明するためには用いません。ユーザーがチェック ボックスの使い方を知っていることを前提としてください。たとえば、"次の選択肢から選択してください" のようなラベルは付けません。
  • それぞれのラベルの末尾にコロンを付けます。
  • ラベルにはアクセス キーを割り当てません。ラベルにアクセス キーは不要であり、割り当てると他のアクセス キーの割り当てが困難になります。
  • 依存型選択肢を 1 つ以上選択する場合は、ラベルで条件を説明します。

    正しい例:
    2 つのコントロールに付けられた "プロトコル" というラベルのスクリーン ショット

    この例では、1 つしか選択できないという印象をユーザーに与えることがあります。

    より良い例:
    "プロトコル (1つ以上を選択)" というラベルのスクリーン ショット

    この例では、複数選択が可能であることがユーザーにはっきりと伝わります。

ドキュメント

チェック ボックスに言及するときは、以下のことに留意します。

  • 大文字と小文字の区別を含め、ラベルのテキストを正確に引用します。ただし、アクセス キーを示すかっこや下線付き文字、およびコロンは含めません。また、"チェック ボックス" という語を含めます。
  • チェック ボックスに言及する場合は、"チェック ボックス" と記述します。"オプション"、"チェックボックス" (スペースなし)、または単に "ボックス" とは記述しません。"ボックス" だけではローカライズ時にあいまいに受け取られます。
  • ユーザー操作を説明する場合は、"オンにする" と "オフにする" を使用します。
  • ラベルは半角の角かっこ ([ ]) で囲み、可能な場合は太字にします。

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

表示: