ラジオ ボタン

適切なコントロールかどうかの判断基準
ガイドライン
   全般
   従属コントロール
   既定値
推奨されるサイズと間隔
ラベル
ドキュメント

"ラジオ ボタン" を使用すると、ユーザーは相互に排他的な一連の関連オプションから選択できます。ユーザーが選択できるオプションは、いずれか 1 つのみです。ラジオ ボタンという名前は、ラジオのチャンネル プリセットのように機能することに由来します。

3 つのラジオ ボタンのスクリーン ショット

典型的なラジオ ボタンのグループ

ラジオ ボタンのグループは、単一のコントロールと同じ機能を果たします。Tab キーを使ってアクセスできるのは選択されている項目だけですが、ユーザーは方向キーを使用してグループ内を順に移動できます。

注: レイアウトおよびキーボード ナビゲーションに関するガイドラインは、別の項目として記載しています。

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

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

  • 相互に排他的な一連の選択肢から 1 つのオプションを選択するために使用するかどうか。該当しない場合は、別のコントロールを使用します。オプションを複数選択できる場合は、代わりにチェック ボックス複数選択リスト、またはチェック ボックス リストを使用します。
  • オプションの数が 2 個以上 7 個以下か。使用する画面領域はオプションの数に比例するので、グループ内のオプション数は 2 個以上 7 個以下になるようにします。8 個以上のオプションがある場合は、ドロップダウン リストまたは単一選択リストを使用します。
  • チェック ボックスの方が適していないか。オプションが 2 個のみの場合は、単一のチェック ボックスを使用することもできますが、チェック ボックスが適しているのは、単一オプションのオン/オフを切り替える場合のみです。オプションがまったく別の内容である場合は、ラジオ ボタンを使用できます。チェック ボックスとラジオ ボタンの両方が考えられる場合は、以下に従います。
    • チェック ボックスがオフになっていることによって示される意味がはっきりしない場合は、ラジオ ボタンを使用します。

      間違った例:
      [横長] チェック ボックスのスクリーン ショット

      正しい例:
      [横長]/[縦長] ラジオ ボタンのスクリーン ショット

      この正しい例では、2 つの選択肢が正反対の意味でないため、ラジオ ボタンが適切に使用されています。

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

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

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

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

      この例のオプションは、それほど重要ではないので、チェック ボックスを使うのが効率の良い画面領域の使い方です。

    • ページ上に他にもチェック ボックスがある場合は、チェック ボックスを使用します。
  • ドロップダウン リストの方が適していないか。ほとんどの状況下で大多数のユーザーに対して既定のオプションが推奨される場合、ラジオ ボタンを使用すると、各オプションが必要以上に注意を引いてしまうことがあります。
    • 各オプションを強調したくない場合、またはユーザーに変更を勧めない場合は、ドロップダウン リストの使用を検討します。ドロップダウン リストでは現在選択されているオプションに注意が向けられるのに対し、ラジオ ボタンではすべてのオプションが等しく強調されます。

      [最高品質] が既定のボタンに設定されたスクリーン ショット

      この例では、ドロップダウン リストで現在の選択に注意を集め、ユーザーが変更を行わないように促しています。

    • ページ上に他にもドロップダウン リストがある場合は、ドロップダウン リストの使用を検討します。
  • コマンド ボタンコマンド リンク、または分割ボタンの方が適していないか。コマンドの実行方法を決定する目的だけでラジオ ボタンが使用されているのであれば、多くの場合、代わりにコマンドのバリエーションを提供する方が良い結果になります。これらを使用すると、ユーザーは単一の操作で正しいコマンドを選択できます。
  • 選択対象がデータではなく、プログラム オプションかどうか。オプションの値は、コンテキストや他のデータに基づかない値である必要があります。データの場合は、ドロップダウン リストまたは単一選択リストを使用します。
  • コントロールをウィザード ページまたはコントロール パネルで使用する場合、そのコントロールがメイン指示テキストへの回答の形式を取り、ユーザーが後に変更できるものであるかどうか。該当する場合は、ラジオ ボタンの代わりにコマンド リンクを使用して対話操作を効率的にすることを検討します。
  • 値が数値以外かどうか。数値データの場合は、テキスト ボックスドロップダウン リスト、またはスライダーを使用します。

ガイドライン

