フォーム最適化（EFO）｜入力離脱を減らす7つの工夫

広告にお金をかけて人を集め、ランディングページも磨いた。それでも申し込みが増えない。

原因をたどっていくと、最後のフォームで人が静かに消えていた。これは驚くほどよくある話です。

フォームは成果の最後の関門

フォームは、訪問者が初めて手を動かす場所です。それまでは読んでいるだけでよかったのに、突然、入力という作業を求められます。

氏名、フリガナ、会社名、部署名、電話番号、郵便番号、住所、そして自由記述の相談内容。半分ほど埋めたところで、まあ今度でいいか、と思った経験はありませんか。

ここで離脱する人は、サイトにとって一番惜しい層です。商品を理解し、価格も納得し、あと一歩まで来ていた人たちだからです。

やっかいなのは、フォームでの離脱が誰の目にも触れないことです。問い合わせが少ないという結果だけが手元に残り、途中まで書いて閉じた人の存在は、何もしなければどこにも記録されません。

だからフォーム改善は費用対効果が高い。集客を1人も増やさずに、成果の件数だけが増えるからです。

EFOとは何か、どのくらい効くのか

EFOはEntry Form Optimizationの略で、日本語ではフォーム最適化と呼びます。入力画面を使いやすくして、途中でやめてしまう人を減らす取り組み全般を指す言葉です。

対象は問い合わせフォームだけではありません。会員登録、資料請求、見積もり依頼、予約、決済情報の入力。

入力を伴う画面はすべてEFOの範囲です。だから、EFOの効果は思っているより広い範囲に及びます。

言葉自体は新しいものではありませんが、スマホからの入力が当たり前になったこの数年で、効き目はむしろ大きくなりました。パソコンなら我慢できた面倒くささが、小さな画面では素直に離脱に変わるからです。

効果の大きさは、数字にしてみると実感しやすくなります。月にフォームへ到達する人が2,000人、実際に送信するのが400人という状態を考えてみましょう。

以下は実際の統計ではなく、考え方を示すための計算例です。

完了率が20%から28%になっただけで、月の成果は160件増えます。同じ160件を広告で買うとしたら、いくらかかるでしょうか。

しかもこの改善は一度やれば効き続けます。広告費のように、毎月払い直す必要はありません。

入力離脱を減らす7つの工夫

ここからは具体策です。順番に効きやすいものから並べていますが、自分のフォームに当てはまるかどうかを考えながら読んでみてください。

まず減らす｜項目そのものを疑う

一番効くのは、入力項目を削ることです。1項目減らすたびに、完了率は目に見えて動きます。

判断の基準はシンプルです。その項目が無いと、次のアクション（返信・見積もり・発送）が本当にできないのか、と自問してみてください。

たとえば会社名は、メールアドレスのドメインからだいたい分かります。部署名や役職は、最初の返信のときに聞けば足ります。

フリガナも、電話をかける社内文化がなければ不要かもしれません。

目安を挙げるなら、問い合わせなら5項目前後、資料請求なら3項目でも十分に成立します。10を超えているフォームは、一度すべての項目を紙に並べ直してみる価値があります。

削れないと言われたときは、その項目を後工程に移せないかを考えます。申し込みの時点で全部聞かず、確認メールのリンク先で追加入力してもらう形にすれば、最初の関門は軽くなります。

もうひとつ、必須と任意の表示をはっきり分けることも重要です。全部が必須に見えるフォームは、実際より重く感じられます。

任意項目には、任意と明記したうえで、なぜ聞くのかを一言添えると入力率が上がります。ご予算（分かる範囲で結構です）といった補足があるだけで、心理的な負担は変わります。

迷わせない｜エラー・入力例・進捗

次に効くのが、迷いをなくすことです。人は、間違えたかもしれないと感じた瞬間に手が止まります。

エラーは送信後にまとめて出すのではなく、その項目から離れたタイミングでその場に出す。送信を押してから画面上部に赤字が並び、入力内容が消えている——これが最悪のパターンです。

ただし、入力している最中に赤くするのはやりすぎです。1文字目を打った瞬間に形式エラーが出ると、責められている気分になります。

エラーの文面も見直す価値があります。何が悪いかではなく、どうすれば直るかを書くのが原則です。

悪い例：入力形式が正しくありません
良い例：電話番号はハイフンなしの数字で入力してください（例：0312345678）

悪い例：エラーが発生しました
良い例：パスワードは8文字以上にしてください（現在6文字）

入力例も効きます。ただし、プレースホルダだけに頼るのは危険です。

入力を始めた瞬間に例が消えてしまい、何を求められていたか分からなくなるからです。

入力例は項目名の下に常時表示するか、フィールドの外に置きましょう。消えない場所にあるだけで、見比べながら入力できます。

