この記事は、2014年12月16日の記事を再編集しています。

EFO(入力フォーム最適化)はコンテンツ内容やデザインに比べると、対策の優先順位が低くなりがちです。ただコンバージョン率を高めるためにはEFOが必要不可欠です。

今回は、EFOの意味と実際に大きな成果が出たテクニック集をご紹介します。

目次

  1. EFOとは
  2. 入力フォームから離脱する理由
  3. なぜEFOで売上や問い合わせ数があがるのか?
  4. 売上の上がりやすいフォームの共通ポイント
  5. ポイント1.手間を軽減させるように利便性をあげる
    1. 入力箇所を少なくする
    2. 住所を自動入力する
    3. リアルタイムで入力エラーを指摘する
    4. ページを閉じられそうになったらポップアップ
    5. サジェスト機能を導入する
    6. 半角全角は自動変換する
  6. ポイント2.いらいらを感じさせるようなものは取り除く
    1. 必須項目には必須マークを置く
    2. 入力項目の幅は大きくする
    3. 入力ボックスの開始位置を揃える
    4. 入力例を記載する
    5. 入力中の項目の色を変える
    6. 入力完了までの流れを示す
    7. コンバージョンボタンは目立たせる
    8. 押されやすいボタンの配置
    9. 次に進みやすくなるボタン内の言葉
    10. メールアドレス入力は1度のみ
    11. スマホのエラー表示に吹き出しは使わない
  7. ポイント3.気が散るような余計なものは外す
    1. フォーム内から不要なリンクを外す
    2. キャンセル、クリアボタンは不要
    3. 確認ページを省略する

EFOとは

EFOとは、Entry Form Optimizationの頭文字を取った略語で、ECサイトのショッピングカートや資料請求の住所入力フォームなど、何かしらユーザーに情報を入力してもらいたいときに設置している入力フォーム入力率を向上させ、通過させるための対策のことを意味します。入力フォーム最適化と呼ばれることもあります。

具体的にはWebサイトやECサイトなどのフォームおよびショッピングカートにおける、ユーザーの入力の手間を減らすことで、ストレスを与えること無く、フォームの通過率を上げ、最終的な問い合わせや購入を増やすこと」が目的とされます。

なぜEFOで売上や問い合わせ数があがるのか?

売上や問い合わせ数を増やしたい場合、真っ先に行うことはEFOを行うことです。

なぜEFOを行うことが、売上・問い合わせを改善することに繋がるのでしょうか。
例えば、ECサイトを例に考えてみます。

商品ページ訪問した人の数1,000
カートに物を入れた人の数(フォーム到達率)500
カートから実際に購入した率(フォーム通過率) 10%

買い物をした人数50

というECサイトがあるとします。上記のECサイトの買った人の数(コンバージョン)を増やすには、色々と方法はあります。

  • 商品ページ訪問数を増やす
  • フォーム到達数を増やす
  • フォーム通過率を増やす

この中で最も費用対効果の良いものが、フォーム通過率を増やすことです。

「商品ページ訪問数」は簡単に増やせませんし、増やそうとすると広告出稿などをする必要がありお金がかかってしまいます。
フォーム到達数」は、商品ページのデザインや構成を変更する必要があります。
フォーム通過率」は、フォームに入ってきているユーザーなので意欲は高いはずです。その意欲を阻害している問題を改善することができれば向上させることが出来ます。

入力フォームから離脱する理由

ユーザーが入力フォームから離脱する理由は以下のようなものです。

  • フォームの記入欄が多く、面倒になり離脱
  • エラーが表示されたが、どこがエラーなのか分からず離脱
  • フォーム記入中の誤操作により、入力内容が消えてしまったため離脱

売上の上がりやすいフォームの共通ポイント

EFOはフォームやカートの通過率を向上させることでした。

通過率をあげるためには、

  1. 手間を軽減させるように利便性をあげる
  2. いらいらを感じさせるようなものは取り除く
  3. 気が散るような余計なものは外す

この3つに集約されます。
それでは、実際に上記3つのポイントを具体的なEFOテクニックで見ていきましょう。

ポイント1.手間を軽減させるように利便性をあげる

1.入力箇所を少なくする

efo03.jpeg
入力項目数の多さも、ユーザーに大きく負担感を感じさせる要因です。
入力項目数は必要最低限に絞り、名前や電話番号といった項目を分けて、入力箇所をまとめましょう。こうすることで、入力項目数を減らすことができます。

2.住所を自動入力する

efo04.jpeg
住所入力の項目では自動入力機能を導入するなどし、フォーム側で入力をサポートしましょう。ユーザーの負担を軽減できます。

3.リアルタイムで入力エラーを指摘する

efo14.png
入力エラーはその場でアラートを出すことで、入力完了後に表示するよりもストレスが少なく離脱を減らすことが出来ます。

4.ページを閉じられそうになったらポップアップ

efo15.jpeg
せっかく入力した情報が消失してしまうと離脱の原因となりますので、誤操作を防ぐことが重要です。誤った操作で情報を消してしまわないよう、一度ポップアップ表示を出してお知らせしましょう。

5.サジェスト機能を導入する

