問い合わせフォームの改善は、入力から社内受信までを確認。入力項目、スマートフォン・キーボード操作、エラー復帰、二重送信、受付確認のテスト手順を解説します。
登場するふたり

くるるって?
気になるものを見つけると、ついつい寄り道しちゃう好奇心いっぱいのくるる。「これ、なんで?」が口ぐせです。ひらめくとすぐに試したくなるけれど、途中で「あれれ?」と手が止まることも。そんなときは、まなボットのところへ。うまくできた日は、誰かに見てもらいたくてそわそわしています。

まなボットって?
くるると一緒に「なんでだろう?」を考える、小さなロボット。調べものが好きで、分からないことに出会うと、ちょっとうれしくなります。説明に夢中になって、つい話が長くなることも。くるるの「つまり、こういうこと?」に、新しい発見をもらっています。「なるほど!」と言ってもらえると、その日はずっとごきげんです。
会話内の企業・商品・場面は説明のための架空の例です。実際の改善実績を示すものではありません。
著者:MADE IN CREW編集部
「フォームの項目を減らせば、問い合わせは増える?」
「送信完了の画面が出たから、問題なく届いているはず」
問い合わせフォームを改善するときは、見た目や項目数と一緒に、入力できること、間違いを直せること、社内で受け付けられることを確認しましょう。送信ボタンが押されても、相談を受け取って対応できなければ、受付の流れは完成していません。
今回は、くるるとまなボットが、企業サイトのフォームを入口から受信まで点検します。フォーム改善はEFOと呼ばれることもありますが、この記事では特定のツールや改善率ではなく、担当者が改修内容と検収条件を整理する方法を扱います。
手順や依頼シートは編集部による実務上の提案です。説明用の仮例は実在の改善事例と区別し、規格や公式資料に基づく内容には出典を添えています。
第1話|フォームのどこで、問い合わせが止まっている?
くるる「サイトからの問い合わせが少ないんだ。フォームのボタンを目立たせればいいかな?」
まなボット「その前に、どこで困っているのかを分けて見よう。フォームにたどり着けないのか、入力できないのか、それとも送った後に届かないのかで、直す場所が変わるよ」
くるる「問い合わせの件数だけでは分からないんだね」
まなボット「まず担当者自身が、実際の入口から操作してみよう。四つに分けると確認しやすいよ」
| 段階 | 確かめたいこと |
|---|---|
| 入口 | 相談内容に合う案内から、正しいフォームへ進めるか |
| 入力 | 質問が分かり、必要な内容を入力・選択できるか |
| 送信処理 | 処理中と成功・失敗の状態が、正しく伝わるか |
| 社内受信 | メールや管理画面で、担当者が相談を見つけられるか |
くるる「テストなら、手元の顧客情報を使ってもよい?」
まなボット「実在する顧客の情報は使わず、管理できるテスト用の連絡先を使おう。関係者にも知らせて、通常の問い合わせと混ざらないようにする。受付できない不具合が見つかったら、ボタンの見た目を比べるより先に直したいね」
不具合の報告には、端末、ブラウザ、操作した時刻、画面の状態、再現手順を残します。画面やログに個人情報が含まれる場合は、社内ルールに沿って必要な範囲だけを扱いましょう。

第2話|項目は、何個まで減らせばよい?
くるる「入力欄が多いから、半分にしようかな。少ないほど送ってもらえるよね?」
まなボット「すべてのフォームに共通する最適な項目数はないよ。必要な情報まで消すと、初回返信で聞き直すことになる。まず、各項目を誰が何の判断に使っているか確かめよう」
W3Cのフォーム解説でも、その手続きに必要な情報に絞って入力を求める考え方が示されています。W3C WAI:Forms Tutorial
くるる「受け取った後の仕事から考えるんだ」
まなボット「そう。『初回に必要』『後から聞ける』『今は使っていない』に分けてみよう。たとえば、次は架空の制作相談フォームの整理例だよ」
| 項目の例 | 判断の仕方 |
|---|---|
| 返信先 | 最初の連絡に必要な方法を確認する |
| 相談の概要 | 担当の振り分けや、初回返信で使うかを見る |
| 撮影の日程・場所 | 相談の可否を判断するために初回から必要か考える |
| 詳しい所在地・従業員数 | 初回に使わないなら、後から聞けるか検討する |
くるる「電話番号も、どの相談にも必須とは限らないのかな」
まなボット「連絡方法と業務次第だね。迷う項目は任意にする、相談種別に応じて表示する、初回返信で聞く、といった方法がある。条件で表示を切り替えるなら、不要になった欄の必須チェックが残らないかも確認しよう」
自由記入欄には、何を書けばよいかを短く添えます。実際に受け付けられるなら「予算未定」「日程を相談したい」といった状態も選べるようにし、必要以上の機密情報や機微な情報を書かせる案内になっていないかを点検します。