項目が多いフォームでは、進み具合を見せることも有効です。ステップ2/3のような表示があると、あと少しだと分かって粘ってくれます。

送信ボタンの文言も見直す余地があります。送信という無機質な言葉より、無料で相談する、資料をダウンロードする、のように押した先で得られるものを書いた方が、指は動きやすくなります。

手を止めさせない｜余計な出口とスマホ

フォーム画面に、グローバルナビや関連記事リンクは必要でしょうか。入力中の画面は、出口をできるだけ塞ぐのが定石です。

同じ理由で、フォームの直前に長い説明文を置くのも考えものです。読み物は入力の前に済ませ、フォームに入ったら入力だけに集中してもらいます。

そしてスマホ。今やフォーム到達の多くはスマホ経由で、入力のつらさもスマホの方が圧倒的です。

数字キーボードが出るべき欄で、日本語キーボードが立ち上がる。タップしたいのに隣の項目に指が当たる。

こうした小さな摩擦が積み重なって、あと少しのところで指が止まります。

送信ボタンの大きさも見直してください。指で押す前提なら、高さは44ピクセル程度は欲しいところです。

入力欄の文字サイズも意外な落とし穴です。16ピクセルを下回るとiPhoneでは入力時に画面が勝手に拡大され、レイアウトが崩れたように見えて手が止まります。

HTMLの属性だけでできる改善

ここは少し技術的な話です。実は、JavaScriptを書かなくてもHTMLの属性を整えるだけでスマホの入力体験はかなり改善します。

<!-- メール：@付きキーボード＋自動入力候補 -->
<label for="email">メールアドレス（必須）</label>
<input id="email" name="email" type="email"
       inputmode="email" autocomplete="email" required>

<!-- 電話：数字キーボードを出す -->
<label for="tel">電話番号（任意）</label>
<input id="tel" name="tel" type="tel"
       inputmode="tel" autocomplete="tel">

<!-- 郵便番号：数字キーボード＋住所の自動補完 -->
<label for="zip">郵便番号</label>
<input id="zip" name="zip" type="text"
       inputmode="numeric" autocomplete="postal-code">

ポイントは3つです。type と inputmode でスマホのキーボードを切り替え、autocomplete でブラウザの自動入力を効かせ、label の for で項目名とフィールドを結び付けます。

label を正しく付けると、項目名をタップしても入力欄にカーソルが入ります。タップ範囲が広がるので、指の太い人にも優しくなります。

autocomplete はとくに効果が大きい属性です。ブラウザに保存済みの住所やメールがワンタップで入るので、入力そのものが消えます。

逆に、独自実装のこだわりで自動入力を殺してしまっている例をよく見かけます。凝ったカスタム入力欄より、素直なinput要素の方が速いことは珍しくありません。

なお、全角で入力された数字をJavaScriptで半角に直す、ハイフンを自動で除去するといった補正も有効です。入力形式で弾く前に、こちらで直せるものは直してしまいましょう。

以下は7つの工夫の一覧です。効き目と手間のバランスを見て、着手順を決める材料にしてください。

軽いものから順に潰していけば、数日で完了率が動くこともあります。

どこで離脱しているかを計測する

ここまで読んで、うちのフォームはどれから手を付けるべきか、と迷いませんでしたか。答えは計測データの中にあります。

思い込みで項目を削ると、営業に必要な情報だけが消えて、完了率は変わらなかった、という残念な結果になりがちです。まず、どこで人が消えているかを見ましょう。

フォームをファネルとして見る

最初にやるべきは、フォーム周辺を一連の流れとして数えることです。フォームページの表示、入力開始、送信ボタンのクリック、完了ページの表示。

この4段階の到達数を並べるだけで、問題の場所はかなり絞れます。

表示は多いのに入力開始が少ないなら、フォームが重く見えている証拠です。項目数や見た目の圧迫感を疑いましょう。

入力開始は多いのに送信が少ないなら、途中のどこかに壁があります。エラーや必須項目の設計を疑う場面です。

送信は押されているのに完了ページに届かないなら、バリデーションで弾かれています。これは技術的な問題なので、最優先で直すべきです。

この3つは、打ち手がまったく違います。だから、まとめて完了率という1つの数字で見てはいけません。

Strideのようなファネル分析ツールを使うと、この4段階の到達数と離脱数がそのまま図で出ます。ステップの数え方そのものは、ファネル分析の基本｜離脱ポイントの見つけ方と改善の進め方で詳しく整理しています。

滞在時間も補助的な手がかりになります。Strideは15秒ごとのハートビートで滞在を計測するので、フォームページに長くとどまったまま送信していない人がどれくらいいるのかを実数で確認できます。

