10:20今回は森野が担当です。Web担当者Forumの【第12条】にあるように入力の手間を省いた方がユーザーの負担を減らすことができますよね。郵便番号以外ではどうなのかな?と思っていたところにこのフォームを発見。ご利用規約とお客様情報の登録|カルピス(株)オンラインショップ姓名を入力するとカナまで自動で入力されてしまう優れものです。こりゃすごい!というわけでグランフェアズの藤田さんに聞いてみました。jQuery版が作られていたようですね。2008年って・・・。自分の知識の少なさに凹みます・・・。時代が変わればニーズも変わるので、気を取り直してこのフォームを実装する方法と事前にチェックしておく項目を藤田さんに書いてもらいました。実装方法まずは「autoKana.js」の設置GitHubの「autoKana.js」のページから、「.zip」をダウンロードしてきます。ダウンロードされたファイルを解凍し、そのうちの「jquery.autoKana.js」ファイルをサイト内に設置します。入力欄を作って、JavaScriptを読み込む次に、名前(漢字)用と、ふりがな(ひらがなもしくはカタカナ)用の入力欄を作成します(コードの3-4行目)。最後に、JavaScriptのコードを挿入します(コードの7-13行目)。Gist.これで実装は完了です!ポイント大事なのは、入力欄の「id=”user-name”」と、JavaScriptで記述する「#user-name」が同一の文字列になっていること。次に、JavaScriptの読み込み順は、jQueryが先、autoKana.jsが2番目、最後にJavaScriptのコードが指定されていること。ふりがなをカタカナにしたい場合に「true」、ひらながにしたい場合は「false」と指定すればOK、簡単ですね!設置したからには全体の完了率、フォームから確認画面への遷移率、カナ欄のクリック数、あたりをチェック私にはよくわかりませんがこれで姓名を入力するとカナまで自動で入力されるフォームの完成です。めでたし、めでたし・・・ではなくて、やったからには効果を測っておかないけませんよね。フォームの改善なので全体の完了率、フォームから確認画面への遷移率は前後で比較したいところです。今回はそれに加えてカナのセイ・メイのクリック数を測っておきましょう。上手くいっていればここのクリック数が減っているはずですよね。設定はセイ・メイの欄にonfocusのイベントを設定しておけば良いでしょう。詳しくはこちらの記事をご覧ください。クリック数を並べてみる姓名を入力するとカナまで自動で入力される方法はあまりメジャーではないと思いますので、初めて見た人は知らずにクリックしてしまうことが多いかもしれません。なると新規とリピートで数値がどう変わるかを見てみたいですよね。カルピスさんのフォームは会員登録のためリピート率自体が少なくなりそうですのでここにも注意です(フォーム全般でリピート率は少ないかも?)。クリック数が減ったとしても完了率などが減っては意味がありませんし、クリック数が増えたとしても完了率が増えれば効果があったということかも知れません。フォームの改善に限らずどこかどうなった時に成功とするのかを決めておいた方がいいですよね。※ちょっと宣伝グラン堂ではこのように改善案作り~実装~効果測定までを一連の流れ行うことができますので、フォーム改善やサイトの改善でお悩みの方はお問い合わせからお問い合わせください。コメントをキャンセルメールアドレスが公開されることはありません。