「メールアドレス」は、会員登録やお問い合わせ、予約、購入、申し込みフォームなど、どんな内容のフォームにも高い確率で存在する入力項目のひとつではないでしょうか。
そして、メールアドレスを誤って送信してしまうと、その後の連絡やトリガーメールによる確認・リマインド等全般が難しくなり、サービスの利用に致命的な影響をおよぼすことがあります。
できれば誤りなく確実に取得したいメールアドレス情報。
しかしメールアドレスのような細かな英数字の文字列入力は、比較的入力ミスを起こしやすいと考えられます。
そこで本日は、ユーザーにメールアドレスを正しく入力してもらうための手法をまとめてみたいと思います。
※なお今回はメールアドレスが有効かどうかの認証に関しては言及しません。(認証については別途テーマとしてみたいと思います)

オーソドックスなソリューション

まずは、多くのフォームで用いられているオーソドックスなソリューションを振り返っておきます。

確認入力欄の用意

メールアドレスの確認入力、みなさんも一度は目にしたことがあるでしょう。
メールアドレスの入力欄とその確認のための入力欄と、2回メールアドレス欄を入力することで、誤りに気づかせるという方法です。

オーソドックスなメールアドレスの確認入力欄の例。
オーソドックスなメールアドレスの確認入力欄の例。

この方法、入力ミスを防ぐ効果はある程度あるように思いますが、ユーザーにとって以下のようなデメリットも考えられます。

ユーザーは手間に感じる

同じ内容を2回入力することは、単純にユーザーにとって手間です。
ところで、似たようなケースにパスワードの確認入力というものがあります。

パスワードの確認入力の例
パスワードの確認入力の例

パスワード入力欄には文字のマスキングが付いているため、万が一入力ミスした場合にそれに気づくことが難しくなり、意図した文字列を確実に入力できているかを確かめるために2回目の入力欄が意味を持ってきます。
いっぽうメールアドレスの場合、特にマスキングはされていないために、誤りがないかユーザーが目視で確認することは可能です。
ですのでパスワードの場合に比べ、2回同じ内容を入力する手間にユーザーが納得感を感じにくい可能性はあるでしょう。

意味が無いケース

2度目の入力を手間に感じたユーザーは、コピー&ペーストで入力するかもしれません。そうすると、ほとんど確認用入力欄を設けている意味は無いに等しいでしょう。
コピー&ペーストを禁止するという方法もありますが、その施策はユーザー目線でないことは明らかです。
以上、従来的なソリューションについて振り返りました。(認証用のメールを送信する方法も考えられますが今回は割愛とします)
効果はありそうなものの、1度の入力でうまく入力ミスを回避できることに越したことはありません
以下、ヒントになりそうな方法について挙げていきます。

ミスを防ぐための支援機能

ユーザーが使用するメールアドレスには、全てではないもののある程度の規則性があります。それは、ドメイン
例えばgmailやyahoo、hotmailなどフリーで取得できるメールアドレスを使用しているユーザであれば、@以下のドメインはすべて共通です。
そこでよく使われているサービスのドメイン(以下、「有名ドメイン」と表現します)については、何らかの入力支援施策を実施することが可能です。
残念ながら@以前の文字列の入力ミスは防ぐことはできませんが、@以下、つまりメールアドレスの後半分のミスを防ぐことは可能です。
以下、ドメインの入力支援について2つの事例を紹介します。

メールアドレスの修正機能

まずはユーザーが入力したドメインを自動的に修正する方法です。
Kickstarterのフォームがこの方法を採用しているので、取り上げて説明していきます。
このフォームでは、ユーザーが特定のドメインに似たドメインを入力すると、その場で正しいドメインを用いた修正案を提示してます。
すなわち、ドメインをスペルミスしてしまっても有名ドメインであればその場で誤りに気づくことができます

例えば「gmail.com」のミス例として「gmeil.com」を入力。すると、入力欄の真上に修正案が提案が表示された

なお、提案された正しいドメインのアンカーテキストをクリックすると、入力内容が正しいドメインに自動で入れ替わるようになっています。
ユーザーが誤りに気づくだけでなく、それを修正する手間も省いてくれるのは非常に親切な機能ですね。

