正しいメールアドレスを入力させるのは至難

日本の企業は問い合わせフォームでユーザから様々な情報を取得したがる傾向が強く、結果、問い合わせフォームの入力項目も多くなりがちです。そこには必須の入力欄も設けられたりするわけですが、肝心のところ、ほんとうに正しい情報が入力されているかどうかは定かではありません。

正しいメールアドレスの取得が生命線になる

とくに問い合わせフォームで生命線となるのが正しいメールアドレスを入力してもらうことです。なぜなら問い合わせが獲得できたとしても、その際に取得できた連絡可能な手段がメールアドレスしかない場合、そのメールアドレスが間違っていれば、せっかく獲得した問い合わせに対して応えることができません。

そのためメールアドレスの取得に慎重になる企業は多く、2重のメールアドレスの入力を強いたり、「間違いのないように注意して入力してください」といった注意書きを入力欄のそばに加えたり、サンクス画面にて「確認用の控えのメールが届かない場合はお手数ですが再度お問い合わせください」など、あの手この手を尽くしていることでしょう。

ですが、これらはほとんど効果を成し得ません。注意書きの類いは読まれないことがほとんですし、メールアドレスの項目を2重に設けても、多くの人はコピー&ペーストするだけなので、1回目に入力されたメールアドレスが間違っていたら意味がありません。もちろん、そこでコピー&ペーストさえできないようにして、徹底して手入力を強いるフォームも見受けられます。

しかしながら、手入力をさせるほど人間ですから間違ったメールアドレスを入力する可能性も高くなります。もちろんリテラシーの高いユーザは手入力なんかせず、ブラウザのオートコンプリート機能やIME機能で一発でメールアドレスを入力することができますが、絶対数から言えばそれができるユーザは極僅かです。大半のユーザは使いこなせていないか、そんな機能があることすら知らないかもしれません。

ただし、目的は正しいメールアドレスの取得ではない

もちろん目的が正しいメールアドレスを取得するだけなら、フローを変えるだけで実現できるかもしれません。

たとえば、

  1. 最初の画面ではメールアドレスの入力のみを要求する
  2. 入力されたメールアドレス宛にメールを送信する
  3. メール内に記載のURLから、続きの情報を入力してもらう

のようなフローにすれば、続きの情報まで入力できたユーザからは確実に連絡可能なメールアドレスが取得可能です。

しかしながら、本当にこのフローで変わらぬコンバージョンを維持できるものかどうかは別の話になります。見落とされがちですがエンドユーザやクライアントの感覚こそが本来一般のリテラシー水準であると考えるべきです。このフローは相応のリテラシーをもっているユーザでなければ、完結できないとは考えられないでしょうか。また、メールが送信されていても、当然間違ったメールアドレスが入力されていれば届きませんし、たとえ正しいメールアドレスが入力されていても迷惑メールフォルダに入っていたら気づいてもらえないこともあるかもしれません。また、ユーザのなかには代理で入力しているから、勝手にメールが送信される仕組みは困るという事情があるかもしれません。

そして何よりも最大の目的は正しいメールアドレスを取得することではなく、お問い合わせを獲得して、それを事業成果に繋げることだったりするわけですから、冗長なフローはかえって、ユーザがお問い合わせをする際の障害となり、目的次第ではこの方法は本末転倒になりかねず、決して良い方法とも言えないでしょう。

クライアントから正しいメールアドレスの取得を依頼されたら?

クライアントから「問い合わせ時のメールアドレスに返信しても届かないことが多くて、どうにかして正しいメールアドレスを取得できないものかな?」と依頼された場合、どうされますか?

そこで、このエントリーでは、ベストプラクティスを追求するわけではありませんが、どうすれば少しでも正しいメールアドレスを入力してもらえるかについて考えてみます。

1. 2重のメールアドレスの入力は強いる

2重のメールアドレスの入力を強いるUI自体が悪いということは決してありません。正しいメールアドレスを入力させるように機能する作りになっているのかどうかが問題なわけです。

2. ユーザをイライラさせる仕組みは避ける

2重にメールアドレス欄を設けた際にはコピー&ペーストされないようにと、安直に次のような仕組みを取り入れてはいけません。

メールアドレス:<input type="email" name="email" oncopy="alert('確認メールアドレス欄にはペーストしないでください'); return false;" />
確認メールアドレス:<input type="email" name="email2" onpaste="alert('確認メールアドレス欄にはペーストしないでください'); return false;" />

Internet Explorer 5.0のときに独自に取り入れられたDOM拡張に、テキストをコピーしようとしたときに発生するoncopy, テキストを切り取ろうとしたときに発生するoncut, テキストを貼付けようとしたときに発生するonpaste, 右クリックで出るコンテキストメニューを表示したときに発生するoncontextmenuの類のイベントハンドラがありますが、これら仕様にないイベントハンドラをIE以外の主要ブラウザもサポートしています。

これらのイベントハンドラをreturn false;とだけ書かれた状態で用いられると、リテラシーの低いユーザはなぜコピーやペーストができないのかを理解できずに立ち往生してしまうので、まだ一緒にalert()メソッドを使って警告ダイアログを出す際に注意書きをしてあげている方が優しい使い方と言えますが、コピー&ペーストを禁止された上で警告ダイアログまで出されるとユーザをイラッとさせる要因にもなりかねません。

