問い合わせフォームのリアルタイムバリデーションで入力完了率が60%向上した話

「フォームを開いても途中で離脱される」という課題を、リアルタイムバリデーションで解決。実装方法から失敗談まで、実案件の知見を余すところなく公開します。

こんな悩みを抱えていませんか？

アクセス解析を見ていると、問い合わせページへの流入は十分にあるのに、肝心の送信完了まで到達するユーザーが少ない——そんな状況に直面したことはないでしょうか。

ページビューと実際の問い合わせ数のギャップが大きい場合、原因の多くは「フォームの使いにくさ」に起因しています。特にありがちなのが、送信ボタンを押した後にまとめてエラーが出るUXです。せっかく入力したのに「メールアドレスが正しくありません」「電話番号は半角数字で入力してください」といったメッセージが一気に表示されると、ユーザーのやる気は一気に削がれてしまいます。

この記事では、あるクライアントの問い合わせフォームにリアルタイムバリデーションを実装した結果、入力完了率が60%改善した事例をベースに、具体的な実装方法と注意点を解説します。自社サイトのフォームを改善したいエンジニア・Web担当者の方に、すぐに使える知識をお届けします。

なぜフォームの途中離脱が起きるのか

「送信後エラー」が引き起こすストレス

従来型のフォームバリデーションは、送信ボタンを押した瞬間にサーバーサイドまたはクライアントサイドでまとめて検証する方式が一般的でした。この方式には致命的な問題があります。

ユーザーは「ちゃんと入力できた」と思ってボタンを押します。しかしエラーが返ってくる。するとどこが間違っているのかを探すコストが発生し、「このサイト使いにくいな」という印象が生まれます。離脱率が高い問い合わせフォームの多くは、この「送信後にまとめてエラー」というパターンに陥っています。

実案件で直面した課題

神奈川県内の士業事務所様のサイトリニューアルを担当した際、Googleアナリティクスのファネル分析で衝撃的なデータが出ました。

フォームページに到達したユーザーのうち、送信まで完了するのはわずか28%。7割以上が離脱していました。ヒートマップを確認すると、電話番号・メールアドレスの入力欄付近でマウスの動きが止まり、そのまま離脱するパターンが明確に見えました。原因は明らかで、「入力形式が分からない」「エラーが出るかどうか入力中は判断できない」という不安感が離脱を引き起こしていたのです。

リアルタイムバリデーションの実装手順

ここからは実際のコードを交えながら解説します。フレームワークはVanilla JavaScriptとReact（Next.js）の両パターンを紹介します。

基本的な設計思想

リアルタイムバリデーションで重要なのは「いつフィードバックするか」のタイミング設計です。inputイベントで即時反応させると、入力中から赤いエラーが出続けて逆にストレスになります。一般的に推奨されるのは以下のタイミングです。

• blur（フォーカスが外れた時点）でバリデーション実行
• 一度エラーが出た後はinputイベントでリアルタイム更新（修正を即時フィードバック）

この「段階的フィードバック」が離脱防止の鍵になります。

const fields = document.querySelectorAll('[data-validate]');

const validators = {
  email: (value) => {
    const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return pattern.test(value) ? null : '正しいメールアドレスを入力してください';
  },
  tel: (value) => {
    const pattern = /^[0-9\-+()\s]{10,15}$/;
    return pattern.test(value) ? null : '正しい電話番号を入力してください（半角数字）';
  },
  required: (value) => {
    return value.trim() !== '' ? null : 'この項目は必須です';
  }
};

function validateField(input) {
  const rules = input.dataset.validate.split(',');
  for (const rule of rules) {
    const trimmed = rule.trim();
    if (validators[trimmed]) {
      const error = validators[trimmed](input.value);
      if (error) return error;
    }
  }
  return null;
}

function showError(input, message) {
  const wrapper = input.closest('.field-wrapper');
  let errorEl = wrapper.querySelector('.error-message');
  if (!errorEl) {
    errorEl = document.createElement('span');
    errorEl.className = 'error-message text-red-500 text-sm mt-1 block';
    wrapper.appendChild(errorEl);
  }
  errorEl.textContent = message;
  input.classList.add('border-red-500');
  input.classList.remove('border-green-500');
}

function clearError(input) {
  const wrapper = input.closest('.field-wrapper');
  const errorEl = wrapper.querySelector('.error-message');
  if (errorEl) errorEl.textContent = '';
  input.classList.remove('border-red-500');
  input.classList.add('border-green-500');
}

fields.forEach((input) => {
  let isDirty = false;

  // blurで初回バリデーション
  input.addEventListener('blur', () => {
    isDirty = true;
    const error = validateField(input);
    error ? showError(input, error) : clearError(input);
  });

  // 一度エラーが出たらinputでリアルタイム更新
  input.addEventListener('input', () => {
    if (!isDirty) return;
    const error = validateField(input);
    error ? showError(input, error) : clearError(input);
  });
});