全般

  • オプションを論理的な順序で一覧にします。選択される可能性が高いものから低いもの、処理が単純なものから複雑なもの、またはリスクが最も低いものから高いものなどの順で並べます。アルファベット順は言語に依存し、ローカライズ時に順序を再現できないのでお勧めしません。
  • いずれの選択肢も妥当でない場合、いずれも適用しないことを選択する別のオプションを追加します。これには、"なし"、"適用しない" などを使用します。
  • ラジオ ボタンは横ではなく縦に並べるようにします。横方向に並べると読みにくくなり、またローカライズもしにくくなります。

    正しい例:
    ラジオ ボタンが縦に並べて配置されているスクリーン ショット

    この例では、ラジオ ボタンが縦に並んでいます。

    間違った例:
    ラジオ ボタンが横に並べて配置されているスクリーン ショット

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

  • グループ ボックスを使ってラジオ ボタンを整理することが妥当か再検討します。この方法では、不必要に散漫な画面に見える場合があります。
  • ラジオ ボタンのラベルは、グループ ボックスのラベルとしては使用しません。
  • ラジオ ボタンによる選択は、以下の目的には使用しません。
    • コマンドの実行。
    • 追加の情報入力を行うためのダイアログ ボックスなど、他のウィンドウの表示。
    • 選択されているコントロールに関連する、他のコントロールの動的な表示/非表示 (このようなイベントは、スクリーン リーダーで検出できません)。ただし、選択に基づいてテキストを動的に変更することは可能です。

従属コントロール

  • 従属コントロールは、ラジオ ボタンおよびそのラベルの右側または下方に配置します。下方に配置する際は、インデントしてラジオ ボタンのラベルに揃えます。ラジオ ボタンのラベルの最後にコロンを使用します。

    コントロールがラベルの右側に配置されたスクリーン ショット

    この例では、ラジオ ボタンおよびその従属コントロールは、ラジオ ボタンのラベルおよびそのアクセス キーを共有しています。この場合、ラジオ ボタンから従属テキスト ボックスにフォーカスを移動するには、方向キーを使用します。

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

    テキスト ボックスを含む [ページ範囲] ダイアログ ボックスのスクリーン ショット

    この例では、ページ番号を入力すると自動的に [ページ] が選択されます。

  • ラジオ ボタンを、他のラジオ ボタンまたはチェック ボックスと入れ子にすることは避けます。可能であれば、すべてのオプションを同じレベルにします。

    正しい例:
    左揃えで配置されたラジオ ボタンのスクリーン ショット

    この例では、オプションが同じレベルにあります。

    間違った例:
    入れ子になったラジオ ボタンのスクリーン ショット

    この例では、オプションを入れ子にすることで不必要に複雑化されています。

  • ラジオ ボタンを、他のラジオ ボタンまたはチェック ボックスとどうしても入れ子にする必要がある場合は、上位レベルのオプションが選択されるまで、従属コントロールを無効にしておきます。こうすることで、ユーザーが従属コントロールの意図について理解しやすくなります。

既定値

  • ラジオ ボタンのグループは相互に排他的な一連の選択肢を表すので、常にいずれかのラジオ ボタンが既定で選択されているようにします。この際、最も安全 (データの消失やシステム アクセスが失われることを防ぐため) で、最もセキュリティの高い非公開のオプションを選択します。安全性およびセキュリティを判断要素として考える必要がない場合は、最もよく使用されるオプションまたは最も便利なオプションを選択します。
    例外: 以下の場合は既定の選択を行いません。
    • 安全性、セキュリティ、または法的な理由で、許容できる既定のオプションがない場合は、ユーザーが明示的に選択する必要があります。ユーザーが選択しない場合は、エラー メッセージを表示し、いずれかを選択することを強制します。
    • ユーザー インターフェイス (UI) に現在の状態を反映する必要がある場合、ユーザーの選択前にオプションが設定されていると混乱が生じます。既定値が設定されていると、選択する必要がないという意味にとられかねません。
    • 先入観を持たずにデータを収集することが目的の場合は既定値を設定しません。既定値のせいでデータ収集にバイアスが生じる可能性があります。
    • ラジオ ボタンのグループが混在状態のプロパティを表す場合は既定値を設定しません。この状態は、設定が同一でない複数のオブジェクトのプロパティを表示するときに発生します。この場合、各オブジェクトは有効な状態にあるので、エラー メッセージは表示しません。
  • 最初のオプションを既定のオプションにします。ユーザーは、このような状態を期待しています。ただし、こうすることで論理的な順番が崩れる場合を除きます。最初のオプションを既定のオプションにする際に、オプションのラベルの変更が必要になることがあります。

    間違った例:
    最後のラジオ ボタンが既定のオプションに設定されたスクリーン ショット

    この例では、既定のオプションが最初のオプションになっていません。

    正しい例:
    最初のラジオ ボタンが既定に設定されたスクリーン ショット

    この例では、オプションのラベルの言い回しを変えて、最初のオプションが既定のオプションになるようにしています。

