みなさん、エントリーフォームを制作する際、どのような施策をおこなっていますか？ コンバージョン率をあげるために、入力項目を見直したり、入力ステップを明確にしたりなど、ユーザーがストレスを感じないように入力フォーム最適化（EFO対策 = Entry Form Optimization）をおこなっていると思います。
サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。
※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザイン面でのベストプラクティスを紹介したものではありませんのでご了承ください。
自動入力機能に対応しよう
Google Chrome(デスクトップ/iOS/Android)とSafari(OS X/iOS)ではフォームに自動的に連絡先を入力する機能があります。動画で紹介しているように、自動入力機能を使えばわずらわしい入力を一発で済ますことができます。
この機能をブラウザで使うには次の設定をおこないます。
- Google Chrome
- Safari
誰もがこの機能を有効にしているわけではありませんが、この機能を普段から使っているユーザーからすれば負担が少なくなります。ただでさえ離脱率が高い入力フォーム。少しでも離脱率を改善するために、自動入力機能を施策として実施してみるのは効果的ではないでしょうか。次にデモとソースコードを掲載していますのでお試しください。
まずはこの自動入力機能に対応させるためのinput要素の書き方を解説します。
autocomplete属性の書き方
<input type="text" name="name" autocomplete="name">
input要素にautocomplete属性を設定することで、フォームへの自動入力を有効にできます。この属性を適切に設定することで、ユーザーはブラウザーに登録している情報を自動で入力できます。代表的な項目を以下にまとめました。
name: 姓名family-name: 姓given-name: 名email: メールアドレスpostal-code: 郵便番号address-level1: 都道府県address-level2: 市区町村address-line1: 番地・マンション名（1行目）address-line2: 番地・マンション名（2行目）organization: 会社名off: 自動入力を無効にする
その他、生年月日や性別、クレジット情報の項目などもあります。詳しくはWHATWG（ワットダブルジー）が提供している「WHATWG Standard」 のAutoFillについての仕様をご覧ください。
autocomplete属性は、セキュリティの観点からoffにしているWebサイトも多いですが、現在はほとんどのブラウザーで無視されてしまうため、offに設定してもあまり意味がありません。自動入力を使用しているユーザーがいるのであれば、そのユーザーが利用しやすいように設定しておくべきだと思います。
この属性を設定するうえでの注意点と工夫としては次となります。
- 姓名はフォームを分離しない。姓(
family-name)と名(given-name)の解釈がSafariとChromeで異なるため、「姓名」で一つのフォーム(name)にするのが無難である - 都道府県は
select要素だと自動入力が効かないため、input要素にする - 生年月日の自動入力はSafariのみ有効。Chromeは未対応
input要素のname属性の値を適切に設定する
✕ NGの例
<input type="text" name="YBBG">
◯ OKの例
<input type="text" name="postal-code" autocomplete="postal-code">
各サイトのエントリーフォームを見ていると、サイトによりname値の命名規則はさまざまです。例えば姓をname1やfamilynameとしているサイトや、郵便番号をzipやpostal、ひどい場合だとYBBGとしているなど統一されていません。
name値は、前項で紹介したautocomplete属性が設定されていない場合、name値の名称を見てブラウザー側が自動入力する情報を判断しているように見受けられるため、適切な名称を設定するべきであると思います。無難なアイデアとしてはautocomplete属性で定義されている名称で設定します。autocomplete値を設定せずname値が適当なものだと、自動入力が働かなかったり、逆に意図しない場所に入力されてしまうなど、余計にユーザーの手間がかかる場合があります。name属性を指定する際は注意して設定しましょう。
昔ながらのフォームのセオリーから脱却しよう
みなさんは住所入力で全角入力が強制されうんざりしたことはありませんか？ 番地を入力したところ「全角で入力してください」と弾かれてしまうケースです。全角数字と半角数字はサーバーサイドで簡単に変換処理できますが、「フォームのセオリー」という名のもとエンジニアの怠惰により変換処理(もしくは受け入れ)が実装されていないことがほとんどです。その場合、ユーザーがわざわざ半角数字を全角数字で入力しなおさなければなりません。
このような不便なことがないようにシステムエンジニアと相談し、使いやすい入力フォームを目指しましょう。次に、簡単に改善できる対策をまとめました。
- 電話番号や郵便番号のフォームを複数にわけない。自動入力が効かないことも理由の一つだが、そもそも手入力でも煩わしい。モバイルフレンドリーではない
- 住所の数字を全角入力必須としない。全角/半角はいずれも可とする。ユーザーのリテラシーによっては全角半角の区別がつかないため
- 読み仮名欄でカナかなが異なっていたらサーバーサイドで変換するべき
次のページでは、スマートフォンサイト制作時に考慮すべき点について説明します。
