最終更新日: 2026-05-09
フォームのエラーメッセージは、ユーザーを責めるための文ではありません。
次に何を直せば送信できるかを、短く、具体的に、迷わせず伝えるための案内です。
「入力してください」 「正しくありません」 「エラーです」
このような文言だけでは、何が問題で、どう直せばよいのかが分かりません。特にスマホでは、エラー位置が見えにくく、何度も送信ボタンを押して離脱してしまうことがあります。
この記事では、フォームのエラーメッセージ例、良い文言の条件、表示位置、アクセシビリティ、FORMLOVAでの作り方をまとめます。
フォーム全体の改善を見たい場合は、フォームの離脱率を下げる改善ガイドもあわせて読むと、項目数、必須項目、モバイル入力、完了画面まで整理できます。
まず結論 -- エラー文は「場所」「理由」「直し方」を入れます
良いエラーメッセージには、次の3つがあります。
どの項目で起きたか
何が原因か
どう直せばよいか
悪い例です。
エラーがあります。
少し良くすると、こうです。
メールアドレスを入力してください。
さらに直し方まで入れると、もっと親切です。
メールアドレスを入力してください。例: name@example.com
W3CのWCAG 2.2では、入力エラーが検出された場合に、エラーの内容と該当項目をテキストで分かるようにする考え方が示されています。また、修正方法が分かる場合は、その提案をユーザーに伝えることも重要です。
つまり、色を赤くするだけでは足りません。
文字で、何を直すのかを伝えます。
項目別のエラーメッセージ例
ここからは、すぐ使える文言例です。
必須項目
必須項目では、「必須です」だけでなく、何を入力するのかを書きます。
| 悪い例 | 良い例 |
|---|---|
| 必須です | お名前を入力してください。 |
| 入力してください | 会社名を入力してください。個人の方は「個人」と入力してください。 |
| 未入力です | お問い合わせ内容を入力してください。 |
項目名を文中に入れるだけで、分かりやすさが変わります。
メールアドレス
メールアドレスは、形式エラーと確認エラーを分けます。
メールアドレスを入力してください。
メールアドレスの形式で入力してください。例: name@example.com
確認用メールアドレスが一致していません。
「形式が違います」だけだと、何の形式か分かりません。例を入れると、修正しやすくなります。
ただし、例は短くします。長い説明を入れすぎると、エラー文が読みづらくなります。
電話番号
電話番号では、ハイフンの扱いを事前に決めます。
電話番号を入力してください。
電話番号は半角数字で入力してください。
電話番号は10桁または11桁で入力してください。
ハイフンを許可するなら、そう書きます。
電話番号を入力してください。ハイフンあり・なしのどちらでも入力できます。
フォーム側がハイフンを自動整形できるなら、入力者に厳しく求めすぎないほうがいいです。
日付
日付は、形式と範囲を分けて伝えます。
希望日を入力してください。
日付は「2026/05/09」の形式で入力してください。
過去の日付は選べません。
希望日は本日から30日以内で選択してください。
カレンダー入力を使う場合でも、範囲外の日付を選べない理由を表示すると親切です。
数値
人数、数量、予算などは、下限と上限を書きます。
参加人数を入力してください。
参加人数は1名以上で入力してください。
参加人数は100名以下で入力してください。
「数値で入力してください」だけでは、どの範囲ならよいのか分かりません。
ファイルアップロード
ファイルアップロードは、拡張子、容量、枚数を分けます。
ファイルを選択してください。
PDF、PNG、JPGのいずれかをアップロードしてください。
ファイルサイズは10MB以下にしてください。
アップロードできるファイルは3点までです。
ファイルの条件は、エラー後ではなく、入力欄の補足にも書いておくとさらに良いです。
個人情報の同意チェック
同意チェックは、何に同意するのかを文中に入れます。
個人情報の取り扱いに同意してください。
プライバシーポリシーを確認し、同意にチェックを入れてください。
「同意してください」だけだと、何への同意かが曖昧です。
個人情報の同意文言そのものを整えたい場合は、問い合わせフォームの個人情報同意文言ガイドで例文を確認できます。
エラーの表示位置
エラー文は、原則として該当する入力欄の近くに出します。
送信ボタンの上に「エラーがあります」とだけ表示しても、ユーザーはどこへ戻ればよいか分かりません。
おすすめは、次の組み合わせです。
フォーム上部: エラーがあることを要約する
各項目の下: 具体的な直し方を表示する
最初のエラー項目へフォーカスを移動する
例です。
入力内容に3件の修正が必要です。
各項目のメッセージをご確認ください。
そして、各項目にはこう出します。
メールアドレスの形式で入力してください。例: name@example.com
上部の要約は、全体の状況を知らせるため。項目下のエラーは、直すため。
この役割を分けると、長いフォームでも迷いにくくなります。
色だけに頼らない
エラー項目を赤くするのは一般的です。
でも、赤だけでは十分ではありません。
色の違いが見えにくい人もいますし、画面読み上げでは色だけの情報は伝わりません。WCAGでも、エラーはテキストまたはテキスト代替で提示する必要があると説明されています。
実務では、次のように組み合わせます。
エラー文をテキストで出す
項目名とエラー文を近くに置く
アイコンや枠線は補助として使う
入力例を必要な項目だけに出す
赤枠やアイコンは便利です。
ただし、それだけにしない。文字で伝える。
これが基本です。
送信前に防げるエラーは、先に防ぐ
エラーメッセージを丁寧にすることは大切です。
でも、もっと良いのは、エラーになりにくいフォームにすることです。
たとえば、次のようにできます。
メール欄には入力例を表示する
日付はカレンダーから選ばせる
人数は選択式にする
電話番号はハイフンありでも受け付ける
必須項目を最小限にする
長い説明は入力前に補足として出す
W3CのLabels or Instructionsでも、ユーザーが何を入力すればよいか分かるラベルや説明を提供する考え方が示されています。
エラー後に助けるだけでなく、エラー前に迷わせない。
この順番で考えると、フォーム全体がやさしくなります。
FORMLOVAでエラー文まで含めて設計する
FORMLOVAでフォームを作るときは、入力項目だけでなく、補足文やエラー時の意図も一緒に整理できます。
チャットで頼むなら、次のように書けます。
問い合わせフォームを作ってください。
メールアドレスは形式例を表示し、電話番号はハイフンあり・なし両方を許可してください。
エラー文は、何を直せばよいか分かる文にしてください。
採用応募フォームなら、こうです。
採用応募フォームを作ってください。
履歴書アップロードはPDFのみ、10MB以下にしてください。
条件に合わない場合は、形式と容量を分けてエラー表示してください。
項目設計から見直す場合は、フォーム項目例ガイドも参考になります。エラー文は、項目名、入力形式、必須/任意の設計とセットで考えると整いやすいです。
よくある失敗
「正しく入力してください」だけにする
何が正しいのか分からない文は、ユーザーに考えさせます。
メールなら例、日付なら形式、数値なら範囲を出してください。
エラーを送信後にまとめて出す
長いフォームでは、送信後に一気にエラーを出されると疲れます。
入力中に分かるものは入力中に、送信しないと分からないものは送信後に、役割を分けるとよいです。
入力内容を消してしまう
エラー後に入力内容が消えると、離脱につながります。
送信に失敗しても、入力済みの内容はできるだけ保持してください。
厳しすぎる形式にする
電話番号のハイフン、郵便番号、会社名の表記などは、受け付けられる範囲を広げたほうがよい場合があります。
ユーザーに合わせてもらうのではなく、フォーム側で吸収できるものは吸収します。
まとめ
フォームのエラーメッセージは、短ければよいわけではありません。
大切なのは、どの項目で、何が原因で、どう直せばよいかが分かることです。
色だけに頼らず、文字で伝える。項目の近くに出す。入力例や範囲を必要な分だけ示す。送信後も入力内容を消さない。
この基本を押さえるだけで、フォームの印象はかなり変わります。
エラー文は、フォームの失敗表示ではなく、送信完了まで案内する小さな接客です。FORMLOVAでフォームを作るときも、項目名と同じくらい、エラー時の言葉を丁寧に整えてみてください。
執筆・確認情報
- 確認日: 2026-05-09
- 確認した主な公式情報:
- FORMLOVA仕様確認:
lib/form/validation.ts、lib/form/types.ts、フォーム送信後コンポーネントの公開フローを確認し、一般的な入力エラー設計として整理しました。 - 注意: アクセシビリティ適合の最終判断は、実装HTML、フォーカス制御、スクリーンリーダー確認、利用者環境によって変わります。この記事は文言と設計の実務ガイドです。
