どんな日付か
最適な形は日付次第です(Li, 2017)。近い日付はカレンダー、生年月日のような遠い日付は直接入力が速いです。Material(Google, n.d.)は両方を切り替え可能にしています。
モバイルでの作り方
ホイールはiOSの慣習(Apple, n.d.)ですが広い範囲には遅いです。カレンダーはボトムシートで、セルは親指サイズに(Parhi et al., 2006; タッチターゲット)。期間は一つのカレンダーで続けて選ばせます。
形式ヒントとアクセシビリティ
形式を欄の近くに示し(Christian et al., 2007)、様々な区切りを受け付け(Seckler et al., 2014)、インライン検証で知らせます。WCAG 2.2の2.5.7はドラッグのみを禁じ、2.5.8は最小サイズを定めます。
よくある質問
- 生年月日に最適な形は?
- 年月日の直接入力です。
- ホイールはアクセシブル?
- ドラッグのみなら問題で、代替手段が必要です。
出典確認日:2026-10-27
参考文献
- Li, A. (2017, January 22). Date-input form fields: UX design guidelines. Nielsen Norman Group. カレンダー・入力方式の指針です。
- Google. (n.d.). Date pickers. Material Design 3. 各種日付ピッカーの指針です。
- Apple. (n.d.). Pickers. Human Interface Guidelines. iOSのホイール型ピッカーです。
- Christian, L. M., Dillman, D. A., & Smyth, J. D. (2007). Helping respondents get it right the first time: The influence of words, symbols, and graphics in web surveys. Public Opinion Quarterly, 71(1), 113–125. 日付形式の表示で正確さが上がる研究です。
- Seckler, M., Heinz, S., Bargas-Avila, J. A., Opwis, K., & Tuch, A. N. (2014). Designing usable web forms: Empirical evaluation of web form improvement guidelines. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1275–1284). 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. 2.5.7と2.5.8の基準です。