そのため2重入力は用いるにしても、上記のような仕組みは避けて、他の方法で、単純にコピー&ペーストすることができない仕組みを考えるようにしましょう。

3. 簡単な入力ミスはさりげなく知らせる

<input type="email" name="email" placeholder="sample@docomo.ne.jp" onblur="chkemail(this)" />
<div id="email_error_msg"></div>
<script>
function chkemail(obj) {
    var msg = "";
    var str = obj.value;
    var error_msg_node = document.getElementById("email_error_msg");
    //全角英数字を半角英数字に変換
    str = zentohan(str);
    //.や@が含まれているかをチェック
    if( !str.match( /.+@.+\..+/ ) ) {
        msg = "入力されたメールアドレスに間違いはありませんか?";
    }
    if( str.match( /,/ ) ) {
        msg = "カンマ(,)が含められていますがドット(.)ではありませんか?";
    }
    if(msg !== ""){
        error_msg_node.innerHTML = msg;
    }else{
        error_msg_node.innerHTML = "";
    }
}
function zentohan(str){
	str = str.replace(/[\uff21-\uff3a\uff41-\uff5a\uff10-\uff19]/g, function(s){
		return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
	});
	//spaces remove
	str = str.replace(/\u0020|\u3000/g,'');
	return str;
};
</script>

複雑なことをする必要はありませんが、メールアドレスならば最低限ドット(.)や@が含まれているかの簡単な構文のチェックであればサーバサイドでなくとも、クライアントサイドで随時知らせられるようにしておくと良いでしょう。

なお、入力ミスと思わしき程度はalert()メソッドを用いるのではなく、フォーカスがはなれたときにinnerHTMLプロパティなどを用いて、できるだけさりげなく知らせてあげたいものです。また、そのときにメールドレスが全角英数字入力されている場合はさりげなく一緒に半角英数字になおしてあげると良いでしょう。

4. 2つ目の入力欄では@以前と@以降で項目をわける

連絡が可能なメールアドレスを入力してください。
<input type="email" name="email" placeholder="sample@docomo.ne.jp" onblur="chkemail(this)" />
確認のため再度上と同じメールアドレスの入力をお願いします。
<input type="email" name="email2_pre" placeholder="@以前を入力" /> @ <input type="email" name="email2_post" placeholder="@以降を入力" />

再入力させる際には、単純なコピー&ペーストだけで済まされることのないように、再入力させる2回目の項目は@以前を入力する項目と@以降を入力する項目にわけます。部分、部分をコピー&ペーストされれば同じですが、それでも間違いがあるかどうかをユーザに気づかさせる注意喚起の役割を果たします。

5. 入力欄のテキストを極力大きくする

input[type="text"],
input[type="email"]{
	font-size: 24px;
	padding: 10px;
}

「.」(ドット)を「,」(カンマ)に間違えている場合であれば、クライアントサイドでも、またサーバサイドのどちらでもメールアドレスの構文チェックをすれば検知できるでしょうが、「o」(オー)と「0」(ゼロ)、「1」(数字の1)と「l」(エル)の入力間違いは検知することもできなければ、間違いがあってもユーザ自身も非常に気付き難いものです。そこで入力欄のテキストが適度に大きいければ、ユーザは間違いがあった場合にも気づきやすくなります。

6. 2回目の入力欄は最初は隠しておく

入力項目のボリュームが多いほどユーザは入力をあきらめてしまうなど離脱率があがるので、入力項目が少なければ少ないほど離脱のリスクも減るため、入力項目数は少ないに越したことはありません。そのため、入力項目を一度に見せるのではなく、確認用のメールアドレスの入力欄を最初は隠しておき、1回目のメールアドレスが書式上正しく入力されたのかをチェックしてから段階的に表示させるようにしましょう。

また、書式チェック後には続けて入力が行いやすいように2回目のメールアドレスの入力欄に自動的にフォーカスが移るようにしましょう。フォーカスを自動的に移すことで、コピー&ペーストさせる隙を与えないようにする役割もあります。

7. サジェストしてあげる

メールアドレスの入力でサジェスト(入力支援)機能が役に立ちそうな部分といえば、ドメイン部分です。メールアドレスを再入力してもらう@以降を入力する項目に用います。

これは、docomo.co.jpと入力されたり、docono.ne.jpと入力されたりと、ドメイン部分で間違われることも考えられるため、クライアントサイドでサジェスト機能を実装しておくことで、ドメイン部分の入力を間違う確率を下げるのに役立ちます。とくに携帯電話会社、主要フリーメールの各社の決まりきったドメインと、可能であれば主要プロバイダも含めたいところですが、利用者の多いプロバイダは、メールサーバーが多数あり、特定できないので必要に応じて組み込みましょう。

サジェスト機能を実装できるスクリプトには、typeahead.jsが非常に使いやすく、便利でおすすめです。参考までにサンプル作成時に作ったある程度の主要ドメインをまとめたJSONファイルがありますので、ご自由にお使いください。

サンプル

現時点でのベストプラクティスは紛れもなくブラウザのオートコンプリート機能やIME機能(スマートフォンならアプリ)で一発でメールアドレスを入力することでしょうが、これはリテラシーに左右されるので、ここではあくまでもユーザのリテラシーが高い・低いに関わらず、できるだけ正しいメールアドレスを入力してもらうことにより多くのユーザが、これなら入力につきあってくれるだろうかというあたりを焦点にした趣旨としています。

Updated / Published