import { useState, useCallback } from 'react';

type ValidationRule = 'required' | 'email' | 'tel';

const validators: Record<ValidationRule, (v: string) => string | null> = {
  required: (v) => v.trim() !== '' ? null : 'この項目は必須です',
  email: (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)
    ? null : '正しいメールアドレスを入力してください',
  tel: (v) => /^[0-9\-+()\s]{10,15}$/.test(v)
    ? null : '正しい電話番号を入力してください（半角数字）',
};

function useFieldValidation(rules: ValidationRule[]) {
  const [error, setError] = useState<string | null>(null);
  const [isDirty, setIsDirty] = useState(false);

  const validate = useCallback((value: string) => {
    for (const rule of rules) {
      const result = validators[rule](value);
      if (result) {
        setError(result);
        return false;
      }
    }
    setError(null);
    return true;
  }, [rules]);

  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
    setIsDirty(true);
    validate(e.target.value);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (isDirty) validate(e.target.value);
  };

  return { error, handleBlur, handleChange };
}

// 使用例
export function EmailField() {
  const { error, handleBlur, handleChange } = useFieldValidation(['required', 'email']);

  return (
    <div className="field-wrapper">
      <label className="block text-sm font-medium mb-1">
        メールアドレス <span className="text-red-500">*</span>
      </label>
      <input
        type="email"
        className={`w-full border rounded px-3 py-2 ${
          error ? 'border-red-500' : 'border-gray-300 focus:border-blue-500'
        }`}
        onBlur={handleBlur}
        onChange={handleChange}
      />
      {error && (
        <span className="text-red-500 text-sm mt-1 block">{error}</span>
      )}
    </div>
  );
}

成功状態のフィードバックも忘れずに

エラー表示だけでなく、「正しく入力できた」という成功フィードバックも非常に重要です。先ほどのコードでborder-green-500を付与しているのはそのためです。緑色のボーダーや小さなチェックマークが表示されるだけで、ユーザーの安心感が大きく向上します。

よくある失敗パターンと対処法

実装経験を積む中で、リアルタイムバリデーションで「やりがちなミス」がいくつか見えてきました。事前に把握しておくと、手戻りを防げます。

① 入力中から即座にエラーを出す

最も多い失敗が、inputイベントに直接バリデーションを仕込むパターンです。メールアドレスを入力しようとしてtと打った瞬間に「メールアドレスが正しくありません」と赤く表示されると、ユーザーは萎縮します。必ず最初のバリデーションはblur後に行い、その後の修正にのみinputイベントを使ってください。

② モバイル環境でのIME考慮漏れ

iOSやAndroidで日本語入力をする際、変換中の文字列（コンポジション中）に対してバリデーションが走ることがあります。compositionstart / compositionend イベントを使って、日本語変換中はバリデーションをスキップする処理を追加するのが正解です。

let isComposing = false;
input.addEventListener('compositionstart', () => { isComposing = true; });
input.addEventListener('compositionend', () => {
  isComposing = false;
  if (isDirty) validate();
});
input.addEventListener('input', () => {
  if (isDirty && !isComposing) validate();
});

③ アクセシビリティの見落とし

エラーメッセージを視覚的に表示するだけでは、スクリーンリーダーに正しく伝わりません。エラー要素にrole="alert"またはaria-live="polite"を付与し、aria-describedbyでinputと紐付けることが必須です。見た目の改善とアクセシビリティは常にセットで考えましょう。

導入後の改善結果

これらの実装を施した結果、冒頭の士業事務所様では以下のような変化が生まれました。

送信完了率は28%から45%へ上昇し、約60%の改善を達成しました。サイトのデザインやコンテンツには一切手を加えておらず、フォームのUX改善だけでこの数字を叩き出せたのは、クライアント様にとっても大きな驚きだったようです。

まとめと次のステップ

リアルタイムバリデーションは「派手な機能追加」ではありません。ユーザーが安心してフォームを操作できる環境を整えることで、既存のアクセスから生まれる問い合わせを確実に増やす、費用対効果の高い改善施策です。広告費を増やす前に、まずフォームの離脱率を確認してみてください。

実装の難易度は中級程度ですが、IME対応・アクセシビリティ・段階的フィードバックのタイミング設計など、細部まで丁寧に作り込むことが成果を左右します。「とりあえず動くバリデーション」と「ユーザーが気持ちよく使えるバリデーション」には、大きな差があります。

自社フォームの改善をご検討中の方は、まず以下のチェックリストで現状を確認するところから始めてみてください。実装のご相談はFivenine Designにお気軽にどうぞ。