最高の住所入力フォームを作ろう！

住所入力フォームを作る時のベストプラクティスを考えます。

個人情報を入力するフォームで、必ず出てくるのが住所の入力です。入力テキストボックスをただ置くだけでなく、 分かりやすい表示や、郵便番号から住所を自動入力するEFO機能など、 入力のしやすがサイト製作者側に求められています。

この記事では、「分かりやすい」「便利」な住所入力フォームのベストプラクティスについて考えていきます。

スポンサーリンク

NGパターン

分かりづらいNGパターンの住所入力フォームの例を見てみましょう。まずは、次のイメージをご覧ください。

おそらく多くの方が、このフォームを見たら「分かりづらいフォームだな〜」と思うでしょう。場合よっては入力をやめて、サイトを離脱しまうかもしれません。

では実際、上のフォームにはどのような問題があるのでしょうか？ 次のリストに問題点を列挙しました。

• 問題点1： 住所1と住所2の使い分けが分からない。

住所1が、市区町村名までか、番地まで入力するのかが分からず、それに伴って住所2もどこから入力していいか分からないため、ユーザーは入力に迷い不快な思いをするでしょう。

• 問題点2： 郵便番号のハイフンあり/なしが分からない

郵便番号に"123-4567"のようにハイフンありで入力するのか、"1234567"のようにハイフンなしで入力するのか、フォームのラベルから判断がつきません。

• 問題点3： 郵便番号、住所をすべて手入力する必要がある

最近、多くのサイトで用意されている、郵便番号から住所を自動入力する機能もないため、ユーザーは不便に思うかもしれません。

入力に迷わない分かりやすいラベル

上の**「住所１」「住所２」**のように、ラベルを抽象的な表記にしてしまうと、分かりにくくなってしまいます。入力に迷わないように「都道府県」「市区町村」などの具体的なラベル名にしましょう。

実際に、具体的なラベル名にした住所入力フォームの例を見てみましょう。「住所1」を「都道府県・市区町村・番地」に、「住所2」を「建物名・号室」にラベル名を変更しました。

ラベル名を変更しただけなのに、一気に入力しやすくなったのがお分かります。

住所の自動入力機能があると楽！

分かりやすいラベルに加えて、EFO（Entry Form Optimization：入力フォーム最適化）対応として、郵便番号から住所を自動入力する機能をつけましょう。ネット・ショッピングなどで、会員登録をしたことがある人であれば、一度は目にしたことがあると思います。

[郵便番号から住所を自動入力できるフォーム]

郵便番号がわからないユーザーにも配慮する

郵便番号から住所を自動入力する機能は便利です、しかし自分の住んでいる所の郵便番号を、誰しも覚えているわけではありません。

郵便番号が分からないユーザーに配慮するため対策としては、日本郵政の郵便番号検索ページへのリンクを貼っておくと、ユーザーが簡単に郵便番号を調べられて便利です。

▶日本郵政の郵便番号検索ページ
http://www.post.japanpost.jp/zipcode/

また、郵便番号検索ページはポップアップ表示か別タブで表示するようにしておきましょう。

住所から郵便番号を表示するのもアリ！

筆者が過去に作成したフォームで、住所から郵便番号を自動入力する機能を作ったところ、「住所は覚えているけど、郵便番号を忘れた」という人に評判がよかったので、こういった機能を作るのもお勧めです。

実際に、過去に作成したフォームは次のようなイメージです。

・郵便番号を入力して「〒 ⇔ 住所」ボタンを押すと、住所を自動入力する

・住所だけを入力して「〒 ⇔ 住所」ボタンを押すと、郵便番号を自動入力する

スポンサーリンク

セレクトボックスで都道府県を選択するのは面倒？

住所入力フォームで、次のような都道府県のセレクトボックスをよく見かけます。

開発側も簡単に実装できて、一見するとユーザの入力が必要がないため便利なよう見えますが、47都道府県もあると以外と選択が面倒です。 こうゆうセレクトボックスボックスは北の県から順に都道府県を並べるため、北海道に住む人は選択が楽ですが、関東・中部地方など、セレクトボックスの中間に位置している県に住む人は、結構探すのが大変です。

日本地図から都道府県を選択させる方法もありますが、郵便番号から住所を自動入力できることと、テキストボックスで入力させるにしても、都道府県名の入力程度あれば大して手間ではないため、都道府県の選択にセレクトボックスは使用せず、テキストボックスを使用した方がよういでしょう。

※ ちなみに、HTMLのセレクトボックス(select)は、iOSではかなり操作性が悪いと評判なので、モバイルファーストなWeb開発が必要になっている昨今では、フォーム入力では極力使用しない方がよいでしょう。

入力項目を分けすぎない（多くしすぎない）

次のイメージは極端な例ですが、入力項目は分けた方が分かりやすいという理由で、やたらと入力項目がいっぱいあるサイトをたまに見かけます。

人によって感じ方は異なると思いますが、 多くの人は入力項目数が多いフォームをみるとウンザリします。 また、住所をどこで区切って入力していいか分かりづらくなることや、項目間をフォーカス移動する手間も増えるため、 結果的にユーザビリティが低下になります。

次のように、結合できる項目は極力１つの入力項目にするようにしましょう。

余談）無料の郵便番号検索APIが便利

郵便番号から住所を検索するには、郵便番号と住所を対応させる表（データ）を持つ必要があります。 このデータは日本郵政がCSV形式で提供していますが、そのままの形式では使いづらく検索しやすいように加工が必要になります。

小規模なサービスなどで、わざわざCSV形式のデータをデータベース等で加工して保持するのは面倒です。

そこで、郵便番号検索APIを利用すると便利です。 有料・無料のサービスがありますが、どの郵便番号検索APIも、APIのパラメータに郵便番号を指定すると、住所を返してくれるような作りになっているため、郵便番号から住所を入力するAJAXの部分だけを実装すれば、簡単に機能が導入できます。

無料の郵便番号検索APIとして有名なのが「zip cloud」です。使い方は簡単で、https://zip-cloud.appspot.com/api/search?zipcode=7830060のように、検索したい郵便番号をURLに付けるだけで住所を取得することができます。

zip cloud
http://zipcloud.ibsnet.co.jp/doc/api

スポンサーリンク

まとめ

入力しやすい、住所入力フォームについて考えてきました。郵便番号の管理やら少し面倒ですが、、ちゃんと作り込んでおかないと、サイトの離脱につながらるので、きっちりと作り込んでおきましょう。