Optimization)をおこなっていると思います。サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザイン面でのベストプラクティスを紹介したものではありませんのでご了承ください。Chrome(デスクトップ/iOS/Android)とSafari(macOS/iOS)ではフォームに自動的に連絡先を入力する機能があります。動画で紹介しているように、自動入力機能を使えばわずらわしい入力を一発で済ますことができます。この機能をブラウザで使うには次の設定をおこないます。マイナビニュース誰もがこの機能を有効にしているわけではありませんが、この機能を普段から使っているユーザーからすれば負担が少なくなります。ただでさえ離脱率が高い入力フォーム。離脱率を改善するために、自動入力機能を施策として実施してみるのは効果的ではないでしょうか。次にデモとソースコードを掲載していますのでお試しください。デモを別ウインドウで再生するソースコードを確認するまずはこの自動入力機能に対応させるためのinput要素の書き方を解説します。autocomplete="name">input要素にautocomplete属性を設定することで、フォームへの自動入力を有効にできます。この属性を適切に設定することで、ユーザーはブラウザーに登録している情報を自動で入力できます。代表的な項目を以下にまとめました。自動入力を無効にするその他、生年月日や性別、クレジット情報の項目などもあります。Standard」のAutoFillについての仕様をご覧ください。autocomplete属性は、セキュリティの観点からoffにしているWebサイトも多いですが、現在はほとんどのブラウザーで無視されてしまうため、offに設定してもあまり意味がありません。自動入力を使用しているユーザーがいるのであれば、そのユーザーが利用しやすいように設定しておくべきだと思います。この属性を設定するうえでの注意点と工夫としては次となります。姓名はフォームを分離しない。姓(family-name)と名(given-name)の解釈がSafariとChromeで異なるため、「姓名」で1つのフォーム(name)にするのが無難である都道府県はselect要素だと自動入力が効かないため、input要素にする生年月日の自動入力はSafariのみ有効。autocomplete="postal-code">各サイトのエントリーフォームを見ていると、サイトによりname値の命名規則はさまざまです。姓をname1やfamilynameとしているサイトや、郵便番号をzipやpostal、ひどい場合だとYBBGとしているなど統一されていません。name値は、前項で紹介したautocomplete属性が設定されていない場合、name値の名称を見てブラウザー側が自動入力する情報を判断しているように見受けられるため、適切な名称を設定するべきであると思います。無難なアイデアとしてはautocomplete属性で定義されている名称で設定します。autocomplete値を設定せずname値が適当なものだと、自動入力が働かなかったり、逆に意図しない場所に入力されてしまうなど、余計にユーザーの手間がかかる場合があります。name属性を指定する際は注意して設定しましょう。番地を入力したところ「全角で入力してください」と弾かれてしまうケースです。全角数字と半角数字はサーバーサイドで簡単に変換処理できますが、「フォームのセオリー」という名のもとエンジニアの怠惰により変換処理(もしくは受け入れ)が実装されていないことがほとんどです。その場合、ユーザーがわざわざ半角数字を全角数字で入力しなおさなければなりません。このような不便なことがないようにシステムエンジニアと相談し、使いやすい入力フォームを目指しましょう。次に、簡単に改善できる対策をまとめました。電話番号や郵便番号のフォームを複数にわけない。自動入力が効かないことも理由の1つだが、そもそも手入力でも煩わしい。モバイルフレンドリーではない住所の数字を全角入力必須としない。全角/半角はいずれも可とする。ユーザーのリテラシーによっては全角半角の区別がつかないため読み仮名欄でカナかなが異なっていたらサーバーサイドで変換するべき最適なキーボードを設定するデスクトップブラウザーだけでなく、スマートフォンでも多くのユーザーがフォームを利用しています。キーボードを適切に設定されていないと入力時にユーザーがストレスを感じてしまい、コンバージョン率の低下につながります。下記は一例ですが、入力項目に応じて適切なキーボードを設定しましょう。autocomplete="email">type="email"と指定すると、iOSでの場合はUSキーボードが起動し、[Space]の横に@や.のボタンが表示されます。autocomplete="tel">type="tel"と指定すると、テンキーのキーボードが起動します。Correct)が動作します。文章を入力する際はこれらの補助機能は便利なのですが、フォームでのユーザー名の入力などでは意図した文字が入力できなかったりと、ユーザーにストレスを与えてしまいます。autocorrect="off"とautocapitalize="off"を設定し、これらの機能が不要な項目では設定を無効にしましょう。"入力内容を破棄します。再度やり直してくれればよいですが、そのまま離脱してしまうケースもあると思います。上記のJavaScriptを実装しておくと、画面遷移時に警告を出し、誤って閉じてしまうケースを無くせます。Safariには対応しておりません。おわりにエントリーフォームの最適化は、サイト設計やデザイン面だけでなく、コーディングフェーズでも考慮すべき点は多くあります。コーディング時に上記のようなちょっとした対応を行うだけで、ユーザービリティーが大きく向上します。マークアップエンジニアの方もコンバージョン率アップのために意識して制作をおこないましょう。平成29年6月29日に内容をメンテナンスしています。真耶インタラクティブデベロッパー。Web制作会社でサーバサイドやフロントエンドの制作に携わり、現在は株式会社ICSでインタラクティブコンテンツの制作を担当。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。