スマホEFOの対策12選！入力フォームの離脱原因と実装の注意点も解説

自社の問い合わせフォームを自分のスマホで開いたとき、パソコン向けの2列のレイアウトが縮んで表示されていませんか。入力欄を指で狙うには、そのたびに画面の拡大が必要です。電話番号の欄をタップしても日本語のキーボードが表示され、数字に切り替える操作が項目ごとに発生します。

スマホで入力フォームが使いにくくなる原因の多くは、パソコン向けに作ったフォームをスマホでもそのまま表示していることです。この記事では、スマホの入力フォームで離脱が起きる原因、スマホEFOの対策12選、項目別の入力欄の設定例、実装の注意点、効果の計測方法を解説します。記事を読めば、自社のフォームで最初に直す箇所と、直した効果の確かめ方がわかります。スマホEFOの最初の一歩は、入力欄ごとにキーボードの種類と自動入力をHTMLで指定する作業です。

ご依頼・ご相談を検討中の方は、こちらからお問い合わせください。

仕事の依頼・相談をする →

スマホEFOとはスマホで入力しやすいようにフォームを整える取り組み

EFOはEntry Form Optimizationの略で、入力フォーム最適化と訳されます。問い合わせ・資料請求・会員登録のフォームで、入力を始めた人が送信まで進めるように項目や画面を整える取り組みを指します。スマホEFOは、EFOのうちスマホでの入力のしやすさに絞った改善です。

スマホは多くの家庭に行き渡っています。令和6年通信利用動向調査では、世帯におけるスマホの保有割合は90.5%です。

パソコンとスマホでは、入力に使う道具が違います。パソコンはマウスと物理キーボードで操作するのに対し、スマホの操作は指によるタップと、画面に表示されるキーボードでの文字入力です。パソコンで問題なく送信できるフォームでも、スマホでは同じ設計が入力の妨げになるため、スマホ向けの対策を別に考える必要があります。

スマホの入力フォームで離脱が起きる原因

パソコンでは気にならない設計が、スマホでは入力をやめる理由になります。対策を選ぶ前に、スマホ特有の離脱の原因を押さえておくと、自社のフォームのどこから直すべきかが見えてきます。スマホの入力フォームで離脱が起きる主な原因は、以下の5つです。

• 画面が小さく入力欄と説明が見づらい
• 指で操作するため誤タップが起きやすい
• キーボードの切り替えと文字入力に手間がかかる
• 入力欄をタップすると画面が拡大される
• 入力の途中で中断すると内容が消えやすい

画面が小さく入力欄と説明が見づらい

スマホの画面は横幅が狭いため、ラベルと入力欄を横に並べたパソコン向けのフォームは、縮小されるか横にはみ出して表示されます。文字が小さくなると、何を入力する欄なのかを読むために拡大の操作が必要です。

キーボードが開いている間は、画面の下側がキーボードで覆われます。入力欄の下に書かれた注意書きや入力例は、入力している最中に画面の外へ押し出されて見えなくなります。

一度に表示できる項目が少ない点も、スマホならではの負担です。項目数の多いフォームは長い縦スクロールになり、送信ボタンまでの距離が実際以上に遠く見えます。

指で操作するため誤タップが起きやすい

スマホでは、マウスのような細かい位置の指定ができず、指の腹で画面に触れて操作します。入力欄・ラジオボタン・チェックボックスが小さく間隔も詰まっていると、隣の項目を押してしまう誤タップが起きます。

誤タップの影響は、選び直しの手間だけでは終わりません。入力欄の近くに置いたリンクを誤って押すと別のページへ移動し、入力した内容が消える場合もあります。狙った場所を押し直す操作が積み重なると、送信の前に入力をやめる人が出てきます。

キーボードの切り替えと文字入力に手間がかかる

スマホのキーボードは、日本語のかな・英字・数字を切り替えて使う仕組みです。入力欄の種類が指定されていないフォームでは、電話番号やメールアドレスの欄でも日本語のキーボードが表示され、項目ごとに切り替えの操作を求められます。

全角と半角の指定が厳しいフォームで切り替えを誤ると、待っているのはエラーの表示と入力のやり直しです。画面のキーボードは物理キーボードより文字を打つのに時間がかかるため、自由記述の欄が多いフォームほど負担が大きくなります。