あらかじめドメインを提案する機能

同じくユーザーのメールアドレス入力を補助する機能として、弊社のEFOツール「エフトラEFO」の機能のひとつ「メアドサジェスト機能」も紹介しておきましょう。
この機能では、ユーザーが有名ドメインの一部を入力した段階で、続く候補を表示します。

ドメインのサジェストを表示
ドメインのサジェストを表示

もちろんこのとき表示されたドメイン名を選択すると、自動で入力も実施します。
ユーザーはドメインを最後まで入力する必要がありません。

ドメイン入力を補助する

手で入力するとどうしても生まれるスペルミス。そこで、なるべく自動で情報を補完することで、このような誤りを防ぐことが有効です。さらにはユーザーの入力の手間も軽減してくれる効果もあり、ぜひ取り入れたい機能のひとつです。

デザイン上の工夫にも効果が

次に紹介するのは、よりシンプルな施策です。
メールアドレスに誤りがないかどうかを確認するのは、結局ユーザーの目視にかかっています。ですので、その目視確認をスムーズにかつ注意深くするためには、デザイン・ビジュアル面での工夫が充分影響を与えると考えられます。
以下、具体的な施策を考えていきます。

大きなフォントで作成

非常にシンプルな方法ですが、単純にフォントサイズを大きくするというのもひとつの方法です。

大きく表示されたメールアドレス欄
大きなフォントで表示されたメールアドレス入力欄

メールアドレスは半角英数字であるうえに、ドットやハイフンなどの記号は細かく、普段からサイズの大きな日本語テキストに慣れ親しんでいる私達にとっては見難い場合があります。これらはフォントをひとまわり大きくするだけでもかなり改善できるのではないでしょうか。
また、入力画面のみではなく、確認画面での表記も大きくしておくとなお良し、です。
弊社エフトラEFOサービスサイトのフォームでは、確認画面での情報を大きなフォントで表示している
弊社エフトラEFOサービスサイトのフォームでは、確認画面での情報を大きなフォントで表示している

誤りがあった場合のデメリットを喚起

ユーザーが注意深く入力するように促す文言を表示するのも効果的でしょう。
下記のジョブセンスの例が参考になります。

さきほども紹介したジョブセンスの例。メールアドレスを間違えると祝い金の受け取りができないなどのユーザーのデメリットを表記して注意喚起。
ジョブセンスの例。

ユーザーのサービス利用のメリットである「祝い金」の受け取りができないなど、メールアドレスを間違えて登録した場合のデメリットを表記して注意喚起しています。

入力しやすくするための工夫

入力ミスとは直接的には影響しないものの、入力しやすい環境を整えておくことで、結果としてミスを減らすことにつながるとも考えられます。
以下、メールアドレスの入力をスムーズにするための施策についてお伝えします。

半角英数字にセット

メールアドレスを全角で入力させることはありません。必ず、半角英数字です。
ですので、項目にフォーカスした際に、入力モードを半角英数字に切り替えるようにしておくとスムーズに入力にとりかかることができます。
いっぽうで、入力慣れしているユーザーにとってはかえって不便になる可能性もありますので、半角英数字からモード変更ができないようにしておくとなお良し、ではないでしょうか。

入力モードを自動的に英数字に変換しているので、わざわざ変換しなくて済む
入力モードを自動的に英数字に変換してくれると、わざわざ変換しなくて済む

スマホの場合

スマートフォンからの入力の場合には、ソフトウェアキーボードの最適化は必須です。
下記のメールアドレス用に最適化されたキーボードを表示させることで、「@」や「.」などのメールアドレスに必須の記号も、パネルを切り替えること無く入力することができます。

input type="email" を指定
input type=”email” を指定

かならずフィールドのinput typeは「email」に設定しておくようにしましょう。

まとめ

いかがだったでしょうか。本日はユーザーにメールアドレス入力をミスなく行ってもらうための以下の施策についてお伝えしました。

  • メールアドレスの修正機能
  • ドメインを提案する機能
  • 大きなフォントで作成
  • 誤りがあった場合のデメリットを喚起
  • 半角英数字にセットする
  • ソフトウェアキーボードの最適化

ぜひ、これらを参考に改善を進めてみてください。