向く場面
既定値付近で少し変える値に向きます（Zhou, 2018; Apple, n.d.）。範囲が広いと何十回も押すことに。
直接入力と範囲
数値をタップで入力可能にし、min・max・step（MDN, n.d.）。上限下限でボタンを薄く、インライン検証で在庫超過を通知。
サイズとアクセシビリティ
小さく近いボタンは押し間違えます（フィッツの法則; Parhi et al., 2006）。タッチターゲットを守り、spinbutton（W3C, n.d.）と4.1.3（WCAG 2.2）に沿います。
よくある質問
- ドロップダウンとどちら？
- 少しずつ変えるならステッパー、固定値ならドロップダウン。
- type=numberだけで良い？
- 矢印が小さいので大きな+/−を併用します。
出典確認日：2026-10-27
参考文献
- Zhou, Y. (2018, November 11). Design guidelines for input steppers. Nielsen Norman Group. ステッパーの使いどころです。
- Apple. (n.d.). Steppers. Human Interface Guidelines. iOSのステッパー指針です。
- MDN Web Docs. (n.d.). <input type="number">. Mozilla. min・max・step属性です。
- World Wide Web Consortium. (n.d.). Spinbutton pattern. ARIA Authoring Practices Guide. spinbuttonの役割です。
- Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381–391. 小さなボタンは押しにくい法則です。
- 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. 2.5.8と4.1.3の基準です。