長居しているのに送信されていないなら、迷っているか、エラーで詰まっているかのどちらかです。すぐに閉じられているなら、そもそもフォームが重く見えている可能性の方が高くなります。

項目単位の詰まりを見つける

段階が分かったら、次はもっと細かく見ます。どの項目で手が止まったのかは、数字だけでは分かりません。

ここで役に立つのがセッションリプレイです。訪問者の操作を動画のように再現できるので、電話番号欄で3回やり直している、エラーが画面外に出ていて気付いていない、といった詰まりがそのまま見えます。

プライバシーが気になるところですが、Strideのリプレイは記録の時点で全テキストを伏せ字にし、入力値は一切保存しません。何を入力したかは分からず、どこで詰まったかだけが分かる、という設計です。

10本も見れば、傾向はだいたいつかめます。数字を眺めて悩む時間より、はるかに早く答えが出ることも多いです。

【関連記事】スマホ特有の原因を掘り下げたい方はモバイルのCVRが低い原因と改善｜スマホで取りこぼさない、ECのカゴ落ちを扱う方はカゴ落ち（カート放棄）を減らす｜離脱を防ぐ導線設計も参考になります。

直感ではなく検証で決める

項目を減らせば完了率は上がるはず。これは仮説であって、事実ではありません。

実際、電話番号を任意にしたら完了件数は増えたのに、商談化率が落ちて売上は横ばいだった、という話はよくあります。完了率ではなく、その先の成果まで見て判断する必要があります。

だからA/Bテストです。旧フォームと新フォームを同時に出し分けて、同じ期間・同じ流入条件で比べれば、思い込みを排除できます。

ただし件数には注意してください。1日1件しか送信がないフォームでは、差が出たように見えても偶然の範囲を抜けられません。

目安として、比較する各パターンで数百件のフォーム到達と、数十件の送信が欲しいところです。そこに届かないなら、A/Bテストより先に、明らかに悪い箇所を直してしまう方が速いです。

小さなサイトでの現実的な進め方は、順番に直して前後で比べる、いわゆる期間比較です。厳密さは落ちますが、何もしないよりずっとましです。

その際は、季節要因やキャンペーンの有無に注意してください。比較する2つの期間で流入元の構成が変わっていると、フォームの改善とは無関係に数字が動きます。

見るべき指標を、フォームの完了率だけに固定しないことも大切です。受注や解約まで含めて、フォームを軽くした判断が本当に得だったのかを後から振り返れるようにしておきましょう。

テストの回し方や期間の決め方は、A/Bテストの始め方｜ノーコードで検証する手順と注意点にまとめてあります。

よくあるつまずき

最後に、現場で繰り返し見かける失敗を挙げておきます。心当たりがあれば、そこから直しましょう。

• 送信完了ページを作らず、同じURLのまま完了メッセージを出しているので、成果が計測できていない
• 確認画面を挟んでいるが、戻るボタンで入力が消えるため、そこで離脱が発生している
• reCAPTCHAや利用規約の同意チェックが送信直前にあり、最後の最後で止まっている
• スマホで送信ボタンがキーボードに隠れ、押せないまま諦められている

とくに1つ目は深刻です。計測できていなければ、改善したかどうかも永遠に分かりません。

完了ページのURLを分けるか、送信ボタンのクリックをイベントとして計測するか。どちらかは必ずやっておきましょう。

3つ目の同意チェックは、位置を少し上げるだけで改善することがあります。押した後に赤字で怒られる体験が、最後の一押しを奪っているからです。

4つ目のキーボード問題は、パソコンの画面を縮めた確認では絶対に見つかりません。自分のスマホで実際に最後まで入力してみるのが、一番安上がりで確実な検査です。

まとめ｜明日から手を付ける順番

EFOは、派手さはないけれど確実に効く改善です。順番を間違えなければ、数週間で結果が出ます。

まず計測を整えて、フォーム表示から完了までの到達数を見えるようにする。次に、明らかに不要な項目を削り、スマホのキーボード設定と自動入力を直す。

ここまでが最優先です。費用はほとんどかからないのに、効き目は一番大きい領域です。

そのうえで、エラー表示のタイミングと文面を整え、余計な出口を消す。効果が読めない大きな変更だけをA/Bテストにかける。

フォームは、訪問者が最後に越える関門です。その1段の高さを下げるだけで、これまで届かなかった人が向こう側にたどり着きます。

まずは自分のフォームを、スマホで最後まで入力してみてください。たぶん、直すべき場所がすぐに見つかります。

参考記事

この記事を書くにあたって参照した、フォーム設計の一次情報です。実装で迷ったときに開いてみてください。

• Forms Tutorial（W3C Web Accessibility Initiative）
• input 要素（MDN Web Docs）