エクスポート (0) 印刷
すべて展開

Windows Phone の CheckBox コントロールのデザイン ガイドライン

2013/12/05

対象: Windows Phone 8 | Windows Phone OS 7.1

CheckBox コントロールは、"オン" と "オフ" などの、通常は相反する 2 つの選択肢を提示する際に使用します。

UI_CheckBox

CheckBox コントロール

このトピックは、次のセクションで構成されています。

CheckBox コントロールは、現在有効となっている値を示します。ユーザーはボックスをタップして有効/無効を切り替えます。

メモメモ:

CheckBox コントロールは、RadioButton コントロールや ListBox コントロールと共通した特徴も持っていますが、用途はそれぞれ異なっています。

CheckBox コントロールは、バイナリ状態を定義するために使用し、グループで使用して、ユーザーが 1 つまたは複数のオプションを選択できる複数の選択肢を表示できます。ユーザーは CheckBox コントロールまたは付随するテキストをタップしてオプションを選択できます。このコントロールは中間状態をサポートし、多数の基になる項目のチェック状態とチェック解除状態を同時に伝えるために使用できます。CheckBox コントロールは、選択された設定とクリアされた設定の両方に対し、静止状態、押された状態、無効の状態をサポートします。非表示のフォーカス状態は存在しません。

複数の項目の中からユーザーがいくつでも選択できるようにするには、複数の CheckBox コントロールをグループ化して表示します。複数の項目の中からユーザーが 1 つだけ選択できるようにするには、複数の RadioButton コントロールをグループ化して表示します。

アプリの特定の項目について、ユーザーが明確に相反する 2 つの状態のどちらかを選択できるようにするには、CheckBox コントロールを単独で表示します。選択肢が相互排他的でなく、複数のオプションの中から 1 つだけ選択できるというような場合は、より柔軟な RadioButton コントロールか ListBox コントロールを使用します。

複数のオプションを一度に設定する場合など、複数の CheckBox コントロールをグループ化して使用するケースも多々あります。

2 つの状態から 1 つを選択する場合や、普通に考えて正反対の選択肢を提示する場合は、CheckBox コントロールを 1 つだけ使用します。CheckBox コントロールを使用して、他のコントロールを利用可能にしたり利用不可能にしたりすることもできます。CheckBox コントロールを使用する際は、明快な選択肢を提示するようにしてください。

CheckBox コントロールを単独で使用する場合でもグループ化して相互依存的に使用する場合でも、その目的と現在の状態がはっきりわかるようにしてください。以下の点に注意してください。

  • CheckBox コントロールは、同じビュー内に表示される他の UI 要素の利用可能性や状態を変更するために使用することもできます。

  • ブランド規定で他の指定がない限り、常にシステム フォントを使用してください。

  • CheckBox コントロールのテキストを 1 行または 2 行の形式に制限し、簡単なわかりやすい方法で設定を伝えることをお勧めします。簡潔なラベルの CheckBox コントロールを作るのが難しい場合は、オプションを細分化して RadioButton コントロールまたは ListBox コントロールに変更することを検討してください。

  • 複数の選択肢を提示する場合、ScrollViewer コントロールを使用して、StackPanel コントロールを追加することを検討してください。

  • 基になるプロパティ項目のどれが実際に選択されているのか、クリアされているのか混乱する可能性があるため、中間状態の使用を避けるようにしてください。より適切な代替方法として、特に、動的データ セットが使われる場合に、その CheckBox コントロールのデータ ソースを個別の CheckBox コントロールにマップするか、複数選択リストを使用します。

CheckBox コントロールの使用例を以下に示します。

不適切

適切

UX_CheckBox_Landscape_Bad

UX_CheckBox_DontShowAgain_Good

「Landscape (横向き)」の反対の選択肢が明確ではないため、この場合 CheckBox コントロールは適切なコントロールではありません。この場合は、CheckBox の代わりに RadioButton コントロールを使用してください。

「Don't show this again (このメッセージを今後表示しない)」の反対の選択肢は明確であるため、この場合 CheckBox コントロールは適切なコントロールです。

リファレンス

表示:
© 2014 Microsoft