国際対応の住所フォームでは、まず届け先の国を選び、対応する地域に合った項目を示します。検索で住所が見つからなくても、手入力へ進めるようにします。次へ進む前に住所全体を確認できることも重要です。検索で建物が見つかっても、配達に必要な会社名、階数、部屋番号が不足している場合があります。
項目要件を決めるフォーム設計の流れを使うと、サービスが必要とする情報を整理できます。住所ではさらに、「検索サービスが知らない情報も含めて、この利用者は届け先を正確に伝えられるか」を考えます。

項目の配置より先に、届け先を決める
現在地、画面の言語、配送先は別の情報です。ロンドンで英語の画面を使う人が、ベルリンのスタジオへサンプルを送ることもあります。アカウントの初期設定は出発点になりますが、届け先は見える状態にして、簡単に変更できるようにします。
英国とドイツへサンプルセットを届ける、架空の生地販売会社を考えます。LeaはベルリンのCommon Thread Studioへ送ろうとしていますが、アカウントには英国が保存されています。最初から英国の郵便番号を求めると、なぜ住所が合わないのかを自分で探さなければなりません。住所に依存する項目より前に「配送先の国」を置き、まず前提を直せるようにします。
ここで、実際の配送対応地域も示します。「この地域には配送できません」はサービスの制限、「この地域では住所検索を使えません」は検索の制限です。次の操作も異なり、後者は手入力で解決できても、前者を手入力で回避できるように見せてはいけません。
HTMLの自動入力仕様(英語)も、行政区分が国によって異なることや、項目と順序を国に合わせる考え方を説明しています。ただし、配送対応国や配送会社の規則を決めてくれるものではありません。実際に住所を扱う担当者と合意します。
送信後の使い方に合わせて、住所を分ける
配送会社との連携で郵便番号と市区町村を別々に渡すなら、大きなテキスト欄一つでは、その先で分解が必要になります。一方、人が読んで郵送するために住所を保存するだけなら、使わない細かい構造まで入力させる必要はないかもしれません。
GOV.UKの住所入力パターン(英語)は、この違いを示しています。複数の欄は住所要素を分けて扱う場合に役立ち、要素を個別に使わない多様な住所にはテキスト領域が適する場合があります。英国の検索案内でも、見つからない住所や国外の住所には手入力の経路を用意しています。その判断方法を自分たちのサービスに適用し、英国の項目をすべての国へコピーしないようにしましょう。
このサンプル販売会社では、国に合わせた構造化項目と、住所の補足情報を入れる場所を使います。検索、ブラウザーの自動入力、手入力のどれから来た値でも、最後に編集できます。手入力だけ会社名や部屋の情報を省いた、不完全な別フォームにしないようにします。
| 送信後に必要なこと | 使いやすい入力方式 | 設計上の判断 |
|---|---|---|
| 配送会社が名前付きの住所要素を必要とする | 対応地域に合わせた構造化項目。 | 必要な要素を示す。すべての国で同じとは想定しない。 |
| 人が住所全体を読む | 国と複数行の住所で足りる場合がある。 | 改行を保ち、全文を確認しやすくする。 |
| どちらかの方式を検索で補助する | 候補の選択後に編集できる住所詳細。 | 候補を選んでも、修正や行の追加をできるようにする。 |
通りの欄に収まらない情報を残す
W3Cの住所形式の解説(英語)を見ると、番地、通り名、市、州を世界共通の必須項目にはできないと分かります。建物名で場所を示す住所、複数行にわたる要素、異なる記載順があります。短い入力マスクだけでは、この違いを解決できません。
ベルリンの架空の例では、Leaは通りと地域に加えて「Common Thread Studio」と「Hinterhof, 2. Etage」を残す必要があります。後者は中庭側の建物と階数を示す補足で、受取人が使う原文のまま保持します。通りは「Beispielstraße 18」、郵便番号と市は「10115 Berlin」という例を使います。
対応する地域に合った説明を添え、任意の住所補足欄を見える場所に置きます。説明のない「住所2」より、「部屋番号・階数・その他の住所情報」の方が、何を入れるか伝わります。会社名がよく必要になるなら、通りの欄へ詰め込むことを期待せず、分かる場所を設けます。
必須かどうかは、選択した届け先と、配送サービスが実際に必要とする情報で決めます。最初に対応した国で必須だったからといって、州や郵便番号をどこでも必須にしないでください。逆に、本当に必要な配送項目を、赤いエラーを減らすためだけに任意にしてもいけません。フォームと配送仕様の食い違いを解決します。
検索結果を、住所完成の出発点として扱う
Leaが例の通りを検索し、一致する建物を選ぶと、住所詳細へ進みます。ここで必要なのは「見つかった情報を確認し、不足を追加・修正してください」という移行です。住所を飛ばして、すぐ支払いへ進む流れにはしません。
選択した国を見せたまま、取得した情報を対応する欄へ入れ、スタジオ名と階数を編集できるようにします。候補を選ぶ前にLeaが階数を入力していたら、検索結果に部屋情報がないという理由だけで空欄へ戻してはいけません。応答に値がないことは、利用者が入力した値を消す指示ではありません。
既存の補足と候補が矛盾する場合も考えます。「Hinterhof, 2. Etage」が入力済みなのに、別の候補が通り側の建物を示していたら、その箇所で違いを示し、Leaが解決できるようにします。関係のない断片を自動的に組み合わせると、誰も選んでいない、それらしく見える住所ができてしまいます。
利用者が入れた情報と、候補として提示された情報を、設計上は識別できるようにします。判断に影響しない間は実装メモで管理でき、画面に検索業者の内部IDや信頼度スコアを出す必要はありません。示すべきなのは、建物が変わる、部屋が欠ける、郵便番号が違うといった影響です。
見つからない場合も、検索できない場合も手入力へ進める
失敗してからではなく、最初から検索欄の近くに「住所を手入力」を置きます。検索で見つからないと知っている人に、フォームを開くためだけの失敗検索を強いないようにします。
三つの結果を分けます。検索が完了して一致がないなら「住所が見つかりませんでした。検索内容を確認するか、手入力してください」。リクエストに失敗したなら「住所検索を利用できません。再試行するか、手入力してください」。配送地域の外なら、前に決めた配送不可のメッセージを使います。
手入力へ移る際は、選択した国と確認済みの住所要素を保ちます。安全に項目へ分けられない検索語は、参照できる形で残します。すべての検索語を通り名だと決めつけないでください。Leaの郵便番号を、黙って会社名の欄へ入れてはいけません。
手入力した住所も、検索した住所と同じ確認段階へ進みます。この販売会社の設計では、必要な住所がそろい、配送会社がその地域に対応していれば、手入力でも先へ進めることにします。業務上どうしても照合が必要なら、残る確認と、実際に使える解決方法を説明します。常に無効の「次へ」だけでは、何をすれば終わるのか分かりません。
国を変えたときに、何を保持するか決める
もう一度、間違いに気付く場面を考えます。Leaはスタジオ名と階数を入力してから、英国が選ばれていることに気付きました。ドイツへ変えたら、ラベルと必要な項目を更新します。入力を黙って消したり、英国で選んだ検索結果を隠したまま、新しい届け先の確定値として残したりしないようにします。
受取人や会社名など、明らかに引き継げる情報は保ちます。以前の検索結果は、新しい国では未確認とし、見直す住所要素を示します。消える項目の文字列は、現在のフォーム操作中に取り戻せるようにしますが、見える正当な項目へ対応するまでは、送信する住所に含めません。
「配送先の国をドイツに変更しました。以下の住所を確認してください」と短く伝えられます。本当に入力内容を置き換える必要がある場合は、実行前に何が消えるかを説明し、戻る方法を用意します。影響のない変更まで毎回ダイアログで止めず、実際の損失や重要な再解釈があるときに限定します。
ブラウザーの自動入力にも同じ考え方が必要です。保存された住所が国を補い、フォームの構造を変える場合があります。実装では届け先を定めてから依存項目を検証し、関係のないエラーを一度出してから項目を並べ替える動作を避けます。
実際に使う住所全体を見せる
確認欄には、受取人、会社名、階数や部屋番号、通り、市区町村、必要な郵便番号、国を、出力先に合った順序で示します。Leaはここで「Hinterhof, 2. Etage」が残ったかを確認できます。通り名の横の緑のチェックだけでは答えられません。
住所検証で修正案が出たら、入力した住所と提案された住所を並べ、意味のある違いを文字で示します。利用者が編集するか、適切な候補を採用できるようにします。Google Address Validationのガイド(英語)は、修正が必要な場合と、確認が必要な場合を区別しています。その信号は提供元固有の情報であり、製品側が動作を決める材料です。
書式の提案だけでは、荷物を届けられる証明にはなりません。この販売会社では「住所情報の確認」と、選択した配送サービスの利用可否を分けます。住所を変えたら、住所に依存する配送方法や料金を再確認し、注文を確定する前に変更を示します。
Pixsoで、欠けた階数を補って届け先を確かめる
PixsoにLeaの例を使った配送先入力のファイルを作ります。住所欄は再利用できる入力部品とAuto Layoutで組み、階数のない建物候補を選んだ状態、手入力で詳細を補った状態、国を変えて確認が必要な状態、最終の配送先プレビューをフレームにします。Pixsoのプロトタイピング機能(英語)で画面をつなぎ、レビューとコメントを行えます。
「住所を手入力」を詳細を補う経路へ、「国を変更」を再確認の状態へつなぎます。各フレームでスタジオ名と階数の文字列を一致させます。国の変更フレームの横には、どの非表示の値を送信しないかをメモします。住所のルールは設計中のアプリケーションが実装し、プロトタイプでは画面に現れる影響を検討します。

レビュー担当者には、保存済みの国が間違い、検索も利用できない状態から、スタジオへ中庭と階数を含めてサンプルを送るよう依頼します。どこで届け先を変えようとするか、最終ラベルを説明できるかを見ます。迷った状態の近くに、フィードバックを残します。