サイト制作

フォームのエラー表示の作り方｜赤色だけでなく項目と理由を伝える

慈愛妃きづな

2026-10-29

この記事には広告・アフィリエイトリンクが含まれます。

入力エラーは赤枠だけで示さず、どの項目をどう確認するかを文章で伝えます。色やアイコンは説明を補うものとして利用。誤入力から修正・再送信まで、内容を失わず進めるか試します。

赤い入力欄だけではエラーの理由が分からない

フォームを送ったら入力欄が赤くなった。それだけでは、未入力なのか、形式が違うのか、文字数が多いのか分かりません。色の違いを見分けにくい人だけでなく、誰でも迷う表示です。W3Cは、入力エラーを自動検出したとき、該当項目を示し、エラーをテキストで説明することを扱っています。

たとえば「入力エラーです」だけでなく、どの欄の何を確認すればよいかを伝えます。必須項目なら未入力であること、決まった形式があるなら、その形式が分かる説明を添えます。ここでの例は設計上の提案です。サービスごとの入力条件に合わせ、実際には受け付けない形式を案内しないようにします。

赤枠や注意アイコンを使うこと自体が悪いわけではありません。色だけに意味を担わせず、文章と組み合わせることが重要です。エラーの説明は、入力欄の近くやフォームの先頭など、利用者が見つけられる場所へ置きます。画面を拡大しても、説明と項目の関係を追えるか確認しましょう。

私は、入力に失敗したときほど親切な案内がほしいです。せっかく書いた内容を無意味に消したり、直した欄とは別の場所でまた止まったりすると、読む人の負担が増えます。正しく入力した場合だけでなく、わざと間違えた場合も試す。公開前には、その一周も必要ですね。