「例）19940101」— プレースホルダーで入力の迷いを先回りで解消する添え言葉

空欄のフォームはユーザーを立ち止まらせる ​

会員登録フォームで手が止まった経験はないでしょうか。「生年月日って、スラッシュで区切る？ハイフン？」「電話番号にハイフンは要る？」——入力形式がわからず迷った末に、試しに入力してエラーが返ってくる。この小さなストレスの積み重ねが、フォーム離脱につながります。

アイトラッキング研究によれば、ユーザーの目は空のフィールドに自然と引き寄せられます。つまりプレースホルダーがなければ入力欄はよく目立つものの、ユーザーは「何をどう入力すればいいか」のヒントを得られません。逆に、ラベルをそのまま繰り返すだけのプレースホルダーはテキスト量を増やすだけで、かえってフォームを重く見せてしまいます。

プレースホルダーが効果を発揮するのは、具体例や入力形式など「正当な理由」がある場合です。今回は、プレースホルダーを上手に活用している3つのサイトを見ていきます。

事例 ​

antiqua — 「例）19940101」で入力形式の迷いをゼロにする ​

antiquaの会員登録フォームでは、生年月日の入力欄に 「例）19940101」 とプレースホルダーが表示されています。電話番号は「例）08001234567」、郵便番号は「例）1508512」と、すべて同じ書式で入力例を示しています。

生年月日はフォームのなかでも特に迷いやすいフィールドです。「yyyy/mm/dd」なのか「yyyymmdd」なのか、見た目だけでは判断できません。「例）19940101」と具体的な8桁の数字を見せることで、区切り文字なしの数字入力であることがひと目でわかります。さらに「例）」という接頭辞をすべての欄で統一することで、これがサンプルであることも直感的に伝わっています。

cotta — 自社ドメインのメールアドレスで親近感と形式を同時に伝える ​

cottaの会員登録フォームでは、メールアドレス欄に 「例: cotta@cotta.jp」 とプレースホルダーが表示されています。よくある「example@email.com」のような汎用的な例示ではなく、サービス自身のドメインを使ったアドレスを入力例にしている点がユニークです。

ブランド名が入ることで親近感が生まれるだけでなく、「@マーク付きのメールアドレス形式」を直感的に示す役割も果たしています。さらに入力欄の直下には「携帯電話会社が提供しているメールアドレスをご利用の場合は、【cotta.jp】および【cotta.co.jp】からのメールが受信できるように設定してください。」と注意書きが添えられており、よくあるトラブル（メールが届かない）を未然に防ぐ配慮も行き届いています。

ベルーナ — 「お買上げ明細記載の」で情報の所在を一言で伝える ​

ベルーナはカタログ通販を長年手がけてきた企業で、紙のカタログから注文していた既存顧客がオンライン会員に移行するケースがあります。会員登録フォームの「お客様番号」欄には 「お買上げ明細記載のお客様番号をご入力ください（任意）」 というプレースホルダーが表示されています。

「お客様番号」だけでは、何のことかわからないユーザーもいるでしょう。「お買上げ明細記載の」と一言添えるだけで、その番号がどこに書かれているかがわかります。さらに「（任意）」と括弧書きすることで、番号を持っていない新規顧客が不安に感じることもありません。プレースホルダーは入力形式を示すだけでなく、こうした「情報の所在」や「入力の要否」を伝える場としても有効です。

紹介サイト ​

• antiqua — 大阪発のオリジナルファッションブランド通販サイト
• cotta — 製菓・製パン材料や道具を扱う専門通販サイト
• ベルーナ — レディースファッションを中心とした総合通販サイト

マイクロコピーの観点 ​

Microcopy: The Complete Guide (2nd ed.)

Kinneret Yifrah 著 / NEMALA / 2019年

「Microcopy: The Complete Guide」Chapter 10（p.143）では、アイトラッキング研究を引用しながら「ユーザーの目は空のフィールドに引き寄せられる。最悪の場合、空でないフィールドを完全に見落とす可能性がある」と述べられています。プレースホルダーを安易に追加すると、かえってフィールドの視認性を下げてしまうのです。だからこそ、入力形式の具体例のように「正当な理由」がある場合にだけプレースホルダーを使うことが重要です。

※ マイクロコピーは株式会社オレコンの登録商標です。