⚡ 社内ガイドラインに転記できる粒度で、業務システムのUI標準を公開中 → 設計チェックリスト

✍️ 入力フォーム

バリデーションとエラーメッセージの標準|文言テンプレート付き

「入力値が不正です」というメッセージは、利用者に何も伝えていません。にもかかわらず、多くの業務システムでこの手の文言が残っています。エラーメッセージは、設計時にテンプレートを決めておかないと必ず品質がばらつく部分です。

いつ検証するか(タイミング)

タイミング使いどころ注意点
入力中(キー入力ごと)文字種の制限、桁数の上限入力途中で赤くしない。まだ打ち終わっていない
フォーカスが外れたとき形式チェック(日付・メール・コード存在確認)業務システムの基本はここ
送信時項目間の相関チェック、サーバー側の整合性必ず実施する。クライアント検証だけに頼らない
よくある失敗

メールアドレス欄に1文字入れた瞬間に「形式が正しくありません」と赤くなる実装。まだ入力中であることを無視した検証は、利用者に「怒られている」感覚だけを与えます。初回はフォーカスが外れたときに検証し、一度エラーになった項目だけ入力中に再検証する(=直したらすぐ緑になる)挙動が理想です。

どこに出すか(位置)

エラー表示の3層構造
  1. 項目直下:具体的な内容。何をどう直すか。必ずここに出す
  2. 画面上部のサマリ:「3件のエラーがあります」+各項目へのリンク。項目数が多い画面で有効
  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要素で表示される
  • 送信時に最初のエラー項目へフォーカスが移動する
  • 文言テンプレートが定義され、システム全体で統一されている
  • 色だけでなくアイコンと文言でエラーを伝えている
  • 自動変換で吸収できるものをエラーにしていない
📊 次に読む 一覧・検索画面の標準|列設計からページングまで 業務システムで最も開かれる画面。検索条件の保持や列設計の考え方を整理します。
RELATED

同じカテゴリの記事