会員登録フォームはどの項目で離脱しているか｜項目別の離脱を見て直す順番

フォームの離脱は2種類ある

フォームの離脱と一口に言っても、中身は大きく2つに分かれます。直し方がまったく違うので、最初に分けて考えます。

手を付けない人が多いのに項目の文言を直しても、効果はほとんどありません。逆に、入力を始めた人の多くが途中でやめているなら、原因はフォームの中にあり、項目ごとの数字で場所を絞り込めます。この記事の大半は後者の話です。

Googleの開発者向けサイトweb.devの登録フォームのガイドも、ページの閲覧数や離脱率といったページ単位の分析に加えて、目標ファネルやイベントによる「インタラクション分析」で、ユーザーが登録の流れのどこで離脱したかを把握するよう勧めています。項目ごとの離脱は、そのいちばん細かい形です。

項目ごとの離脱はどう測るのか

項目ごとの計測は、入力欄で起きる2つの出来事をもとにしています。入力欄をクリック・タップして入力できる状態になること(フォーカス)と、その入力欄から離れること(フォーカスが外れること)です。ここから、項目ごとに次の3つの数字が出せます。

1. フォーカス数：その項目をクリック・タップした人の数。その項目までたどり着いた人数の目安です。
2. 入力完了数：その項目から離れたときに、値が入っていた人の数。フォーカス数で割ったものが完了率、残りが離脱率です。
3. 平均入力時間：項目を選んでから離れるまでの平均時間。長い項目は、迷っている・調べている・形式に手こずっている可能性があります。

離脱率レポートの読み方：5つの手順

数字が並んだ表を眺めるだけでは、どこから手を付ければよいか決まりません。次の順に見ると、直す候補を1つに絞れます。

1. 表示数と、入力を始めた人数を比べる。表示数に対して入力を始めた人がごく少ないなら、問題はフォームの外です。ここで止めて、ページの見出しや「登録すると何がもらえるか」の説明を見直します。
2. フォーカス数を上から順に追う。項目が下に行くほど、数は少しずつ減るのが普通です。ある項目と次の項目のあいだで急に減っていれば、その手前の項目(またはあいだにある長い説明文など)で多くの人がやめています。
3. 離脱率の高い項目を探す。選んだのに空のまま離れた人が多い項目です。必須項目でこれが高いと、送信までたどり着けないので深刻です。任意項目なら、わざと飛ばしているだけのこともあります。
4. 平均入力時間を見る。まわりの項目より極端に長い項目は、手間がかかっています。自由記述欄なら自然ですが、電話番号や郵便番号で長いなら、形式で迷っている可能性があります。
5. 最後の項目と送信数を比べる。ほとんどの項目は入力されているのに送信が少ないなら、送信ボタンを押したあとのエラー、確認画面、画像認証などを疑います。

最後に、たどり着いた人のうち最も多くがやめている項目を1つ選びます。それが最初に直す項目です。

会員登録フォームでよくある「詰まり」

ネットショップの会員登録やメルマガ登録で、レポートによく出る形と、最初に試すことをまとめました。

直す順番：小さい変更から

直す項目が決まったら、手間が小さく、元に戻しやすい変更から試します。次の順番がおすすめです。

1. 項目を減らす・任意にする。web.devの登録フォームのガイドは「登録時に求める情報はできるだけ少なく」し、名前や住所などは必要な場合で、しかもお客さまがそれを渡す利点を分かっている場合にだけ集めるよう勧めています。メルマガ登録ならメールアドレスだけ、会員登録でも最初の注文まで使わない項目は後回しにできないかを、1項目ずつ確かめます。

2. ラベルと補足を直す。入力欄の中に薄く表示する例文(プレースホルダ)だけを項目名代わりにすると、入力を始めた途端に消えて、何の欄か分からなくなります。web.devもプレースホルダをラベルの代わりに使わないよう勧めています。項目名は欄の外に書き、形式に決まりがあれば短い補足を添えます。

