モバイルフォームのエラー色はどう決める？小画面で見逃させない方法

スマホの入力フォームでは、エラーが出てもキーボードや画面下のボタンに隠れ、見逃してしまうことがあります。エラー色は目立つ赤を選ぶだけでは不十分です。「どの欄を」「どう直すか」が狭い画面でも分かるように、文字・枠線・表示位置をセットで設計しましょう。

エラー色は入力欄と説明文に共通して使う

エラーを示す色は、周囲の背景と十分な明るさの差を持つ濃い色から選びます。入力欄の枠線をその色に変えるだけでなく、欄のすぐ下に「希望回を選択してください」のような具体的な説明を置きます。色だけでなく文章でも問題の場所と修正方法を伝えるためです。

スマホでは、送信後にフォーム上部だけへエラー一覧を出しても、入力中の欄から離れていて気付かない場合があります。エラーが複数なら件数をまとめて知らせつつ、各欄の近くにも短い説明を残します。赤い帯を画面全体に広げるより、直す必要がある部分だけを色と文言で示す方が、ほかの入力を邪魔しにくくなります。

入力を始めた直後からすべての必須欄をエラー色にするのではなく、送信や入力内容の確認など、エラーを判定するタイミングを決めます。修正後は新しい入力内容を検証し、解消した欄だけ表示を戻します。

陶芸教室の申込みフォームで使う配色例

陶芸教室のスマホ申込み画面で、「希望回」が未選択、「参加人数」が0名と入力された場面を想定します。このフォームでは参加人数を1〜4名とします。以下のHEX（#で始まる色コード）は、説明用の配色例です。

ページ背景を淡いブルーグレー ■#F5F7FA、入力フォームの面を白 ■#FFFFFF、項目名と通常の文字を濃いネイビー ■#23364A にします。文字と白い入力面 ■#FFFFFF のコントラスト比は約12.37:1、ページ背景 ■#F5F7FA に対しては約11.52:1です。

通常の入力欄の枠線にはグレーブルー ■#647788 を使います。白い入力面 ■#FFFFFF との比は約4.63:1、周囲のページ背景 ■#F5F7FA に対しても約4.31:1です。薄い線だけに頼らず、入力欄の輪郭が分かるようにします。

エラーになった欄の枠線は深い赤紫 ■#972F46 に変えます。白い入力面 ■#FFFFFF との比は約7.47:1です。希望回の欄には「希望回を選択してください」、人数欄には「参加人数は1〜4名で入力してください」と表示します。説明文は同じ深い赤紫 ■#972F46 とし、淡いピンク ■#FFF0F3 の説明背景に置くと比は約6.76:1です。

淡いピンク ■#FFF0F3 と白い入力面 ■#FFFFFF の比は約1.10:1しかありません。ピンクの塗りだけをエラーの目印にせず、赤紫 ■#972F46 の文字や枠線を残します。キーボードで選択中の欄には、エラー表示とは別に深い青 ■#1B587C の外側の輪郭を付ける方法があります。この青と白 ■#FFFFFF の比は約7.68:1です。エラー枠を消さず、二つの線が重ならない間隔を取ります。

「入力内容を確認する」ボタンは深い青緑 ■#196667 に白 ■#FFFFFF の文字を使い、比は約6.69:1です。ボタンとページ背景 ■#F5F7FA の比も約6.24:1です。エラーを知らせる赤紫はボタンに流用せず、操作と警告の役割を分けます。

キーボードで隠れない位置と修正後の動作を確認する

送信後にエラーが判明したら、「確認が必要な項目が2つあります」と知らせ、最初の該当欄へ移動できるようにします。スマホではキーボードを表示した状態で、エラー説明が画面内に見えているかを確認します。下部固定の送信ボタンやブラウザーの操作領域に、説明文が隠れない余白も必要です。

修正するときは、ほかの欄へ入力済みの内容をなるべく残しましょう。文字を拡大した場合や画面を横向きにした場合にも、説明文が途中で切れないか確かめます。必要ならHTML（WEBページの構造を記述する言語）の aria-invalid や aria-describedby を使い、エラー状態と説明文を入力欄に関連付けます。

WCAG 2.2（WEBコンテンツのアクセシビリティ指針）は、検出した入力エラーの項目と内容を文字で示すことを求めています。修正方法が分かる場合は、その提案も必要です。通常サイズの文字は背景と4.5:1以上、操作部分の識別に必要な線などは原則として隣接色と3:1以上を確認します。

HueRollでは選択した色と白・黒のコントラストを確認できますが、任意の2色同士の比較やAA・AAAの自動判定はできません。エラー文字 ■#972F46 と淡い説明背景 ■#FFF0F3 のような組み合わせは、別の方法で数値を確認してください。