2014年3月18日 10:20

今回は森野が担当です。

入力フォームを改善して入力完了率を上げる！ エントリーフォーム最適化15カ条 | Web担当者Forum
の【第12条】にあるように入力の手間を省いた方がユーザーの負担を減らすことができますよね。では、郵便番号以外ではどうなのかな？と思っていたところにこのフォームを発見。

ご利用規約とお客様情報の登録｜カルピス（株）オンラインショップ
姓名を入力するとカナまで自動で入力されてしまう優れものです。

こりゃすごい！というわけでグランフェアズの藤田さんに聞いてみました。

実は昔からあった

2008年くらいに一回話題になったのを覚えてますが、当時は prototype.js （ライブラリ）依存だったので使用することがなかったのですが、いつの間にか jQuery版が作られていたようですね。

という回答が。
2008年って・・・。自分の知識の少なさに凹みます・・・。

時代が変わればニーズも変わるので、気を取り直してこのフォームを実装する方法と事前にチェックしておく項目を藤田さんに書いてもらいました。

では実装方法

まずは「autoKana.js」の設置

GitHubの「autoKana.js」のページから、「.zip」をダウンロードしてきます。
画面の右下にある【Download ZIP】がそれです。

ダウンロードされたファイルを解凍し、そのうちの「jquery.autoKana.js」ファイルをサイト内に設置します。

入力欄を作って、JavaScriptを読み込む

次に、名前（漢字）用と、ふりがな（ひらがなもしくはカタカナ）用の入力欄を作成します（コードの3-4行目）。最後に、JavaScriptのコードを挿入します（コードの7-13行目）。

これで実装は完了です！

ポイント

大事なのは、入力欄の「id=”user-name”」と、JavaScriptで記述する「#user-name」が同一の文字列になっていること。

次に、JavaScriptの読み込み順は、jQueryが先、autoKana.jsが2番目、最後にJavaScriptのコードが指定されていること。の2つです。
ちなみに、Javascriptコードの最後、{katakana:true}　は、ふりがなをカタカナにしたい場合に「true」、ひらながにしたい場合は「false」と指定すればOK、簡単ですね！

設置したからには全体の完了率、フォームから確認画面への遷移率、カナ欄のクリック数、あたりをチェック

私にはよくわかりませんがこれで姓名を入力するとカナまで自動で入力されるフォームの完成です。
めでたし、めでたし・・・ではなくて、やったからには効果を測っておかないけませんよね。

フォームの改善なので全体の完了率、フォームから確認画面への遷移率は前後で比較したいところです。
今回はそれに加えてカナのセイ・メイのクリック数を測っておきましょう。上手くいっていればここのクリック数が減っているはずですよね。設定はセイ・メイの欄にonfocusのイベントを設定しておけば良いでしょう。詳しくはこちらの記事をご覧ください。

リンクのクリックやダウンロードを「イベント」として計測する！　イベントトラッキングの使い方と注意点［第65回］ | Web担当者Forum

新規とリピートのセグメント、完了率・遷移率・クリック数を並べてみる

姓名を入力するとカナまで自動で入力される方法はあまりメジャーではないと思いますので、初めて見た人は知らずにクリックしてしまうことが多いかもしれません。そうなると新規とリピートで数値がどう変わるかを見てみたいですよね。カルピスさんのフォームは会員登録のためリピート率自体が少なくなりそうですのでここにも注意です(フォーム全般でリピート率は少ないかも？)。

また、クリック数が減ったとしても完了率などが減っては意味がありませんし、クリック数が増えたとしても完了率が増えれば効果があったということかも知れません。フォームの改善に限らずどこかどうなった時に成功とするのかを決めておいた方がいいですよね。

※ちょっと宣伝
グラン堂ではこのように改善案作り～実装～効果測定までを一連の流れ行うことができますので、フォーム改善やサイトの改善でお悩みの方はお問い合わせからお問い合わせください。