ラジオ ボタン

Note

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

ラジオ ボタンを使用すると、ユーザーは相互に排他的な関連オプションのセットから選択できます。 ユーザーは 1 つのオプションのみを選択できます。 ラジオ ボタンは、ラジオのチャネル プリセットのように機能するため、いわゆる呼び出されます。

ラジオ ボタンの一般的なグループ。

ラジオ ボタンのグループは、1 つのコントロールのように動作します。 選択した選択肢にのみ Tab キーを使用してアクセスできますが、ユーザーは方向キーを使用してグループを順番に移動できます。

Note

レイアウトとキーボード ナビゲーションに関連するガイドラインについては、別の記事を参照してください。

 

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

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

• コントロールは、相互に排他的な選択肢のセットから 1 つのオプションを選択するために使用されますか? そうでない場合は、別のコントロールを使います。 複数のオプションを選択するには、代わりに、チェック ボックス、複数選択リスト、またはチェック ボックス リストを使用します。

• オプションの数は 2 から 7 の間ですか? 使用される画面領域はオプションの数に比例するため、2 から 7 の間のグループ内のオプションの数を保持します。 8 つ以上のオプションの場合は、 ドロップダウン リスト または 単一選択リストを使用します。

• チェックボックスの方が適していますか? オプションが 2 つしかない場合は、代わりに 1 つのチェック ボックスを使用できます。 ただし、チェック ボックスは 1 つのオプションのオンとオフを切り替える場合にのみ適していますが、ラジオ ボタンは完全に異なる代替手段に使用できます。 両方のソリューションが可能な場合:

  • クリアされたチェックボックスの意味が完全に明らかでない場合は、ラジオ ボタンを使用します。

    正しくない:

    

    正確:

    

    正しい例では、選択肢は反対ではなく、ラジオ ボタンの方が適しています。

  • ウィザード ページのラジオ ボタンを使用して、チェック ボックスが許容される場合でも、代替手段を明確にします。

  • 十分な画面領域があり、その画面領域を十分に使用するのに十分なオプションが重要な場合は、ラジオ ボタンを使用します。 それ以外の場合は、チェック ボックスまたはドロップダウン リストを使用します。

    正しくない:

    

    この例では、オプションはラジオ ボタンを使用するのに十分な重要ではありません。

    正確:

    

    この例では、チェック ボックスは、この周辺機器オプションの画面領域を効率的に使用します。

  • ページに他のチェック ボックスがある場合は、チェック ボックスを使用します。

• ドロップダウン リストの方が適していますか? ほとんどの状況でほとんどのユーザーに既定のオプションが推奨されている場合、ラジオ ボタンは必要以上にオプションに注意を引く可能性があります。

  • オプションに注意を向けたくない場合や、ユーザーに変更を促したくない場合は、ドロップダウン リストの使用を検討してください。 ドロップダウン リストは現在の選択に焦点を当てていますが、ラジオ ボタンはすべてのオプションを均等に強調します。

    

    この例では、ドロップダウン リストは現在の選択内容に焦点を当てており、ユーザーが変更を加えるのを防いでいます。

  • ページに他のドロップダウン リストがある場合は、ドロップダウン リストを検討してください。

• 一連のコマンド ボタン、コマンド リンク、または分割ボタンの方が適していますか? ラジオ ボタンを使用してコマンドの実行方法に影響を与える場合は、多くの場合、代わりにコマンドのバリエーションを表示することをお勧めします。 これにより、ユーザーは 1 回の操作で適切なコマンドを選択できます。

• オプションには、データではなくプログラム オプションが表示されますか? オプションの値は、コンテキストやその他のデータに基づくべきではありません。 データの場合は、ドロップダウン リストまたは単一選択リストを使用します。

• コントロールがウィザード ページまたはコントロール パネルで使用されている場合、コントロールはメイン命令に対する応答であり、ユーザーは後で選択を変更できますか?その場合は、ラジオ ボタンの代わりにコマンド リンクを使用して、操作をより効率的にすることを検討してください。

• 値は数値以外ですか? 数値データの場合は、 テキスト ボックス、 ドロップダウン リスト、または スライダーを使用します。

ガイドライン

全般

• オプションを論理的な順序で一覧表示します。たとえば、選択される可能性が最も低い順、最も複雑なものから最も単純な操作、最もリスクが最も低い操作などです。 アルファベット順は言語に依存するためローカライズできないため、推奨されません。

• どのオプションも有効な選択肢でない場合は、この選択を反映する別のオプション ( [なし] や [適用しない] など) を追加します。

• ラジオ ボタンを水平方向ではなく垂直方向に配置することを好みます。 水平方向の配置は、読み取りとローカライズが困難です。

  正確:

  

  この例では、ラジオ ボタンは垂直方向に配置されます。

  正しくない:

  

  この例では、水平方向の配置は読みにくいです。

• グループ ボックスを使用してラジオ ボタンのグループを整理し直すと、多くの場合、不要な画面が乱雑になります。

• グループ ボックス ラベルとしてラジオ ボタン ラベルを使用しないでください。

• ラジオ ボタンの選択を使用して次の手順を実行しないでください。

  • コマンドを実行します。
  • 他のウィンドウ (ダイアログ ボックスなど) を表示して、より多くの入力を収集します。
  • 選択したコントロールに関連する他のコントロールを動的に表示または非表示にします (スクリーン リーダーはそのようなイベントを検出できません)。 ただし、選択範囲に基づいてテキストを動的に変更できます。

下位コントロール

