プレースホルダーだけでは不十分
入力すると案内が消え、何の欄か記憶に頼ることになります(Sherwin, 2014)。短期記憶の限界(Miller, 1956)と認知負荷理論(Sweller, 1988)の通り、ミスが増えます。
ラベルは外、ヒントは近くに
ラベルを上に置くなどの指針でミスと時間が減ります(Seckler et al., 2014)。形式ヒントは欄の近くに(Christian et al., 2007)。エラー表示はインライン検証を参照。
アクセシビリティ
薄いプレースホルダーはWCAG 2.2の1.4.3を満たさないことが多く、コントラストを上げると入力値に見えます。3.3.2はラベルを求めます。label要素を関連付けます(W3C, n.d.)。
よくある質問
- プレースホルダーは使わない?
- ラベルの代わりにしなければ短い例として使えます。
- フローティングラベルは?
- プレースホルダーのみより良いが、文字の大きさとコントラストを確認します。
出典確認日:2026-10-27
参考文献
- Sherwin, K. (2014, May 11). Placeholders in form fields are harmful. Nielsen Norman Group. プレースホルダーをラベル代わりにする問題です。
- 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. フォーム指針でミスと時間が減る実験です。
- Miller, G. A. (1956). The magical number seven, plus or minus two: Some limits on our capacity for processing information. Psychological Review, 63(2), 81–97. 短期記憶の限界の古典です。
- Sweller, J. (1988). Cognitive load during problem solving: Effects on learning. Cognitive Science, 12(2), 257–285. 不要な認知負荷が成績を下げる研究です。
- 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. 入力欄横のヒントが正確さを高める研究です。
- World Wide Web Consortium. (n.d.). Labeling controls. Web Accessibility Tutorials. label要素の関連付け方法です。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 3.3.2と1.4.3の基準です。