efo17.png
サジェスト機能とは全て入力し終わる前に、提案表示する機能のこと。
メールアドレスや住所などで導入しているフォームも多く、入力の手間を減らせることで重宝されています。
最近ではサービスとしてサジェストを提供している会社も出ています。

メアドサジェスト | EFO(入力フォーム最適化)のエフトラ EFO
http://f-tra.com/ja/efo/feature/feature_detail15.html

6.半角全角は自動変換する

efo18.png
半角のみ全角のみのフォームに誤った入力をし、送信ボタンを押すとエラー表示が行われ離脱の要因となります。
ここは自動で変換する仕組みを取り入れましょう。jQueryなどを使って自動変換を実現する方法もありますし、EFOツールなどを導入するのも手です。

半角・全角自動変換 | EFO(入力フォーム最適化)のエフトラ EFO
http://f-tra.com/ja/efo/feature/feature_detail12.html

ポイント2.いらいらを感じさせるようなものは取り除く

7.必須項目には必須マークを置く

efo02.jpeg
必須なものは必須と書かないと、入力しなかったユーザーは完了ボタンを押したときにストレスを感じます。

性別、年齢、生年月日、名前、連絡先といった必須項目と、アンケートなどの任意項目を分かりやすくして、ユーザーの負担感を減らしましょう。ユーザーに必要最低限の入力で済むような配慮が伝われば、離脱の可能性を減らせます。

8.入力項目の幅は大きくする

efo05.jpeg
入力している箇所を見失わないように、入力項目の幅は大きめにしておきましょう。また、スマートフォンでの入力の際にも誤タップを防止することが出来ます。

9.入力ボックスの開始位置を揃える

efo06.jpeg
入力項目をいくつか並べる場合には、視線移動によるストレスを減らすため、左揃えに統一します。

10.入力例を記載する

efo07.jpeg
入力例を表示していないフォームは、エラーやミスが多発する原因です。どのように入力してほしいかの例を詳しく記載しておきましょう。

11.入力中の項目の色を変える

efo08.png
ユーザーがどこを入力しているか把握できるよう、入力項目は強調させましょう。

12.入力完了までの流れを示す

efo09.jpeg
入力中に終わりが見えないと感じてしまうと、途中で離脱する可能性が増えます。あとどれくらい入力が必要なのかの流れを表示しましょう。

13.コンバージョンボタンは目立たせる

efo10.jpeg
ボタンは、押しやすさを考慮したデザインを心がけます。目立つ大きさや、反対色を使ってボタンが一目で分かるようにしましょう。

14.押されやすいボタンの配置

efo11.jpeg
ボタンの設置場所は、「視線移動」と「認知活動」を意識して決めましょう。例えば、優先度の高いボタンを上に配置する、次のステップへ進むボタンなら右側に設置することで、自然に流れを把握することができます。

15.次に進みやすくなるボタン内の言葉

efo12.jpeg
ボタンに記載するメッセージは、内容次第ではユーザーの不安を煽ったりする恐れがあります。曖昧な表現や、仰々しい表現は避け、シンプルなものにしましょう。

16.メールアドレス入力は1度のみ

efo16.png
よくあるメールアドレスの再入力ですが、実は外してしまっても意外とメールアドレスを間違えないで入力してくれます。

17.スマートフォンのエラー表示に吹き出しは使わない

efo.png
スマートフォンは画面の表示領域が狭いため、PCのフォームでは問題なかったような吹き出しのエラー表示が要素の重なりを生み、ユーザーのストレスになります。
スマートフォンの場合は、吹き出しでのエラー表示ではなくHTMLで表示させるようにしましょう。

ポイント3.気が散るような余計なものは外す

18.フォーム内から不要なリンクを外す

フォームの目的はただ1つ。フォームの入力項目に答えてもらい、送信ボタンを押してもらうことです。よって、それを阻害するような要素は全て排除するのが鉄則です。

efo01.png
画像を見ると分かるように、とてもシンプルなのが分かるかと思います。これは入力フォーム以外の項目を削り、リンクを取り除いたからです。よく見逃しがちなポイントとして、赤枠のようなロゴのリンクが残ったままということがあります。

余計なリンクが入っていると離脱率が高くなるデータがあります。必ず外すようにしましょう。

19.キャンセル、クリアボタンは不要

efo13.jpeg
入力途中に間違ってリセットし、入力が消えてしまった場合、入力を諦めて離脱する可能性が高まります。ユーザーが誤操作で押さないためにも、設置しないようにしましょう。

20.確認ページを省略する

確認ページユーザーの為を思って作ることが多いですが、実は用意することで離脱が増えるデータがあります。可能であれば確認ページを思い切ってなくすのも手です。

まとめ

入力フォームは業界や職種によって入力項目の内容もボリュームも大きく変わりますが、「ユーザーの入力ストレスを軽減する」という要素はどのようなフォームでも重要です。
せっかく興味を持ってくれたユーザーを離脱させてしまうのはとてももったいないことです。
コンバージョン率の向上に頭を悩まされている方は、こちらで紹介した事例を参考に、入力フォームの項目を見なおしてみましょう。