フォームの入力項目の決め方|聞く順番と量
問い合わせフォームは多くの情報を集めればよいわけではない。利用者の入力負担と、受信後に担当者が必要とする情報の釣り合いが…
text: HYPE編集部
Webデザイナーの記事一覧へ問い合わせフォームは多くの情報を集めればよいわけではない。利用者の入力負担と、受信後に担当者が必要とする情報の釣り合いが重要になる。項目を決める前に、受け付けた後の業務まで想像したい。
フォームの目的を一つに絞る
資料請求と採用応募と購入相談では必要情報が違う。最初に受け付け後の業務を想像し、担当者が何を知っていれば対応できるかを整理する。将来使うかもしれないという理由だけで項目を増やさない。
資料請求の段階で必要なのは返信先と興味分野だけかもしれない。営業担当があとで聞けばよい情報まで入力させる前に、受け付け後の業務を整理する。
必須項目の理由を説明できるようにする

会社名が必要な法人商談と、匿名で聞ける一般相談では聞く情報が異なる。電話番号が必須なら連絡の目的を明確にする。不要な情報まで収集すると、入力者の負担だけでなく保管管理の責任も増える。
入力者にとって電話番号を求められる理由が分からないと、送信をためらう場合がある。連絡手段の希望を選べるか、業務上本当に必須か考えたい。
フォーム制作を発注するときは、入力項目の設計と送信後の動作検証が含まれるか確認する。 体系立てて学びたい場合は、Webスキルを学ぶオンラインスクール デイトラのようなオンラインスクールも選択肢になります。
集める情報の範囲を決めるときは、個人情報保護委員会のガイドラインも基準になります。
入力の順番を思考の流れに合わせる
目的の選択、相談内容、返信先という順序のほうが自然な場面もある。項目の並びは社内データベースの列順に合わせるのではなく、入力者が次に何を答えるか迷わない流れを優先する。
項目の並びは社内データベースの管理項目順と同じである必要はない。初めて利用する人の視点で、何から答えればよいか自然な流れを試す。
ラベルと補助説明を分ける
プレースホルダーだけで項目名を伝えると入力中に意味が分からなくなることがある。W3Cはフォームコントロールに適切なラベルを付ける方法を示している。入力例や制約は補助文として残す。
フォーム名を入力欄内の薄い文字だけで表すと、入力中に説明が消えることがある。ラベルを残し、必要な形式を入力例として補う方が分かりやすい。
入力補助機能を備えたサービスも、実際の利用者がエラーから戻れるか試す必要がある。 作画の道具としては、イラスト・マンガ制作ソフト CLIP STUDIO PAINTも定番です。
ラベルの付け方の原則は、W3C WAIのフォーム解説にまとまっています。
エラーの回復経路を試す

