「つまずく前に教えてくれる」— フォーム入力のエラーを未然に防ぐ添え言葉
パスワード要件の先出し、番地なし住所の入力例、メール不達の先回り警告。ユーザーがフォームでつまずく前に一手先を示す添え言葉を5つの実例で紹介します。
エラーが出てからでは遅い
フォーム入力でユーザーが最もストレスを感じるのは、送信ボタンを押した後に表示されるエラーメッセージです。せっかく入力したのにやり直し――この体験が繰り返されると、ユーザーはフォームそのものを離脱してしまいます。
しかし、エラーの多くは事前に一言添えるだけで防げるものです。パスワードの要件、住所欄の特殊なケース、メールが届かないリスク。ユーザーが「どうすればいいんだろう」と迷う前に答えを示しておく。そんな先回りの添え言葉を、実際のECサイトで見つけました。
事例
ロコンド — パスワード使い回しの具体的リスクを伝える
ロコンドの会員登録フォームでは、パスワード入力欄の下に「セキュリティの仕様上、他サイトで登録されているアドレスとパスワードのセットの場合、次回以降、ログインできなくなる可能性があります。独自パスワードを登録ください。」と表示しています。
多くのサイトは「8文字以上の英数字」といった形式要件だけを伝えますが、ロコンドはその先にある「なぜ独自パスワードが必要なのか」という疑問に先回りして答えています。「ログインできなくなる可能性」という具体的な結果を示すことで、面倒でも新しいパスワードを作ろうという動機づけになります。
パスワード入力欄の下にリアルタイムのバリデーション（条件を満たすとチェックマークが付く表示）を設けると、ユーザーは自分のパスワードが要件を満たしているかを入力しながら確認できる。 「Microcopy: The Complete Guide」Chapter 17: Preventing Errors and Other Setbacks
ドクターシーラボ — 番地なし住所の入力方法を先回りで案内
ドクターシーラボの購入手続きでは、番地の入力欄に「※番地、号 が不要な場合は、"番地なし"と入力してください」という一文を添えています。
日本の住所には番地が存在しない物件が一定数あります。そうした住所のユーザーは、番地欄を空欄にしていいのか、何か入力しないとエラーになるのか判断に迷います。このサイトは「"番地なし"と入力してください」と入力すべき文字列まで具体的に示すことで、迷いをゼロにしています。配送に関わるミスはユーザーにも事業者にも負担が大きいだけに、この一言の実効性は高いといえます。
建物名・部屋番号の入力欄にも「マンション名・部屋番号がない場合は空欄で構いません」と補足すると、戸建て住まいのユーザーが「何か入れなければエラーになるのでは」と迷う場面を防げる。 「Microcopy: The Complete Guide」Chapter 17: Preventing Errors and Other Setbacks
BASE FOOD — キャリアメール不達リスクをフォーム直下で警告
BASE FOODのチェックアウトでは、メールアドレス入力欄の直下に「※docomo,au,softbankのキャリアメールはメールが届かない場合がございます。上記以外のメールアドレスのご利用を推奨しております。」と表示しています。
キャリアメールに注文確認メールが届かない問題は、多くのEC事業者が抱えるサポート負荷の原因です。多くのサイトが「届かない場合は迷惑メールフォルダをご確認ください」と登録後に伝えるのに対し、BASE FOODはメールアドレスを入力する段階で先手を打っています。問題が起きてから対処するのではなく、問題そのものを発生させない設計です。
エディオン — コピペ時の空白スペース混入を事前に警告
エディオンのログインフォームでは、パスワード入力欄の下に「※入力するIDやパスワードの前後や字間に空白スペースがある場合、エラーとなります。」と表示しています。
IDやパスワードをコピー&ペーストしたとき、前後に空白が入ってしまうのはユーザーが気づきにくい失敗です。ログインできない原因がわからず何度も試してしまう――そんな事態を、入力前の一言で防いでいます。「空白スペース」「前後や字間」という具体的な表現が、抽象的な警告よりもはるかに実用的です。
注意書きで空白を「エラーとなります」と伝える代わりに、システム側で前後の空白を自動トリミングする実装にすれば、ユーザーが注意書きを読む必要すらなくなる。 「Microcopy: The Complete Guide」Chapter 17: Preventing Errors and Other Setbacks
ユーキャン通販 — メールアドレスを自動ミラーリングして視覚確認させる
ユーキャン通販の購入フォームでは、メールアドレスを入力すると直下に「▼メールアドレスをご確認ください。」という誘導とともに、入力値がリアルタイムで自動反映されます。さらに「確認用アドレスが反映されない時はこちらをクリックしてください。」というサポートリンクも添えられています。
一般的な「確認用メールアドレス」の再入力欄は、同じ間違いをコピー&ペーストで繰り返してしまう弱点があります。ユーキャンの手法はそれとは異なり、入力値を別行に表示して見た目で確認させる仕組みです。確認欄を埋める手間なく、視覚的に誤りを発見できます。自動反映がうまく動かない場合の逃げ道まで用意している点も周到です。
もっと事例を見る
同じパターンの事例をさらに8サイト紹介しています。パスワード要件のリスト表示、生年月日の変更不可警告、住所省略の変換例、リアルタイム残り文字数など、バリエーション豊かな実装を集めました。
紹介サイト
- ロコンド — 靴・ファッション専門通販。サイズ交換無料・返品可能が特徴
- ドクターシーラボ — 皮膚科学に基づいたスキンケアブランドの公式オンラインショップ
- BASE FOOD — 完全栄養食パン・パスタなどの定期購入型通販
- エディオン — 家電量販店エディオンの公式通販サイト
- ユーキャン通販 — 通信教育大手ユーキャンが運営するCD・DVD・生活用品の通販
マイクロコピーの観点
「Microcopy: The Complete Guide」p.227 では、エラーメッセージの書き方を工夫するよりも「そもそもエラーを防ぐ方がさらに良い」とし、フォームの弱点（"縫い目"）を見つけて事前に数語添えるだけで多くのエラーを防げると解説しています。同書 p.185 では、Capital Oneがフォームの各フィールドに補助的な説明文（アシスティブコピー）を追加した結果、フォーム完了率が26%から92%に3倍化した事例も紹介されています。たった数語の添え言葉が、フォーム体験を劇的に変えうることを示す数字です。
「ザ・マイクロコピー」p.140 では、確認メールが届かない場合に「2〜3分経ってもメールが届かない場合、迷惑メールフォルダに振り分けられていないかご確認ください」といったサポートの一文を添えることの重要性が述べられています。今回紹介したBASE FOODやユーキャンの事例は、この考え方をさらに一歩進めて「届かない事態そのものを起こさない」方向に踏み込んでいます。
※ マイクロコピーは株式会社オレコンの登録商標です。
