はじめに
前回の記事ではCSSの position プロパティの5種類の動作と使い分けを解説しました。今回はWebフォームのユーザビリティを高めるCSS・JavaScriptのテクニックを解説します。フォームはお問い合わせ・会員登録・購入など、ユーザーの重要なアクションに直結するUIです。「入力しにくい」「エラーがわかりにくい」「送信できたかどうかわからない」といった体験の悪さがコンバージョン率を大きく下げます。この連載で学んできたCSS・JavaScript・PHPの知識を活かした実践的な実装方法をまとめます。
1. フォームのベーススタイルを整える
1.1 ブラウザのデフォルトスタイルをリセットする
フォーム要素はブラウザごとにデフォルトのスタイルが大きく異なります。まずベーススタイルを統一します。
/* フォーム要素のリセット */
input,
textarea,
select,
button {
font-family: inherit; /* 親要素のフォントを継承する */
font-size: inherit; /* フォントサイズを継承する */
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
border: none;
background: transparent;
box-sizing: border-box; /* paddingを含めてwidthを計算する */
appearance: none; /* ブラウザ固有のUIをリセットする */
-webkit-appearance: none;
}
/* フォーカス時のアウトラインは削除しない（アクセシビリティ） */
input:focus,
textarea:focus,
select:focus {
outline: none; /* 削除する場合は必ず代替スタイルを用意する */
}
⚠️ outline: none だけを書いてフォーカスの視覚的フィードバックを消すのはアクセシビリティ上問題です： キーボード操作ユーザーはフォーカスが見えないと操作できません。必ず代替のフォーカス表示を用意してください。
1.2 フォーム全体のCSS変数を定義する
:root {
/* フォームのカラー */
--form-border: #CBD5E1;
--form-border-focus: #1A5FC0;
--form-border-error: #E24B4A;
--form-border-success: #27AE60;
--form-bg: #FFFFFF;
--form-bg-disabled: #F1F5F9;
--form-text: #1E293B;
--form-placeholder: #94A3B8;
--form-label: #475569;
--form-helper: #64748B;
/* フォームのサイズ */
--form-radius: 8px;
--form-padding-y: 1.2rem;
--form-padding-x: 1.6rem;
--form-gap: 2.4rem;
--form-transition: 0.2s ease;
}
2. 入力フィールドのスタイリング
2.1 基本的な入力フィールド
/* フォームグループ（ラベル＋入力フィールドのまとまり） */
.form-group {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
/* ラベル */
.form-label {
font-size: 1.4rem;
font-weight: 600;
color: var( --form-label );
line-height: 1.4;
}
/* 必須マーク */
.form-label .required {
color: var( --form-border-error );
margin-left: 0.4rem;
font-size: 1.2rem;
}
/* テキスト入力・テキストエリア共通 */
.form-input,
.form-textarea,
.form-select {
width: 100%;
padding: var( --form-padding-y ) var( --form-padding-x );
background: var( --form-bg );
border: 1.5px solid var( --form-border );
border-radius: var( --form-radius );
color: var( --form-text );
font-size: 1.6rem;
line-height: 1.6;
transition: border-color var( --form-transition ),
box-shadow var( --form-transition ),
background var( --form-transition );
}
/* プレースホルダー */
.form-input::placeholder,
.form-textarea::placeholder {
color: var( --form-placeholder );
}
/* フォーカス時 */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
border-color: var( --form-border-focus );
box-shadow: 0 0 0 3px rgba( 26, 95, 192, 0.15 );
outline: none;
}
/* テキストエリア */
.form-textarea {
resize: vertical; /* 縦方向のみリサイズ可能 */
min-height: 160px;
}
/* 無効状態 */
.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
background: var( --form-bg-disabled );
color: var( --form-placeholder );
cursor: not-allowed;
}
2.2 バリデーション状態のスタイル
/* エラー状態 */
.form-group.is-error .form-input,
.form-group.is-error .form-textarea,
.form-group.is-error .form-select {
border-color: var( --form-border-error );
background: #FFF5F5;
}
.form-group.is-error .form-input:focus,
.form-group.is-error .form-textarea:focus {
box-shadow: 0 0 0 3px rgba( 226, 75, 74, 0.15 );
}
/* 成功状態 */
.form-group.is-success .form-input,
.form-group.is-success .form-textarea {
border-color: var( --form-border-success );
background: #F0FFF4;
}
.form-group.is-success .form-input:focus,
.form-group.is-success .form-textarea:focus {
box-shadow: 0 0 0 3px rgba( 39, 174, 96, 0.15 );
}
/* エラーメッセージ */
.form-error-message {
font-size: 1.3rem;
color: var( --form-border-error );
display: flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.4rem;
}
.form-error-message::before {
content: '⚠';
font-size: 1.2rem;
flex-shrink: 0;
}
/* ヘルパーテキスト */
.form-helper-text {
font-size: 1.3rem;
color: var( --form-helper );
margin-top: 0.4rem;
line-height: 1.5;
}
3. フローティングラベル
フローティングラベルは入力前はプレースホルダーのように中に表示され、入力が始まると上に移動するUIパターンです。
<div class="floating-group">
<input
type="text"
id="name"
class="floating-input"
placeholder=" "
autocomplete="name"
>
<label for="name" class="floating-label">お名前</label>
</div>
/* フローティングラベルのコンテナ */
.floating-group {
position: relative;
width: 100%;
}
/* 入力フィールド */
.floating-input {
width: 100%;
padding: 2.4rem 1.6rem 0.8rem;
border: 1.5px solid var( --form-border );
border-radius: var( --form-radius );
font-size: 1.6rem;
background: var( --form-bg );
transition: border-color var( --form-transition ),
box-shadow var( --form-transition );
}
/* ラベル（初期状態：中央に表示） */
.floating-label {
position: absolute;
left: 1.6rem;
top: 50%;
transform: translateY( -50% );
font-size: 1.6rem;
color: var( --form-placeholder );
pointer-events: none;
transition: top 0.2s ease,
font-size 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}
/* 入力中または入力済み（placeholderが " " なのでfocus時もnot(:placeholder-shown)が使える） */
.floating-input:focus + .floating-label,
.floating-input:not( :placeholder-shown ) + .floating-label {
top: 1.0rem;
transform: none;
font-size: 1.2rem;
color: var( --form-border-focus );
font-weight: 600;
}
.floating-input:focus {
border-color: var( --form-border-focus );
box-shadow: 0 0 0 3px rgba( 26, 95, 192, 0.15 );
outline: none;
}
💡 placeholder=" " （スペース）を設定するのがフローティングラベル実装のポイントです： :not(:placeholder-shown) セレクターでプレースホルダーが表示されていない状態（＝入力済み）を検出できます。スペースを設定しておくことで入力前もプレースホルダーが「表示されている」状態になります。
4. リアルタイムバリデーション（JavaScript）
4.1 バリデーション関数の設計
// バリデーションルールの定義
const validators = {
required: ( value ) => {
return value.trim() !== ''
? null
: 'この項目は必須です。';
},
email: ( value ) => {
if ( value.trim() === '' ) return null; // 必須チェックはrequiredに任せる
const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return pattern.test( value )
? null
: '正しいメールアドレスを入力してください。';
},
minLength: ( min ) => ( value ) => {
if ( value.trim() === '' ) return null;
return value.length >= min
? null
: `${min}文字以上で入力してください。`;
},
maxLength: ( max ) => ( value ) => {
return value.length <= max
? null
: `${max}文字以内で入力してください。`;
},
tel: ( value ) => {
if ( value.trim() === '' ) return null;
const pattern = /^[\d\-\+\(\)\s]+$/;
return pattern.test( value )
? null
: '正しい電話番号を入力してください。';
},
};
4.2 バリデーション結果をUIに反映する
// フォームグループの状態を更新する
function setFieldState( field, state, message = '' ) {
const group = field.closest( '.form-group' );
if ( !group ) return;
// 状態クラスをリセット
group.classList.remove( 'is-error', 'is-success' );
// エラーメッセージ要素を取得または作成
let errorEl = group.querySelector( '.form-error-message' );
if ( state === 'error' ) {
group.classList.add( 'is-error' );
if ( !errorEl ) {
errorEl = document.createElement( 'p' );
errorEl.className = 'form-error-message';
errorEl.setAttribute( 'role', 'alert' ); // スクリーンリーダー対応
field.insertAdjacentElement( 'afterend', errorEl );
}
errorEl.textContent = message;
} else if ( state === 'success' ) {
group.classList.add( 'is-success' );
if ( errorEl ) errorEl.remove();
} else {
// デフォルト状態
if ( errorEl ) errorEl.remove();
}
}
// フィールドを検証する
function validateField( field, rules ) {
const value = field.value;
for ( const rule of rules ) {
const error = rule( value );
if ( error ) {
setFieldState( field, 'error', error );
return false;
}
}
setFieldState( field, 'success' );
return true;
}
4.3 フォームへの適用
document.addEventListener( 'DOMContentLoaded', () => {
const form = document.querySelector( '#contact-form' );
if ( !form ) return;
// 各フィールドの検証ルールを定義する
const fieldRules = {
'#input-name': [
validators.required,
validators.minLength( 2 ),
validators.maxLength( 50 ),
],
'#input-email': [
validators.required,
validators.email,
],
'#input-tel': [
validators.tel,
],
'#input-message': [
validators.required,
validators.minLength( 10 ),
validators.maxLength( 1000 ),
],
};
// 各フィールドにイベントを設定する
Object.entries( fieldRules ).forEach( ( [ selector, rules ] ) => {
const field = form.querySelector( selector );
if ( !field ) return;
// 入力中（文字を打つたびに検証）
field.addEventListener( 'input', () => {
// 一度でもblurしたフィールドのみリアルタイム検証する
if ( field.dataset.touched ) {
validateField( field, rules );
}
} );
// フォーカスが外れたとき
field.addEventListener( 'blur', () => {
field.dataset.touched = 'true';
validateField( field, rules );
} );
} );
// 送信時に全フィールドを検証する
form.addEventListener( 'submit', ( e ) => {
e.preventDefault();
let isValid = true;
Object.entries( fieldRules ).forEach( ( [ selector, rules ] ) => {
const field = form.querySelector( selector );
if ( !field ) return;
field.dataset.touched = 'true';
if ( !validateField( field, rules ) ) {
isValid = false;
}
} );
if ( isValid ) {
submitForm( form );
} else {
// 最初のエラーフィールドにフォーカスを移す
const firstError = form.querySelector( '.is-error .form-input, .is-error .form-textarea' );
firstError?.focus();
}
} );
} );
💡 「一度フォーカスが外れたフィールドだけリアルタイム検証する」設計が使いやすいです： 入力を始めた瞬間にエラーが出るとユーザーが驚きます。blur イベントで初めて触ったことを記録して、その後の input イベントでリアルタイム検証する方法が体験として自然です。
5. 文字数カウンター
テキストエリアに残り文字数を表示するUIは、長文入力フォームでとくに有効です。
<div class="form-group">
<label for="message" class="form-label">
お問い合わせ内容
<span class="required">*</span>
</label>
<div class="textarea-wrapper">
<textarea
id="message"
name="message"
class="form-textarea"
maxlength="1000"
rows="6"
></textarea>
<div class="char-counter">
<span class="char-counter__current">0</span>
<span class="char-counter__separator"> / </span>
<span class="char-counter__max">1000</span>
</div>
</div>
</div>
.textarea-wrapper {
position: relative;
}
.char-counter {
position: absolute;
bottom: 0.8rem;
right: 1.2rem;
font-size: 1.2rem;
color: var( --form-helper );
pointer-events: none;
transition: color var( --form-transition );
}
/* 上限に近づいたとき */
.char-counter.is-warning {
color: #EF9F27;
font-weight: 600;
}
/* 上限に達したとき */
.char-counter.is-limit {
color: var( --form-border-error );
font-weight: 700;
}
/* カウンターの分だけpaddingを追加する */
.textarea-wrapper .form-textarea {
padding-bottom: 3.2rem;
}
// 文字数カウンターの初期化
function initCharCounter( textarea ) {
const wrapper = textarea.closest( '.textarea-wrapper' );
const counter = wrapper?.querySelector( '.char-counter' );
const currentEl = counter?.querySelector( '.char-counter__current' );
const maxLength = parseInt( textarea.getAttribute( 'maxlength' ), 10 );
if ( !counter || !currentEl || isNaN( maxLength ) ) return;
const update = () => {
const length = textarea.value.length;
currentEl.textContent = length;
counter.classList.remove( 'is-warning', 'is-limit' );
if ( length >= maxLength ) {
counter.classList.add( 'is-limit' );
} else if ( length >= maxLength * 0.8 ) {
counter.classList.add( 'is-warning' );
}
};
textarea.addEventListener( 'input', update );
update(); // 初期表示
}
document.querySelectorAll( '.form-textarea[maxlength]' ).forEach( initCharCounter );
6. 送信中・送信完了のフィードバック
6.1 送信ボタンの状態管理
/* 送信ボタン */
.form-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
padding: 1.4rem 4rem;
background: var( --color-primary, #1A5FC0 );
color: white;
font-size: 1.6rem;
font-weight: 600;
border: none;
border-radius: var( --form-radius );
cursor: pointer;
transition: background 0.2s ease,
transform 0.15s ease,
box-shadow 0.2s ease;
min-width: 160px;
}
.form-submit:hover:not( :disabled ) {
background: #0D3A7A;
box-shadow: 0 4px 12px rgba( 26, 95, 192, 0.3 );
}
.form-submit:active:not( :disabled ) {
transform: translateY( 1px );
}
/* 送信中 */
.form-submit:disabled,
.form-submit.is-loading {
background: #94A3B8;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* スピナーアニメーション */
.form-submit .spinner {
width: 18px;
height: 18px;
border: 2px solid rgba( 255, 255, 255, 0.4 );
border-top: 2px solid white;
border-radius: 50%;
animation: spin 0.7s linear infinite;
display: none;
}
.form-submit.is-loading .spinner {
display: block;
}
@keyframes spin {
to { transform: rotate( 360deg ); }
}
6.2 送信処理とフィードバック表示
async function submitForm( form ) {
const submitBtn = form.querySelector( '.form-submit' );
const btnText = submitBtn.querySelector( '.btn-text' );
const spinner = submitBtn.querySelector( '.spinner' );
// 送信中の状態にする
submitBtn.disabled = true;
submitBtn.classList.add( 'is-loading' );
if ( btnText ) btnText.textContent = '送信中...';
try {
const formData = new FormData( form );
const response = await fetch( form.action, {
method: 'POST',
body: formData,
} );
if ( !response.ok ) throw new Error( 'Network response was not ok' );
// 成功時
showFormMessage( form, 'success',
'お問い合わせを受け付けました。3営業日以内にご連絡いたします。' );
form.reset();
} catch ( error ) {
// 失敗時
showFormMessage( form, 'error',
'送信中にエラーが発生しました。しばらく経ってから再度お試しください。' );
} finally {
// ボタンを元に戻す
submitBtn.disabled = false;
submitBtn.classList.remove( 'is-loading' );
if ( btnText ) btnText.textContent = '送信する';
}
}
// フォームの上部にメッセージを表示する
function showFormMessage( form, type, text ) {
let msgEl = form.querySelector( '.form-message' );
if ( !msgEl ) {
msgEl = document.createElement( 'div' );
msgEl.className = 'form-message';
form.prepend( msgEl );
}
msgEl.className = `form-message form-message--${type}`;
msgEl.textContent = text;
msgEl.setAttribute( 'role', 'alert' );
// メッセージまでスクロールする
msgEl.scrollIntoView( { behavior: 'smooth', block: 'center' } );
}
/* フォームメッセージ */
.form-message {
padding: 1.6rem 2rem;
border-radius: var( --form-radius );
font-size: 1.5rem;
font-weight: 500;
line-height: 1.6;
margin-bottom: 2.4rem;
}
.form-message--success {
background: #F0FFF4;
border: 1.5px solid #27AE60;
color: #166534;
}
.form-message--error {
background: #FFF5F5;
border: 1.5px solid #E24B4A;
color: #7F1D1D;
}
7. アクセシビリティ対応
7.1 ARIAを使ったエラーの関連付け
<!-- エラーメッセージをARIAで入力フィールドに関連付ける -->
<div class="form-group">
<label for="input-email" class="form-label">
メールアドレス <span class="required" aria-label="必須">*</span>
</label>
<input
type="email"
id="input-email"
name="email"
class="form-input"
aria-required="true"
aria-describedby="email-error email-helper"
autocomplete="email"
>
<p id="email-helper" class="form-helper-text">
確認メールをお送りします。
</p>
<p id="email-error" class="form-error-message" role="alert" aria-live="polite"></p>
</div>
// エラー発生時にaria-invalidを設定する
function setFieldState( field, state, message = '' ) {
const group = field.closest( '.form-group' );
if ( !group ) return;
group.classList.remove( 'is-error', 'is-success' );
if ( state === 'error' ) {
group.classList.add( 'is-error' );
field.setAttribute( 'aria-invalid', 'true' );
const errorEl = group.querySelector( '[role="alert"]' );
if ( errorEl ) errorEl.textContent = message;
} else if ( state === 'success' ) {
group.classList.add( 'is-success' );
field.setAttribute( 'aria-invalid', 'false' );
const errorEl = group.querySelector( '[role="alert"]' );
if ( errorEl ) errorEl.textContent = '';
} else {
field.removeAttribute( 'aria-invalid' );
const errorEl = group.querySelector( '[role="alert"]' );
if ( errorEl ) errorEl.textContent = '';
}
}
💡 aria-live="polite" でスクリーンリーダーがエラーを自動で読み上げます： role="alert" は即座に読み上げますが、入力中にうるさく感じることがあります。aria-live="polite" は他の読み上げが終わってから通知されるためよりユーザーフレンドリーです。
8. スマートフォン対応の追加設定
8.1 入力タイプを正しく設定する
<!-- type属性でスマートフォンのキーボードを最適化する -->
<input type="text" inputmode="text" autocomplete="name">
<input type="email" inputmode="email" autocomplete="email">
<input type="tel" inputmode="tel" autocomplete="tel">
<input type="number" inputmode="numeric">
<input type="url" inputmode="url" autocomplete="url">
<input type="search" inputmode="search">
inputmode の値 | 表示されるキーボード |
|---|---|
text | 通常のキーボード |
email | @ キーが目立つキーボード |
tel | 数字のテンキー（ハイフンあり） |
numeric | 数字のテンキー（ハイフンなし） |
url | .com ボタン付きキーボード |
8.2 タップ領域とスペーシングの最適化
/* スマートフォンでタップしやすいサイズを確保する */
@media ( max-width: 767px ) {
.form-input,
.form-textarea,
.form-select {
font-size: 1.6rem; /* iOS Safariのズームを防ぐ（16px以上が必要） */
padding: 1.4rem 1.6rem;
}
.form-group {
gap: var( --form-gap, 2rem );
}
.form-submit {
width: 100%; /* 送信ボタンを全幅にする */
padding: 1.6rem;
}
}
⚠️ iOS Safariは font-size: 16px 未満の入力フィールドにフォーカスすると自動的にズームします： font-size: 1.6rem 以上を設定しておくことでこの挙動を防げます。
9. 実践チェックリスト
✓ ラベルとフィールドが for・id で正しく関連付けられているか
✓ プレースホルダーだけでラベルを代替していないか（消えると内容を忘れる）
✓ フォーカス時に視覚的なフィードバック（枠色の変化・シャドウ）があるか
✓ エラーメッセージが「何が間違いか」を具体的に伝えているか
✓ 送信ボタンの送信中状態（スピナー・テキスト変更）が実装されているか
✓ 送信後に成功・失敗のメッセージが表示されるか
✓ aria-required・aria-invalid・aria-describedby が設定されているか
✓ スマートフォンで inputmode が正しく設定されているか
✓ フォントサイズが16px以上でiOS Safariの自動ズームを防いでいるか
✓ タップ領域が十分に確保されているか（最低44×44px推奨）
✓ キーボードのみで全フィールドを操作できるか確認したか
まとめ
今回はWebフォームのユーザビリティを高めるCSS・JavaScriptのテクニックを解説しました。ポイントをまとめると：
- ブラウザのデフォルトスタイルをリセットしてCSS変数でフォーム全体のデザインを統一する
- フォーカス時の枠色変化・シャドウ・エラー時の背景色変化でユーザーに状態をわかりやすく伝える
- フローティングラベルは
placeholder=" "と:not(:placeholder-shown)の組み合わせで実装できる - バリデーションは「一度フォーカスが外れてから」リアルタイムで動作させるのがUXとして自然
- 送信ボタンは送信中にスピナーを表示して多重送信を防止する
- エラーメッセージは
role="alert"とaria-invalidでスクリーンリーダーにも正確に伝える inputmodeでスマートフォンのキーボードを最適化する- iOS Safariのズームを防ぐためフォントサイズは必ず16px以上を設定する
次の記事では、CSSアニメーションとトランジションの使い方を改めて整理して、パフォーマンスを意識した実装方法を解説します。お楽しみに！
コメント