EFO（入力フォーム最適化）とは？郵便番号から住所を自動入力させて使いやすく！

こんにちは！開発部のいろはです。
近年「ユーザビリティ」という言葉、よく聞かれると思います。
元々の意味はuse(使う）とable（できる）から来ており「使えること」だそうです。
ユーザビリティの例として
EFO（Entry Form Optimization：エントリーフォーム最適化）というものがあります。
EFOとは入力の手間を減らし、より短時間で正確に入力完了できるように
ユーザに合わせて入力フォームを最適化する事を指します。
項目数が極端に多い場合やエラー文などが表示されると、
サイト訪問者は不安やストレスを感じてしまい完了前に放棄してしまいます。
そこで今回はこの途中離脱を最小限におさえ、
サイトでの成約率を向上させるEFOと便利なプラグインについてまとめたいと思います。

Contents

1 入力フォーム最適化の重要性
2 入力フォームをもっと便利に！

入力フォーム最適化の重要性

サイト訪問者が放棄せずにコンバージョン数を増加するためには
ユーザーにとってストレスとなっている部分を明確にする必要があります。
途中離脱をしてしまう原因として以下のようなものが挙げられます。
①画面が分かりにくく操作に迷ってしまう
②入力項目が多い、または入力しにくい
③意図しないエラーがたくさん表示されてしまう
エラー処理による再入力を繰り返すフォームでは、
訪問者のモチベーションが下がり、未完了のまま離脱する可能性が非常に高くなります。

入力フォームをもっと便利に！

エントリーフォーム最適化の例として

名前を入力するとフリガナが自動入力される
電話番号は、全角数字で入力しても半角に自動変換させる
入力項目にミスがある場合、入力枠を赤枠にして警告する

など様々ですが、これらを細かく対応するだけで驚くほどの改善効果が期待できます！
その中でも今回は「ajaxzip3」というプラグインをご紹介します。

ajaxzip3とは？

ajaxzip3とは株式会社人気組さんが無料で公開されているjavascriptライブラリです。
なんと郵便番号を入力すると自動で住所を入力してくれます！(・∀・)

実際に使ってみた

①head内にajaxzip3.jsの情報を記述します。

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

1	<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

あるいはこちらからajaxzip3をダウンロードし設置してjavascriptを記述します。
その場合は下記の内容を記入します。

<script type="text/javascript" src="js/ajaxzip3.js"></script>

1	<script type="text/javascript" src="js/ajaxzip3.js"></script>

②フォームに入力フィールドを設置します。
■郵便番号が7桁、都道府県+以降の住所の場合

<input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">
<input type="text" name="addr11" size="60">

1 2	<input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');"> <input type="text" name="addr11" size="60">

■郵便番号が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桁、都道府県+以降の住所の場合

<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">

1 2	<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桁、都道府県、以降の住所の場合

<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">