問い合わせフォームのデザイン改善｜入力離脱を防ぐ項目・エラー表示・確認画面
2026/08/05
デザイン・ブランディング問い合わせフォームは、サイト成果を左右する「最後の接客ページ」です。
ホームページを見てサービスに興味を持ち、実績や料金を確認したユーザーが、最後に訪れるのが問い合わせフォームです。
ここまで順調に比較検討が進んでいても、フォームが使いにくければ問い合わせにはつながりません。
例えば、次のような状態です。
- 入力項目が多く、面倒に感じる
- 何を書けばよいのか分からない
- エラーが表示されたものの、直す場所が分からない
- 送信後に営業されそうで不安になる
- スマホでは入力しづらい
問い合わせフォームは、単なる入力欄ではありません。
サイトを訪れたユーザーに対し、最後に「安心して相談できる」と感じてもらうための接客ページです。
まず結論：入力項目を減らすだけではなく「迷い・手間・不安」を減らす
フォーム改善というと、「入力項目を少なくすればよい」と考えられがちです。
もちろん項目数は重要ですが、項目を減らすだけでは十分ではありません。
改善すべきポイントは、次の3つです。
迷いを減らす
何を、どのように入力すればよいかを明確にする
手間を減らす
文字入力や画面移動をできるだけ少なくする
不安を減らす
送信後の対応や個人情報の扱いを分かりやすくする
この3点が整うと、ユーザーは途中で止まりにくくなります。
問い合わせフォームで離脱が起きる主な原因5つ
入力項目が多く、完了までの負担が大きい
フォームを開いた瞬間に入力欄が何十個も並んでいると、それだけで「時間がかかりそう」と思われます。
特に初回問い合わせで、次のような情報をすべて必須にすると、入力の負担が大きくなります。
- 住所
- 部署名
- 役職
- 従業員数
- 予算
- 希望納期
- 詳細な相談内容
- 自社を知ったきっかけ
情報収集の目的は理解できますが、問い合わせ前に必要な情報と、問い合わせ後のヒアリングで確認できる情報は分けて考える必要があります。
必須項目と任意項目の違いが分かりにくい
どの項目を入力しなければ送信できないのか分からないフォームは、ユーザーに余計な判断をさせます。
特に避けたいのが、次のような表示です。
- 必須項目にだけ小さな記号がある
- ページ下部に「※は必須です」とだけ書かれている
- 任意項目なのか必須項目なのか表示されていない
各項目の近くに、「必須」「任意」を分かりやすく表示しましょう。
入力方法や回答例が分からない
入力欄があっても、ユーザーが何を書けばよいか分からなければ、入力は進みません。
例えば「お問い合わせ内容」とだけ書かれているよりも、次のような補足がある方が答えやすくなります。
記入例
「既存サイトのリニューアルを検討しています。ページ数は10ページ程度で、問い合わせ増加を目的としています」
相談内容がまだ整理できていないユーザーに向けて、次のような一文を添える方法も有効です。
内容がまとまっていない段階でも問題ありません。現在のお悩みやご希望を分かる範囲でご記入ください。
エラーの場所と直し方が伝わらない
入力エラーが発生した際に、ページ上部へ「入力内容に誤りがあります」とだけ表示しても、ユーザーはどこを直せばよいか分かりません。
エラー表示では、次の2点を具体的に伝える必要があります。
- どの項目に問題があるか
- どのように直せばよいか
例えば、「メールアドレスが正しくありません」だけでなく、次のように表示します。
メールアドレスの形式を確認してください。例：info@example.com
ユーザーを責める表現ではなく、修正方法を案内する表現にすることが重要です。
送信後の流れが分からず不安になる
ユーザーはフォームを送信する前に、送信後に何が起きるのかを気にしています。
- いつ返事が来るのか
- 電話がかかってくるのか
- 営業連絡が増えないか
- 相談だけでもよいのか
- 費用が発生しないか
送信ボタンの近くに、次のような情報を記載すると安心感が高まります。
- 通常〇営業日以内に返信します
- ご相談・お見積りは無料です
- 内容を確認後、担当者よりメールまたは電話でご連絡します
- ご相談内容に応じてオンライン打ち合わせをご案内します
記載内容は、実際の対応方法と一致させる必要があります。
入力離脱を防ぐフォームデザインの改善ポイント
項目は「問い合わせ対応に必要か」で判断する
入力項目を決める際は、「あると便利」ではなく、初回対応に本当に必要かで判断します。
一般的なBtoBの問い合わせフォームであれば、最初は次の項目でも対応できます。
- 会社名
- 氏名
- メールアドレス
- 電話番号
- 問い合わせ種別
- 問い合わせ内容
住所や予算、詳細な要件などは、問い合わせ後に確認できる場合があります。
ただし、問い合わせ内容によって事前情報が必要なサービスでは、必要項目を無理に削る必要はありません。
重要なのは、項目ごとに必要な理由を説明できる状態にすることです。
入力順はユーザーが答えやすい流れにする
フォームの入力順は、運営側が管理しやすい順番ではなく、ユーザーが答えやすい順番にします。
おすすめの流れは次の通りです。
- 問い合わせ種別
- 相談内容
- 会社名・氏名
- 連絡先
- 希望する連絡方法や時間帯
最初から個人情報を求めるよりも、まず相談内容を選べる方が、ユーザーがフォームに入りやすい場合があります。
一方で、短いフォームであれば、会社名・氏名から始めても大きな問題はありません。
サイトの目的や項目数に合わせて、自然な順番を設計しましょう。
ラベルとプレースホルダーを正しく使い分ける
入力欄の上や横に表示する項目名をラベル、入力欄の中に薄く表示する例文をプレースホルダーと呼びます。
プレースホルダーだけで項目名を表示すると、文字を入力した後に項目名が見えなくなります。
そのため、基本的には次のように使い分けます。
- ラベル：項目名を常に表示する
- プレースホルダー：入力例や補足を表示する
例
メールアドレス【必須】
プレースホルダー：info@example.com
ラベルと入力例の役割を分けることで、入力途中でも内容を確認しやすくなります。
選択式を活用して文字入力を減らす
スマホでは、文字入力そのものが負担になります。
回答内容がある程度決まっている項目は、次のような選択式を活用します。
- ラジオボタン
- チェックボックス
- プルダウン
- 日付選択
- 希望時間帯の選択
例えば、問い合わせ種別であれば次のように設定できます。
- ホームページの新規制作
- ホームページのリニューアル
- 更新・保守について
- Web集客について
- その他
ただし、選択肢が多すぎるプルダウンは、かえって探しにくくなります。
選択肢が少ない場合は、ラジオボタンなど、最初から内容が見える形式が分かりやすいでしょう。
必須・任意の表示を統一する
必須項目だけに「必須」と表示する方法と、すべての項目に「必須」「任意」を表示する方法があります。
どちらを採用する場合でも、ページ内でルールを統一することが重要です。
おすすめは、次のような表記です。
- 会社名 必須
- 電話番号 任意
色だけで区別すると分かりにくい場合があるため、文字でも明示します。
また、必須項目が多すぎる場合は、本当にすべて必要なのかを見直しましょう。
エラーは入力欄の近くに具体的に表示する
エラーが発生した項目は、次のように分かりやすくします。
- 入力欄の近くにエラーメッセージを表示する
- エラーがある入力欄を枠線などで示す
- ページ上部から該当項目へ移動しやすくする
- 入力済みの正常な内容は消さない
エラーメッセージは、短く具体的にします。
悪い例
入力内容に誤りがあります。
良い例
電話番号は半角数字で入力してください。
エラーが起きたことではなく、次に何をすればよいかを伝えましょう。
送信ボタンは「押した後」が分かる文言にする
「送信」だけでは、押した後の状態が分かりにくい場合があります。
フォームの種類に合わせて、具体的な文言を設定します。
- 入力内容を確認する
- この内容で問い合わせる
- 無料相談を申し込む
- 見積りを依頼する
- 資料を請求する
確認画面へ進むボタンと、最終送信ボタンは、文言を分けることも重要です。
- 入力画面：入力内容を確認する
- 確認画面：この内容で送信する
これにより、誤って送信してしまう不安を減らせます。
確認画面は必要？省略する場合の判断基準
確認画面には、入力内容を見直せるというメリットがあります。
一方で、画面が1つ増えるため、問い合わせ完了までの手順も増えます。
確認画面を設けた方がよいケースは、次の通りです。
- 入力項目が多い
- 長文や重要情報を入力する
- 予約内容や希望日時を確定する
- 送信後の修正が難しい
- 個人情報や契約に関わる情報を扱う
一方で、項目数が少ない簡易フォームであれば、入力画面上で内容を確認しやすくしたうえで、確認画面を省略する方法もあります。
重要なのは、確認画面の有無ではなく、誤送信の不安と完了までの負担のバランスです。
スマホで入力しやすいフォームを作るポイント
スマホでは、PC以上にフォームの使いやすさが成果を左右します。
特に確認したいポイントは次の通りです。
- 入力欄が画面幅に合っている
- 文字が小さすぎない
- 項目同士の間隔が狭すぎない
- ボタンが指で押しやすい
- 電話番号入力時に数字用キーボードが表示される
- メールアドレス入力時に適切なキーボードが表示される
- エラー表示後、該当項目が見つけやすい
- 入力途中で内容が消えない
また、横並びの項目は、スマホでは縦並びにした方が入力しやすい場合があります。
PC画面だけで確認せず、必ず実際のスマホで入力テストを行いましょう。
問い合わせの目的別｜おすすめ入力項目テンプレート
一般的なBtoB問い合わせフォーム
- 会社名【必須】
- 氏名【必須】
- メールアドレス【必須】
- 電話番号【任意】
- 問い合わせ種別【必須】
- 問い合わせ内容【必須】
- 個人情報保護方針への同意【必須】
見積り依頼フォーム
- 会社名【必須】
- 氏名【必須】
- メールアドレス【必須】
- 電話番号【任意】
- 希望サービス【必須】
- 希望時期【任意】
- 予算の目安【任意】
- 相談内容【必須】
予算を必須にすると離脱につながる場合があります。
予算が決まっていないユーザーのために、「未定」「相談したい」という選択肢を用意すると回答しやすくなります。
無料相談フォーム
- 会社名【必須】
- 氏名【必須】
- メールアドレス【必須】
- 相談したい内容【必須】
- 希望する連絡方法【任意】
- 希望日時【任意】
日時調整を後から行う場合は、希望日時を無理に入力させる必要はありません。
計測と改善｜フォームのどこで離脱しているかを確認する
フォームは公開して終わりではありません。
可能であれば、次のような行動を計測します。
- フォームページの閲覧数
- 入力開始数
- 確認画面への到達数
- 送信完了数
- エラーの発生数
- 各入力項目での離脱
例えば、フォームページは多く見られているのに送信完了が少ない場合、フォーム内に問題がある可能性があります。
確認画面までは進んでいるのに送信されない場合は、確認画面の見せ方や最終送信ボタンを見直します。
項目を変更した際は、変更前後で送信完了率を比較すると、改善効果を判断しやすくなります。
このまま使える問い合わせフォーム改善チェックリスト
- 入力項目は初回対応に必要なものへ絞られている
- 必須項目が多すぎない
- 必須・任意の表示ルールが統一されている
- 項目名が入力後も見える
- 入力例や補足説明がある
- 選択式で回答できる項目は文字入力を減らしている
- エラーが該当項目の近くに表示される
- エラーの修正方法が具体的に書かれている
- 入力エラー後も、入力済みの内容が保持される
- 送信ボタンの文言で、次の動作が分かる
- 送信後の返信時期や対応方法が書かれている
- 個人情報保護方針への導線がある
- スマホで入力・確認・送信までテストしている
- フォーム到達数と送信完了数を計測できている
まとめ：フォームは入力欄ではなく「安心して相談できる体験」を設計する
問い合わせフォームの改善で重要なのは、単に入力項目を減らすことではありません。
- 迷わず入力できる
- 少ない負担で完了できる
- エラーが起きても修正できる
- 送信後の流れが分かる
- 安心して個人情報を預けられる
この一連の体験を整えることが、問い合わせ完了につながります。
サイトへのアクセス数を増やしても、最後のフォームで離脱していれば成果は伸びません。
まずは実際に自社のフォームをスマホから入力し、ユーザーと同じ手順で、迷う場所や負担に感じる場所を確認してみましょう。
無料相談
Refuでは、問い合わせフォームを単体で見るのではなく、サービスページからフォームへの導線、入力項目、エラー表示、スマホでの操作性、送信後の案内まで一貫して確認します。
「フォームまでは見られているのに問い合わせが増えない」「入力項目をどう整理すべきか分からない」といった場合も、現状を整理したうえで改善方法をご提案します。
その他おすすめ記事はこちら
CTA（問い合わせ・資料請求）を押したくなるデザイン改善チェックリスト
スマホで差がつくUI改善｜押しやすさ・読みやすさのチェックポイント
“なんとなく見づらい”を解決する情報設計｜見出し・箇条書き・図解の使い分け
