記事の詳細

お申込みフォームや、商品購入フォーム、会員登録フォームのCV改善を行うために色々施策を行ってまいりましたが、より効果の出た結果をまとめて説明したいと思います。
今回は文章で説明するだけではなくサンプルコード、サンプルフォーム、サンプルデータも用意しましたので、是非参考にフォーム改修を行ってみてください。
ダッシュで用意したんでソースくっそ汚いのはご容赦ください^^;
もしお試しいただいて不具合あればご指摘いただけると幸いです。

ページ離脱時にポップアップ(アラート)で離脱を食い止める

これはご存知の方もけっこういらっしゃるかもしれません。
ページを閉じるボタン、もしくは他ページに遷移する際にアラートポップアップ(アラート)で警告をする方法です。
ユーザーからすると「ウザっ!」と思われてしまう仕様ですが、離脱される前の最後の抑止力となる事は間違いありません。

動作サンプル http://aimers.jp/form_sample.html
※ページを開いたら閉じようとしてみてください

名前フリガナの自動入力化

名前入力の欄は併せてフリガナ入力を求めるケースがほとんどだと思いますが、ユーザーからしたら
「私の苗字は佐藤だけどフリガナ入力しなくても読めるでしょ!面倒だなぁ」と思われてしまいがち。そこで一般的なお名前であれば自動で入力できるよう改修しましょう。

以下サンプルの名前入力をお試しいただけると、分かりやすいかもですね。

Github画面

Github画面

まずは、https://github.com/harisenbon/autokanaからautoKana.jsをダウンロードしてください。後は以下のソースをベースにautoKana.jsのパスを書き換えてあげれば動作します。

郵便番号を入力するだけ!住所を自動入力化

これも上記とフリガナ自動入力と同じ要領で住所を自動入力化する施策です。
郵便番号を入力するだけで、お住まいの住所がフォーム内に出現します。
番地だけは手打ちになりますが、ユーザーからするとそれだけでも相当な労力の軽減になりますよね。

以下サンプルの郵便番号入力をお試しいただけると、分かりやすいかもですね。

Github画面

Github画面

まずは、https://github.com/ajaxzip3/ajaxzip3.github.ioからajaxzip3.jsをダウンロードしてください。ダウンロード後解凍すると色々ファイルが同封されておりますが、
ajaxzip3.jsだけを使用します。
以下のソースをベースにautoKana.jsのパスを書き換えてあげれば動作します。

任意アイコン必須アイコン

入力必須の項目があれば、逆に任意でもいい項目もあります。
そこで任意アイコンも必要なんじゃないかと思うわけです。
ユーザーのストレスを感じさせないためにも、スルーできるものはスルーさせてあげるべきですし、それをパっと見で判断できるようにアイコンにするのも大事です。
(そもそも入力フォームに関する説明書きや注意事項なんて、あまり読まれないと思うので…)

狩人呼びの鐘Web

狩人呼びの鐘Web

趣味で作ったゲームのサイトですが、これが参考になると思います。

狩人呼びの鐘Web
bloodと入力してご入場ください。
あとはこちらの動作サンプル:http://aimers.jp/form_sample.html

ステップ画像

人は物事を遂行する際、ゴール地点が知りたいと思ってしまうものです。
ゴール地点が近ければ近いほどモチベーションを維持できるもの。
これは入力フォームにも言える事で、入力項目が少なければ少ないほど良いです。
しかしそういう訳にもいかないケースが多々あると思いますので、ユーザーに長距離マラソンで言うところの「とりあえずあの電信柱まで頑張ろう精神」のような
気持ちを保ってもらうためにフェーズを分けたり、あとどれくらい入力作業をすればいいのかステップ画像を用意したり完了目安を可視化する事が大事ですね。

引っ越し侍申込フォーム

引っ越し侍申込フォーム

ここのフォームは本当に神がかってます。
皆さんにも是非参考にみてください。

入力チェックをリアルタイムに行う

入力フォームには入力チェック(バリデーション)は必要不可欠な機能ですよね。
しかしsubmitをクリックしないと稼働しないのも手間。
phpで行う場合はしょうがない気もしますが、java scriptでバリデーションを組むのであれば入力の際にリアルタイムにチェックしてあげるのがいいでしょう。
入力チェック可否をリアルタイムで可視化する事で、ユーザーに「綺麗に埋めたい」と思わせるような施策が可能になります。

Github画面

Github画面

まずは、https://github.com/janjarfalk/jquery-valid8からvalid8.jsをダウンロードしてください。
後は以下のソースをベースにvalid8.jsのパスを書き換えてあげれば動作します。

公式サイトに色んなバリデーションの方法が説明が書かれておりますが、英文で分かりにくい方は”valid8.js”で検索すると日本語エントリーもけっこう出てきますのでお調べくださいまし。
(これ書くとめっちゃ長くなるので^^;)

まとめ

以上はフロントエンドの話ですので、メールフォーム自体のシステムやらではないのであしからず。
そして今回の提案の根本にあるのは

・ユーザーに面倒だと思わせない
・出来るだけ入力に集中してもらう
・ユーザーのモチベーションを保つ

この3点です。これさえ考慮して改修を行えば、今回ご紹介した施工以外でも大幅に離脱率を抑える事が出来るでしょう。
実装も比較的簡単ですので導入しやすいですよね!
クライアントへの提案の一つとして頭の片隅に入れておくと後々使いどころがあるかもしれません。


最後に、今回紹介したものを合体させた動作サンプルのデータを用意したのでご興味ある方はこちらからダウンロードしてみてください。

それでは宜しくどうぞ

関連記事

  1. この記事へのコメントはありません。

AIMERS CREATEとは

AIMERS CREATEは、東京都と福岡県うきは市を中心にホームページ制作・Webデザインを行っております。 お見積もりや運営などご不明な点がありましたら、お気軽にお問い合わせメールフォームからお申込下さい。迅速に対応します。 お問い合わせをいただきましたら、電話かメールにてご連絡を致します。 AIMERS CREATEをもっと詳しく

おすすめ記事

登録されている記事はございません。

ページ上部へ戻る