2013.11.08日本の企業は問い合わせフォームでユーザから様々な情報を取得したがる傾向が強く、結果、問い合わせフォームの入力項目も多くなりがちです。そこには必須の入力欄も設けられたりするわけですが、肝心のところ、ほんとうに正しい情報が入力されているかどうかは定かではありません。正しいメールアドレスの取得が生命線になるとくに問い合わせフォームで生命線となるのが正しいメールアドレスを入力してもらうことです。問い合わせが獲得できたとしても、その際に取得できた連絡可能な手段がメールアドレスしかない場合、そのメールアドレスが間違っていれば、せっかく獲得した問い合わせに対して応えることができません。そのためメールアドレスの取得に慎重になる企業は多く、2重のメールアドレスの入力を強いたり、「間違いのないように注意して入力してください」といった注意書きを入力欄のそばに加えたり、サンクス画面にて「確認用の控えのメールが届かない場合はお手数ですが再度お問い合わせください」など、あの手この手を尽くしていることでしょう。これらはほとんど効果を成し得ません。注意書きの類いは読まれないことがほとんですし、メールアドレスの項目を2重に設けても、多くの人はコピー&ペーストするだけなので、1回目に入力されたメールアドレスが間違っていたら意味がありません。そこでコピー&ペーストさえできないようにして、徹底して手入力を強いるフォームも見受けられます。手入力をさせるほど人間ですから間違ったメールアドレスを入力する可能性も高くなります。リテラシーの高いユーザは手入力なんかせず、ブラウザのオートコンプリート機能やIME機能で一発でメールアドレスを入力することができますが、絶対数から言えばそれができるユーザは極僅かです。大半のユーザは使いこなせていないか、そんな機能があることすら知らないかもしれません。目的は正しいメールアドレスの取得ではないもちろん目的が正しいメールアドレスを取得するだけなら、フローを変えるだけで実現できるかもしれません。最初の画面ではメールアドレスの入力のみを要求する入力されたメールアドレス宛にメールを送信するメール内に記載のURLから、続きの情報を入力してもらうのようなフローにすれば、続きの情報まで入力できたユーザからは確実に連絡可能なメールアドレスが取得可能です。本当にこのフローで変わらぬコンバージョンを維持できるものかどうかは別の話になります。見落とされがちですがエンドユーザやクライアントの感覚こそが本来一般のリテラシー水準であると考えるべきです。このフローは相応のリテラシーをもっているユーザでなければ、完結できないとは考えられないでしょうか。メールが送信されていても、当然間違ったメールアドレスが入力されていれば届きませんし、たとえ正しいメールアドレスが入力されていても迷惑メールフォルダに入っていたら気づいてもらえないこともあるかもしれません。ユーザのなかには代理で入力しているから、勝手にメールが送信される仕組みは困るという事情があるかもしれません。何よりも最大の目的は正しいメールアドレスを取得することではなく、お問い合わせを獲得して、それを事業成果に繋げることだったりするわけですから、冗長なフローはかえって、ユーザがお問い合わせをする際の障害となり、目的次第ではこの方法は本末転倒になりかねず、決して良い方法とも言えないでしょう。クライアントから正しいメールアドレスの取得を依頼されたら?クライアントから「問い合わせ時のメールアドレスに返信しても届かないことが多くて、どうにかして正しいメールアドレスを取得できないものかな?」と依頼された場合、どうされますか?そこで、このエントリーでは、ベストプラクティスを追求するわけではありませんが、どうすれば少しでも正しいメールアドレスを入力してもらえるかについて考えてみます。2重のメールアドレスの入力は強いる2重のメールアドレスの入力を強いるUI自体が悪いということは決してありません。正しいメールアドレスを入力させるように機能する作りになっているのかどうかが問題なわけです。ユーザをイライラさせる仕組みは避ける2重にメールアドレス欄を設けた際にはコピー&ペーストされないようにと、安直に次のような仕組みを取り入れてはいけません。右クリックで出るコンテキストメニューを表示したときに発生するoncontextmenuの類のイベントハンドラがありますが、これら仕様にないイベントハンドラをIE以外の主要ブラウザもサポートしています。false;とだけ書かれた状態で用いられると、リテラシーの低いユーザはなぜコピーやペーストができないのかを理解できずに立ち往生してしまうので、まだ一緒にalert()メソッドを使って警告ダイアログを出す際に注意書きをしてあげている方が優しい使い方と言えますが、コピー&ペーストを禁止された上で警告ダイアログまで出されるとユーザをイラッとさせる要因にもなりかねません。そのため2重入力は用いるにしても、上記のような仕組みは避けて、他の方法で、単純にコピー&ペーストすることができない仕組みを考えるようにしましょう。str;};&lt;/script&gt;複雑なことをする必要はありませんが、メールアドレスならば最低限ドット(.)や@が含まれているかの簡単な構文のチェックであればサーバサイドでなくとも、クライアントサイドで随時知らせられるようにしておくと良いでしょう。入力ミスと思わしき程度はalert()メソッドを用いるのではなく、フォーカスがはなれたときにinnerHTMLプロパティなどを用いて、できるだけさりげなく知らせてあげたいものです。そのときにメールドレスが全角英数字入力されている場合はさりげなく一緒に半角英数字になおしてあげると良いでしょう。2つ目の入力欄では@以前と@以降で項目をわける連絡が可能なメールアドレスを入力してください。/&gt;確認のため再度上と同じメールアドレスの入力をお願いします。/&gt;再入力させる際には、単純なコピー&ペーストだけで済まされることのないように、再入力させる2回目の項目は@以前を入力する項目と@以降を入力する項目にわけます。部分、部分をコピー&ペーストされれば同じですが、それでも間違いがあるかどうかをユーザに気づかさせる注意喚起の役割を果たします。10px;}「.」(ドット)を「,」(カンマ)に間違えている場合であれば、クライアントサイドでも、またサーバサイドのどちらでもメールアドレスの構文チェックをすれば検知できるでしょうが、「o」(オー)と「0」(ゼロ)、「1」(数字の1)と「l」(エル)の入力間違いは検知することもできなければ、間違いがあってもユーザ自身も非常に気付き難いものです。そこで入力欄のテキストが適度に大きいければ、ユーザは間違いがあった場合にも気づきやすくなります。2回目の入力欄は最初は隠しておく入力項目のボリュームが多いほどユーザは入力をあきらめてしまうなど離脱率があがるので、入力項目が少なければ少ないほど離脱のリスクも減るため、入力項目数は少ないに越したことはありません。そのため、入力項目を一度に見せるのではなく、確認用のメールアドレスの入力欄を最初は隠しておき、1回目のメールアドレスが書式上正しく入力されたのかをチェックしてから段階的に表示させるようにしましょう。書式チェック後には続けて入力が行いやすいように2回目のメールアドレスの入力欄に自動的にフォーカスが移るようにしましょう。フォーカスを自動的に移すことで、コピー&ペーストさせる隙を与えないようにする役割もあります。サジェストしてあげるメールアドレスの入力でサジェスト(入力支援)機能が役に立ちそうな部分といえば、ドメイン部分です。メールアドレスを再入力してもらう@以降を入力する項目に用います。これは、docomo.co.jpと入力されたり、docono.ne.jpと入力されたりと、ドメイン部分で間違われることも考えられるため、クライアントサイドでサジェスト機能を実装しておくことで、ドメイン部分の入力を間違う確率を下げるのに役立ちます。フリーメールの各社の決まりきったドメインと、可能であれば主要プロバイダも含めたいところですが、利用者の多いプロバイダは、メールサーバーが多数あり、特定できないので必要に応じて組み込みましょう。サジェスト機能を実装できるスクリプトには、typeahead.jsが非常に使いやすく、便利でおすすめです。参考までにサンプル作成時に作ったある程度の主要ドメインをまとめたJSONファイルがありますので、ご自由にお使いください。サンプル現時点でのベストプラクティスは紛れもなくブラウザのオートコンプリート機能やIME機能(スマートフォンならアプリ)で一発でメールアドレスを入力することでしょうが、これはリテラシーに左右されるので、ここではあくまでもユーザのリテラシーが高い・低いに関わらず、できるだけ正しいメールアドレスを入力してもらうことにより多くのユーザが、これなら入力につきあってくれるだろうかというあたりを焦点にした趣旨としています。マウス・タッチ・ペンのタッチ操作イベント擬似クラスと擬似要素を組み合わて用いるContactWeb制作に関するご相談、お気軽にお問い合わせください。/WebデザイナーContactSubscribeTwitterFacebookGoogle+。