入力欄をタップすると画面が拡大される

iPhoneのSafariでは、文字サイズが16px未満の入力欄をタップすると、画面が自動で拡大されます。拡大されたままの画面ではフォーム全体の位置関係が見えなくなり、次の入力欄や送信ボタンを探すために縮小の操作が必要です。

パソコン向けのデザインで入力欄の文字を小さめに設定していると、スマホでは項目をタップするたびに自動の拡大が起きます。文字を小さくして項目を詰め込んだフォームほど、起きやすい問題です。

入力の途中で中断すると内容が消えやすい

スマホでの入力は、電話の着信や通知、別のアプリへの切り替えで中断されることがあります。中断してブラウザに戻ったときにページが再読み込みされると、入力した内容が消えている場合があります。

通信が不安定な場所で起きやすいのは、送信ボタンを押したあとにエラーが表示され、入力をやり直す事態です。同じ内容を最初から打ち直す手間は大きく、一度入力内容が消えたところで送信をあきらめる人が出ます。

スマホEFOの対策12選

スマホEFOの対策には、項目の見直しのように内容に関わるものから、HTMLの属性を1つ足すだけで済むものまであります。スマホEFOの対策12選は、以下のとおりです。

• 入力項目をスマホで必要な数まで絞る
• ラベルを入力欄の上に置いて1列で並べる
• 入力欄とボタンをタップしやすい大きさにする
• 入力欄の文字サイズを16px以上にする
• 項目に合ったキーボードをtype属性とinputmode属性で表示する
• autocomplete属性でブラウザの自動入力を使えるようにする
• 郵便番号から住所を補完する
• エラーは入力欄のすぐ近くに入力した時点で表示する
• 選択式と入力式を項目に合わせて使い分ける
• キーボードのEnterキーに次の動きを表示する
• 長いフォームはステップに分けて進み具合を見せる
• 入力をあきらめた人のために電話の連絡先を置く

入力項目をスマホで必要な数まで絞る

スマホの入力フォームでは、入力項目の数がそのまま入力の手間になります。1つの項目ごとに、入力欄のタップ・キーボードの切り替え・文字の入力が発生するためです。

項目を減らすときは、最初の問い合わせの時点で本当に必要な情報かどうかで判断します。会員登録のフォームで推奨されている設計は、できるだけ少ない項目だけを聞き、氏名や住所のような追加の情報を必要になった時点で集める形です。BtoBの問い合わせフォームでも、商談の中で聞ける情報は最初のフォームから外せます。項目を見直すときの観点は、以下のとおりです。

• 最初の連絡の時点で必要な情報か
• 送信後のやり取りで聞ける情報か
• 任意でよい項目を必須にしていないか
• 同じ内容を2回入力させていないか

氏名は、姓と名を分けて保存する理由がなければ、1つの入力欄にまとめられます。入力欄が1つになると、ブラウザの自動入力やコピーと貼り付けも使いやすくなります。フリガナ欄も、電話や郵送で読み方を使う業務がなければ、外せる候補の一つです。

ラベルを入力欄の上に置いて1列で並べる

スマホの入力フォームでは、ラベルを入力欄の上に置き、項目を縦1列に並べる形が基本です。ラベルが入力欄の真上にあると、どのラベルがどの入力欄のものかをすぐに見分けられます。

ラベルを左、入力欄を右に置くパソコン向けの配置では、横幅の狭いスマホで入力欄の幅が足りません。ラベルを上に移すと、入力欄を画面の横幅いっぱいまで広げられ、入力した文字を最後まで確認できます。

1列で並べる理由は、次の入力欄を探す手間をなくすためです。2列のレイアウトでは、どの順で入力するのかがわかりにくくなり、入力漏れも起きやすくなります。

ラベルを入力欄と結びつける手段は、label要素です。label要素で結びつけたラベルは、文字の部分をタップしても入力欄を選べるため、指で押せる範囲が広がります。

入力欄とボタンをタップしやすい大きさにする

タップする対象の大きさは、48px前後が推奨されています。48pxは約9mmにあたり、人の指の腹とほぼ同じ大きさです。タップの対象どうしの間隔は、縦と横ともに8px程度空けると、隣の対象を押してしまう誤タップを防げます。

