デザイン 2025.11.21

問い合わせフォームで離脱される理由｜入力完了率を上げるUIデザイン改善術

約8分で読めます

問い合わせフォームの完了率が低くて困っていませんか？離脱の原因とUIデザインの改善点を実案件をもとに解説します。

こんな悩み、ありませんか？

「問い合わせフォームを設置したのに、途中で離脱される」「アクセスはあるのに問い合わせにつながらない」「入力完了率を上げたいけど、どこを改善すればよいか分からない」

そんなお悩みをお持ちのWeb担当者の方に向けて、実際の制作現場で培った問い合わせフォームのUI改善術をお伝えします。

なぜフォームで離脱が起きるのか？実データから見える課題

あるクライアント様（製造業）のWebサイトでは、問い合わせページへのアクセスは月間500件あるものの、実際の問い合わせ完了は月10件程度という状況でした。完了率わずか2%という数字に、私たちも驚きました。

Google Analyticsでユーザーの行動を分析すると、離脱のポイントが明確に見えてきました：

  • 入力項目を見た瞬間の離脱：35%
  • 入力途中での離脱：40%
  • 確認画面での離脱：23%
  • 完了：2%

この数字から、フォームの第一印象とユーザビリティに大きな問題があることが判明したのです。

離脱される5つの主要原因とその解決策

1. 入力項目が多すぎる問題

課題： 「念のため」と項目を増やしがちですが、ユーザーにとっては大きな負担

解決策： 本当に必要な項目だけに絞り込む

前述のクライアント様では、当初15項目あった入力欄を5項目に削減。その結果、完了率が2%から12%まで改善しました。

<!-- 改善前：項目が多すぎる例 -->
<form>
  <input type="text" placeholder="会社名" required>
  <input type="text" placeholder="部署名" required>
  <input type="text" placeholder="役職" required>
  <input type="text" placeholder="担当者名" required>
  <input type="email" placeholder="メールアドレス" required>
  <input type="tel" placeholder="電話番号" required>
  <input type="text" placeholder="FAX番号">
  <!-- さらに多数の項目... -->
</form>

<!-- 改善後：必要最小限に絞った例 -->
<form>
  <input type="text" placeholder="お名前" required>
  <input type="email" placeholder="メールアドレス" required>
  <input type="tel" placeholder="電話番号">
  <select name="inquiry-type" required>
    <option value="">お問い合わせ種別を選択</option>
    <option value="product">製品について</option>
    <option value="price">価格について</option>
  </select>
  <textarea placeholder="お問い合わせ内容" required></textarea>
</form>

2. エラー表示のタイミングが悪い

課題： 送信ボタンを押してからエラーが表示される

解決策： リアルタイムバリデーションの導入

ユーザーが入力した瞬間にエラーをチェックし、適切なフィードバックを提供することで、ストレスを大幅に軽減できます。

// リアルタイムバリデーションの実装例
const emailInput = document.querySelector('input[type="email"]');
const errorMessage = document.querySelector('.error-message');

emailInput.addEventListener('blur', function() {
  const email = this.value;
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  
  if (!emailPattern.test(email) && email !== '') {
    this.classList.add('error');
    errorMessage.textContent = '正しいメールアドレスを入力してください';
    errorMessage.style.display = 'block';
  } else {
    this.classList.remove('error');
    errorMessage.style.display = 'none';
  }
});

3. スマホでの入力しづらさ

課題： PCでは問題ないが、スマホで入力しづらい

解決策： モバイルファーストのフォームデザイン

あるECサイトのクライアント様では、アクセスの70%がスマホからでした。しかし問い合わせの完了率はPC版と比べて半分以下という状況。フォームをモバイル最適化することで、完了率が3倍に向上しました。

/* モバイル最適化のCSS例 */
.form-group {
  margin-bottom: 24px;
}

.form-input {
  width: 100%;
  padding: 16px;
  font-size: 16px; /* iOSでズームを防ぐ */
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* 送信ボタンはタップしやすいサイズに */
.submit-button {
  width: 100%;
  padding: 18px;
  font-size: 18px;
  min-height: 48px;
}

4. 進捗が見えない不安感

課題： ユーザーが「あとどのくらい入力すればよいか」分からない

解決策： プログレスバーや段階表示の導入

特に長めのフォームでは、進捗表示があることでユーザーの完了率が向上します。

<!-- プログレスバーの実装例 -->
<div class="progress-container">
  <div class="progress-bar">
    <div class="progress-fill" style="width: 60%;"></div>
  </div>
  <div class="progress-text">ステップ 2/3</div>
</div>

<style>
.progress-container {
  margin-bottom: 32px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #007bff;
  transition: width 0.3s ease;
}

.progress-text {
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  color: #666;
}
</style>

5. 送信後の不安を取り除けていない

課題： 送信ボタンを押した後、本当に送信されたか不安になる

解決策： 明確なフィードバックと次のステップの提示

よくある改善の落とし穴と注意点

落とし穴1：デザインばかりに気を取られる

見た目を美しくすることも大切ですが、ユーザビリティを犠牲にしては本末転倒です。あるクライアント様では、デザイナーが作った美しいフォームの完了率が予想外に低く、調査してみると「必須項目が分からない」「エラー表示が見づらい」といった基本的な問題が見つかりました。

落とし穴2：一度に全てを変更してしまう

フォーム改善は段階的に行うことが重要です。すべてを一度に変更すると、どの変更が効果的だったか分からなくなります。A/Bテストを活用し、一つずつ検証していくことをお勧めします。

実装後の効果測定方法

フォーム改善の効果は、以下の指標で測定します：

  • コンバージョン率（完了率）
  • 各ステップでの離脱率
  • 入力時間の短縮
  • エラー発生率の減少

Google AnalyticsやHotjarなどのツールを使って、定期的に数値を確認し、さらなる改善点を見つけていくことが大切です。

まとめ：まず何から始めるべきか

問い合わせフォームの改善は、小さな変更でも大きな効果を生み出します。

まずは以下の順番で取り組んでみてください：

  1. 現在のフォームの完了率を測定（Google Analyticsの設定）
  2. 入力項目の見直し（本当に必要な項目だけに絞る）
  3. スマホでの表示・操作性チェック
  4. エラー表示の改善（リアルタイムバリデーション）
  5. 効果測定と継続改善

もし「自社のフォームの問題点が分からない」「技術的な実装が難しい」という場合は、お気軽にご相談ください。Fivenine Designでは、20年以上の実績をもとに、お客様のビジネスに最適なフォーム改善をご提案いたします。

この記事をシェア

関連記事

ブログ一覧に戻る