3. エラーをその場で知らせる。送信ボタンを押してから5つのエラーをまとめて見せられるのは、いちばんやる気をなくす場面です。web.devは、送信時にエラーを一覧にするのではなく、入力に合わせてその場で確かめて知らせるよう勧めています。アクセシビリティの基準であるWCAG 2.1の達成基準3.3.1(レベルA)も、入力エラーを自動で見つけた場合は、エラーの箇所を特定し、その内容をテキストで説明するよう求めています。枠を赤くするだけでなく、何が違っていてどう直せばよいかを、項目のすぐそばに言葉で書きます。

4. 並び順を「簡単なもの」から「手間のかかるもの」へ。メールアドレスや名前など答えやすい項目を先に、パスワードや自由記述など手間のかかる項目をあとに置きます。途中まで入力した人は、最後の少し面倒な項目でも続けてくれやすくなります。

5. 途中で中断した人を助ける。電話がかかってきた、タブを閉じてしまった、という離脱もあります。入力途中でページを閉じようとしたときの確認や、入力内容をブラウザに一時保存する機能は、こうした「うっかり」を減らします。ただし、閉じようとする人を引き止めすぎないよう、使いどころは絞ります。

フォームの外に原因があるとき

項目ごとの数字が健全なのに登録が少ないなら、フォームまで来ていないか、来ても始めていません。次の点を確かめます。

1. フォームが見られているか。長いページの下のほうにあると、そもそも多くの人がそこまでスクロールしません。ヒートマップのスクロールの色で、フォームの位置まで何割の人が来ているかが分かります。
2. 登録する理由が書いてあるか。「初回10%オフ」「新作をいち早くお届け」など、登録すると何があるかをフォームのすぐ上に書きます。
3. ボタンの文言が具体的か。「送信」より「会員登録してクーポンを受け取る」のほうが、押したあとに何が起きるかが伝わります。
4. スマホで最後まで入力できるか。自分のスマホで、最初から送信まで実際に入力してみて、引っかかった所をすべて書き出します。web.devも、利用者の多い端末やブラウザで試すよう勧めています。

marketingLABOのフォームで離脱を見る

marketingLABOでは、管理画面で作ったフォームごとに「離脱率レポート」を見られます。特別な設定は要りません。全プランで使えます(フォームの数はフリー1つ、ライト3つ、スタンダード無制限)。レポートには次の数字が並びます。

赤字は「必ず直すべき」という判定ではなく、見るべき場所の目印です。レポートの注記でも、離脱率が高い項目は説明の追加・任意化・質問の見直しを、入力時間が長い項目は迷わせている可能性を検討するよう案内しています。

フォームの設定には、入力を助ける機能(EFO)をまとめて用意しています。必要なものだけオンにできます。

1. 入力欄から離れたときにエラーをすぐ表示する(リアルタイムバリデーション)
2. 未入力の必須項目を目立たせる
3. 電話番号・メールアドレス・郵便番号を半角に自動変換する
4. ふりがなをひらがな・カタカナに自動変換する
5. 入力途中でページを閉じようとしたときに確認する
6. 入力内容をブラウザに自動保存する
7. 送信エラーのとき、最初のエラー項目まで移動する
8. 必須項目の入力状況を進捗バーで表示する
9. 送信前に確認画面を表示する

このほか、「必須」「任意」のバッジ表示、エラーメッセージの文言の変更、住所欄での郵便番号からの住所検索、項目ごとの補足説明(ヘルプテキスト)も設定できます。スパム対策にはreCAPTCHA(v2のチェックボックス)を付けられます。

直したら、A/Bテストで確かめる

項目を減らした翌週に登録が増えても、それがフォームの変更によるものか、セールや季節によるものかは区別できません。確かめるには、古いフォームと新しいフォームを同じ期間に半分ずつ表示して比べます。

