先日、以下のような問い合わせフォームを試作しました。

https://shin-go.net/contact_test/
この問い合わせフォームは法人からの問い合せを想定したもので、ユーザーがメールアドレスを入力するとドメイン名を元に、会社名と電話番号を補完入力します。

元々は自社サイトでの問い合わせフォームのアイディアの技術検証のために作成したのですが、思いのほか多くの方に反応していただきました。アイディアや技術自体の新しさではなく、多くの方の潜在ニーズとマッチした結果だと捉えています。

この記事では備忘録も兼ねて補完入力の仕組みや、正確性の検証結果、導入に際しての注意点などを説明します。

Google Mapsからの情報取得

ドメインから会社名と電話番号を調べるために、Google MapsのAPIを利用します。API利用の準備として、以下の手順でAPI Keyを取得し、JSファイルを読み込みます。
https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ja
リンク先にも説明がある通り、API Keyを他サイトで不正に流用されることを防ぐために、APIリファラによる制限を設定してください。

次にAPIを利用した具体的な処理についてです。今回の処理の大まかな流れは以下の通りです。

会社名と電話番号の取得には Places Libraryを利用します。
メールアドレスの入力エリアからのフォーカスアウトをトリガーに、メールアドレスのドメイン部を抜き出し、これをqueryパラメーターとして findPlaceFromQuery() を呼び出し、nameとplace_idを取得します。

let map = new google.maps.Map(document.getElementById('map'));
let service = new google.maps.places.PlacesService(map);


service.findPlaceFromQuery({
        query: str,
        fields: ['name', 'place_id']
    }, 
    function(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            let place = results[0];

            // nameとplace_idを取得
            let name = place.name;
            let place_id = place.place_id;
        }
    });

nameはそのまま会社名の入力エリアの値として反映します。
place_idは次の getDetails() 呼び出し時のパラメータとして利用し、formatted_phone_number を取得します。

service.getDetails({
        placeId: place.place_id,
        fields: ['formatted_phone_number']
    },
    function(result, status){
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            let phoneNumber = result.formatted_phone_number;
        }
    });

formatted_phone_number の値を電話番号の入力エリアの値として反映すれば一通りの処理が完了です。

補完入力の精度検証

次に補完入力された会社名と電話番号の正確さを検証します。

計測用のデータとして、既存の問い合わせフォームからの問い合わせメールアドレスのドメインを使用しました。

補完された会社名と電話番号が問い合わせメールと一致していたものを「期待どおり」、一致しないが誤りではないものを「誤りではない」（※１）、明確に誤っているものを「誤り」、検索結果がなく補完入力がされなかったものを「補完なし」と判定しました。

明確に誤りがあったものは5%でした。まずまずな結果かなと思います。

※１：例えば、補完された情報では代表電話だが、実際の問い合わせでは担当者の携帯番号が使われていたり、会社名に本社、支社など異なる拠点の情報が入力されていたものを「誤りではない」と判定しました。

導入にあたっての課題点

実際に導入するにはいくつか課題点が残っています。

課題１．不正確な情報を含む検索結果

例えば “gmail.com” の文字列でGoogle Maps検索すると、以下のような検索結果が表示されます。

赤枠箇所は本来スポット名が表示されるはずですが、登録情報に問題がありgmailアドレスがスポット名として表示されてしまっています。Google Maps上での情報に誤りがあるため根本的な解決策は無いですが、対処療法として以下が考えられます。

・gmailやYahooメール、携帯キャリアメールなど広く使われているメールアドレスで、結果が不正確だと予測されるものは、API呼び出し前の入力チェックで除外する
・レスポンスとして返されたスポット名がメールアドレスなどの形式となっている場合は、入力エリアの反映を除外する

実際にプロトタイプではgmailやYahooメール、携帯キャリアメールを事前に除外しています。

課題２．必ずしも不正確ではないが期待ハズレの検索結果

精度計測でも触れたように複数拠点がある規模が大きな企業のメールアドレスの場合は、かなりの確率で期待はずれな結果となります。多くの場合は無関係な支社の名称と電話番号が入力されてしまうためです。今の所解決策も思いつかないため、大規模な企業を主なターゲットとする問い合わせフォームには不向きです。

課題３．自動で入力される気味の悪さ

公開したフォームに対して以下のような指摘を複数いただきました。

・初見だと怖く感じる
・不気味に思う人もいるかも

確かに自分が入力した覚えのない情報が勝手に表示されるのは気味が悪いです。そこで、補完入力後に以下のようなツールチップを追加してみました。

どのように情報を取得したのかをきちんと伝えることが、気味の悪さの軽減に繋がりそうです。

API利用料

Google Maps関連のAPIには基本的に従量制で利用料が発生します。APIレポートを見る限り、1580回のAPI呼び出しに対して￥2,930分の料金が発生していました。

問い合わせ１回あたり２回のAPI呼び出しがあったと仮定すると、１度の問い合わせあたり3.7円の概算です。１か月 $200 まで無料できるため、毎月約5,800回の問い合わせまで料金が発生しないことになります。料金については以下に説明があり、一定金額を超えた際のアラートや、上限リクエスト数の設定も可能です。詳しく知りたい方はご確認ください。
https://cloud.google.com/maps-platform/pricing/?hl=ja

---

以上、解説でした。問い合わせフォームに限らず、ユーザーの入力が発生する場合は、何か補完方法がないか考えてみると面白そうです。

TwitterでもインタラクションデザインやUIデザインについて発信しています。UI改善などご相談ください。

Twitter (@shingo2000)

-----

👉 つみきでは、アプリやWebサービスのUIをデザインしています。遊びごころとアイディアでユーザーの愛着を生むデザインを得意としています。アプリやWebサービスの立ち上げや改善をお考えの際は是非ご相談ください。