第3話|入力すると、項目名が消えてしまわない?
くるる「フォームをすっきりさせたいから、項目名は入力欄の中に薄く表示すればよい?」
まなボット「それだけだと、入力した後に何の欄だったか分からなくなることがあるよ。項目名は入力後も見えるようにして、入力欄との対応を明確にしよう」
くるる「必須かどうかは、赤い印を付けているよ」
まなボット「色や記号だけに頼らず、『必須』『任意』を文字でも伝えたいね。形式に指定があるなら、入力を始める前に分かる場所へ例を置くんだ」
- 項目名:利用者に意味の通じる言葉で、欄の近くに常時表示する。
- 必須・任意:色だけで区別せず、言葉でも伝える。
- 入力例:必要な形式や書く内容の例を、該当項目のそばに示す。
- 補足説明:入力する理由や制約を、短く対応付ける。
くるる「見た目にラベルがあれば、それで十分?」
まなボット「読み上げ機能にも、どの入力欄の名前か伝わる実装が必要だよ。制作担当には、見た目と仕組みの両方で対応しているか確認してもらおう」。W3C WAI:Labeling Controls
東京都のサイトで公開されている入力フォームガイダンス ver1.1も、項目ラベルや入力説明、必須・任意の表示を整理しています。行政向けの実務資料であり、すべての仕様を民間サイト共通の法的義務として扱うものではありません。利用者と自社の実装条件に照らして参考にします。

第4話|スマホで入力し、キーボードだけでも進んでみよう
くるる「PCの画面ではきれいに並んでいたよ。スマホも表示が崩れていなければ大丈夫かな?」
まなボット「見るだけでなく、実際に入力しよう。キーボードが開くと欄が隠れたり、選択肢が押しにくかったりすることもあるからね」
くるる「メールアドレスを入力するとき、合うキーボードが出ると助かるね」
まなボット「入力欄に合う設定になっているか確認したい。自動入力を使った後も、値を読み直して修正できるか試そう。名前や住所の表記を厳しく限定しすぎて、実際の表記が入らない設計にも注意だよ」
電話番号の区切りなど、システム側で扱える表記の範囲は実装担当と確認します。利用者へ不要な打ち直しを求めない柔軟性と、適切な検証を両立させる考え方が大切です。W3C WAI:Validating Input
くるる「マウスを使わずに試すのは、何を見るため?」
まなボット「キーボードで操作する人もいるからだよ。入力欄へ自然な順序で移動できるか、今の位置が見えるか、選択・エラー修正・戻る・送信まで進めるかを確かめよう」。W3C:キーボード操作の解説
くるる「迷惑送信対策の確認画面も、試すんだね」
まなボット「うん。普通に利用する人が進めるか、操作に困る場合の代替手段やエラー後の復帰も含めて確認する。この点検だけでアクセシビリティ全体への適合を証明できるわけではないけれど、具体的な問題を見つける入口になるよ」

第5話|エラーは、どこをどう直せばよいか伝えよう
くるる「エラーのときは『入力内容に誤りがあります』と表示しているよ」
まなボット「その案内だけで、どこを直すか分かるかな?」
くるる「全部の欄を見直すことになりそう……」
まなボット「エラーは『場所・理由・直し方』をセットにしよう。該当する欄の近くに示して、複数あるなら全体の一覧から移動できると探しやすいよ」
| 状態の仮例 | 案内文の例 |
|---|---|
| メールアドレスが未入力 | メールアドレスを入力してください |
| 受け付ける形式と合わない | メールアドレスを、例のような形式で入力してください |
| 添付形式が対象外 | 添付できるファイル形式を確認してください |
くるる「メールの形式が違ったら、『このアドレスは存在しません』ではだめ?」
まなボット「形式だけを調べているなら、存在までは分からないよね。案内は実際の検証内容と揃えよう。ファイル形式の例も、受け付ける種類を別に分かるように表示する必要があるよ」
W3Cは、送信の成否を知らせ、エラーを理解しやすく説明して修正方法を案内することを示しています。赤い枠だけに頼らず、文字で説明し、エラーが出たことを読み上げでも把握できるか確認します。W3C WAI:User Notification
くるる「間違いを指摘するだけではなく、直して進めるところまで案内するんだね」
まなボット「そう。実際に一つ間違えて入力し、修正後に送信できるかまで試そう」

