グループ ボックス

Note

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

グループ ボックスは、関連するコントロールのセットを囲むラベル付きの四角形のフレームです。 グループ ボックスは、リレーションシップを視覚的に表示する方法です。コントロールのグループにアクセス キーを提供する場合を除いて、機能は提供されません。

一般的なグループ ボックス。

Note

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

 

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

グループ ボックスはリレーションシップを示す強力な視覚的手段ですが、それらを使い過ぎていると、視覚的な乱雑さが増し、サーフェス上で使用可能な領域が大幅に削減されます。 これらは視覚的に重く、より優れたソリューションがない場合にのみ、慎重に使用する必要があります。

Windows のデザイントレンドは、不要な線を排除することで、よりシンプルでクリーンな外観です。

グループ ボックスが必要かどうかを判断するには、次の質問を検討してください。

• グループに複数のコントロールがありますか? そうでない場合は、代わりにプレーンテキスト ラベルを使用します。 まれな例外は、1 つのコントロールを持つグループ ボックスを使用して、同じサーフェス上の他のグループ ボックスとの一貫性を維持することです。

不正解:

この例では、グループ ボックスのコントロールは 1 つだけです。

• コントロールは関連していますか? リレーションシップを表示すると、わかりやすさが増しますか? 表示されない場合は、グループ ボックスの外側にコントロールを個別に表示します。
• すべてのコントロールはグループ内にありますか? その場合は、親ダイアログ ボックスやページなど、大きなサーフェス上のリレーションシップを指定します。

不正解:

この例では、ダイアログ ボックス内のすべてのコントロール (コミット ボタンを除く) がグループ ボックス内にあります。

• レイアウトだけを使用してリレーションシップを効果的に伝達できますか? その場合は、代わりに レイアウト を使用します。 関連するコントロールを隣り合せて配置し、関連のないコントロール間に余分な間隔を置くことができます。 見出しとインデントを使用して階層リレーションシップを表示することもできます。

この例では、レイアウトのみを使用して、コントロールのリレーションシップを表示します。

• 区切り記号を使用してリレーションシップを効果的に伝達できますか? その場合は、代わりに区切り記号を使用します。 区切り記号は、その下のコントロールを統合する水平線です。 区切り記号は、よりシンプルでクリーンな外観を提供します。 ただし、グループ ボックスとは異なり、サーフェスの全幅にまたがる場合に最適です。
  • 開発者： 高さが 1 の四角形をエッチングした区切り記号を実装できます。

この例では、ラベル付き区切り記号を使用して、コントロールのリレーションシップを表示します。

この例では、ラベル付けされていない区切り記号を使用して、コントロールのリレーションシップを表示します。

• テキストなしでリレーションシップを効果的に伝えることができますか? その場合は、背景やアグリゲーターなどのグラフィック要素 を 使用することを検討してください。

ガイドライン

• グループ ボックスを入れ子にしないでください。 レイアウトを使用して、グループ ボックス内のリレーションシップを表示します。

不正解:

この例では、入れ子になったグループ ボックスを使用すると、不要な視覚的な乱雑さが発生します。

正解:

この例では、代わりにレイアウトを使用して、同じコントロール リレーションシップを示します。

• グループ ボックスラベルにコントロールを配置しないでください。
  • 例外：チェック ボックスでボックス内のすべてのコントロールが有効または無効になっている場合は、チェック ボックスをグループ ボックス のラベルとして使用できます。

不正解:

この例では、ドロップダウン リストがグループ ボックスに正しく配置されていません。 この例では、代わりに タブ を使用する必要があります。

• グループ ボックスを無効にしないでください。 コントロールのグループが現在適用されていないことを示すには、グループ ボックス内のすべてのコントロールを無効にしますが、グループ ボックス自体は無効にしないでください。 このアプローチはアクセシビリティが高く、すべての UI フレームワークで一貫してサポートできます。

ラベル

• すべてのグループ ボックスにラベルを付けます。
• ラベルにアクセス キーを割り当てないでください。 これは不要であり、他のアクセス キーの割り当てを難しくします。 代わりに、グループ ボックス内のコントロールにアクセス キーを割り当てます。
  • 例外： サーフェスに多数のコントロールがある場合は、十分なアクセス キーが使用できない可能性があります。 その場合は、グループ ボックス内のコントロールではなくグループ ボックスに割り当てることで、アクセス キーの数を減らします。
• 文形式の大文字と小文字を使用します。
• 文としてではなく名詞または名詞句を使用してラベルを記述し、コロンを含む終了句読点を使用しません。
• 同じサーフェス内のグループ ボックス ラベルに対して並列フレージングを使用します。
• グループ ボックスのラベルを簡潔にします。 説明テキストをラベルとして使用しないでください。 ただし、グループ ボックス内に説明テキストを含めることができます。
• ボックス内のコントロール ラベルでグループ ボックス ラベルを繰り返さないでください。 たとえば、グループ ボックスに [配置] というラベルが付いている場合は、[左揃え] や [右揃え] ではなく、[左]、[右] などのオプション ボタンにラベルを付けます。
• ユーザー インターフェイス テキストのグループ ボックスを参照しないでください。

ドキュメント

グループ ボックスを参照する場合:

• プログラマおよびその他の技術ドキュメントでのみグループ ボックスを参照してください。 グループ ボックスには、2 つの小文字の単語を使用します。
• 他の場所では、同じ名前の複数のオプションがダイアログ ボックスに含まれていない限り、プロシージャにグループ ボックスの名前を含める必要があります。 このような場合は、 グループ ボックス名で を使用します。
• 可能な場合は、太字のテキストを使用してラベルの書式を設定します。 それ以外の場合は、混乱を防ぐために必要な場合にのみ、ラベルを引用符で囲みます。

例: [ 効果] で、[非表示] を選択 します。