【初心者向け】コンバージョン率を上げるためのフォームページ制作と最適化

こんにちは。

WEBサイトづくりの中で、コンバージョン率を上げるための施策について勉強中のスマオカです。

企業のホームページには必ずと言って良いほどお問い合わせフォームを設けます。いかにコンバージョン率を上げられるかを考えてフォームづくりを行うのですが、どうしても入力項目多めフォームにしてしまう方も多いです。

そこで、今回は最適なフォームページづくりのためのポイントについて解説します。

フォームとは

フォームとは、インターネット上のWEBサイトにおいて、ユーザからの入力を受け付けるページのことを言います。例えば、企業のコーポレートサイトでは、採用応募フォームやお問い合わせフォーム、資料請求などのフォームがそれに当たります。すなわち、フォームページには入力するべき項目が設置されていることになります。

エントリーフォーム（EFO）最適化

フォームページは、WEBサイトを運営する中でコンバージョン率上げるための重要なページになります。アクションを起こそうとしているユーザに対して、入力フォームが使いづらいとストレスになり、途中離脱させてしまうことで機会損失となってしまいます。そこで、定期的にフォームページの見直しを行います。それは、「エントリーフォーム（EFO）最適化」と言われるもので、ユーザが簡単且つ正確に入力し登録や送信ボタンを押せるようにするためのものです。

EOFとは、Entry Form Optimizationの略になります。

入力フォームページを制作する上で、どれくらいユーザビリティを上げられるかによってコンバージョン率は変わってきます。

フォームページ作成において、どのような部分を注意して制作するのが良いか説明します。

✔︎入力必須項目は最低限の項目になっているか？

✔︎プルダウンの設置

✔︎文字数制限を設けて、現在入力している文字数と合わせて残文字数を表示する

✔︎入力項目では、入力中に文字候補を表示

✔︎数字や英数字等は、全角入力された文字を半角英数字へ自動変換

✔︎住所入力がある場合は、郵便番号を入れることでそこからわかる住所を自動表示します。

そしてフォーム項目には、テキスト入力項目だけではなくラジオボタンや選択ボックスを設ける場合もあります。その際に、小さなラジオボタンや小さなチェックボックスをクリックしないといけないとなるとユーザビリティが良いとは言えません。

そこで、それらを解決できるものとして、とあるタグがあります。それが＜label＞です。ラベルタグは、ラジオボタンやチェックボックスに記載されている文言でもクリックすることで選択されたり外されたりという処理ができるようになっています。

具体的なラベルタグの記載方法が下のコードになります。

<label for="no-0">
<input type="radio" name="mail" value="0" id="no-0">
  	いいえ
</label>

見直すべき具体的内容

入力フォーム最適化による見直しにおいて、具体的なパターンを紹介します。実施に私も経験したことのあるパターンになります。

✔︎入力項目数が多すぎる場合は減らす

✔︎入力欄に、わかりやすい入力例を予め示しておく

✔︎間違えやすい項目を間違えないようにする

✔︎SSL化などのセキュリティ対応を行い、信頼性を高める

✔︎ユーザにとってのベネフィットをわかりやすく伝える

✔︎プルダウンがある場合、メニュー内の文字数に注意

✔︎入力形式に合った入力キーボードを表示させる

✔︎電話番号、郵便番号の数字入力の場合、ハイフン不要にする

✔︎フォームページにて問い合わせ電話番号を記載しているならばポップアップ表示する

以上が、最低限見直しが必要なパターンです。

また、フォームページではユーザの氏名や住所などの個人情報、またクレジットカード情報などを入力してもらうパターンもあるかと思います。その際は、暗号化通信を行うSSL化を必ず行った方が良いことです。以前は、フォームページのみをSSLしていることが多かったですが、最近ではサイト全体に対してSSL化を行うことが一般的です。これは、検索エンジンのGoogleが推奨していることもあり、世界的に意識が高まっていることもあります。

これらのチェック項目を確認した上で、再度ユーザの反応を見ながら、新たな改善点が見つかったら再び対応を行うというサイクルを繰り返すのが良いでしょう。