「入力値が不正です」というメッセージは、利用者に何も伝えていません。にもかかわらず、多くの業務システムでこの手の文言が残っています。エラーメッセージは、設計時にテンプレートを決めておかないと必ず品質がばらつく部分です。
いつ検証するか(タイミング)
| タイミング | 使いどころ | 注意点 |
|---|---|---|
| 入力中(キー入力ごと) | 文字種の制限、桁数の上限 | 入力途中で赤くしない。まだ打ち終わっていない |
| フォーカスが外れたとき | 形式チェック(日付・メール・コード存在確認) | 業務システムの基本はここ |
| 送信時 | 項目間の相関チェック、サーバー側の整合性 | 必ず実施する。クライアント検証だけに頼らない |
メールアドレス欄に1文字入れた瞬間に「形式が正しくありません」と赤くなる実装。まだ入力中であることを無視した検証は、利用者に「怒られている」感覚だけを与えます。初回はフォーカスが外れたときに検証し、一度エラーになった項目だけ入力中に再検証する(=直したらすぐ緑になる)挙動が理想です。
どこに出すか(位置)
- 項目直下:具体的な内容。何をどう直すか。必ずここに出す
- 画面上部のサマリ:「3件のエラーがあります」+各項目へのリンク。項目数が多い画面で有効
- 入力欄そのもの:枠線の色とアイコンで異常を示す。色だけに頼らない
長いフォームでは、送信時に最初のエラー項目へ自動スクロールしフォーカスを当てるところまでを標準にしてください。エラーがあるのに画面上部にとどまり、利用者が探し回るのは避けたい状態です。
どう書くか(文言の3要素)
良いエラーメッセージには次の3要素が含まれます。
何が問題か(対象)
項目名を明示する。「日付」ではなく「納品日」。
なぜ問題か(理由)
ルールを具体的に示す。「受注日より前の日付は指定できません」。
どうすればよいか(行動)
次の一手を書く。「2026/08/12以降の日付を入力してください」。
- 入力値が不正です
- エラーが発生しました(E-0421)
- 処理に失敗しました。管理者に連絡してください
- 納品日は受注日(2026/08/12)以降を入力してください
- 取引先コード「A1234」は登録されていません。検索から選択してください
- 他の担当者がこの伝票を更新しました。最新の内容を読み込んでから再度保存してください
そのまま使える文言テンプレート
| 種別 | テンプレート | 例 |
|---|---|---|
| 未入力 | 〇〇を入力してください | 取引先名を入力してください |
| 形式不正 | 〇〇は△△の形式で入力してください | 電話番号は半角数字とハイフンで入力してください |
| 桁数超過 | 〇〇は△文字以内で入力してください | 備考は200文字以内で入力してください |
| 範囲外 | 〇〇は△△〜□□の範囲で入力してください | 数量は1〜9,999の範囲で入力してください |
| 相関エラー | 〇〇は△△より後の日付を入力してください | 納品日は受注日より後の日付を入力してください |
| 存在しない | 〇〇「△△」は登録されていません | 商品コード「X-001」は登録されていません |
| 重複 | 〇〇「△△」はすでに登録されています | 社員番号「10234」はすでに登録されています |
| 権限不足 | この操作には〇〇権限が必要です | この操作には承認権限が必要です |
| 排他制御 | 他の担当者が更新しました。再読み込みしてください | — |
| 通信・システム | 一時的に処理できませんでした。しばらく待って再度お試しください | — |
エラーコード(E-0421 など)は消すのではなく、文言の末尾に小さく添えるのが現実解です。利用者には行動を伝え、問い合わせ時にはコードで特定できる状態を両立できます。
書き方のルール
- 命令形ではなく「〜してください」で統一する
- 「〜できません」で終わらせず、必ず次の行動を書く
- システム内部用語(NULL、カラム、例外)を出さない
- 利用者を責める表現(「間違っています」「不正な」)を避ける
- 1メッセージ1エラー。複数の内容を詰め込まない
- 文末の句点の有無を全システムで統一する
「エラーにしない」という選択
最良のエラーメッセージは、エラーを出さないことです。
| よくあるエラー | エラーにしない解決策 |
|---|---|
| 全角数字が入力された | 半角に自動変換する |
| 日付の区切り文字が違う | 20260712 2026-07-12 すべて受け付けて整形する |
| 金額にカンマが入っている | カンマを除去して解釈する |
| 前後に空白が入っている | 自動でトリムする |
| 存在しないコードを打った | 入力中にサジェストを出し、選択させる |
警告・情報メッセージとの使い分け
| 種別 | 意味 | 表示 | 操作の続行 |
|---|---|---|---|
| エラー | 処理を続行できない | 赤・✕アイコン | 不可 |
| 警告 | 続行できるが確認が必要 | 黄・!アイコン | 可(確認後) |
| 情報 | 補足・案内 | 青・iアイコン | 可 |
| 成功 | 処理が完了した | 緑・✓アイコン | — |
警告レベルの内容をエラーとして扱い、業務を止めてしまう設計。「例年より数量が多いです」は警告であってエラーではありません。止めるべきかどうかは業務部門と合意して決めます。
チェックポイント
- 入力中に赤くならず、フォーカスアウトで検証している
- エラーが項目直下に、対象・理由・行動の3要素で表示される
- 送信時に最初のエラー項目へフォーカスが移動する
- 文言テンプレートが定義され、システム全体で統一されている
- 色だけでなくアイコンと文言でエラーを伝えている
- 自動変換で吸収できるものをエラーにしていない