Smile Blog

スマイルヴィジョンスタッフが運営する広報ブログ

EFO(入力フォーム最適化)とは?郵便番号から住所を自動入力させて使いやすく!

1369e8024cf51a6585381076715a38e6_m

こんにちは!開発部のいろはです。

近年「ユーザビリティ」という言葉、よく聞かれると思います。
元々の意味はuse(使う)とable(できる)から来ており「使えること」だそうです。

ユーザビリティの例として
EFO(Entry Form Optimization:エントリーフォーム最適化)というものがあります。

EFOとは入力の手間を減らし、より短時間で正確に入力完了できるように
ユーザに合わせて入力フォームを最適化する事を指します。

項目数が極端に多い場合やエラー文などが表示されると、
サイト訪問者は不安やストレスを感じてしまい完了前に放棄してしまいます。

そこで今回はこの途中離脱を最小限におさえ、
サイトでの成約率を向上させるEFOと便利なプラグインについてまとめたいと思います。

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

サイト訪問者が放棄せずにコンバージョン数を増加するためには
ユーザーにとってストレスとなっている部分を明確にする必要があります。

途中離脱をしてしまう原因として以下のようなものが挙げられます。

①画面が分かりにくく操作に迷ってしまう
②入力項目が多い、または入力しにくい
③意図しないエラーがたくさん表示されてしまう

エラー処理による再入力を繰り返すフォームでは、
訪問者のモチベーションが下がり、未完了のまま離脱する可能性が非常に高くなります。

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

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

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

など様々ですが、これらを細かく対応するだけで驚くほどの改善効果が期待できます!

その中でも今回は「ajaxzip3」というプラグインをご紹介します。

ajaxzip3とは?

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

実際に使ってみた

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

 

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

②フォームに入力フィールドを設置します。

■郵便番号が7桁、都道府県+以降の住所の場合

img1

■郵便番号が7桁、都道府県、以降の住所の場合

img2

■郵便番号が3桁+4桁、都道府県+以降の住所の場合

img3

■郵便番号が3桁+4桁、都道府県、以降の住所の場合

img4

ajaxzip3は手間を省けるだけではなく、
郵便番号を打ち間違えても住所が異なるものが表示されるので入力ミスにも気づきやすいかもしれませんね。

驚くほど簡単で便利なプラグインですので、是非皆さんも使ってみてはいかがでしょうか\(^o^)/

YubinBango(2017/10/26追記)

ajaxzip3の後継版です。内容はajaxzip3とほぼ同じですが、
こちらは郵便番号の情報が常に更新されるものになります。

詳細はこちらをご覧ください!

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

いろは

いろは

■部署
開発部

■スペック(Level、身長、座高、属性、資格)
水属性(95℃)

■入社年
2017年

■趣味
ごはん(つくる)、白と茶色模様の犬、観葉植物、ボウリング、8bitの音楽

■座右の銘
明けない夜はない

■ひとこと
365日休まず抹茶回収いたします

関連記事

  1. tukutte09

    【作ってみた】本型収納箱「BOOKBOX」でアクセサリーボックス

  2. キャッチコピー?

    柿の種より人の心を動かすキャッチコピーを考えてみる(その1)

  3. mv_puzzle

    【作ってみた】jQuery UI sortable でデジタルパズル

  4. FullSizeRender-9-1-1024x768

    コワーキングスペースで働く3つのメリット

  5. tukutte7

    【作ってみた】画像の上に文字を表示させる方法

  6. 66a4ab51ed9ffc879ff0cf5064d744e7_m

    EFO(入力フォーム最適化)で成約率を上げる10のテクニック

  7. NHK大河ドラマ真田丸とMEET三成展

    戦なき世を創るため… NHK大河ドラマ「真田丸」×石田三成企画展「MEET三成展」へ!

  8. qqq

    【鴨ふじ】天満駅より徒歩2分!鴨つけめんと炊き込みご飯のお店

人気記事

  1. クリアボタン
  2. mv
  3. 9f803b3532fa44bcb3001cac6734d898_m
  4. 安い!美味い! 【大阪天満・天神橋筋商店街の食レポ】
  5. 新入社員研修「伝える+伝わるセミナー」
  6. tukutte08
  7. タイ料理「天満3パクチー」
  8. 2017年スタートアップトレンド (アメリカ版)
  9. 大阪天満天神橋筋商店街がっつりBEEF_KINGOFSTEAK

最近の記事

  1. mv_ssl01 「常時SSL対策」セットアップサービスについて
  2. mv_tsukatte02 【使ってみた】プログラミングが練習できるサイトを集めてみた
  3. c48549e5450e30d62215e30331440f8e_m 【WordPress】記事の順番を直感的に並べ替える!Intuitive Cus…
  4. mv_tukutte10 【作ってみた】LINE NotifyとGoogle Apps Scriptで天気…
  5. IMG_1067 ペンキを塗ってみた|コワーキングを経営する事になった話3
2018年5月
« 4月    
 123456
78910111213
14151617181920
21222324252627
28293031  
PAGE TOP