第6話|一つのエラーで、相談内容まで消えていない?
くるる「メールアドレスを直そうとしたら、長く書いた相談内容が消えちゃった!」
まなボット「もう一度書き直すのは負担だね。同じ入力フローで修正するときは、入力済みの内容を保持して、必要な欄だけ直せるか確かめよう」
くるる「確認画面から戻ったときも?」
まなボット「もちろん。本文だけでなく、選択肢やチェック状態、添付ファイルがどうなるかも見る。相談種別を変更したときに、前の選択の内容が残るのか消えるのかも、利用者に分かる必要があるね」
くるる「ずっと保存しておけば、いつでも続きが書けて便利そう」
まなボット「エラー修正のための保持と、ブラウザへの長期間の保存は別の設計だよ。共有端末で次の人に相談内容が見えてしまわないよう、何を、どこへ、いつまで残すかを決めよう」
くるる「添付ファイルは、戻ったら再選択が必要なこともある?」
まなボット「仕組みによってはある。その場合は、再選択が必要だと案内しよう。表示上は添付済みに見えるのに実際には送られていない、といった食い違いを避けたいね」
入力保持を改善するときも、個人情報の扱いや既存の安全対策を理由なく変えないようにします。実装担当と管理担当で範囲を決めたうえで、戻る操作、エラー修正、途中離脱後の再訪を必要な条件で確認してください。

第7話|入力ミスと通信失敗を、同じ表示にしていない?
くるる「入力は合っているのに送れないときも、『入力内容を確認してください』が出るよ」
まなボット「通信やサーバー側の問題なら、利用者が入力を直しても解決しないね。入力エラー、処理中、受付失敗、受付結果が分からない状態を区別しよう」
くるる「結果が分からない、という状態もあるの?」
まなボット「送信途中で通信が切れても、受信側では受付済みという場合がある。画面が失敗に見えたからといって、何度も再送を促すだけでは重複するかもしれない」
くるる「送信中は、ボタンを押せなくすれば防げる?」
まなボット「利用者に処理中と知らせるボタン制御は一つの方法。ただ、再読み込みなどもあるから、受信処理側で重複をどう扱うかも相談しよう。実装に合った受付確認や再試行の方法を決める必要があるね」
くるる「確認画面を付けた方がよい?」
まなボット「内容と操作の流れで考えよう。付けるなら修正箇所へ戻りやすく、値が保持されること。付けないなら送信前に見直せること。確認画面があるだけで誤送信を防げるわけではないよ」
ブラウザ上で入力を確認する処理と、受信側の安全な検証も別です。クライアント側のチェックだけに依存せず、サーバー側でも必要な入力検証を行います。W3C WAI:Validating Input

第8話|完了画面と自動返信が出れば、届いている?
くるる「テストで『送信完了』が表示されたよ。自動返信も来たから、これで完了だね!」
まなボット「社内で担当者が受け付けられたかも確認しよう。完了画面、自動返信、担当部署の受信は、それぞれ別に照合する必要があるんだ」
くるる「全部、同じことを表していると思っていた」
まなボット「メールだけで受け付けるのか、管理画面に保存してから通知するのかでも、調べる場所が変わる。どの処理が成功したら完了画面を出す設計か、実装担当へ確認しておこう」
- 完了画面:受付の状態と、利用者が次にすることが分かるか。
- 自動返信:送信元、件名、返信先、案内内容が適切か。
- 社内受信:通知先と管理画面で、担当者が案件を確認できるか。
- 対応体制:担当者不在や休日にも、決めた運用で確認できるか。
くるる「返信の目安は、早く書いた方が安心してもらえる?」
まなボット「実際に守れる運用と揃えよう。自動返信には、受け付けたことと次の案内を伝える。相談本文をすべて転載する必要があるかも、扱う情報に応じて検討したいね」
くるる「自分の入力内容を確認できると便利だけど……」
まなボット「メールアドレスを間違えていたら、第三者へ相談内容を送る可能性もある。受付確認に必要な範囲へ絞る方法も含め、管理担当と決めよう。迷惑メール振り分けや通知先変更の影響も、公開前に確認しておきたい」

第9話|正常な送信だけで、テストを終えないで
くるる「改修後に一回送れたら、検収してよい?」
まなボット「正常な操作に加えて、間違えた場合や戻った場合も試そう。完成画面を見るだけでは、修正して送信できるか分からないからね」
次は一般的な問い合わせフォーム向けのテスト例です。実在の顧客データを使わず、関係者が把握できる手順で行います。通信失敗などの試験は、実装担当と安全なテスト環境・方法を決めてください。
| テスト | 確認する結果 |
|---|---|
| スマホ・PCで正常入力 | 完了表示、管理側の受付、自動返信が整合する |
| 必須項目を空欄にする | 対象と直し方が分かり、他の入力値が残る |
| 形式を間違える | 修正後に送信できる |
| キーボードだけで操作 | 選択、エラー修正、戻る、送信まで進める |
| 通信失敗を再現する | 状態が伝わり、受付確認や復帰ができる |
| 戻る・再読み込み | 値の保持と、重複受付の扱いが想定どおりになる |
くるる「確認したことを、どう残そう?」
まなボット「『環境・操作・期待結果・実際の結果・修正担当・再確認日』を記録しよう。直ったら同じ手順を再実施して、別の欄や受信処理に影響が出ていないかも見るんだ」
くるる「外部フォームやプラグインだと、できることが限られるかもね」
まなボット「設定で直る範囲と、独自開発やツール変更が必要な範囲を分けてもらおう。制約を隠さず、利用者への案内や運用で補う必要があるかも判断できるね」

