グラン堂ブログ~お互いの仕事で分からないことを回答するブログ~

名前とフリガナを一発入力!ちょっとした工夫でフォームを改善する方法

2014年3月18日 10:20

今回は森野が担当です。

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

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

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

実は昔からあった

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

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

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

では実装方法

まずは「autoKana.js」の設置

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

GitHubのautoKana.jsページ

ダウンロードされたファイルを解凍し、そのうちの「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

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

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

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

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


2014年3月18日 | admin_grandou|コメント(0)

Webサイトのローンチ(公開)みたいに、アナリストにもプロジェクトの区切りはあるの?

2014年3月3日 18:38

visual-kaiseki01

今回も大和からの質問です。
「Webサイトのローンチ(公開)みたいに、アナリストにもプロジェクトの区切りはあるの? ない場合、モチベーションを保ちにくくない?」
僕らは、スコープが決まっていて、期限も決まっています。だから、そこへ向けて粛々と作業を進めます。だから、集中して仕事をすることができます。さらに、終わったら打上して、区切りというか、リフレッシュして、次の仕事に向かいます。
運営堂さんの場合、そういったことがないように見受けますが、飽きたりしませんかww

基本的にはローンチ=キックオフ

筆者は前職がWeb制作会社内でのアクセス解析(タグの設置とレポート作成)担当でした。質問されているような、「Webサイト公開後に区切りを持ってくる」文化が普通で、打ち上げに参加したこともあります。
しかし、それはアナリストとしては“キックオフ(立ち上げ時の最初の会合)飲み会”の代わりで、寧ろ今からが本番ですぜ、という話です。ある意味区切りになります。

意外とリズミカル

あとは、レポート作成業務の多くが定期的で、毎日・毎週・毎月・毎四半期・毎年…といった感じで巡ってくるので、ある意味リズミカルと言えるかもしれません。
業務が一定時期に固まることが多く、その時期は負荷も高まりますが…。

レポート作成やコンサルティング案件にしても、納品物(主にドキュメント)はあるのでそれを納期までに納めるのが区切りになります。
レポート作成の波が収まったらタグ設置やサイト改善の案件に集中する、といったメリハリもあったりします。

その他、業務や実験も作ればいくらでもありますし、解析の時も都度新しい発見もあったりするので、飽きている暇はそんなにありません。
しかし、何もサイト改善がされず、レポートを出しているだけ…となると数値的な変化が全くなく、思わず遠い目をしてしまうこともしばしばではありますが…。

「作って終わり」の終わり

あとは、個人的には社内Web担当をしていた過去もあり、「作って終わり」という感覚が少ないのもあると思います。「Webサイトは育てないと意味がない」と思っていますし、業務もキリを付けて次へ、というのが少ないですから。
逆に、これまでのWeb制作業界の感覚として普通だった「作って終わり」に対して違和感を持っているのが本音のところ。

ただ、ここ1~2年ぐらい、制作業界でも「作って終わり」が通用しなくなってきたと考える方が増えてきていると感じます。事業や売上への貢献がクライアントからシビアに求められるようになってきていますし、長期に渡って一緒に取り組んでほしいというクライアントの声もよく伺います。
そのため、今後は「作って終わり」は求められなくなっていくのではないか?と感じています。

メリハリ、大事にしてください

とは言え、Webサイトの構築プロジェクトの場合、納期前は非常に忙しくなることが多く、サイトの公開後に区切りやリフレッシュはきちんとした方が良いだろうなぁとは思います。

↓こんな提言もありますし、心技体のリフレッシュやブラッシュアップを「区切り」の良いタイミングで図っていただければ!と思います。

◎nanapi TechBlog
ネット系企業に『リリース休暇』をオススメしたい!

(中川)


2014年3月3日 | admin_grandou|コメント(0)

サーバーサイド、フロントエンド、マークアップってなに?

2014年2月17日 10:27

visual-seisaku01

サーバーサイド、フロントエンド、マークアップって聞くとラグビー用語?と思う森野です。
今回の質問は制作の人と話しているとよく聞く用語だけど、さっぱり分からないものをピックアップしてみました。

サーバサイドとは

サーバ側でプログラムを実行したりデータ管理を行うことです。
サーバの中で動くわけですから、Webブラウザ上で操作することは出来ません。

たとえばメールを送信したいとき、私達は当然のようにメールソフトの「送信」ボタンを押します。
「送信」ボタンが押されてから、自分が書いたメールがどこでどんな処理がされて、どうやって相手に届くのかを意識することって、そうそうありませんよね。
そんな地味だけれど、Web操作の根幹となる大事な仕事をしてくれているのがサーバサイドのプログラムです。

フロントエンドとは

読んで字のごとく、フロント(前)エンド(端)ということで、ユーザに一番近い所の仕組みです。
簡単にいうとユーザが操作するシステムや環境を指しており、皆さんが今まさに見てマウスで操作しているその画面、それこそがフロントエンドです。

このフロントエンドがユーザの満足度に直結します。
デザインはもちろん、使いやすさ・わかりやすさ・スピードなどなど、フロントエンドの担う責任は重いのです。

htmlやcss、jQueryなどを扱う人を「フロントエンド・エンジニア」と呼ぶこともあります。
『デスクトップ・ファースト』から『モバイル・ファースト』『コンテンツ・ファースト』の時代になり、デザイン重視のサイトではなく、ユーザが求めている情報をより的確に提供でき、使い勝手の良い操作性を考えた設計・デザイン・構築が必要になります。
そういった意味で、「デザインだけできればOK」は通用しなくなり、フロントエンドを理解した上でそれぞれの作業を進める能力が必要になってきています。

マークアップとは

マークアップとは、htmlやxmlといったマークアップ言語をタグを使って構文化することです。
大見出し、中見出し、リスト、段落などを定義し、より理解しやすく読みやすい文書にするために行われます。

あくまでも主役はコンテンツですから、ユーザにそれが正しく伝わることが最も重要です。
そのために、見栄えを整えることも大切な工程です。

整然とした構造の文章は読みやすく頭に入りやすいもの。
誰が見ても(それこそロボットが見ても)文書構造が理解できるように成形する必要があるのです。
タグの意味を理解し正しく使うことが大切です。

(鬼頭)


2014年2月17日 | admin_grandou|コメント(0)

5 / 7« First...34567

Tag Cloud

お知らせ