最低限の基準にあたるのは、アクセシビリティの国際的な指針WCAG 2.2がレベルAAに定める、タップの対象を24×24 CSSピクセル以上とする達成基準です。入力欄・送信ボタン・ラジオボタン・チェックボックスのそれぞれで、24pxを下回る対象がないかを確認します。

ラジオボタンとチェックボックスは、部品そのものが小さく作られがちです。選択肢の文字もlabel要素に含めれば、文字の部分をタップしても選択できるようになります。

利用規約への同意欄では、label要素の中にリンクを入れない設計が安全です。ラベルの中にリンクがあると、同意のチェックを入れようとしてリンクを押してしまい、別のページへ移動する原因になります。利用規約のリンクは、同意のチェックボックスとは別の行に置きます。

入力欄の文字サイズを16px以上にする

入力欄の文字サイズは、16px以上に設定します。多くのブラウザでは1remが16pxにあたるため、フォームの部品の文字サイズを1rem以上にしておけば、iPhoneのSafariで入力欄をタップしたときの自動拡大が起きません。

文字サイズを大きくすると、入力欄の高さも自然に大きくなります。入力欄の内側の余白を広げる方法は、タップしやすい大きさと読みやすい文字サイズを同時に満たす手段の一つです。

ラベルや入力例の文字を小さくしすぎると、拡大しなければ読めない状態に戻ります。入力欄だけでなく、ラベルと注意書きもスマホの画面で読める大きさかを確かめておきます。

項目に合ったキーボードをtype属性とinputmode属性で表示する

入力欄のtype属性を項目に合わせて指定すると、スマホでは項目に合ったキーボードが表示されます。メールアドレスの欄をtype="email"にすると@付きのキーボード、電話番号の欄をtype="tel"にするとテンキーが表示されます。type属性を指定する利点は、ブラウザの基本的な入力チェックも有効になることです。

項目に合ったキーボードを表示するtype属性の値は、以下のとおりです。

• メールアドレスはemail
• 電話番号はtel
• WebサイトのURLはurl
• 検索語はsearch
• 増減させる数量はnumber

郵便番号や認証コードのように、数字だけで構成されていても計算に使わない値には、type="text"のままinputmode="numeric"を指定します。inputmode属性は表示するキーボードの種類を指定する属性で、numericは0から9の数字を打つキーボードを表示する値です。inputmode属性には入力値を制限する働きがないため、形式のチェックは別に行います。

英字を入力する欄で先頭の文字が勝手に大文字になる場合に使うのが、自動の大文字化を止めるautocapitalize属性です。autocapitalize属性はtype属性がemail・url・passwordの入力欄では効果がないため、メールアドレスの欄はtype="email"の指定で対応します。

autocomplete属性でブラウザの自動入力を使えるようにする

autocomplete属性は、入力欄にどの種類の情報を入れるのかをブラウザに伝える属性です。autocomplete属性を指定しておくと、ブラウザが保存している氏名・メールアドレス・電話番号・住所を候補として表示し、タップするだけで入力欄を埋められます。

スマホでは文字を打つこと自体が負担になるため、自動入力が効くかどうかは入力の手間を大きく左右する要素です。適切な値がある入力欄には、すべてautocomplete属性を指定します。BtoBのフォームでよく使う値は、以下のとおりです。

• 氏名はname
• 会社名はorganization
• 役職はorganization-title
• メールアドレスはemail
• 電話番号はtel
• 郵便番号はpostal-code

SMSで届く認証コードを入力させる場合は、one-time-codeを指定します。ログイン機能のあるフォームでは、ユーザー名にusername、新しく設定するパスワードにnew-passwordを指定すると、パスワード管理の機能とも連携しやすくなります。

autocomplete属性を指定できるのは、input要素に加えてselect要素とtextarea要素です。都道府県をselect要素で選ばせる場合も、autocomplete属性を付けておけば自動入力の対象になります。

郵便番号から住所を補完する

郵便番号から住所を補完する仕組みは、日本の住所を入力させるフォームで効果が大きい対策です。都道府県と市区町村、町名までを画面のキーボードで打つ手間が、郵便番号の7桁の入力に置き換わります。

