入力フォーム最適化（EFO）に必要な20のポイント

こんにちは。ポータル・ジャパンの加瀬です。

ウェブの全体像としてよく4S「集客」⇒「接客」⇒「成約」⇒「再訪問」と言い表現を使って説明をします。また、サイト内のコンバージョンまでの動きを捉え、「集客」⇒「訪問」⇒「回遊」⇒「成約」という表現もあります。

さて、本日このサイト内での「成約=コンバージョン」に結び付けるための方法として、「EFO」について触れさせていただきます。

よく「サイト改善をするにはおしりから攻めていけ！」という風に言いますが、要は「成約」の手前で離脱してしまうユーザーの獲得が最も改善しやすいということです。（変な意味ではありません。） つまるところの「成約の手前」として挙げられるのが、「フォーム」となります。

「EFO」とは「Entry Form Optimization」ということで、入力フォームを最適化しましょうということです。

今さら何を言っとるんやキミは、という方もいると思いますが、情報として整理されているといつでも見直せると思いますので、今回はこの「EFO」についてお話します。

まずはみんな大好きWikipediaからの引用です。

上記の通り、「よくわからない」「めんどくさい」といった「ストレス」を感じることで、離脱してしまいます。
では「ストレス」のないフォームにするためには？ということで、わかりやすく怒りの声とともに18の項目と＋2項目のさらなる活用で計20項目をまとめました。
（※怒りの声に関西弁を使っていますが、関西の方に恨みがあるわけではないので悪しからず。逆に関西弁好きです。）

1. ステップを明確にする

「どんだけ入力せなあかんねん！（怒）」

通常は入力、確認、完了の3ステップだと思いますが、時にどうしても長くなりステップが多くなる場合もあると思います。
予期せぬ長さだった時に離脱する可能性が高まりますので、ステップを明確にしましょう。

2. 必須項目を明確にする

「入力項目多っ！（怒）」

必須項目を明確にしないと、任意の項目も含め入力が多く面倒に思われてしまいます。
※だけでなく枠の色を変えるなどするとよりわかりやすくなります。

3. 入力内容を明確にする

「ちゃんと入力してるやん！（怒）」

電話番号で「-」を入れる？入れない？、半角？全角？など、入力形式が決まっている場合は例を出しましょう。
枠の中に例を入れる場合もあり、その方が幅も取らず目立ちます。

4. エラーを明確にする

「どれが間違うてるかわからんやんけ！（怒）」

一番上にまとめてエラーを表示する場合がありますが、これだとどこの項目が間違っているかがわかりづらくなります。
各項目にエラーを表示するようにしましょう。

5. 入力内容によってエラー表示を変える

「何が間違うてるかわからんやんけ！（怒）」

例えば会員登録のメールアドレス入力では以下のようなエラーが考えられます。
・正しいメールアドレスをご入力下さい。（@が入っていない等）
・このメールアドレスは既に登録されています。（二重登録）
何のエラーなのかを正しく分けて表示するようにしましょう。

6. エラー箇所に正しい情報が入力されたら、エラーをリアルタイムで消す

「…(これでエエのかな？)…やっぱちゃうやん（怒）」

エラーが出て入力したら、また間違ってたみたいなことはよくあります。
エラーが出て、入力欄に入れたらリアルタイムで消えた方が親切ですね。

7. アクティブフィールドの色を変える

「わしどこおんねん?!（怒）」

今どこを入力しているのか明確な方がいいですね。
アクティブフィールドの色を変えると視覚的に認識しやすくなります。

8. 送信ボタンの表現を変える

「これ押したらどーなんの！（怒）」

「送信」というボタンは一般的ですが、より明確に何のアクションボタンなのか表現を変えましょう。
「会員登録する」「メルマガを受け取る」「購入する」など。

9. キャンセルボタンは付けない

「何？ナニ？キャンセルしちゃうよ！（怒）」

ユーザーを踏みとどまらせる要因にもなりえるため、キャンセルボタンが無い方が良いと思います。

10. ボタンを2つ置く場合は、アクションしてほしいボタンの方を大きくする

「間違うてちゃうボタン押してもうたがな！（怒）」

例えば「修正する」と「会員登録する」のボタンがあった場合は、「会員登録する」ボタンの方を目立たせましょう。

11. フォームの項目は垂直にする

「アカン！一個飛ばしてる！（怒）」

上から下に目線はいくため、並列で入力欄を並べると見逃してしまう可能性があります。

12. スパム対策キャプチャを入れるかは要検討

「こんなん読める奴いるー?!（怒）」

たまにわけわからないキャプチャが出てくることが本当にあります。
アレってイライラしますよね。
なるべくなら入れない方がいいと思いますが、スパムしだいでしょうか。

13. 不要な項目は入れない

「この情報いらんやろ！（怒）」

本当に必要な情報かどうかよく考えましょう。
入力項目が少なければ少ないほど離脱のリスクは減ります。

14. 余計なリンクは付けない

「ここどこ？フォームどこ？（怒）」

サイドバナーなどそのまま残っていることもありますが、フォーム入力だけに集中させるため、外部へのリンクは外しましょう。

15. 住所入力の場合はユニバーサル仕様に

「Zip codeって何？（怒）」

世界は広いです。
特に住所は国によって違うので、海外向けの場合は特に注意が必要です。
国によってはZip codeが無い国もあるので、全て必須にしてしまうと大変です。

16. 「Tab」ボタンで移動できるようにする

「移動めんどっ！（怒）」

こなれたユーザーならTabボタンでの移動が楽ちんなことを知っています。
誰にでも使いやすいようにTab移動できるかきちんと確認しましょう。

17. 選択項目にする場合は、ユーザーが最も選ぶ項目から並べる

「探すのめんどくさっ！（怒）」

選択項目をプルダウンなどにする場合は、ユーザーが選びやすい情報から並べると良いでしょう。

18. 確認ページは明確にする

「同じページやん！（怒）」

確認ページも同じページに見えてしまうとユーザーが混乱する可能性があります。
1のステップを明確にするで避けられると思いますが、多少色も変えた方がわかりやすいでしょう。

19. サンキューページを活用する

折角サンキューページまで行ってくれたので、そのユーザーからさらに広げてもらいましょう。
例えば以下のようなことが挙げられます。
・友達に勧めるなどのシェアボタンの設置
・ソーシャルメディアなどのシェアボタンの設置
・facebookなどのファンページへの誘導
・次のアクションが必要な場合はそのページへの誘導など

20. Google Analyticsの設定をする

フォームに来ているユーザー、確認ページまでいったユーザー、全て完了したコンバージョンのデータをしっかりと取り、どこで離脱してしまっているのか確認しましょう。

当たり前と言えば当たり前ですが、ちょっとしたことでユーザーは離脱してしまいます。
まずは現状どの程度のユーザーが離脱しているのかを知るためにアナリティクスの設定などで現状のデータを見ていただくことをおすすめします。