• 下位コントロールをラジオ ボタンとそのラベルの右側または下に配置します (インデント、ラジオ ボタン ラベルでフラッシュ)。 ラジオ ボタンのラベルをコロンで終了します。

  

  この例では、ラジオ ボタンとその下位コントロールは、ラジオ ボタン ラベルとそのアクセス キーを共有します。 この場合、方向キーはラジオ ボタンから下位テキスト ボックスにフォーカスを移動します。

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

  

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

• 他のラジオ ボタンやチェック ボックスでラジオ ボタンを入れ子にしないでください。 可能であれば、すべてのオプションを同じレベルに保ちます。

  正確:

  

  この例では、オプションは同じレベルです。

  正しくない:

  

  この例では、入れ子になったオプションを使用すると、不要な複雑さが増します。

• 他のラジオ ボタンまたはチェック ボックスでラジオ ボタンを入れ子にする場合は、高レベルオプションが選択されるまで、これらの下位コントロールを無効にします。これにより、下位コントロールの意味に関する混乱が回避されます。

既定値

• ラジオ ボタンのグループは相互に排他的な選択肢のセットを表すの で、常に既定で 1 つのラジオ ボタンが選択されています。最も安全なオプション (データまたはシステム アクセスの損失を防ぐために) と最も安全でプライベートなオプションを選択します。 安全性とセキュリティが要因ではない場合は、最も可能性の高いオプションまたは便利なオプションを選択します。

• 例外： 次の場合は、既定の選択を行いません。

  • 安全性、セキュリティ、または法的な理由に対して許容される既定のオプションがないため、ユーザーは明示的な選択を行う必要があります。 ユーザーが選択を行わない場合は、強制的にエラー メッセージを表示します。
  • ユーザー インターフェイス (UI) は現在の状態を反映している必要があり、オプションはまだ設定されていません。 既定値は、ユーザーが選択を行う必要がないことを誤って意味します。
  • 目標は、偏りのないデータを収集することです。 既定値では、データ収集が偏ります。
  • ラジオ ボタンのグループは、混在状態のプロパティを表します。これは、同じ設定を持たない複数のオブジェクトのプロパティを表示するときに発生します。 各オブジェクトには有効な状態があるため、この場合はエラー メッセージを表示しないでください。

• ユーザーは多くの場合、その順序が論理的でない場合を除き、最初のオプションを既定のオプションにします。 これを行うには、オプション ラベルの変更が必要になる場合があります。

  正しくない:

  

  この例では、既定のオプションは最初のオプションではありません。

  正確:

  

  この例では、最初のオプションを既定のオプションにするように、オプション ラベルが書き換えられます。

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

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

ラベル

ラジオ ボタンラベル

• すべてのラジオ ボタンにラベルを付けます。

• 各ラベルに一意の アクセス キー を割り当てます。 ガイドラインについては、「 キーボード」を参照してください。

• 文形式の大文字を使用します。

• ラベルを文ではなくフレーズとして書き込み、終了句読点を使用しません。

  • 例外： ラジオ ボタン ラベルも、その後に続く下位コントロールにラベルを付ける場合は、ラベルをコロンで終了します。

• 並列フレージングを使用し、すべてのラベルの長さを同じに保つようにします。

• オプション間の相違点にラベル テキストをフォーカスします。 すべてのオプションに同じ入門テキストがある場合は、そのテキストをグループ ラベルに移動します。

• 正の言い回しを使用します。 たとえば、do ではなく do を使用し、印刷しない代わりに印刷します。

• ラベルを使用してオプションだけを記述します。 メッセージやドキュメントでラベルを簡単に参照できるように、ラベルを簡潔に保ちます。 オプションでさらに説明が必要な場合は、完全な文と終了句読点を使用して 、静的テキスト コントロールで説明を指定します。

  

  この例では、個別の静的テキスト コントロールを使用してオプションについて説明します。

  Note

  1 つのラジオ ボタンに説明を追加しても、すべてのラジオ ボタンについて説明する必要があるわけではありません。 可能な場合はラベルに関連情報を入力し、必要な場合にのみ説明を使用します。 一貫性のためにラベルを単に置き込まないでください。

   

• オプションが強く推奨される場合は、ラベルに "(recommended)" を追加します。 補足メモではなく、必ずコントロール ラベルにを追加してください。

• オプションが上級ユーザーのみを対象とする場合は、ラベルに "(advanced)" を追加します。 補足メモではなく、必ずコントロール ラベルにを追加してください。

• 複数行ラベルを使用する必要がある場合は、ラベルの上部をラジオ ボタンに合わせます。

• 下位コントロール、それに含まれる値、または単位ラベルを使用して文やフレーズを作成しないでください。 文の構造は言語によって異なるため、このような設計はローカライズできません。

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

• グループ ラベルを使用して、選択方法ではなく、グループの目的を説明します。 ユーザーがラジオ ボタンの使用方法を知っているとします。 たとえば、"次のいずれかの選択肢を選択してください" と言ってはいけません。

• すべてのラジオ ボタン グループにはラベルが必要です。 ラベルを文としてではなく、静的テキストまたはグループ ボックスを使用してコロンで終わる単語または語句として書き込みます。

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

  普通：

  

  この例では、ラジオ ボタン グループ ラベルは、メイン命令の単なる修正です。

  より適切な例:

  

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

• ラベルにアクセス キーを割り当てないでください。 そうする必要はないので、他のアクセス キーを割り当てるのが難しくなります。

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

ドキュメント

ラジオ ボタンを参照する場合:

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

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