marketingLABOのフォームにはA/Bテストがあります。今のフォームをA、そのコピーをBとして、50:50で振り分けて表示します(比率は変更できます)。結果では、表示数・CV数・CV率・平均入力時間と、Aを基準にしたp値を見られます。管理画面では、p値が0.05未満のときに統計的に意味のある差とし、各バリアントが100表示以上になってから判断するよう案内しています。勝ったほうを選んでテストを終えると、以後はそのフォームに統一されます。

比べるのは、変えた項目の離脱率ではなく、フォーム全体のCV率です。ある項目を消すと次の項目の完了率は上がりますが、全体の登録数が変わらないこともあります。

計測できる範囲・できない範囲

項目ごとの離脱が分かるのは、marketingLABOで作ったフォームだけです。Shopify・BASE・カラーミーショップなど、カートシステムが用意している会員登録や購入の画面の入力欄は、項目ごとには計測できません。marketingLABOはカートシステムと連携しておらず、カートの中身や注文の内容も読めません。

カートシステムの会員登録ページでも、全ページに計測タグを貼っていれば、ページ単位の閲覧数やヒートマップは見られます。登録ページの閲覧数と登録完了ページの閲覧数を比べれば、ページ単位での離脱は分かります。タグの貼り方はカートシステム別の計測タグの貼り方にまとめています。購入手続きの画面はカートシステム側の管理になるため、この記事では扱いません。購入前の離脱についてはカゴ落ちの原因と対策をご覧ください。

marketingLABOのフォームが向いているのは、メルマガ登録、サンプルや資料の申し込み、先行予約・入荷待ちの受付、問い合わせなど、カートシステムの外で受け付けるフォームです。メルマガ登録をポップアップで集める方法はメール登録ポップアップの作り方、登録後に送るメールは会員登録後のステップメールの組み方で紹介しています。

直す前のチェックリスト

1. 表示数に対して、入力を始めた人の割合を確認した。
2. フォーカス数が急に減る場所を確認した。
3. 直す項目を1つに絞った。
4. すべての項目について、最初の注文やお返事までに使うかを確かめた。
5. 項目名は欄の外にあり、例文は補足として使っている。
6. エラーは項目のそばに、直し方まで言葉で表示される。
7. 自分のスマホで、最初から送信まで入力してみた。
8. 見直す日を決めた(またはA/Bテストを始めた)。

よくある質問

Q. 離脱率は何%なら正常ですか？
フォームの種類、流入元、商品によって大きく変わるため、他社と比べられる目安はありません。自分のフォームの数字を、変更の前後で比べるのが確実です。

Q. 項目の離脱率には、その項目まで来なかった人も含まれますか？
含まれません。離脱率は、その項目を選んだ人の中で、空のまま離れた人の割合です。手前でやめた人は、下の項目のフォーカス数が減る形で表れます。「フォーカス数」でどこまで進んだか、「離脱率」でどの項目に入ってからやめたかを、両方あわせて見てください。

Q. reCAPTCHAは外したほうが登録は増えますか？
スパム対策なしで外すのはおすすめしません。全項目が入力されているのに送信が少ない場合に、原因の候補として検討します。

Q. どのくらいの期間で判断すればよいですか？
比べる期間と同じくらいの表示数がたまり、曜日の偏りがならされる1週間以上は見るのがおすすめです。A/Bテストなら、各バリアントが十分な表示数になってから判断します。

marketingLABOは無料で登録でき、フリープランでもフォーム1つの離脱率レポートとヒートマップを使えます。プランの違いは料金をご覧ください。

参考にした資料

web.dev「登録フォームのベスト プラクティス」: https://web.dev/articles/sign-up-form-best-practices?hl=ja

web.dev「お支払いと住所のフォームのベスト プラクティス」: https://web.dev/articles/payment-and-address-form-best-practices?hl=ja

ウェブアクセシビリティ基盤委員会「Web Content Accessibility Guidelines (WCAG) 2.1(日本語訳)」達成基準3.3.1: https://waic.jp/translations/WCAG21/