入力フォームにプロの3第要素を無料で簡単に取入れるFV画像
20181213 加筆修正
20181105 加筆修正
20181103 加筆修正

10人のうち約7人が入力フォームを離脱している

EFOとは入力フォーム改善のこと。なぜEFOが重要なのか?この数字をみて欲しい。

入力フォームの放棄率の平均値は69.89%(2018.6.20)
※ネットショップの調査研究を行なっているBaymard Instituteの統計「40 Cart Abandonment Rate Statistics」の調査による

入力フォームまで来てアクションしようとしているお客様の約70%が途中で離脱している。離脱を少しでも減らせたら、売上アップは確実
でも、どうやったら良いか?わからない。。。面倒で難しそう。。。
そんなあなたのために、無料で簡単で効果がありそうなEFO(Entry Form Optimization:入力フォーム最適化)の具体的な方法は何か考えた。

EFOの重要要素って何だろう?

EFOのことはEFOのプロに聞け!ということで、主要EFOツール会社の各ツールの機能について調べてみた。

出典元

ナビキャストフォームアシスト(最適化フォーム数4000超え 入力フォーム最適化の売上金額とシェア20142016NO.1

https://www.showcase-tv.com/formassist/

エフトラEFO(導入フォーム 2748件)

http://f-tra.com/ja/efo/

Gyro-n EFO ジャイロン(導入企業300社以上)

https://www.gyro-n.com/efo/

各EFOツールの重要要素は3つ

EFOツール3大要素

各EFOツールの主な機能を列挙しグループ分けしてみら、大きく3つになった。

EFOツールの3大要素

1 入力作業を減らす

2 エラーを起こさない

3 入力しやすくエスコート

さすがEFOツールは手厚い機能が充実しているが、お金がかかる。逆に自分でこれらの機能を全て設定しようとするとちょっと大変。なので、

このEFOツールの3大要素に沿って、比較的簡単に無料で取り入れられる16の工夫を紹介する。

合わせて、脅威のCV率成果をあげている最新のチャット型入力フォームについてとやはり自分で入力フォーム細々と設定するのは難しいという場合の時の無料フォームの紹介をする。

目次

1 入力フォーム最適化(EFO)の3大要素

1-1  入力作業を減らす工夫

(1)入力項目を極限まで減らす

(2)入力欄を分割しない

(3)自動入力できるようにautocomplete属性を設定する

(4)郵便番号から住所自動入力

(5)選択項目3つ以内ならラジオボタン、4つ以上はプルダウン

1-2  エラーを減らす

(6)必須項目をわかりやすく

(7)入力形式を細かく指定しない

(8)記入例の提示

(9)入力毎にエラーチェックする

(10)途中離脱を防ぐ

1-3  入力しやすくエスコート

(11)先頭項目オートフォーカス

(12)縦方向の配置で入力しやすく

(13)関連情報は大分類でくくる

(14)ボタンラベルやボタン周りマイクロコピーで次の行動を促す

(15)スマホ対応:キーボードの設定

(16)IOS向け設定:オートコレクト・大文字自動変換オフ

2 驚異のCV率!チャット型入力フォーム

3 無料フォーム使うならこれ

4 EFOチェックリストダウンロードする
※各項目のチェックポイントを1枚のチェックリストにまとめています。ダウンロードできます。EFOチェックに是非どうぞ。

1 入力フォーム最適化(EFO)の3大要素

1-1 入力を減らす工夫

(1) 入力項目を極限まで減らす

入力項目が少なければ少ないほど入力の手間が減る。本当にその項目が必要か?考え、必要最低限の項目に絞る

チェックポイント
・必須項目を必要最低限に抑える
・任意項目も必要最低限に抑える

最初入力するのはメールアドレスだけの事例

ファーストコンタクトでの入力数を極限に絞った事例。ZOZOTOWNの事例では、商品を購入する際、先にメールアドレスのみ入力し「注文する」をクリックし詳細情報はその後入力する仕様。お客様とのコミュニケーションはメールアドレスさえあればできる。

購入メールアドレスのみ事例
ZOZOTOWN

購入メルアドのみ事例ZOZOTOWN

会員登録メールアドレスのみ事例
volkswagen

会員登録メルアドのみ事例volkswagen

出典元 https://web.volkswagen.co.jp/MyVOLKSWAGEN/my_reg.php

会員登録メールアドレスのみ事例
Nissen

会員登録メルアドのみ事例Nissen

出典元 https://www.nissen.co.jp/member/register-customer

(2) 入力欄を分割しない

姓名、郵便番号、住所、電話番号等の入力欄を複数に分けない。分割されているとカーソルを合わせる動作が手間。また、入力欄を複数に分けないでおけば、次で説明するautocomplete属性の設定をすることにより、自動入力できる機会が増え入力とエラーが減る。
また、入力項目の文字数(長さ)が明確な項目(郵便番号、電話番号など)は入力欄の幅を合わせよう。幅が広すぎる入力欄に7桁の郵便番号を入力する仕様になっていたら、正しい入力をしているのか不安になるし間違った入力が増える原因にもなってしまう。

チェックポイント
・姓名、郵便番号、住所、電話番号等の入力欄を複数に分けない。
・入力項目の文字数(長さ)が明確な項目(郵便番号、電話番号など)は入力欄の幅を長さに合わせる。

出典元:

フォームの入力欄は分割せず、統合するべき5つの理由

http://f-tra.com/ja/blog/column/7036

(3) 自動入力できるようにautocomplete属性を設定する

Googleウェブマスター向け公式ブログでも推奨されてるautocomplete属性は設定するべき。
autocomplete属性
とは、inputタグ内にautocomplete=”項目名”を設定するだけで、姓名メールアドレス住所電話番号など入力フォームに繰り返し入力しブラウザに保存されている情報を自動入力を促す機能。始めはChromブラウザのみサポートしてたが、今ではWHATWGに準拠し他ブラウザでも完全にサポートされている。

チェックポイント
・inputタグ内にautocomplete属性を設定する

出典元:

Googleウェブマスター向け公式ブログ オンラインフォームを入力しやすくするために

https://webmaster-ja.googleblog.com/2015/03/helping-users-fill-out-online-forms.html

最適なフォームの作成:オートコンプリートを有効にするためにメタデータを使用

https://developers.google.com/web/fundamentals/design-and-ux/input/forms/

スマホのフォームの完了率を上げるautocomplete属性とその他ノウハウまとめ

https://united-rivers.com/autocomplete-to-nominate-a-completion-rate/

設定方法は簡単。inputタグにautocomplete=”属性名”を追加するだけ。

<input type=”text” name=”name” autocomplete=”name”>

数多くある属性名のうち、自動入力されやすいように、なるべく項目を分けないように属性名を設定するのがコツ。例えば姓名であれば、姓と名で分けずにフルネームのautocomplete属性である”name”を設定する。下記に使うべき属性名を挙げる。

属性名 意味
name フルネーム 山田太郎

山田 太郎

email メールアドレス temp@temp.com
postal-code 郵便番号 1111111
street-adress 住所(複数行) 東京都

中央区銀座

8ー1

tel 電話番号 0312345678

出典元

WHATWG(ワットダブルジー)提供の「WHATWG Standard」AutoFillについての仕様より抜粋。

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete-name

(4) 郵便番号から住所自動入力

デモサイトで試せるが、自動入力は本当に便利。もしできそうであれば、郵便番号の入力で住所の自動入力ができるように設定できると良い。Javascriptのプラグインを使用するため多少知識が必要。できそうだったら是非トライ。

チェックポイント
・(できれば)郵便番号の入力で住所の自動入力を設定する

参考サイト:

デモサイト

http://www.webdesign-fan-guide.com/ajaxzip3/

超簡単!たった2行だけで郵便番号から住所自動表示する方法:ajaxzip3

http://www.webdesign-fan.com/ajaxzip3

(5) 選択項目3つ以内ならラジオボタン、4つ以上はプルダウン

小さなラジオボタンが列挙されていると、入力を続ける気持ちがダウンする可能性大。基本は、選択項目が4つ以上ならプルダウンにして多くの小さなラジオボタンを並べるのは避ける。ラジオボタン列挙するなら、大きさや配置の工夫をすべき。

チェックポイント
・選択項目3つ以内ならラジオ、4つ以上はプルダウンが目安

選択肢プルダウンの事例
SUUMO

選択肢プルダウン事例SUUMO

出典元 https://suumo.jp/

選択肢ラジオボタンの事例
homes

選択肢ラジオボタン事例homes

出典元 https://www.homes.co.jp/

ラジオボタンの工夫事例
RECRUIT AGENT

ラジオボタンの工夫事例RECRUIT AGENT

出典元 https://www.r-agent.com/

1-2 エラーを減らす

(6) 必須項目をわかりやすく

必須項目の入力忘れはエラーの源。必須項目がどれであるのか視認性を高めさらに、まとめて配置した方が入力忘れを減らせる。

チェックポイント
・必須項目は『※』ではなく『必須』や『任意』と表記する
・必須項目は出来るだけまとめて配置する

必須項目を離して配置していたがために離脱を引き起こしてしまっていた事例の分析

参考サイト:必須と認識しずらく離脱分析

https://www.gyro-n.com/column/efo-form-analytics-01/

必須項目をわかりやすく色付けた事例 
ライフネット生命保険
入力する毎に背景の薄い赤色が消えていくのでどこに入力しなければいけないかわかりやすく、入力がゲームのようにも感じる。

必須項目わかりやすい事例 入力前
必須項目わかりやすい事例 入力後

出典元 https://frm.lifenet-seimei.co.jp/catalog/

(7) 入力形式を細かく指定しない

半角・全角の変換を細かく指定しているとエラーの原因になってしまうため指定しない。

チェックポイント
・半角・全角どちらでも入力できるようにする

(8) 記入例の提示

プレースホルダーは入力し始めた途端に消えてしまうため、項目名の代わりにプレースホルダーを使うのはやめよう。また、入力項目の注記を見ながら入力すれば、入力しずらさも減るしエラーも出にくい。注記は項目の近くの見えるところに表示しよう。

チェックポイント
・プレースホルダーを項目名代わりに設定しない
・入力する項目の注記(例:パスワードは半角6文字以上 etc)は、入力中見える位置に表示する

下記の事例は似たような入力フォームだが、入力と同時に入力中項目名が消えない例と消えてしまう例。なるべく入力しやすくしエラーが起こりにくいように工夫しよう。

項目名消えないまま事例
payoneer
入力前

入力中も項目名消えない事例 入力前 payoneer

項目名消えないまま事例
payoneer
入力中

入力中も項目名消えない事例 入力後 payoneer

項目名消える事例
zara
入力前

入力中も項目名消える事例 入力前 ZARA

項目名消える事例
zara
入力中

入力中も項目名消える事例 入力後 ZARA

出典元 https://www.payoneer.com/ja/
出典元 https://www.zara.com/jp/

(9) 入力毎にエラーチェック

全て入力し最後に送信ボタンを押した後にエラーが出ると、そこで面倒になり離脱してしまう。エラーなら、入力項目毎にエラーメッセージを表示させて知らせたい。少し知識が必要だが、入力の都度エラーチェックしてくれるバリデーション機能があると離脱率低下にかなり効果がある。下記に参考サイトを記載する。無料で自分で設定するには多少労力がかかるがチャレンジする価値アリ。

チェックポイント
・エラー表示は一番上方や下方にまとめてではなく、入力項目毎に近くで表示させる
・入力が終わっていないのに表示されるリアルタイムのアラートは使わない

参考サイト:

超簡単!フォームをリアルタイムで入力チェックする:jQuery-Validation-Engine
http://www.webdesign-fan.com/jquery-validation-engine
デモ:jQuery-Validation-Engineで簡単にフォーム内容をチェック!
https://studio-key.com/1139.html#

出典元:
Forms Need Validation
https://uxdesign.cc/forms-need-validation-2ecbccbacea1

(10) 途中離脱を防ぐ

ユーザーが入力が完了していないのに途中で入力フォームから離脱しようとする時、離脱防止のためのポップアップを開いて本当に離脱して良いのか確認しよう。意図せず離脱してしまい今までの入力が全て消えてしまうともう1回始めから入力するのはかなりの負担になってしまう。

チェックポイント
・入力途中で離脱防止のためのポップアップを表示する

途中離脱防止例 Playway

顔写真付きで CEOからのなぜ途中でやめてしまったのか教えてほしいとのメッセージを表示して途中離脱防止を図っている。

途中離脱防止例

出典元:
playway.com
https://planyway.com/goodbye

1-3 入力しやすくエスコート

(11) 先頭項目オートフォーカス

入力フォームを開いたら始めの項目にフォーカスされているとすぐに入力を始めることができる。地味だけど少しでも入力障壁を減らすための設定。

チェックポイント
・オートフォーカスを設定する

設定方法は簡単。フォーカスを当てたいinputタグにautofocusを追加するだけ。

<input type=”text” name=”name” autocomplete=”name” autofocus>

(12) 縦方向の配置で入力しやすく

入力欄でもチェックボックスやラジオボタンでも、目線を左右に振らずに、上下の動きだけでわかるようにしておくと入力が簡単に思える。
特に項目数が少ないモバイルの場合は、1カラムにし項目名を入力エリアの上に配置すると左横に配置した時より完了率が高くなる傾向もあるようだ。また、項目名の配置にも気を使おう。項目名がどの入力欄に対応しているかわからないと入力しにくいと感じるし、エラーも起こりやすくなってしまう。項目名と入力欄の余白を狭くする事で対応していると認識しやすくできる。入力欄も項目名も縦方向の配置と余白を意識し入力障壁を減らす工夫をしよう。

チェックポイント
・入力欄は縦一列に配置する(チェックボックス・ラジオボタンも縦に配置)
・項目名は入力欄の横ではなく上に配置する
・項目名と入力欄の間の余白を狭くしどの項目名がどの入力欄のものか一目でわかるようにする

1カラムになっている事例
リブセンス

1カラム縦に配置した事例

出典元 https://www.livesense.co.jp/contact/

1カラムでない事例
リクルートスタッフィング

1カラムではない事例 リクルートスタッフィング

出典元 https://www.r-staffing.co.jp/sol/op31/sd05/

レスポンシブ事例 PC時の入力フォーム
リブセンス

前のリブセンス『1カラムになっている事例』はスマホ時の表示だが、幅を広げてPC時の表示にすると、少しレイアウトが変わり2カラムになっている。デバイスによりレイアウトを変更させている。

レスポンシブデザイン例PC時の入力フォーム リブセンス

出典元 https://www.livesense.co.jp/contact/

出典元
Design Better Forms (Top align labels)
https://uxdesign.cc/design-better-forms-96fadca0f49c

Mobile Form Usability(Label Above the Field or Floating Label)
https://uxplanet.org/mobile-form-usability-2279f672917d

レスポンシブデザインを採用するとき参考にしたいフォーム実例まとめ
http://f-tra.com/ja/blog/smartphone/5485

(13) 関連情報は大分類でくくる

入力項目がどうしても多くなってしまう時は、認識しやすいように関連項目を近くに配置し大分類を作ろう。同じ入力項目数でも、大分類があると認識しやすくなり入力しやすくなる。

チェックポイント
・項目数が多いときは大分類でくくる

(14) ボタンラベルやボタン周りのマイクロコピーで次の行動を促す

ボタンラベルやボタン周りのコピーの訴求や言い回しの違いによって成約率に大きな差が出る。

ボタンラベルやボタン周りには思わずクリックしたくなるマイクロコピーを載せよう。「登録する」「フォームへ移動する」「ダウンロード」といった手続き内容だけではなく、行動した先にあるベネフィットを伝える必要がある。

チェックポイント
・ボタンラベルやボタン周辺(CTA)にはマイクロコピー(手続き内容 + 行動した先にあるベネフィット)を載せる

オレコン のメルマガ購読ボタン事例
従来のコピーから、ベネフィットを後押しするマイクロコピーに差し替えたところ、75.69%ものコンバージョンがアップ。ボタンの近くは影響がとても大きい。

オリジナルパターン

入力の注意点を記載

コンバージョン率11.84%

ボタン周りマイクロコピーでCVアップ ビフォー

パターンB

メルマガ登録したベネフィットを記載

コンバージョン率20.81%

ボタン周りマイクロコピーでCVアップ アフター

(15) スマホ対応:キーボードの設定

スマートフォンでの入力をしやすくするためキーボードの設定を忘れずにしよう。
設定方法は簡単。inputタグのtype属性を設定すれば対応するキーボードが表示される。
詳細は以下のサイトを参照のこと。

チェックポイント
・スマホでの入力支援としてキーボード設定する

参照サイト

スマホで入力フォームをタップしたときにキーボードの表示を変えたい!
http://we-girls.hatenablog.com/entry/2015/10/20/%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%A7%E5%85%A5%E5%8A%9B%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%82%92%E3%82%BF%E3%83%83%E3%83%97%E3%81%97%E3%81%9F%E3%81%A8%E3%81%8D%E3%81%AB%E3%82%AD%E3%83%BC%E3%83%9C

【スマホEFO】ソフトウェアキーボードのユーザビリティ向上テクニック
http://f-tra.com/ja/blog/smartphone/5523

(16) iOS向け設定:オートコレクト・大文字自動変換オフ

iOSだと普段は便利な自動で修正してくれる機能が入力フォームでは地味に入力ミスの要因になってしまう。そこで離脱を防ぐためにオートコレクト・大文字自動変換をオフにしておこう。
設定方法は簡単。inputタグに「autocorrect=”off”」「autocapitalize=”off”」を設定する。詳細は参考サイトを参照のこと。

チェックポイント
・iOS対応としてオートコレクト・大文字自動変換をオフに設定する

参考サイト
【スマホEFO】ソフトウェアキーボードのユーザビリティ向上テクニック
http://f-tra.com/ja/blog/smartphone/5523

2 要check! 驚異のCV率!チャット型入力フォーム

チャットツールがコミュニケーションツールとしてスタンダードになってきている背景からか、対話しながらフォームを埋めていくチャット型入力フォームCVR改善率がとても良いようだ。ユーザー側から考えると、対話して一つ一つ確認しながら入力できたら、精神的に手間と感じることが激減するのでは?と感じる。

チェックポイント
・チャット式入力フォームを一度検討してみるのもいいかもしれない

1ページ1項目の事例
RECRUIT AGENT

1ページ1項目の事例 RECRUIT AGENT

出典元 https://www.r-agent.com/

チャット形式で詳細を入力していく事例
apamanshop

チャット形式で詳細を入力していく事例 apamanchop

出典元 http://www.apamanshop.com/sp/

出典元
どちらが正解?複数ステップのフォームVS単一ページのフォーム

http://f-tra.com/ja/blog/column/5696#case01

最大7倍のコンバージョン率改善実績があるというLAMPCHATサイト

https://lampchat.io/

25問ものアンケートに若年層がフル回答する画期的アンケートの開発秘話!

https://www.jgrip.co.jp/column/promotion/%E3%80%90%E7%89%…

通常のフォームと『BOTCHAN EFO』による接客型フォームでは、CVR(入力/応募完了率)が平均30%も異なります。

https://recruit.wevnal.co.jp/event/821/

フォーム離脱”に悩む担当者必見!導入したらCVR41.7を実現した施策って?

https://ferret-plus.com/9909

3 無料フォーム使うならこれ

自分で入力フォーム作成するのが無理な場合は、無料のカスタマイズできるフォームを利用しよう。

メールフォームプロサイト スクショ

通常の入力フォーム:メールフォームプロ
https://www.synck.com/contents/download/cgi-perl/mailformpro.html

ECCUBEサイトスクショ

ショッピングカート:ECCUBE
https://www.ec-cube.net/

4 EFOチェックリスト ダウンロードする

クリックすると『入力フォーム最適化(EFO)チェックリスト by オレコン.pdf』というファイルが開きます

無料マイクロコピーウィークリーレポート

・読者数785名、国内唯一のマイクロコピー専門メルマガ
・週に1回、世界中から集めたウェブサイト改善案を配信

・ECサイト・UI/UX関係者・セールスライターの有益な情報源

メニュー