スイッチの比喩
アフォーダンスを技術に応用したGaver(1991)、画面では慣習が役割を担うとしたNorman(1999)。丸いトラックとつまみは「スライドで切り替え」の慣習です。アフォーダンスも参照。
トグルかチェックボックスか
トグルは即時反映の設定に(Kendrick, 2018; Apple, n.d.)。保存が必要なフォームにはチェックボックスを使います。失敗時は元に戻し理由を伝えます。
オン・オフを明確に
色だけでなく位置・塗り・アイコンを併用します(Google, n.d.)。WCAG 2.2の1.4.11と4.1.2に従い、行全体をタップ可能にしてタッチターゲット(Parhi et al., 2006)とコントラストを確保します。
よくある質問
- ラベルはオン/オフ?
- 機能名を書き、状態はスイッチで示します。
- チェックボックスを使う場面は?
- 保存が必要なフォームや複数選択です。
出典確認日:2026-10-27
参考文献
- Kendrick, A. (2018, July 29). Toggle-switch guidelines. Nielsen Norman Group. トグルとチェックボックスの使い分けの指針です。
- Google. (n.d.). Switch. Material Design 3. スイッチの状態表示の指針です。
- Apple. (n.d.). Toggles. Human Interface Guidelines. iOSのトグルの指針です。
- Norman, D. A. (1999). Affordance, conventions, and design. Interactions, 6(3), 38–43. 画面部品は慣習と知覚されたアフォーダンスに頼るという論考です。
- Gaver, W. W. (1991). Technology affordances. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 79–84). ACM. アフォーダンスを技術設計に応用した古典です。
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. トグルのタップ領域の根拠です。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 1.4.11と4.1.2の基準です。
