フォーム完了率を上げる ― フリガナ・全角強制・住所入力の見直し
アクセス解析ではサイトへの訪問はある。それなのに、問い合わせフォームからの送信が少ない——。原因の多くは、集客ではなくフォームそのものの作りにあります。特に日本のフォームには、姓名の分割、フリガナ欄、全角・半角の強制、郵便番号と住所の扱いといった独自の慣習があり、これらが一つずつ入力の手間とエラーを生んで離脱を招きます。海外発のフォーム改善論はこの部分に触れません。ここでは日本特有の項目を「本当に必要か」で仕分け直し、完了率を上げる具体策を扱います。
フォームは成果の最終関門
集客やページのコピーがどれだけ効いても、最後のフォームで離脱されれば成果はゼロになります。フォームはサイトの成果の最終関門であり、入力項目1つの増減が完了率に直結する領域です。だからこそ、ここは費用対効果の高い改善対象になります。
最初にやることは、現状のフォームの入力項目を数えることです。全部でいくつあり、そのうち「送信に必須(required)」の項目がいくつあるか。この2つの数を把握するだけで、削れる余地が見えてきます。多くのフォームは、必須項目が実際に必要な数より多くなっています。
「本当に必要か」で項目を仕分ける
項目を減らすといっても、闇雲に消すわけではありません。一つずつ「この情報を、いまこの段階で、必須で取る理由があるか」を問い直します。問い合わせという最初の接点で、住所や部署名、役職まで必須で取る必要は、多くの場合ありません。任意でよいものは任意に、後で聞けるものは後で聞きます。
仕分けのときは、各項目に次の問いを当てます。
- その項目は、いま送信できるかどうかを左右するほど必要か
- 営業の初回連絡(メールや電話)に、その情報を実際に使うか
- 後の返信や商談の中で聞ける情報ではないか
- 入力にかかる手間やエラーの起きやすさに、得られる情報が見合っているか
フリガナ欄は何に使うのか
フリガナ欄は、電話での読み上げ、宛名の音順管理、氏名の読み判別といった目的で置かれてきました。まず確認したいのは、自社でその用途が実際に決まっているかどうかです。使い道がはっきりしないまま慣習で置いているなら、外すか任意にするのが妥当です。
残す場合は、手入力の負担を減らします。氏名の漢字を入力したときに、日本語入力(IME)の読み情報から自動でフリガナを補完するスクリプトを入れておくと、利用者が二度打ちする必要がなくなります。
なお、氏名の読み(フリガナ)に対応する標準の autocomplete 属性の値は用意されていません。氏名そのものの補完はブラウザの自動入力に任せられますが、フリガナの自動補完はスクリプト側で実装する必要がある、という点は押さえておきます。
全角・半角の強制をやめる
「全角で入力してください」「半角数字で入力してください」と利用者に指定し、外れるとエラーで弾く作りは、日本のフォームで離脱を生む典型です。入力する側は、どちらで打つべきか迷い、弾かれるたびに打ち直すことになります。
電話番号や郵便番号の数字、メールアドレスなどは、全角で入力されても、受け取る側のプログラムで半角に変換(正規化)してから処理すれば、利用者に直させる必要はありません。エラーで止めるのは最後の手段にして、まずは受け取る側で吸収します。
同時に、正しく入れやすくする工夫も加えます。数字を入れる欄には inputmode 属性で数値キーボードを表示させるなど、入力する側が自然と正しい形式で打てるようにしておくと、そもそもエラー自体が減ります。
郵便番号からの住所補完と autocomplete 属性
住所入力を楽にする仕組みは、性質の異なる2つを分けて理解すると整理できます。
1つ目は、ブラウザの自動入力です。各入力欄に autocomplete 属性を正しく付けると、ブラウザが保存済みのプロフィールから氏名・住所・電話・メールなどを補完できます。日本の住所は、都道府県が address-level1、市区町村が address-level2、それ以降の番地などが address-line1 に対応します。あわせて postal-code、tel、email、name なども付けておきます。
2つ目は、郵便番号から住所を埋める補完です。これはブラウザの機能ではなく、郵便番号のデータベース(日本郵便が郵便番号データを公開しています)を使い、入力された郵便番号から都道府県・市区町村を自動で埋める実装で、ライブラリやAPIで実現します。この2つを両方入れると、住所入力の手間は大きく減ります。設計の指針としては、デジタル庁が公開しているデザインシステムの入力フォームに関する考え方も参考になります。
- 氏名:autocomplete="name"(分割するなら family-name / given-name)
- 郵便番号:autocomplete="postal-code"
- 都道府県:autocomplete="address-level1"、市区町村:address-level2
- 番地・建物:autocomplete="address-line1" など
- 電話:autocomplete="tel"、メール:autocomplete="email"
制作会社への修正依頼文例
フォームが制作会社の作ったままで、どこをどう直せばよいか自分では指摘しづらい場合は、具体的に依頼するのが早道です。以下は、そのまま送れる依頼文の例です。
「問い合わせフォームの入力完了率を上げたく、次の点の修正をお願いします。1. 必須項目を氏名・会社名・メール・問い合わせ内容に絞り、住所・部署・フリガナは任意または削除。2. 電話番号・郵便番号・メールの全角/半角の強制をやめ、サーバー側で半角に正規化して受け付ける。数値欄には inputmode を設定。3. 各入力欄に autocomplete 属性を付与(氏名・メール・電話・郵便番号・住所)。4. 郵便番号から都道府県・市区町村を自動補完する仕組みを追加。5. エラーは送信時に一括ではなく、該当する欄の近くにわかりやすく表示。対応可否と、難しい項目があればその理由を教えてください。」
なお、フォーム送信のデータを解析ツールや広告タグを通じて外部に渡す場合は、外部送信規律への対応も別途必要になります。改善と合わせて確認しておくとよい論点で、詳しくは別記事で扱っています。
よくある質問
フリガナ欄は必須にすべきですか?
用途が決まっているなら残し、決まっていないなら外すか任意にします。電話での読み上げや宛名の音順管理といった明確な使い道がなければ、初回の問い合わせで必須にする理由は多くありません。残す場合は、氏名入力から自動でフリガナを補完する仕組みを入れて、手入力を減らします。
電話番号は必須にすべきですか?
初回の連絡をメールで行うなら、電話番号は任意で十分なことが多いです。必須項目は「これがないと返信できない」ものに絞ると完了率が上がります。電話でのやり取りが前提の商材なら必須にし、なぜ必要かを一言添えると入力の納得感が高まります。
「全角で入力してください」と注意書きを添えれば十分では?
注意書きがあっても入力ミスは起きます。全角で入れられても、プログラム側で半角に変換して受け取れば、利用者に直させずに済みます。エラーで弾いて入力し直させるより、受け取る側で吸収するほうが離脱を防げます。
郵便番号から住所を自動入力するには何が必要ですか?
ブラウザの autocomplete 属性とは別の仕組みで、郵便番号のデータベース(日本郵便が郵便番号データを公開しています)を使い、入力された番号から都道府県・市区町村を埋めるライブラリやAPIを組み込みます。あわせて各欄に autocomplete 属性を付けると、ブラウザの保存情報からの補完も効くようになります。
項目を減らすと、必要な情報が取れなくなりませんか?
初回に取らなかった情報は、返信や商談の中で聞けます。最初のフォームで全部を取ろうとするより、送信のハードルを下げてまず接点を作り、続く会話で埋めるほうが、結果として得られる情報はむしろ多くなります。
フォームの項目設計から実装、送信後のデータ活用まで一貫して見直したいときは、KarkiumのWeb制作でも対応しています。