郵便番号のデータは、日本郵便が郵便番号データのCSVとして公開しています。2025年5月には、郵便番号から住所を取得できる日本郵便の公式APIの提供も始まりました。

住所の入力欄は、autocomplete属性の値に合わせて分けておくと、ブラウザの自動入力とも両立できます。日本の住所の場合、autocomplete属性の値の対応は以下のとおりです。

• 都道府県はaddress-level1
• 市区町村はaddress-level2
• 町名と番地はaddress-line1
• 建物名や部屋番号はaddress-line2

補完した住所は、入力した人があとから書き換えられるようにしておきます。補完の結果が実際の住所と違う場合に修正できないと、正しい住所で送信できなくなるためです。

エラーは入力欄のすぐ近くに入力した時点で表示する

入力のエラーは、送信ボタンを押したあとにまとめて表示するのではなく、項目を入力した時点でその入力欄のすぐ近くに表示します。送信後にエラーの一覧を出す形の問題は、スマホの狭い画面で該当する項目を探して戻る操作が増えることです。

エラーの文章には、何が間違っているかと、どう直せばよいかを書きます。「入力内容に誤りがあります」だけでは、どの項目をどう直せばよいかがわかりません。「電話番号は数字のみで入力してください」のように、直し方まで書いた文章にします。

送信時にエラーが残っている場合は、最初にエラーが出ている入力欄まで画面を移動させます。入力欄まで自動で移動させれば、スマホの画面の外にあるエラーの場所をスクロールして探す操作が不要です。

全角と半角の違いでエラーを出さない設計も、スマホでは効果があります。全角で入力された数字や英字を受け付けて、システムの側で半角に変換すれば、キーボードの切り替えを誤ったことによるエラーそのものが減ります。

選択式と入力式を項目に合わせて使い分ける

選択肢が決まっている項目は、文字を打たせずに選ばせる形にすると入力の手間が減ります。選択肢が数個の項目に向いているのは、タップ1回で選べるラジオボタンです。

選択肢が多い項目は、select要素のプルダウンにします。都道府県のように選択肢が47ある項目でも、スマホではプルダウンを開くと選択肢の一覧から選べます。

ただし、選択式にすれば必ず早くなるわけではありません。生年月日の年のように選択肢が数十年に及ぶ項目は、長い一覧をスクロールするより数字を直接入力する方が早い場合があります。日付をselect要素の組み合わせで作ると、ブラウザの自動入力が効かなくなる点にも注意が必要です。

問い合わせの種別や検討している時期のような項目は、選択式にすると自由記述より答えやすくなります。自由記述の欄は、最後に1つだけ残す形にすると入力の負担を抑えられます。

キーボードのEnterキーに次の動きを表示する

enterkeyhint属性を指定すると、スマホのキーボードのEnterキーに表示するラベルを変えられます。途中の入力欄にnextを指定すると「次へ」、最後の入力欄にdoneやsendを指定すると「完了」や「送信」のような表示になり、キーを押したあとに何が起きるかがわかります。

enterkeyhint属性で変わるのは、Enterキーの表示です。キーを押したときの実際の動きが表示と合っているかは、スマホの実機で入力して確かめます。

最後の入力欄でEnterキーを押した時点でフォームが送信されると、確認する前に送られてしまう場合があります。送信のタイミングは、送信ボタンを押したときに限る設計にしておくと安全です。

長いフォームはステップに分けて進み具合を見せる

項目を減らしきれない長いフォームに向くのは、複数の画面に分けて1画面あたりの項目を少なくする方法です。スマホでは1画面に表示できる項目が少ないため、ステップに分けて進み具合を「3ステップ中2ステップ目」のように示すと、残りの量がわかり途中でやめにくくなります。

ステップに分けたときの欠点は、画面を切り替える操作が増えることです。項目が少ないフォームでは、1画面に収めて縦にスクロールさせる方が早く入力を終えられる場合もあります。分けるかどうかの判断材料は、項目の数とフォームの目的です。

送信ボタンの文言も、押したあとに何が起きるかを示す言葉にします。「送信」の2文字よりも、「入力内容を確認する」「資料を請求する」のように動作を書いた文言の方が、ボタンを押した結果を予想しやすくなります。

