スキップしてメイン コンテンツに移動

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

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

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

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

NGパターン

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

ダメな住所入力フォーム

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

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

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

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

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

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

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

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

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

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

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

具体的なラベル名にした住所入力フォーム

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

都道府県のセレクトボックス

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

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

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

入力項目を分けすぎない(多くしすぎない)

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

入力項目がいっぱいある住所入力フォーム

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

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

具体的なラベル名にした住所入力フォーム

余談)無料の郵便番号検索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

まとめ

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

スポンサーリンク
スポンサーリンク
スポンサーリンク

コメント

このブログの人気の投稿

axiosの使い方まとめ (GET/POST/例外処理)

axiosの使い方まとめ (GET/POST/例外処理)最近何かとよく使うJavaScriptでAJAX通信を行うaxiosについて、簡単に使い方をまとめました。GETリクエストをaxiosで送るまずはGETリクエストをaxiosで送る方法です。const res =await axios.get('/users') console.log(res.data)分割代入の記法を使うと、以下のようにも書けますconst{data}=await axios.get('/users') console.log(data)クエリパラメータ (URLパラメータ)を指定クエリパラメータを指定する方法は2つあります。1つ目は、axios.getに指定するURLに直接記述する方法です。axios.get('/user?id=123')2つめは、axios.getの第2引数に、オプション指定する方法です。axios.get('/user',{ params:{ id:123}})POSTリクエストをaxiosで送る次はPOSTリクエストをaxiosで送る方法です。JSON形式でPOSTするJSON形式でPOSTする場合は、axios.postの第2引数に、送信するデータをJavaScriptオブジェクトで指定します。const res =await axios.post('/user',{ id:123, name:'Yamada Tarou'})application/x-www-form-urlencoded形式でPOSTするapplication/x-www-form-urlencoded形式でPOSTする場合は、URLSearchParamsを使います。var params =newURLSearchParams() params.append('id',123) params.append('name','Yamada Tarou')const res =await axios.post('/user', params)axios でファイルをアップロードする画像などのファイルを、axiosでアッ…

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決する

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決するタイトルの通りですが、Windows 8 以降では Windows Form アプリケーションで、コントロールの ImeMode に Katakana や KatakanaHalf を設定しても、カタカナになってくれません。なぜ ImeMode が効かないのか?Windows 8 以降、IME Mode の切り替えは、ユーザー単位で切り替わるようになった為、アプリから IME Mode 制御が出来ないようになりました。
(IME をON にした場合、常に ひらがな モードになます)※ Windows 7までは、IME Modeの切り替えはアプリ単位で行われていた為、問題なくアプリから IME制御が行えました。対処方法Windows 8 以降、IMEの制御は、InputScope クラスの利用が推奨されています。
しかし、InputScope クラスは、WPF、Windows ストアアプリでしか使えない為、Windows Formアプリでは使用できません。
(Windows Form はもう使うな!という事でしょうか (涙) )結論としては、コントールパネルの設定で、IMEの制御をユーザ単位から アプリ単位に変更する事ができます。
これで、Windows Formアプリでも 従来通りIMEの制御を行う事が出来ます。おわりにこの方法だと、アプリをインストールする端末すべてに設定が必要となり、とっても面倒です。。。
しかし、今の所これしか方法がない状態です。
これからは Windows Formではなく、WPFや Windows ストアアプリで作れという事ですかね (^^;)

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]MailKitを使ってメールを送るサンプルコードです。(C#)UTF8/iso-2022-jpのエンコーディング指定、GMail/YahooのSMTPサーバで送るなど、4つのサンプルコードでMailKitの使い方を紹介します。MailKitって何?2017年に.NET標準のSystem.Net.Mail.SmtpClientが廃止予定となり、Microsoftより今後はオープンソースライブラリである、MailKitに置き換えるとアナウンスがありました。既にSmtpClientは非推奨になっており、今後は廃止されていきます。現在、SmtpClientを使用したソースコードには、Visual StudioからMailKitを使うよう警告が出るようになっています。さっそく、MailKitを使ってメールを送信するサンプルコードを作っていきます。UTF8でメールを送信文字エンコーディングを、UTF8でメールを送信するサンプルコードです。
MailKitは、デフォルトの文字エンコーディングがUTF8なっている為、シンプルなコードでメールを送信する事ができます。var host ="<smtp server name>"; var port =25;// or 587using(var smtp =new MailKit.Net.Smtp.SmtpClient()){//SMTPサーバに接続する smtp.Connect(host, port, MailKit.Security.SecureSocketOptions.Auto);//認証が必要な場合は、以下のコメントを解除//smtp.Authenticate("<id>", "<password>");//送信するメールを作成する var mail =new MimeKit.MimeMessage(); var builder =new MimeKit.BodyBuilder(); mail.From.Add(new MimeKit.MailboxAddress("",&quo…