推奨されるサイズと間隔

ラジオ ボタンのサイズと間隔を示すスクリーン ショット

ラジオ ボタンに推奨されるサイズと間隔

ラベル

ラジオ ボタンのラベル

  • ラジオ ボタンにはすべてラベルを付けます。
  • 各ラベルに、一意なアクセス キーを割り当てます。割り当てのガイドラインについては、「キーボード」を参照してください。
  • センテンス スタイルの大文字化を使用します。
  • ラベルには文ではなく語句を使用し、末尾に句読点は付けません。
    • 例外: ラジオ ボタンのラベルが後続の従属コントロールのラベルでもある場合は、ラベルの末尾にコロンを使用します。
  • 同じ文法構造の表現を使用し、すべてのラベルの長さがおおよそ同じになるようにします。
  • オプション間の違いに重点を置いたラベル テキストにします。すべてのオプションが同じテキストで始まっている場合は、そのテキストをグループ ラベルに移動します。
  • 肯定文を使用します。たとえば、"しない" ではなく "する"、"印刷しない" ではなく "印刷する" を使用します。
  • ラベルではオプションのみを説明します。ラベルを簡潔にすることで、メッセージおよびドキュメントで言及することが容易になります。オプションに詳細な説明が必要な場合は、句点を付けた完全な文として静的テキスト コントロール内で説明します。

    説明テキストが付いたラジオ ボタンのスクリーン ショット

    この例では、独立した静的テキスト コントロールを使用してオプションが説明されています。

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

  • 強く推奨されるオプションに対しては、ラベルに "(推奨)" を追加します。補足的なメモに対してではなく、コントロールのラベルに追加してください。
  • 詳しい知識のあるユーザー向けのオプションに対しては、ラベルに "(詳細設定)" を追加します。補足的なメモに対してではなく、コントロールのラベルに追加してください。
  • 複数行にわたるラベルを使用する必要がある場合は、ラベルの先頭をラジオ ボタンと揃えます。
  • 従属コントロール、それに含まれる値、または単位のラベルを使用して、文や句を作成しないでください。文の構造は言語ごとに異なるので、このように設計するとローカライズできなくなります。

ラジオ ボタン グループのラベル

  • グループ ラベルは、グループの目的を説明するために使用します。選択方法を説明するためには用いません。ユーザーがラジオ ボタンの使い方を知っていることを前提としてください。たとえば、"次の選択肢から 1 つ選択してください" のようなラベルは付けません。
  • すべてのラジオ ボタン グループにラベルが必要です。静的テキストまたはグループ ボックスを使ってラベルを付け、文ではなく単語または句を使用し、末尾にコロンを付けます。

    例外: ダイアログ ボックスのメイン指示テキストの単なる言い直しになる場合は、ラベルを省略します。メイン指示テキストに (疑問文でない限りは) コロンと、(存在する場合は) アクセス キーを付けます。

    許容される例:

    ラジオ ボタンのグループ ラベルがメイン指示テキストの内容と重複しているスクリーン ショット

    この例では、ラジオ ボタン グループのラベルは、メイン指示テキストを言い直しているだけです。

    より良い例:

    ラジオ ボタンにメイン指示テキストのみがあるスクリーン ショット

    この例では、余分なラベルは削除され、メイン指示テキストにコロンが付けられています。

  • ラベルにはアクセス キーを割り当てません。ラベルにアクセス キーは不要であり、割り当てると他のアクセス キーの割り当てが困難になります。
    • 例外: すべてのコントロールに一意なアクセス キーを割り当てることができない場合、個々のコントロールの代わりに、ラベルにアクセス キーを割り当てることができます。詳細については、「キーボード」を参照してください。

ドキュメント

ラジオ ボタンに言及するときは、以下のことに留意します。

  • 大文字と小文字の区別を含め、ラベルのテキストを正確に引用します。ただし、アクセス キーを示すかっこや下線付き文字、およびコロンは含めません。
  • プログラミングおよびその他の技術文書では、"ラジオ ボタン" と記述します。それ以外のドキュメント (特にユーザー向けマニュアル) では、"オプション ボタン" を使用します。
  • ユーザー操作を説明する場合は、"クリック" を使用します。
  • ラベルは半角の角かっこ ([ ]) で囲み、可能な場合は太字にします。

例: [現在のページ] をクリックしてから [OK] をクリックします。

表示: