会員登録ページの配色はどう決める？入力を邪魔しないWEBデザイン

会員登録ページでは、名前・メールアドレス・パスワード・利用規約への同意など、複数の入力を続けて行うことがあります。入力欄ごとに色を変えると情報量が増え、どこに入力すればよいか分かりにくくなるため、背景・文字・入力欄はニュートラルにそろえ、フォーカス・エラー・登録ボタンだけに必要な色を使う方法が扱いやすいです。

背景と入力欄はニュートラルにして、ラベルを読みやすくする

以下のHEX（Webで色を表す16進数コード）例では、ページ背景をライトグレー ■#F8FAFC、フォーム面と入力欄を白 ■#FFFFFF にします。ラベルや本文をダークブルーグレー ■#334155 にすると、白 ■#FFFFFF に対するコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約10.35:1です。補足説明をブルーグレー ■#475569 にすると約7.58:1です。

入力欄の必要な境界線をスレートグレー ■#64748B にすると、白 ■#FFFFFF に対して約4.76:1です。一方、ページ背景の ■#F8FAFC と入力欄の白 ■#FFFFFF の差は約1.05:1しかないため、入力欄の位置を示す必要がある場合は背景差だけに頼りません。

W3Cのフォームガイドでは、入力欄には目的が分かるラベルを付けることが勧められています。プレースホルダーは入力すると消えるため、ラベルの代わりにせず、「メールアドレス」「パスワード」のような見える文字を残します。

入力中の場所と登録ボタンだけにアクセントを使う

現在入力している欄には、フォーカスリングとしてブルー ■#2563EB を白 ■#FFFFFF の外側に表示する例があります。この組み合わせは約5.17:1です。すべての入力欄を青く塗るのではなく、操作中の欄だけに変化を付けると、入力の流れを邪魔しにくくなります。

パスワード条件や必須項目は、色だけで示さず文字で説明します。たとえば「8文字以上」などサイトが実際に求める条件を入力欄の近くに表示し、必須項目には「必須」と明記します。W3CのForm Instructionsでも、必須・任意や入力形式など、フォームを完了するために必要な説明を利用者が確認できる形で示すことが勧められています。

登録ボタンはロイヤルブルー ■#1D4ED8、文字は白 ■#FFFFFF にすると約6.70:1です。ログインへのリンクや補助操作まで同じ強い色の塗りつぶしにせず、登録ボタンだけを主要操作として強調すると、画面内の優先順位を作りやすくなります。

エラーと同意状態は色だけで伝えず、具体的な文言を残す

入力エラーには、ペールレッド ■#FEF2F2 の背景とダークレッド ■#B42318 の文字を使うと約6.01:1です。ただし、赤い枠だけでエラーを示さず、「メールアドレスの形式を確認してください」のように修正内容が分かる文言を表示します。W3Cの入力検証ガイドでも、エラーを利用者に分かる形で通知することが重要とされています。

利用規約への同意も、チェックボックスの色だけで選択状態を伝えず、チェックマークと文言を併用します。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、色を情報伝達の唯一の手段にしないことが求められます。通常サイズの文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上、操作部品や状態を識別するために必要な視覚情報は隣接色との3:1以上が基準です。

HueRollでは、候補色を3桁または6桁のHEXやカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、会員登録ページの背景・文字・入力欄・フォーカス・エラー・ボタンなど、実際に隣接する組み合わせは別途確認します。