ユーザーが入力する手間は減らせ/15か条の12登録フォームでユーザーが入力する手間を減らすために、わかりきった情報の「フリガナ」「住所」は自動入力にしよう。noteで書くユーザーの入力作業の負担を減らして、必要最小限の作業で入力を完了してもらうために、フォーム側で「フリガナ」「住所」などの入力作業を代行する方法について解説します。エントリーフォーム最適化15か条の【第12条】「入力の手間を減らすべし」をご紹介します。リンクをクリックすると第12条のまとめに飛びます。自動入力でユーザーが入力する手間を減らす今回「惜しい!」エントリーフォームとして紹介するのは、株式会社スノーピーク様の「オンラインストアの新規会員登録」フォームです。良いポイント入力完了までのステップ図と項目ごとのエラーメッセージまず良いポイントとして、ページ上部に入力完了までの流れを示すステップ図があり、規約同意後の入力ページ上部に、仮登録についての説明がなされ、ユーザーが迷いにくいフォームになっている点は○です(詳しくは第2条)。入力完了後に[内容の確認]ボタンを押すと入力に不備がある項目には、上部の全体にエラーメッセージと項目ごとのエラーメッセージが表示され、入力項目の枠線が赤線になることで入力すべき項目が強調されている点も○です(詳しくは第7条)。それでは、改善すべきポイントを勝手に提案いたします。改善ポイント「フリガナ」「住所」は自動入力できる機能を導入するこれまでの回では、入力を行おうとするユーザーの気持ちがくじけてしまわないように、心理的な負担を減らす工夫を中心に述べてきました。今回は、もっとストレートに、ユーザーの入力作業自体を減らすことで負担を減らしてしまおうという内容です。ユーザーにとって、より少ない手間でフォーム送信完了できることが望ましいでしょう。ユーザーの作業を減らす策としては、まず「入力項目を減らす」がありますが、過去に取得し始めた情報を、今後取得しないと決断するには勇気や根拠が必要で、実行しにくいことが予想されます。そこで項目は減らせないとしても、入力を代行することで入力作業の一部を減らそうというわけです。フォーム側で入力を代行できる入力項目の代表例として「フリガナ」「住所」の2つがあります。それぞれについて考えてみましょう。「フリガナ」を自動で入力する「姓」「名」に対する、フリガナの「セイ」「メイ」入力欄があるとして、ユーザーが「姓」欄に入力したら、該当するカタカナ(またはひらがな)を、フォーム側の処理で自動、かつリアルタイムに入力することでユーザーの手間を減らせます。実現するには、たとえばライブラリの利用があります。代表的なものとして「jquery.autoKana.js」があります。郵便番号に該当する「住所を自動入力」する今回のフォームの場合、郵便番号を入力した後、「住所表示」ボタンをクリックすることで、入力された郵便番号に該当する住所が自動で入力されます。これも自動入力ですが、さらにもう一歩自動入力を進めるならば、郵便番号を入力したら、「住所表示」のボタンをクリックしなくても自動的に住所を入力する処理を実装できます。今回の場合、すでにページ再描画なしで住所を呼び出せるようになっているので、住所を自動入力するきっかけを3桁-4桁の郵便番号がそろった時点で住所を呼びだすように変更することで実現できるでしょう。フリガナと同様に、ライブラリの利用でも実現できます。代表的なものとして、「jquery.jpostal.js」「AjaxZip2」「yubinbango」「ZipAddr」などがあります。※今回ご紹介したライブラリの使用法、動作については、責任を負いません。それぞれのご判断でご利用ください。前回、ちらりと触れましたが、ブラウザのオートコンプリート機能を有効にしておくことも考えられます。現時点ではブラウザは限られますが、「フリガナ」や「住所」に限らず、もっと幅広い入力項目について自動で入力できる可能性を秘めています。登録済みのユーザー情報(発送先など)を呼び出すことなども、広義の自動入力といえますね。自動入力は余計なお世話になってしまうこともあるので注意しよう実装できれば便利な自動入力ですが、注意点もあります。便利なのはあくまで、自動入力された値が正しい場合のみに限られるという点です。ふさわしくない内容が入力されてしまった場合、特にそれが必須入力の項目であれば、ユーザーは自動で入力された内容を手動で消すという手間が必要になり、入力作業がかえって増えてしまうことになります。フリガナの自動入力では、ユーザーが「姓」「名」でキータイプした情報を元に入力しています。変換で漢字が出にくい氏名の場合、かな読みとは違う言葉で入力することがあり、フリガナにはふさわしくない文字列が入るケースが起こってしまう可能性があります。自動入力は便利な一方、注意すべき点があることも理解しておきましょう。今回は、自動入力によってユーザーの入力の手間を減らす方法について説明しました。フォーム側で自前で機能を実装するには一定のハードルがありますが、検討に値する機能だと思います。【第12条】入力の手間を減らすべし「フリガナ」「住所」などは自動入力にすべしユーザーの入力の手間を減らすため、わかりきった情報はフォーム側で自動で入力する機能の導入を検討しよう。自動入力は、入力される内容とユーザーが入力したかった情報が違ってしまうと、かえって手間を増やし逆効果となるので注意しよう。エフ・コードでは開発チームに所属、ASP型EFOツール「f-traEFO」のいわゆる「なかのひと」。Web制作とプログラムがともにわかる人材として、エントリーフォーム改善の支援に従事する。大学卒業後、Web制作会社勤務を経て、Webディレクター/コーダーとして活動。制作チーム所属を経て、株式会社エフ・コード入社、現在に至る。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。ネット広告への強い嫌悪感、テレビや新聞の倍以上に。いいね!伝説のTwitter企業アカウント“中の人”の先駆け。いいね!私は変人コレクター。12:11本文でも触れてるの承知で忠告するけど、名前の漢字→カナの自動入力は渡辺→ワタナベ、ワタベみたいに誤ったヨミを振っちゃうから絶対導入しちゃダメ。エンジニアの浅知恵で導入した機能のせいでコールセンターのお姉さんが電話でお客さんの名前を間違えて怒られるなんて悲し過ぎるだろ。簡単に実装できるけど世間一般で提供されてない機能にはそれなりに地雷の理由があるよね。12:10担当編集の四谷と申します。コメントありがとうございます。筆者の田中氏も「導入するには、検討する必要がある」といっているので、自社の状況をしっかり把握して導入するか否かを判断してもらいらいですね。届けられず電話でわざわざ尋ねるということになりました。毎月、まあまあな数です。不在もあるので、同じ人に何回も電話したりもしました。1件であっても無駄な仕事だと感じました。自動入力はいいことだとは思います。わずかな慌て者の人のために、それ以外の人が手間を強いられるよりも、自動入力になった方が便利だと思います。するためにも、自動入力した際、上記のようなトラブルを避ける方法はお持ちですか?返信コメントありがとうございます。15:50担当編集の四谷です。筆者の田中さんに聞いたところ次のような回答をいただきました。「番地以降」の入力欄を分けて必須項目にするといいと思います。・自動入力後に「番地以降」にフォーカスを当てる処理も実装する・さらには、そのフォーカス時に何かメッセージを出すも考えられます。自動入力を行い、ユーザーさんの入力の負担を減らして、さらに管理側の負担も減るようにぜひ実装していただければと思います。引き続きどうぞよろしくお願いいたします。・2019年】フリマアプリは、新品購入の意欲も上昇させる。各週の人気記事ランキング記事を見るはてなブックマークですべての人気記事を見る今日の用語CTR広告がクリックされた頻度を表す。「おもてなし」は思考停止ワード。2/24~2/28のマーケティング、インサイドセールス、データ分析、EC、SEOなど他社セミナー情報52件Web担編集部がゼロから学ぶ、Tableau「BI講座」。Patterns』を3名様にプレゼント!【受付終了】企業がDXに向かう取り組み方を考える『デジタルファースト・ソサエティ』を3名様にプレゼント!すべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。