スマホEFOとは、スマートフォンでの入力離脱を防ぐエントリーフォーム最適化（Entry Form Optimization）のことです。Baymard Instituteの調査ではフォームの離脱率は約70%にのぼり、スマホ普及率が97%に達した今、スマホでの入力しやすさがコンバージョン率を直接左右します。本記事では、今日から実践できる10のチェックリストと、inputmode・autocomplete属性の実装コード例まで解説します。
スマホEFOとは？フォーム最適化が必要な理由
スマホEFOが必要な理由は、PC用フォームの流用がスマホでは大きなストレスになるからです。よくある問題は次の3つです。
- レイアウト崩れ：2カラムのフォームは小さな画面で入力欄が窮屈になり、誤タップを誘発します。
- キーボード切替の負担：電話番号欄で日本語キーボードが出るなど、入力のたびに切替が必要だと離脱が増えます。
- エラーの分かりにくさ：送信後にまとめてエラーが出ると、どこを直せばよいか分からず諦められてしまいます。
実際にフォーム改善だけでCV数1.45倍・離脱率39ポイント改善といった事例も公開されており、費用対効果の高い施策と言えます。
スマホフォーム最適化チェックリスト10項目
スマホEFOの実務は、次の10項目をチェックすることから始めます。①〜⑤は実装工数が小さく、今日から着手できます。
- 1カラムレイアウトにする（すぐできる）：入力欄は縦1列に並べます。
- 文字サイズを16px以上にする（すぐできる）：16px未満だとiOSで画面が自動ズームされ、レイアウトが崩れます。
- タップ領域を48px以上確保する（すぐできる）：Google推奨値です。ボタンや入力欄の高さに適用します。
- キーボードを自動切替する（すぐできる）：type・inputmode属性で数字欄には数字キーパッドを表示します。
- ハイフンや全角の強制をやめる（すぐできる）：表記ゆれはシステム側で吸収し、ユーザーに強制しません。
- 入力項目を最小限に絞る：項目数の多さは離脱理由の上位です。任意項目は思い切って削ります。
- 郵便番号から住所を自動補完する：住所入力の手間を大幅に減らせます。
- リアルタイムでエラー表示する：送信後ではなく入力中にその場で知らせます。
- 進捗表示・ステップ分割を導入する：長いフォームは一問一答式にすると完了率が上がります。
- 確認画面を簡素化する：確認・完了までの画面遷移を最小限にします。
実装Tips：input属性の使い分け（コード例つき）
スマホEFOの技術的な核心は、type・inputmode・autocompleteの3属性の使い分けです。主要な入力欄の組み合わせは次のとおりです。
| 入力内容 | type | inputmode | autocomplete |
|---|---|---|---|
| 氏名 | text | — | name |
| メール | |||
| 電話番号 | tel | tel | tel |
| 郵便番号 | text | numeric | postal-code |
| 住所 | text | — | address-line1 |
<!-- 電話番号：数字キーパッドを表示し、OSの自動補完を有効化 --><input type="tel" inputmode="tel" autocomplete="tel" name="phone"><!-- メール：@付きキーボードを表示（type="email"はバリデーションも兼ねる） --><input type="email" inputmode="email" autocomplete="email" name="email"><!-- 郵便番号：type="number"はNG（先頭の0が消える）。text＋numericが正解 --><input type="text" inputmode="numeric" autocomplete="postal-code" name="zip" maxlength="7" placeholder="1000001（ハイフン不要）">input, select, textarea { font-size: 16px; }input, button { min-height: 48px; }注意点は2つです。郵便番号や電話番号にtype=”number”を使うと先頭の0が消える事故が起きるため使いません。また、autocomplete=”off”の乱用も禁物です。ブラウザの自動補完はスマホ入力の最大の時短になります。
EFOツールを使う場合と自力実装の判断基準
判断基準はシンプルで、「本記事のチェックリスト10項目は自力実装で十分、その先の分析と検証はツールが有利」です。1カラム化や属性設定などの基本施策は、制作会社やコーダーに依頼すれば数時間〜数日の工数で対応できます。一方、項目別の離脱率分析、A/Bテスト、一問一答のステップ式フォームへの変換などは、Gyro-n EFOのような専用ツールを導入した方が早く確実です。まず基本施策で土台を整え、さらにCVRを追い込みたい段階でツールを検討するのがおすすめです。
よくある質問（FAQ）
EFOとは何の略ですか？
Entry Form Optimization（エントリーフォーム最適化）の略です。お問い合わせや購入フォームの入力完了率を高める施策全般を指します。
スマホフォームの適切な文字サイズは？
16px以上です。16px未満の入力欄はiOSでフォーカス時に画面が自動ズームされ、操作性が大きく下がります。
入力項目はいくつまでに絞るべきですか？
必要最小限が原則で、お問い合わせフォームなら5〜7項目程度が目安です。項目数の多さはフォーム離脱理由の上位に挙げられています。
EFOの効果測定は何を見ればいいですか？
フォーム到達数・入力開始率・完了率・項目別離脱率の4つです。どの項目で離脱しているかが分かれば、改善の優先順位が決まります。
まとめ
スマホEFOは、1カラム化・16px以上の文字・キーボード自動切替といった基本の積み重ねで、離脱率を着実に改善できる施策です。まずはチェックリスト10項目のうち「すぐできる」5つから着手し、効果を測定しながらステップ式フォームやツール導入へ発展させてください。THREE D PLUSでは、フォーム改善を含むWebサイトのCVR改善もサポートしています。お気軽にご相談ください。
