≡WebデザインWebライティングWeb解析Webマーケティングまとめ系お問い合わせホームWebデザイン超簡単!たった2行だけで郵便番号から住所自動表示する方法:ajaxzip3WebデザインWebライティングWeb解析Webマーケティングまとめ系お問い合わせ2016.01.06超簡単!たった2行だけで郵便番号から住所自動表示する方法:ajaxzip3ツイートシェアする共有するはてブPocketあなたのウェブサイトの郵便番号入力フォームは、入力しても住所が自動入力されず、お客さまにとって使いづらいフォームになってしまっていませんか?そこで、郵便番号を入力したら住所が自動表示されるギミックを採用することが重要です!フォームのユーザビリティは入力完了率やコンバージョン率に大きく影響するからです。事実、フォームの平均離脱率は60%を超えていると言われ、その理由の多くが「入力が多い・面倒・分かりづらい」です。多くの集客に力を入れることも重要ですが、入力フォームを使いやすくし、購買プロセスまで至ったお客様に対して確実にコンバージョンしてもらうことのほうが費用対効果も圧倒的に高いですよね。そこで今回は、その離脱の原因の一つである「入力が面倒」を未然に防ぐ「たった2行で郵便番号から住所を自動入力する方法」をご紹介します!そもそも郵便番号から住所を自動表示とは?郵便番号から住所を自動入力とは、郵便番号を入力したら住所が自動的に入力されるギミックのことです。下記のリンクが実装サンプルページです。技術的にはjavascriptやjQueryを用いるのですが、自分で一から実装するのはとても大変です。そこで「ajaxzip3」や「jquery.jpostal.js」といったプラグインを用いることで誰でも簡単にこれらのギミックを実装することができます。郵便番号から住所自動入力が重要なのか?それは、フォームのユーザビリティは入力完了率やコンバージョン率に大きく影響するからです。さきほどもご紹介したように、フォームの入力完了率は約40%といわれています(Webサイトの種類によって変動します)。10,000人のお客さまが商品(1万円)を購入しようと入力フォームにいるとし、全員が購入完了(=入力完了率100%)した場合、売上は1億円です。購入完了が4,000人(=入力完了率40%)の場合、売上は4000万円でその差は6000万円です。フォームの使い勝手の悪さが原因でこれだけの損をしていたらもったいないですよね。入力フォーム最適化の一つである「郵便番号から住所自動表示」が重要となるのです。郵便番号から住所自動入力を実装しようそれでは早速、「ajaxzip3」を用いて郵便番号から住所自動入力を実装しましょう!この他にもいくつかプラグインが存在するのですが、ajaxzip3が個人的に一番使いやすいと感じたのでご紹介します。JSファイルを<head>内で読み込む初めに、下記コードを内に記述するだけでjavascriptファイルをわざわざダウンロードすることなく実装することができます。charset="UTF-8"></script>もしくは、こちらからajaxzip3.jsをダウンロードして読み込むこともできます。その際は、下記のようにファイルパスを適宜変更して読み込んでください。郵便番号を一つの入力フィールド(7桁)で入力してもらい、住所も一つの入力フィールドで表示する場合のコードです。size="60">郵便番号を一つの入力フィールド(7桁)で入力してもらい、住所は都道府県とそれ以降の二つの入力フィールドで表示する場合のコードです。郵便番号を二つの入力フィールド(3桁+4桁)で入力してもらい、住所は一つの入力フィールドで表示する場合のコードです。住所は都道府県とそれ以降の二つの入力フィールドで表示する場合のコードです。size="40">まとめいかがでしたか?郵便番号から住所自動入力は本当に便利ですし、郵便番号を間違えると住所も間違って表示されるので入力ミスにも気づきやすいと思います。いまや自動入力されないと「え?自動入力されないの?」と思ってしまうほどフォームのユーザビリティに対する意識が高まっているように感じます。フォームのユーザビリティは入力完了率やコンバージョン率に大きく影響するので、コンバージョン率に悩んだ時は、コンテンツやデザインを見直すことはもちろん重要ですが、意外と盲点である入力フォーム最適化をぜひ行いましょう。これであなたのウェブサイトの入力フォームもまた一段ユーザビリティが向上しましたね!この記事をシェアするツイートシェアする共有するはてブPocketWebデザインファン運営者についてTakahiro.YフリーランスでWeb制作・Web解析・WebマーケティングをしているTakahiroと申します。大手ITベンチャーにてWebデザイナーとして勤務。