お問い合わせフォームは、Webサイトにおける最重要コンバージョンポイントです。しかし、入力のしにくさやエラー表示のわかりにくさが原因で、最大70%のユーザーがフォームから離脱してしまうというデータもあります。
本記事では、CSSだけで実装できるフォームUXの改善テクニックを4つご紹介します。
1. フロートラベル（入力時にラベルが浮き上がる）
プレースホルダーをラベルとして表示し、入力開始時にラベルが上部に移動するパターン。フォーム欄が何のフィールドかを、入力中も確認できます。下のフィールドに何か入力してみてください。
CSS
.field {
position: relative;
}
.field input {
width: 100%;
padding: 16px 12px 6px;
border: 1px solid #EAEAEA;
border-radius: 8px;
font-size: 0.9rem;
transition: border-color 0.2s;
}
.field input:focus { border-color: #E31010; }
.field label {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 0.85rem;
color: #9A9794;
pointer-events: none;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* フォーカス時 or 入力済み：ラベルが浮き上がる */
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
top: 8px;
transform: translateY(0);
font-size: 0.65rem;
color: #E31010;
}
💡 ポイント：
:placeholder-shown 擬似クラスがこのテクニックの鍵です。placeholder=" "（スペース1つ）にすることで、未入力時にもラベルが表示されます。
2. リアルタイムバリデーション表示
CSSの :valid / :invalid 擬似クラスを使えば、JavaScriptなしで入力値のバリデーション状態を視覚化できます。メールアドレスを入力してみてください。
正しいメールアドレスを入力すると枠が緑色になります
CSS
/* 入力値が有効：緑の枠線 */
input:valid:not(:placeholder-shown) {
border-color: #059669;
}
/* 入力値が無効（＆フォーカスが外れた時）：赤の枠線 */
input:invalid:not(:placeholder-shown):not(:focus) {
border-color: #DC2626;
}
3. ステップインジケーター
長いフォームを複数ステップに分割した場合、現在どのステップにいるかを視覚的に示すUI。ユーザーに「あとどのくらいか」を伝え、離脱を防ぎます。
✓
基本情報
2
詳細
3
確認
4
完了
CSS
.step__circle {
width: 32px;
height: 32px;
border-radius: 50%;
background: #EAEAEA;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #fff;
transition: all 0.3s;
}
.step.is-active .step__circle { background: #E31010; }
.step.is-done .step__circle { background: #059669; }
/* ステップ間の接続線 */
.step + .step::before {
content: '';
position: absolute;
top: 16px;
right: 50%;
width: 100%;
height: 2px;
background: #EAEAEA;
}
4. パスワード強度メーター
パスワード入力時に「弱い」「普通」「強い」をバーの色と本数で視覚化するUI。ユーザーにセキュリティへの安心感を与えます。
CSS
.strength { display: flex; gap: 4px; }
.strength__bar {
flex: 1;
height: 4px;
border-radius: 2px;
background: #EAEAEA;
transition: background 0.3s;
}
/* 弱い：1本目だけ赤 */
.strength.weak .strength__bar:nth-child(1) {
background: #DC2626;
}
/* 普通：2本目まで黄 */
.strength.medium .strength__bar:nth-child(1),
.strength.medium .strength__bar:nth-child(2) {
background: #F59E0B;
}
/* 強い：3本すべて緑 */
.strength.strong .strength__bar:nth-child(1),
.strength.strong .strength__bar:nth-child(2),
.strength.strong .strength__bar:nth-child(3) {
background: #059669;
}
まとめ：フォームは「会話」である
フォームは、ユーザーとサイトとの「対話」の場です。入力のたびに適切なフィードバックを返すことで、ユーザーは安心して入力を続けられます。
- フロートラベル → 入力中もフィールド名がわかる
- リアルタイムバリデーション → CSSだけで即時フィードバック
- ステップインジケーター → 進捗を可視化して離脱防止
- パスワード強度メーター → セキュリティへの安心感
💡 ツタワルの制作では：フォームのUX設計からA/Bテストまで、コンバージョン最大化のための施策を包括的にサポートしています。