第10話|改善の結果は、同じ段階で比べよう
くるる「改修した週は問い合わせが増えたよ。フォームのおかげと言える?」
まなボット「それだけでは分からないね。広告の流入が増えたのか、アクセスした人の端末が変わったのか、別の影響も考えよう」
くるる「では、何を記録したらよい?」
まなボット「フォームへの到達、入力開始、受付成功など、同じ定義の段階で比べたい。たとえば『送信ボタンを押した回数』と『社内に届いた件数』を同じ数として扱わないことだね」
くるる「件数が少ないと、割合が大きく動きそう」
まなボット「その場合は、短期間の改善率を断定しない。エラーが再現しなくなったか、入力を修正して送れるか、社内受信が成立しているかという操作の確認と合わせて判断しよう」
くるる「詳しく調べるために、入力した文章もアクセス解析へ送ればよい?」
まなボット「それは避けよう。状態を調べるのに、氏名やメールアドレス、相談本文は必要ない。入力値ではなく、どの段階に進んだかを確認する設計にするんだ」
Google Analyticsは、個人を特定できる情報が送られないよう注意を求めています。フォームの入力値だけでなく、URLやページタイトル、計測イベントに情報が混ざらないかも確認してください。Google Analytics:個人を特定できる情報の送信を避ける
第11話|「離脱しにくくして」だけでは、改修範囲が伝わらない
くるる「制作会社には『フォームを使いやすくしてください』と頼めばよいかな?」
まなボット「それだけだと、見た目の変更で終わるかもしれない。対象のフォームと困っている操作、どこまで確認したら完成かを、一枚にまとめよう」
- 対象:フォームのURL、使用ツール、現在の受信先と管理担当。
- 問題:端末・ブラウザ、再現手順、期待した結果と実際の結果。
- 改修範囲:項目、入力支援、エラー、送信処理、通知のどこを直すか。
- 検収条件:対象端末、正常・異常時の操作、社内受信までの確認。
- 公開後の運用:公開時の確認担当、不具合の連絡先、修正の判断方法。
くるる「たとえば『スマホでメール欄を修正しても、相談内容が残って送信できる』なら伝わりそう」
まなボット「具体的でよいね。さらに社内で受付を確認するところまで書こう。画面改修だけの見積もりと、通知や受信処理まで含む見積もりは、同じ条件ではないからね」
くるる「サイト全体の作り直しを頼まないといけない?」
まなボット「既存の仕組みと問題によるよ。まずフォーム単体で直せる範囲を調べ、全体の刷新が必要かはその後に判断しよう。調査、改修、テスト、公開後確認をどこまで頼むかも合わせておきたい」
改修費用の確認には、Web制作の見積確認ガイドも参考になります。ボタン周辺の言葉を整える際は、マイクロコピー入門と合わせて、実際の操作・処理と案内を一致させましょう。

第12話|まず一度、入力から受信まで通して確かめよう
くるる「項目を減らすだけが、フォーム改善ではなかったんだね」
まなボット「必要な内容を書けて、間違いを直せて、担当者へ届く。その流れを揃えることから始めよう」
くるる「今日やることを、三つに絞るなら?」
まなボット「この順番なら、問題と依頼内容をつなげやすいよ」
- テスト用の連絡先で、入口から社内受信まで操作する。 スマホとPCの両方で、受付を照合する。
- 一つ間違えて、直して送れるか確かめる。 対象欄、直し方、入力保持、戻る操作を見る。
- 問題の再現手順と、完成の条件を一枚にまとめる。 受信できない不具合を優先し、改修担当と範囲を決める。
くるる「直した後も、同じ手順で確認するんだね」
まなボット「うん。公開後も、通知先や外部ツールの設定を変更したら、影響するところを再確認しよう。フォームの完成は、見た目だけでなく、相談を受け取って対応できるところまで。 その条件を共有することが大切だよ」
MADE IN CREWのWeb制作・LP制作では、既存サイトのフォーム改善も含めてご相談いただけます。対象フォームのURL/困っている操作や端末/現在の受信方法を分かる範囲で整理して、お問い合わせフォームからお知らせください。実際の対応範囲は、使用ツールや実装の確認後にご相談します。
