少なく、はっきり尋ねる
ウロブレウスキー（2008）は必要なことだけを尋ね、ラベルは短く明確にと説きます。狭い画面では入力欄の上に置く上部ラベルが最も視線移動が少なく（Penzo, 2006）、プレースホルダーだけのラベルは入力すると消えてしまいます。項目を減らすことはマーケティングファネルの離脱を減らすことでもあります。
キーボードと入力方式
type="email"やinputmode="numeric"で適切なキーボードを出し、autocompleteで住所やカード情報を自動入力できます。選択肢が少なければドロップダウンより見えるボタンが良く、クーパーら（2004）は最初に見える選択肢に回答が集まることを示しました。タッチターゲットサイズも守ります。
エラー表示とアクセシビリティ
バルガス＝アビラら（2007）は入力中に即座に出すより、欄を離れた後や送信時に近くに出す方が効果的だと示し、セクラーら（2014）は20の指針でエラーと完了時間が減ることを確認しました。WCAG 2.2はラベルやエラー特定を求め、フォームはウェブアクセシビリティの要です。
よくある質問
- ラベルはどこに置く？
- 入力欄の真上が最も読みやすいです。
- エラーはいつ表示？
- 欄を離れた後か送信時に、直し方と一緒に表示します。
出典確認日：2026-10-27
参考文献
- Wroblewski, L. (2008). Web form design: Filling in the blanks. Rosenfeld Media. ラベル位置・項目数・ボタン配置などフォーム設計原則をまとめた代表的実務書です。
- Bargas-Avila, J. A., Oberholzer, G., Schmutz, P., de Vito, M., & Opwis, K. (2007). Usable error message presentation in the World Wide Web: Do not show errors right away. Interacting with Computers, 19(3), 330–341. エラーメッセージをいつ・どこに出すか実験した研究です。
- 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. 20のフォーム指針を適用すると完了時間と誤りが減ったという実証です。
- Bargas-Avila, J. A., Brenzikofer, O., Tuch, A. N., Roth, S. P., & Opwis, K. (2011). Working towards usable forms on the World Wide Web: Optimizing multiple selection interface elements. Advances in Human-Computer Interaction, 2011, Article 347171. チェックボックスやリストなど複数選択要素を比較しています。
- Couper, M. P., Tourangeau, R., Conrad, F. G., & Crawford, S. D. (2004). What they see is what we get: Response options for web surveys. Social Science Computer Review, 22(1), 111–127. ドロップダウンで最初に見える選択肢に回答が引き寄せられることを示しています。
- Penzo, M. (2006). Label placement in forms. UXmatters. 視線追跡でラベル位置を比較しており、上部ラベルの根拠になります。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2 (W3C Recommendation). ラベル（3.3.2）、エラー特定（3.3.1）、重複入力（3.3.7）の基準があります。