「入力が不正です」で終わらせない：フォームのエラー文に戻り道を作ろう

フォームで「エラーが発生しました」と出ても、どこを直すのか分からないことがあるよね。ここでは入力エラーの文章を、読者が修正へ進める形に整える。

準備するのは、入力項目の条件と実際のエラー表示。障害の原因を調査する記事ではなく、分かっている入力条件をどう伝えるかが対象だよ。

項目・理由・次の操作をそろえる

「入力が不正です」だけでは、原因の項目も直し方も見えない。条件が分かっているなら、「郵便番号は半角数字7桁で入力してください。ハイフンは不要です」のように、修正できる情報を示す。

ただし、そのサービスがハイフンを受け付けるなら「不要」と「禁止」を混同しない。文言を作る前に、本当の入力仕様を確認しよう。

文字数や条件は架空の例だよ。送信失敗時にデータが残るか、二重送信の可能性があるかで案内は変わる。決済などは、結果を確認せず再実行させないことも大切。

赤い文字だけに任せない

エラーの場所には、色に加えて「エラー」「入力が必要です」といった説明を用意しよう。フォームが長いなら、先頭の一覧から該当項目へ戻れる構成も検討できる。

W3Cのエラー修正の提案では、誤りが検出され、修正方法が分かる場合に、その提案を利用者へ伝えることを扱っている。セキュリティや目的を損なう場合の例外もあり、ログインでアカウントの存在を明かすような詳細説明まで一律に増やすものではないよ。

入力を消さずに直せるか

文章が親切でも、送信のたびにすべての欄が空になると負担が大きい。名前、本文、添付など、それぞれ何を保持できるかを実際の動作で確認する。

1. 練習用の値で必須項目を一つ空けて送信する。
2. 案内が該当項目と結び付いているかを見る。
3. 修正後に再送信できるか確かめる。
4. サーバー側の失敗も、成功したように表示されないか確認する。

色以外の情報の足し方は、状態を文字と形で伝える記事へ。

参照した公式資料

• Understanding Success Criterion 3.3.3: Error Suggestion | WAI | W3C

確認日：2026年10月23日。練習例は架空のデータを使っています。