この記事で分かること
フォームで入力エラーが出たときのメッセージが分かりにくいと、離脱や再入力のストレスにつながります。伝わりやすいエラーメッセージ・入力チェックの書き方を解説します。
なぜエラーメッセージが重要なのか
- 「入力内容に誤りがあります」だけでは、どこを直せばよいか分からない
- エラーの原因が分からないと、そのままフォームを離脱してしまう
- 特にスマホでは画面が狭く、エラー箇所を探すだけで負担になる
分かりやすいエラーメッセージのポイント
- どの項目のエラーかを明示する — 「メールアドレス」など項目名を含める
- 何が問題かを具体的に書く — 「未入力です」「形式が正しくありません」など
- 直し方まで示す — 「ハイフンなしの数字で入力してください」のように
- 否定的な表現を避ける — 「間違っています」より「〇〇の形式で入力してください」が親切
例えば電話番号欄なら、「電話番号を入力してください」だけでなく「電話番号はハイフンなしの半角数字で入力してください」まで示すと、再入力の手間が減ります。
項目タイプ別の書き方例
- 必須項目の未入力：「お名前を入力してください」
- メールアドレスの形式エラー：「メールアドレスの形式が正しくありません（例: [email protected]）」
- 電話番号の形式エラー：「電話番号は半角数字で入力してください」
- 文字数オーバー：「〇〇字以内で入力してください（現在120字）」
- 選択肢の未選択：「いずれかを選択してください」
入力チェックのタイミングも意識する
送信ボタンを押した後にまとめてエラーを表示するより、入力欄からフォーカスが外れた時点でその場でチェックする方が、ユーザーは修正しやすくなります。特に長いフォームでは、送信直前にまとめてエラーが出ると、どこを直せばいいか分からず離脱しやすくなります。
よくある質問
エラーメッセージは何文字くらいが目安ですか？
一文、20〜30文字程度で「どの項目の」「何が」「どう直せばよいか」が伝わる長さが目安です。長すぎるとスマホ画面で読み飛ばされやすくなります。
必須項目が多いフォームでエラーが増えてしまいます。どうすればいいですか？
まずは必須項目自体を見直すのも有効です。必須項目の付け方も参考に、本当に必要な項目だけを必須にしましょう。
エラー表示の色やデザインで意識することはありますか？
赤色などエラーだと分かる色を使いつつ、色だけに頼らずアイコンやテキストでも伝えると、色の判別が難しい方にも伝わりやすくなります。