入力をあきらめた人のために電話の連絡先を置く

スマホは電話をかけられる端末なので、フォームのページに電話の連絡先を置いておくと、入力の途中で疑問が出た人やフォームの入力をやめた人からの連絡を受けられます。電話番号はa要素のhref属性に「tel:」から始まるURLを指定してリンクにすると、スマホではタップするだけで発信できます。

BtoBの問い合わせで電話番号と一緒に書いておきたいのは、受付時間です。受付時間が書かれていないと、時間外に電話をかけてつながらなかった人が連絡をあきらめる原因になります。

電話の連絡先に適した場所は、フォームの入力欄から離れた位置です。入力欄のすぐ近くに電話番号のリンクがあると、入力中の誤タップで発信の画面が開く原因になります。

スマホEFOで使う入力欄の設定例

入力欄ごとの設定は、表にまとめておくと制作会社への依頼にもそのまま使えます。BtoBの問い合わせフォームでよく使う項目の設定例は、以下の表のとおりです。

電話番号の入力欄は、市外局番と番号を3つの欄に分けずに1つにまとめます。入力欄を分けると、欄ごとにタップする手間が増え、自動入力やコピーした番号の貼り付けもうまく働かなくなります。入力欄を1つにまとめた方が、入力値のチェックも簡単です。

電話番号の欄はtype="tel"でテンキーを表示できるため、inputmode属性を重ねて指定する必要はありません。inputmode属性にもtelの値はありますが、電話番号を入力させる欄には通常type="tel"を使います。

スマホEFOを実装するときの注意点

スマホEFOの対策には、善意で入れた設定が別の使いにくさを生むものもあります。スマホEFOを実装するときの注意点は、以下のとおりです。

• 画面の拡大と縮小を禁止しない
• 郵便番号や電話番号にtype="number"を使わない
• placeholderをラベルの代わりにしない
• メールアドレスの確認入力を求めない
• 離脱防止の確認ダイアログに頼らず入力内容を保存する
• フォームの表示と反応の速さをスマホで測る
• よく使われる端末の実機で確認する

画面の拡大と縮小を禁止しない

入力欄をタップしたときの自動拡大を防ぐ目的で、viewportのmetaタグにuser-scalable=noやmaximum-scale=1を指定して、画面の拡大そのものを禁止する方法があります。拡大を禁止すると、文字を拡大して読んでいる弱視の人がフォームを読めなくなるため、避けるべき設定です。

アクセシビリティの指針では、少なくとも2倍までの拡大ができることが求められています。自動拡大への対策は、入力欄の文字サイズを16px以上にする設定です。viewportのmetaタグは、width=device-widthとinitial-scale=1の指定にとどめます。

郵便番号や電話番号にtype="number"を使わない

type="number"は、数量のように増やしたり減らしたりする数値のための入力欄です。郵便番号やクレジットカードの番号のように、数字だけで書かれていても数値として計算しない値には向いていません。

数字のキーボードを出したいだけであれば、郵便番号にはtype="text"とinputmode="numeric"、電話番号にはtype="tel"を指定します。type="number"の入力欄では、ブラウザによって数値を増減させるボタンが表示されるため、番号の入力には余計な部品が付くことになります。

placeholderをラベルの代わりにしない

placeholderは、入力欄の中に薄い文字で入力例を表示する属性です。入力欄の外にラベルを置く場所を節約するために、placeholderだけで項目名を示すフォームがありますが、placeholderはラベルの代わりになりません。

placeholderの文字が表示されるのは、入力を始める前だけです。入力の途中で何の欄だったのかを確かめられず、読み上げ機能でも項目名が伝わらない場合があります。項目名は必ずlabel要素で入力欄の外に表示し、placeholderは入力例を見せる補助として使います。

メールアドレスの確認入力を求めない

メールアドレスを2回入力させる確認欄は、スマホでは入力の手間を2倍にします。入力の誤りを防ぐ目的であっても、同じ内容を2回入力させる設計は避けるのが基本です。

連絡先の誤りを確かめたい場合は、入力されたメールアドレスに確認用のコードを送り、コードを入力してもらう方法があります。BtoBの問い合わせフォームであれば、送信後に自動で返信メールを送る設定にしておくと、届かなかった場合に入力した人が誤りに気づけます。

