トグル(切り替え)
トグルを使用すると、人々は、オンとオフなどの反対の状態のペアを選択でき、それぞれの状態を示すために異なる外観を使用できます。
プラットフォームが異なれば、さまざまなトグル スタイル (ToggleStyle) をサポートできます。たとえば、iOS、iPadOS、macOS、watchOS はスイッチトグルスタイルをサポートしていますが、macOS だけがチェックボックススタイルをサポートしています。
さらに、すべてのプラットフォームは、おのおのの状態ごとに異なる外観を使用してトグル動作を有効にするボタンをサポートしています。
ベストプラクティス
トグルを使用して、コンテンツまたはビューの状態に影響を与える 2 つの相反する値のどちらかを人々が選択できるようにします。 トグルを使用すると、いつでも何かの状態を管理できます。そのため、アイテムのリストから選択するなど、他の種類のアクションを有効にする必要がある場合は、 ポップアップボタン などの別の部品を使用してください。
トグルが影響する設定、ビュー、またはコンテンツを明確に識別します。 一般に、周囲のコンテキストは、人々が何をオンまたはオフにしているのかを理解するのに十分な情報を提供します。場合によっては、多くの場合 macOS アプリでは、トグルコントロールの状態を説明するラベルを提供することもできます。トグルのように動作するボタンを使用する場合は、通常、その目的を伝えるインターフェイスアイコンを使用し、現在の状態に基づいて (通常は背景を変更して) その外観を更新します。
トグルの状態の視覚的な違いが明確であることを確認してください。 たとえば、色の塗りつぶしを追加または削除したり、背景の形状を表示または非表示にしたり、表示する内部の詳細 (チェックマークやドットなど) を変更して、トグルがオンまたはオフであることを示すことができます。誰もが違いを認識できるわけではないため、状態を伝えるために色だけに依存することは避けてください。
プラットフォームの考慮事項
tvOS または watchOS に関する追加の考慮事項はありません。
iOS、iPadOS
スイッチトグルスタイルは、リスト行でのみ使用してください。 この状況ではラベルを指定する必要はありません。これは、行のコンテンツがスイッチが制御する状態のコンテキストを提供するためです。
スイッチのデフォルトの色は、必要な場合にのみ変更してください。 ほとんどの場合、デフォルトの緑色がうまく機能しますが、代わりにあなたのアプリのアクセントカラーを使用することもできます。無着色の外観と十分なコントラストがあり、認識できる色を使用してください。
リストの外では、スイッチではなくトグルのように動作するボタンを使用します。 ボタンの目的を説明するラベルを付けることは避けてください。あなたが作成したインターフェイスアイコンは、あなたが提供する別の背景の外観と組み合わせて、人々がボタンの機能を理解するのに役立ちます。開発者向けガイダンスについては、changesSelectionAsPrimaryAction を参照してください。
macOS
スイッチトグルスタイルに加えて、macOS はチェックボックススタイルをサポートし、同様の動作を提供できるラジオボタンも定義します。
ウィンドウフレームではなく、ウィンドウ本体でスイッチ、チェックボックス、およびラジオボタンを使用します。 特に、これらの部品をツールバーまたはステータスバーで使用することは避けてください。
スイッチ
単一の詳細または細かな設定を制御するためにスイッチを使用することは避けてください。 スイッチはチェックボックスよりも視覚的な重みがあるため、チェックボックスよりも多くの機能を制御すると見栄えがよくなります。たとえば、スイッチを使用して、人々が 1 つの設定だけでなく、設定のグループをオンまたはオフにできるようにできます。
通常、チェックボックスをスイッチに置き換えないでください。 インターフェイスですでにチェックボックスを使用している場合は、そのまま使用することをお勧めします。
チェックボックス
チェックボックスは、ボタンがオフの場合は空で、ボタンがオンの場合はチェックマークが含まれ、ボタンの状態が混在している場合はダッシュを含む小さな四角形のボタンです。チェックリストにチェックボックスが表示されない限り、ボタンの後に説明的なラベルが表示されます。
設定の階層を表示する必要がある場合は、スイッチの代わりにチェックボックスを使用してください。 チェックボックスの視覚的なスタイルは、それらがうまく整列し、グループ化を伝えるのに役立ちます。配置 (通常はチェックボックスの前縁に沿って) とインデントを使用することで、チェックボックスの状態が下位のチェックボックスの状態を制御する場合など、依存関係を示すことができます。
2 つ以上の相互に排他的なオプションのセットを提示する必要がある場合は、ラジオボタンの使用を検討してください。 人々が「オン」または「オフ」だけでなくオプションから選択する必要がある場合、複数のラジオ ボタンを使用すると、一意のラベルで各オプションを明確にすることができます。
チェックボックスの関係が明確でない場合は、ラベルを使用してチェックボックスのグループを導入することを検討してください。 オプションのセットを説明し、ラベルのベースラインをグループの最初のチェックボックスに合わせます。
チェックボックスの状態をその外観に正確に反映します。 チェックボックスは、選択、非選択、またはそれらを混在させることができます。チェックボックスを使用して複数の従属チェックボックスをグローバルに有効化および無効化する場合、従属チェックボックスの状態が異なる場合に混合状態を表示します。たとえば、すべてのスタイルをオンまたはオフにするだけでなく、太字、斜体、下線などの個々のスタイル設定のサブセットを人々が選択できるようにするテキストスタイル設定を提示する必要がある場合があります。開発者向けガイダンスについては、allowsMixedState (allowsMixedState) を参照してください。
非選択時
選択時
混合状態
ラジオボタン
ラジオボタンは小さな丸いボタンで、ラベルが続きます。通常、ラジオボタンは 2～5 個のグループで表示され、相互に排他的な選択肢のセットを示します。
ラジオボタンの状態は、オン (黒丸) またはオフ (白丸) のいずれかです。ラジオボタンは混合状態 (ダッシュで示されます) を表示することもできますが、追加のラジオボタンを使用して複数の状態を伝達できるため、この状態が役立つことはほとんどありません。設定または項目が混合状態であることを示す必要がある場合は、代わりにチェックボックスを使用することを検討してください。
相互に排他的なオプションを表示するには、一連のラジオボタンが望ましいです。 一連の複数のオプションを人々が選択できるようにする場合は、代わりにチェックボックスを使用してください。
セット内に、あまりにも多くのラジオボタンをリストすることは避けてください。 ラジオボタンの長いリストは、インターフェイスで多くのスペースを占有し、圧倒されます。5 つ以上のオプションを提示する必要がある場合は、代わりに ポップアップボタン のような部品を使用することを検討してください。
オンまたはオフにできる単一の設定を表示するには、チェックボックスが望ましいです。 ラジオボタン一つでも何かを ON/OFF にできますが、チェックボックスのチェック内の有無で現状が一目で分かりやすくなります。まれに、単一のチェックボックスでは反対の状態が明確に伝わらない場合は、それぞれが制御する状態を指定するラベルが付いた一対のラジオボタンを使用できます。
ラジオボタンを水平方向に表示する場合は、一定の間隔を使用してください。 最も長いボタンラベルを収容するために必要なスペースを測定し、その測定値を一貫して使用します。
リソース
関連
開発者用文書
Toggle — SwiftUI (Toggle)
UISwitch — UIKit (UISwitch)
NSButton.ButtonType.toggle — AppKit (NSButton.ButtonType.toggle)
NSSwitch — AppKit (NSSwitch)