スマホで長いフォームを見やすくする配色｜入力項目を整理する方法

スマホで長い入力フォームをスクロールしていると、「いま何を入力しているのか」「あと何を確認するのか」が分かりにくくなることがあります。色を増やして区切るよりも、関連する入力項目をまとまりに分け、同じ役割に同じ色を使うことが大切です。ここでは、地域のマラソン大会への参加登録フォームを例に考えます。

入力項目は色違いにせず、役割ごとのまとまりで分ける

まず、項目を「連絡先」「参加内容」「確認と同意」のように意味で分けます。それぞれに短い見出しを付け、見出しと入力欄の間隔は狭めに、次のまとまりとの間隔は少し広めに取ります。スマホでは縦に長い画面が続くため、見出しを見ればどの部分にいるか分かる構成が役立ちます。

見出し帯には同じ淡い色を繰り返し使い、本文の入力欄は共通の白い面に置くと、項目が増えても色のルールが変わりません。連絡先は青、参加内容は緑というように背景色を変える必要はありません。淡い背景の違いだけを区切りに使わず、見出しの太さ・番号・余白も組み合わせます。

「必須」「任意」は色だけで分けず、項目名のそばに文字で示します。入力欄に最初から入っている薄い案内文だけをラベル代わりにせず、入力後も項目名が見えるようにします。エラーの色は必要な場面に残し、通常の項目グループの装飾として使い回さない方が状態を取り違えにくくなります。

マラソン大会の参加フォームを7色で整理する例

参加登録を一つのページで済ませる想定です。「1 連絡先」には氏名・メールアドレス、「2 参加内容」には参加種目・希望するTシャツのサイズ、「3 確認と同意」には注意事項と同意欄を配置します。以下のHEX（WEBで使う16進数のカラーコード）は、このフォーム向けの提案です。

ページ全体を淡いブルーグレー ■#F3F6F8、各グループの入力面を白 ■#FFFFFF にします。二つの背景のコントラスト比は約1.09:1と小さいため、背景差だけではまとまりを表しません。本文と項目名には濃いスレート ■#283B49 を使い、白 ■#FFFFFF との比は約11.59:1です。

各グループの見出し帯は淡い青 ■#E6F0F5 に統一し、文字を濃いスレート ■#283B49 にします。文字と帯の比は約10.01:1です。見出しには「1 連絡先」のように番号も付けます。帯と白い入力面 ■#FFFFFF の比は約1.16:1なので、余白と見出しの太さで区切りを補います。

入力欄の説明や任意項目の補足は、少し控えめなブルーグレー ■#4D6270 を白 ■#FFFFFF に載せます。コントラスト比は約6.37:1です。入力欄の枠線はグレーブルー ■#71838F にすると、白い入力面 ■#FFFFFF との比は約3.93:1で、入力欄の輪郭を確認できます。カードにもこの線を使う場合、ページ背景 ■#F3F6F8 との比は約3.62:1です。

各グループの途中に強い色のボタンを置かず、最後に「入力内容を確認する」を一つ配置します。ボタン背景を深い青 ■#145C76、文字を白 ■#FFFFFF にすると比は約7.44:1です。ボタンとページ背景 ■#F3F6F8 の比も約6.86:1です。入力欄をキーボードで選択している位置（フォーカス）には、白い入力面 ■#FFFFFF に対して同じ深い青 ■#145C76 の外側の輪郭を使えます。

文字拡大や途中の入力でも区切りが分かるか確認する

スマホ幅でスクロールし、各グループの見出しが入力欄から離れすぎていないか、文字を大きくしたときに説明が途中で切れないかを確認します。キーボードが開いた状態でも、現在の項目名が見える位置にあると入力しやすくなります。確認画面へ進む場合は、入力済みの内容を失わずに戻って修正できるかも確かめてください。

見た目だけを区切っても、読み上げソフトにはグループの関係が伝わらないことがあります。HTML（WEBページの構造を表す言語）では、関連する選択肢をfieldsetでまとめ、legendでグループ名を示す方法があります。個々の欄にも対応するラベルを付けます。

WCAG 2.2（WEBコンテンツのアクセシビリティ指針）の文字コントラストは、通常サイズで4.5:1以上、大きな文字で3:1以上が基本です。入力欄を識別するために必要な線などの視覚情報には、原則として隣接色との3:1以上が求められます。HueRollは選択色と白・黒の比較には使えますが、任意の2色の直接比較やAA・AAAの自動判定はできません。見出しの淡い青 ■#E6F0F5 と文字のスレート ■#283B49 などは、別の方法でもコントラストを確認してください。