離脱防止の確認ダイアログに頼らず入力内容を保存する

ページを離れようとしたときに「このページを離れますか」と確認するダイアログは、beforeunloadイベントで表示できます。ただし、beforeunloadイベントはスマホでは確実に発生しません。スマホで別のアプリに切り替え、そのままブラウザを閉じた場合には、確認のダイアログが出ないまま入力内容が失われます。

スマホで入力内容を守るには、ページが画面から隠れた時点で入力内容を保存する方法が確実です。visibilitychangeイベントを使えば、別のアプリに切り替えたときにも入力内容を一時的に保存できます。

beforeunloadイベントを使う場合に押さえたいのは、入力欄に値が入っているときだけ登録し、送信が終わったら解除する手順です。入力していない人にまでダイアログを出すと、ページを離れたいだけの人の操作を妨げます。

フォームの表示と反応の速さをスマホで測る

フォームのページの速さは、パソコンとスマホに分けて測ります。ページの速さの目安になるCore Web Vitalsで、良好とされる基準は以下の3つです。

• 表示の速さを示すLCPが2.5秒以内
• 操作への反応を示すINPが200ミリ秒以内
• レイアウトのずれを示すCLSが0.1以下

基準を満たしているかは、ページの読み込みの75パーセンタイル(読み込み全体の4分の3が収まる値)で判断し、スマホとパソコンを分けて確認するのが推奨です。パソコンで速く表示されるページでも、スマホの通信環境や処理の性能ではフォームの表示が遅れる場合があります。

入力欄をタップしたときの反応が遅いと、入力した文字が遅れて表示され、打ち間違いが増えます。EFOのために読み込むスクリプトが増えたときに確認したいのも、INPの数値です。

よく使われる端末の実機で確認する

スマホで表示する入力フォームは、ブラウザや端末によって表示されるキーボードや自動入力の動きが変わります。パソコンのブラウザでスマホの画面幅を再現するだけでは、キーボードの種類や自動拡大、自動入力の候補の出方までは確かめられません。

確認する端末は、自社サイトのアクセス解析でよく使われているOSとブラウザから選びます。試す範囲は、iPhoneのSafariとAndroidのChromeの両方で、フォームを最後まで入力して送信するところまでです。

実機での確認は、改修のたびに行います。項目を1つ追加しただけでも、type属性やautocomplete属性の指定漏れでキーボードや自動入力の動きが変わるためです。

スマホEFOの効果を計測する方法

スマホEFOは、対策を入れたあとに数値で効果を確かめるまでが一連の作業です。計測の仕組みがないと、どの対策が効いたのか、どの項目でまだ離脱が起きているのかがわかりません。スマホEFOの効果を計測する方法は、以下の4つです。

• フォームの開始と送信をイベントとして記録する
• デバイス別にフォームの完了率を比べる
• 項目ごとの離脱と入力時間を確認する
• 改善は1か所ずつ変えて前後を比べる

フォームの開始と送信をイベントとして記録する

Google アナリティクス 4の拡張計測機能では、フォームの操作をform_startとform_submitの2つのイベントで記録できます。form_startはセッションの中で初めてフォームを操作したとき、form_submitはフォームを送信したときに記録されるイベントです。

2つのイベントには、フォームのid属性やname属性、送信先のURLがパラメータとして記録されます。form_submitには、送信ボタンの文言も記録されます。パラメータをレポートで使うには、カスタムディメンション(レポートに独自の項目を追加する設定)の作成が必要です。

自社のフォームで2つのイベントが正しく記録されているかは、テスト送信をして確かめます。送信後に表示される完了ページの閲覧を、送信の数として別に数える方法もあります。

デバイス別にフォームの完了率を比べる

フォームを始めた人のうち送信まで進んだ人の割合を、スマホとパソコンに分けて比べます。スマホの完了率がパソコンより低い場合に疑うのは、スマホ特有の原因による離脱です。

Google アナリティクス 4の目標到達プロセスデータ探索では、フォームの開始・入力・送信のような段階をステップとして最大10個まで設定できます。内訳にデバイスカテゴリを指定すると、ステップごとの通過と離脱をスマホとパソコンで分けて表示できます。

