← 記事一覧へ

調査・解説 · UI/UX ·

フォームのエラー表示:何をどう直すか伝える

入力ミスの伝え方と、修正しやすいフォームの確認項目。

この記事の目次

入力フォームを見直すなら、まず「間違えたあと、自分で直せるか」を確認します。赤い枠を付けるだけでは、何を入れればよいのかまでは伝わりません。

この記事は、フォームを設計・レビューする人向けの解説です。GOV.UK Design Systemの指針を参照し、日本語の予約フォームを例に確認方法を整理します。作例は架空で、改善効果を測定した事例ではありません。

エラー文は「何を、どう直すか」まで書く

GOV.UKは、エラー文で問題と修正方法を伝え、対象項目と対応する言葉を使うよう勧めています。Error message

たとえば、連絡先メールアドレスを入力する画面。次の文では、原因も次の行動も分かりません。

入力内容が不正です。

未入力なら「メールアドレスを入力してください」、形式の不足なら「メールアドレスに @ とドメインを含めてください」のように分けます。ただし、これだけでメールが届くことまで保証できるわけではありません。形式の確認と、送信による到達確認は別の処理です。

状況 曖昧な表示 この作例での表示案
メールが空欄 必須エラー メールアドレスを入力してください
人数が上限を超える 範囲外です 予約人数は1〜6人で入力してください
日付の指定がない 日付が不正です 予約日を選んでください

人数の上限は、この作例の仮のルールです。実際のサービスでは、受付条件に合わせて文面と判定処理を揃えます。

説明は、必要な場所に短く置く

入力前から分かる制約なら、エラー後だけでなく項目の近くにも示す案を検討します。「予約人数」の下に「1回につき6人まで」と置けば、入力時にも条件を確認できます。

GOV.UKのQuestion pagesでは、ヒント文を短くし、詳しい説明が必要なら別の説明要素を使うよう案内しています。長い規約をすべて項目の補足に詰め込む、といった使い方は避けたいところです。

この作例では、画面の上部に予約条件、人数欄の近くに上限、入力を拒否するときに直し方を置きます。同じ文章を三か所に繰り返すのではなく、その時点で必要な情報を選びます。

サービス側の失敗を、入力ミスとして扱わない

予約処理が一時的に使えないとき、人数や日付を赤くしても利用者は直せません。GOV.UKも、容量不足など利用者が解消できない問題を項目の入力エラーとして表示しないよう区別しています。

この予約フォームなら、次のように分けて設計します。

  • 入力を直せる場合:対象項目と修正方法を示す。
  • 予約を受け付けられない場合:受付状況と、別の日時を選べるかを伝える。
  • 処理結果が不明な場合:予約状況の確認先を示す。再送信を促す文面は、二重予約を防げる仕組みとセットで決める。

ここは表示文だけで決まりません。「エラー時に予約が作成されている可能性があるか」を開発者と確認する必要があります。

手元のフォームで確認する5項目

GOV.UKでは、エラーを項目の近くとページ上部の一覧に示し、入力値を消さない構成を案内しています。これを出発点に、次の操作を試してみてください。

  1. 空欄のまま送信し、何を入力するか分かるか。
  2. 制約に合わない値を入れ、直し方が示されるか。
  3. エラー後も、正しい入力と間違えた入力の両方が残るか。
  4. キーボードでエラー箇所に移動し、修正して送信できるか。
  5. スクリーンリーダーで、どの項目の説明・エラーか分かるか。

この5項目だけでアクセシビリティ全体を評価できるわけではありません。また、行政サービスの指針をすべてのフォームに同じ形で適用する必要もありません。まず入力から修正までの一連の操作を確かめ、利用者と画面の条件に合わせて検証するための入口です。

Loading...