2016.01.06
超簡単！たった2行だけで郵便番号から住所自動表示する方法：ajaxzip3
あなたのウェブサイトの郵便番号入力フォームは、入力しても住所が自動入力されず、お客さまにとって使いづらいフォームになってしまっていませんか？
そこで、郵便番号を入力したら住所が自動表示されるギミックを採用することが重要です！フォームのユーザビリティは入力完了率やコンバージョン率に大きく影響するからです。事実、フォームの平均離脱率は60%を超えていると言われ、その理由の多くが「入力が多い・面倒・分かりづらい」です。
より多くの集客に力を入れることも重要ですが、入力フォームを使いやすくし、購買プロセスまで至ったお客様に対して確実にコンバージョンしてもらうことのほうが費用対効果も圧倒的に高いですよね。
そこで今回は、その離脱の原因の一つである「入力が面倒」を未然に防ぐ「たった2行で郵便番号から住所を自動入力する方法」をご紹介します！
そもそも郵便番号から住所を自動表示とは？
郵便番号から住所を自動入力とは、郵便番号を入力したら住所が自動的に入力されるギミックのことです。下記のリンクが実装サンプルページです。
技術的にはjavascriptやjQueryを用いるのですが、自分で一から実装するのはとても大変です。そこで「ajaxzip3」や「jquery.jpostal.js」といったプラグインを用いることで誰でも簡単にこれらのギミックを実装することができます。
なぜ郵便番号から住所自動入力が重要なのか？
それは、フォームのユーザビリティは入力完了率やコンバージョン率に大きく影響するからです。さきほどもご紹介したように、フォームの入力完了率は約40%といわれています(Webサイトの種類によって変動します)。例えば、10,000人のお客さまが商品(1万円)を購入しようと入力フォームにいるとし、全員が購入完了(=入力完了率100%)した場合、売上は1億円です。
しかし、購入完了が4,000人(=入力完了率40%)の場合、売上は4000万円でその差は6000万円です。フォームの使い勝手の悪さが原因でこれだけの損をしていたらもったいないですよね。ですから入力フォーム最適化の一つである「郵便番号から住所自動表示」が重要となるのです。
郵便番号から住所自動入力を実装しよう
それでは早速、「ajaxzip3」を用いて郵便番号から住所自動入力を実装しましょう！この他にもいくつかプラグインが存在するのですが、ajaxzip3が個人的に一番使いやすいと感じたのでご紹介します。主な特徴は下記です。
- たった2行で実装可能
- とても軽量で読み込みが早い
- jQueryやprototype.jsなどが不要
- 常に最新版の郵便番号データを利用可能
- 郵便番号や住所を分けるパターンにも対応
STEP1 : JSファイルを<head>内で読み込む
初めに、下記コードを
内に記述するだけでjavascriptファイルをわざわざダウンロードすることなく実装することができます。|
1 |
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script> |
もしくは、こちらからajaxzip3.jsをダウンロードして読み込むこともできます。その際は、下記のようにファイルパスを適宜変更して読み込んでください。
|
1 |
<script src="js/ajaxzip3.js" charset="UTF-8"></script> |
STEP2 : フォーム内に入力フィールドを設置する
郵便番号を一つの入力フィールドにする場合
郵便番号を一つの入力フィールド(7桁)で入力してもらい、住所も一つの入力フィールドで表示する場合のコードです。
|
1 2 3 4 |
<!-- ▼郵便番号入力フィールド(7桁) --> <input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');"> <!-- ▼住所入力フィールド(都道府県+以降の住所) --> <input type="text" name="addr11" size="60"> |
郵便番号を一つの入力フィールド(7桁)で入力してもらい、住所は都道府県とそれ以降の二つの入力フィールドで表示する場合のコードです。
|
1 2 3 4 5 6 |
<!-- ▼郵便番号入力フィールド(7桁) --> <input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');"> <!-- ▼住所入力フィールド(都道府県) --> <input type="text" name="pref01" size="20"> <!-- ▼住所入力フィールド(都道府県以降の住所) --> <input type="text" name="addr01" size="60"> |
郵便番号を二つの入力フィールドにする場合
郵便番号を二つの入力フィールド(3桁+4桁)で入力してもらい、住所は一つの入力フィールドで表示する場合のコードです。
|
1 2 3 4 |
<!-- ▼郵便番号入力フィールド(3桁+4桁) --> <input type="text" name="zip21" size="4" maxlength="3"> － <input type="text" name="zip22" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip21','zip22','addr21','addr21');"> <!-- ▼住所入力フィールド(都道府県+以降の住所) --> <input type="text" name="addr21" size="40"> |
郵便番号を二つの入力フィールド(3桁+4桁)で入力してもらい、
住所は都道府県とそれ以降の二つの入力フィールドで表示する場合のコードです。
|
1 2 3 4 5 6 |
<!-- ▼郵便番号入力フィールド(3桁+4桁) --> <input type="text" name="zip31" size="4" maxlength="3"> － <input type="text" name="zip32" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip31','zip32','pref31','addr31','addr31');"> <!-- ▼住所入力フィールド(都道府県) --> <input type="text" name="pref31" size="20"> <!-- ▼住所入力フィールド(都道府県以降の住所) --> <input type="text" name="addr31" size="40"> |
まとめ
いかがでしたか？郵便番号から住所自動入力は本当に便利ですし、郵便番号を間違えると住所も間違って表示されるので入力ミスにも気づきやすいと思います。いまや自動入力されないと「え？自動入力されないの？」と思ってしまうほどフォームのユーザビリティに対する意識が高まっているように感じます。
フォームのユーザビリティは入力完了率やコンバージョン率に大きく影響するので、コンバージョン率に悩んだ時は、コンテンツやデザインを見直すことはもちろん重要ですが、意外と盲点である入力フォーム最適化をぜひ行いましょう。これであなたのウェブサイトの入力フォームもまた一段ユーザビリティが向上しましたね！