内訳の集計で、ユーザーが数えられるのは最初に該当した分類だけです。スマホでフォームを開き、パソコンで送信した人は、スマホの側にだけ数えられる点を押さえて数値を読みます。

項目ごとの離脱と入力時間を確認する

どの項目で入力をやめたのか、どの項目の入力に時間がかかったのかは、項目単位の計測で確かめます。Google アナリティクス 4の拡張計測機能はフォームの開始と送信を記録する機能で、項目ごとの離脱までは標準では記録しません。

項目単位の計測の手段は、EFOツールの分析機能や、画面の操作を録画のように再現するセッションリプレイのツールです。項目別の離脱率や入力にかかった時間がわかれば、削る項目や直す入力欄の優先順位を決められます。

操作を記録するツールを使う場合は、入力された氏名や連絡先が記録に残らない設定になっているかを確認します。フォームには個人情報が入力されるため、記録の対象から入力内容を外す設定が欠かせません。

改善は1か所ずつ変えて前後を比べる

効果を確かめるときは、変更を1か所ずつ入れて、変更の前と後の完了率を比べます。複数の対策を同時に入れると、完了率が上がっても下がっても、どの変更が原因かを切り分けられません。

比べる期間は、曜日の偏りが出ないように同じ曜日の並びで区切ります。比べる期間から外したいのは、広告の配信を始めた時期や展示会の後のように、フォームに来る人の数や種類が変わる時期です。

アクセス数が十分にあるフォームでは、変更前と変更後のフォームを同じ期間に半分ずつ表示するA/Bテストも使えます。アクセス数が少ないフォームでは、差が出るまでに時間がかかるため、効果の大きい対策から順に入れて期間で比べる方が現実的です。

スマホEFOを実装する手段と費用の実例

スマホEFOの対策は、自社または制作会社がフォームのHTMLを直す方法と、EFOツールのタグをページに設置する方法に分かれます。どちらの方法を選ぶかで変わるのが、費用のかかり方です。

HTMLを直す方法では、type属性・inputmode属性・autocomplete属性の指定と、文字サイズやラベルの位置の変更をフォームのコードに直接書き込みます。属性の追加とCSSの変更が中心になるため、費用はフォームを改修する作業の量で決まり、毎月の利用料はかかりません。

EFOツールは、フォームのページにタグを設置するだけで、入力補助・エラー表示・項目別の計測の機能を後から加えられるサービスです。EFOツールの料金の実例は、以下の表のとおりです。

Gyro-n EFOの月額料金は、フォームの月間のユニークユーザー数によって変わります。導入前に1か月の無料トライアルがあり、パソコン用とスマホ用のフォームを1つずつ試せます。

キーボードの種類や自動入力、文字サイズの対策は、HTMLとCSSの修正で対応できる範囲です。項目別の計測や全角と半角の自動変換のように、自社でコードを書いて作るのが難しい機能が必要になった時点で、EFOツールの導入を検討すると費用を抑えられます。

スマホEFOはキーボードと自動入力の設定から始めましょう

スマホの入力フォームで離脱が起きる主な原因は、画面の小ささ・指での操作・キーボードの切り替え・自動の拡大・入力の中断の5つです。パソコン向けのフォームをそのまま表示していると、原因が重なって入力の手間が大きくなります。

スマホEFOの対策の多くは、入力欄ごとのHTMLの属性と文字サイズの指定で進められる内容です。費用をかけずに始められる対策から順に入れて、効果を数値で確かめれば、スマホからの問い合わせを取りこぼさないフォームに近づけます。スマホEFOで最初に取り組む作業は、以下のとおりです。

• 自分のスマホで自社のフォームを最後まで入力して送信する
• 入力欄ごとにtype属性とinputmode属性とautocomplete属性を指定する
• 入力欄の文字サイズを16px以上にする
• フォームの開始と送信をスマホとパソコンに分けて計測する

まずは自社の問い合わせフォームを自分のスマホで開き、キーボードの種類と自動入力が項目に合っているかを1つずつ確かめるところから始めましょう。

ご依頼・ご相談を検討中の方は、こちらからお問い合わせください。

仕事の依頼・相談をする →