間違ったメール形式で送信した際、どこを直せばよいか見えるか確認する。入力内容が消える、エラーが色だけで示されるといった設計は修正負担を増やす。キーボード操作でも戻れるか試す。
エラーが発生したとき、入力済み内容が全て消えてしまうと再入力の負担が大きい。誤りの場所と修正方法を示し、色だけに依存しない表示を考える。
スマートフォンで実際に入力する
片手での操作、キーボード表示、選択肢の押しやすさ、画面スクロールを確認する。PCのプレビューで見やすくても、端末では送信ボタンが隠れることがある。
片手で操作するとき、選択肢の押し間違いやキーボードによるボタンの隠れが起きないかを見る。スマートフォンで送信完了まで試すことが必要だ。
UI設計の学習では、見た目だけでなく送信完了までの操作を評価する演習が役立つ。 学んだことを仕事につなげる入口として、スキルマーケット ココナラで小さな案件から始める方法もあります。
入力しやすさの確認観点は、デジタル庁のウェブアクセシビリティ導入ガイドブックも参考になります。
送信後の期待を整える
完了画面には受付できたことと今後の連絡方法を示す。即時回答しない業務ならその旨を明記し、自動返信メールの内容も整合させる。システムエラー時の再送による重複受付にも配慮する。
送信後に確認メールが届かない場合、フォームの不具合だと思われることがある。完了画面に受付結果と今後の連絡方法を明記する。
改善の評価は商談品質まで見る
入力件数が増えても必要情報が欠けていれば対応時間が増える。離脱と問い合わせ内容、追加ヒアリングの回数を確認し、取得情報を減らすか増やすか判断する。
入力項目を減らした結果、担当者が毎回聞き直すなら改善とは限らない。問い合わせの完了率と追加確認の手間を一緒に評価したい。
判断に使う比較表
| 確認する場面 | 実際に見ておく材料 |
|---|---|
| フォームの目的を一つに絞る | 資料請求と採用応募と購入相談では必要情報が違う |
| 入力の順番を思考の流れに合わせる | 目的の選択、相談内容、返信先という順序のほうが自然な場面もある |
| エラーの回復経路を試す | 間違ったメール形式で送信した際、どこを直せばよいか見えるか確認する |
| 送信後の期待を整える | 完了画面には受付できたことと今後の連絡方法を示す |
フォームが長い場合は必須項目を減らせないか検討する。初回の問い合わせに不要な項目を後の商談で聞く設計に変えると、送信までの負担が軽くなる場合がある。
フォームは情報をできるだけ集める装置ではない。商談開始に必要なことを無理なく聞ける構成にすることで、送信者と受け手の双方の負担を減らせる。
現場で試すための補足
入力欄を減らすこと自体を成果にするのではなく、フォームを送信する人と対応する担当者の双方にとって負担が少ない状態を目指したい。項目の意味を短く説明し、間違えた際は戻れるようにする。公開後の問い合わせが不足情報ばかりなら、何を最初に聞くべきか見直す。送信率だけでなく、返信までに必要な追加確認の手間も改善判断に使える。
例えば企業向け資料請求フォームに、部署、役職、電話番号、所在地などの入力欄が並んでいたとする。営業担当には役立つ情報でも、資料を読むだけの利用者には入力が重いかもしれない。受付直後に本当に必要な情報と、商談へ進んだ段階で確認できる情報を分けて考えたい。一方、連絡先を減らしすぎて返信できない状態にするのも問題なので、必要性を業務の流れから判断する。
公開前には実際にスマートフォンで入力し、途中でエラーを起こしてみる。どの項目を直すべきか分からない、入力内容が消える、送信ボタンが隠れるといった点を見つけることができる。完了画面には受付結果と次の連絡手段を示し、返信に時間がかかる場合はその旨を案内する。公開後は送信件数だけでなく追加確認に必要な手間も見て、項目を見直したい。
問い合わせフォームの項目を増やすと営業担当は詳しい情報を得られるが、入力する人の負担も増える。最初の接点では、相談種別、返信先、相談内容など、その後の対応に必要な項目から考える。住所や予算を初回に必須にするなら、なぜ必要なのか説明できるか検討したい。法人向けフォームでも、担当者がスマートフォンで入力する可能性を考慮する。
入力エラーは画面の上部にまとめて表示するだけでなく、該当項目の近くでも原因と修正方法を伝える。送信が成功したのか分からない画面は、重複問い合わせの原因となり得る。制作側は完了画面、通知メール、保存先の三つを一連の動作として確認する。発注側には、必須項目と任意項目を区別した理由を説明し、問い合わせの質と入力負担を両方見ながら改善できる状態で納品したい。
入力項目はマーケティング担当と営業担当の希望をすべて載せるのではなく、初回連絡に必要な情報を起点に選ぶ。部署によって必要情報が異なるなら、相談内容に応じて表示を切り替える方法も検討できる。ただし切り替え条件が複雑になると入力者が迷いやすい。送信後の受付通知に何を記載するかも含め、実際の問い合わせ処理を通して設計したい。
送信ボタンの位置を変えるだけでなく、送信後にどの連絡が来るのか文章で示すことも大切だ。受付の自動メールがあるなら、実際に送られる内容を含めて動作確認をする。回答までの期限を保証できないのに短い時間を約束する表現は避ける。フォームは見た目だけでなく、問い合わせ後の業務までつながる接点として設計する。
出典
CTA
仕事の取り方や単価の決め方で迷ったら、HYPEへご相談ください。→ お問い合わせはこちら
※本記事にはプロモーションを含みます。
合わせて読みたい
つくる人の仕事のヒントを、週1で
新しい記事と、学び・案件のヒントをメールでお届けします。
RECOMMEND
注目のコンテンツ