入力フォーム設計実務：blur タイミングのバリデーションとシニア配慮

2026/9/18

背景与問題

登録・設定フォームの入力ミスは離脱の直接原因。バリデーションのタイミング、placeholder の害、シニア向けの配慮を整理する（B 方向）。エラーメッセージの書き方は opc-error-message-writing、文字サイズは opc-dynamic-type-support。

（出典はいずれも 2026-09-18 アクセス）

事実：バリデーションのタイミング定説は「blur（フィールド離脱時）」——入力途中でのエラー表示は「hostile pattern」で、未完成の入力（メールアドレスの途中等）を誤って拒否する（Smart Interface Design Patterns、NN/g）。正のフィードバック（チェックマーク・自動整形）は入力中でも出してよい（AgeTech UX ガイド）。Baymard の調査では 31% のサイトが inline validation を提供していない。
事実：placeholder をラベル代わりに使うのは有害——ラベルを忘れさせる・入力済みに見える・エラー確認を難しくする（NN/g、W3C Low Vision TF、Deque）。ラベルは常に外に見えるテキストで置く。
事実：シニア向けの研究知見——間隔を大きく誤タップを防ぐ・1 列レイアウト・1 画面 1 質問の分割フォーム（PMC/NIH 掲載の高齢者向け設計ガイドライン、TechGuilds）。電話番号等の自動整形が高齢者に特に有効。
推测：一人開発の実務——①ラベルは常に表示、placeholder は例示のみ ②検証は blur 時、ポジティブ表示はリアルタイム ③エラーは該当フィールド直下+フィールドと紐付け ④数字項目は自動整形（ハイフン等）を必須に。フォームの問題は opc-heuristic-evaluation の #5 エラー防止で拾う。

（調査継続中）

下次继续：フォーム点検から。エラー文面は opc-error-message-writing、点検は opc-heuristic-evaluation と統合。