ノウハウ集&コラム

日々のSEO対策の運用に役立ちそうなノウハウやtipsなどをご紹介しております。ご活用ください。

スマホのフォームの完了率を上げるautocomplete属性とその他ノウハウまとめ

更新日:
autocomplete属性

WEBコンサルタント『サーチサポーター』の代表、敷田憲司です。

 

昨日の記事「ライバルサイトより一歩先へ!入力フォームの見直しでスマホ対応に差をつけよう」では、スマートフォンの入力フォームの使い勝手をよくすることで、ユーザーの離脱率を下げることをご提案しました。

 

今日は更にそれに付随して「autocomplete属性」を使うことでフォーム入力をしやすくすることで離脱率を下げ、フォーム入力の完了率も上げる方法をご紹介します

 

autocomplete属性って何だろう?

autocomplete属性を簡単に説明すると、ウェブ上の各サイトでオンラインフォームを入力するたび、氏名、メールアドレス、電話番号、住所などの情報を繰り返し入力することになるのですが、この手間や入力間違いを防ぐために自動入力を促す仕組みを実現したものです。

 

以前はChromeブラウザのみサポートされていた技術でしたが、現在では、最新のWHATWGのHTML標準(英語)に準拠する形でその他のブラウザでも「autocomplete」属性が完全にサポートされています。

autocomplete属性でフォームをマークアップすれば、ユーザーの手間を大幅に省くことが出来るので離脱率を下げるのはもちろん、フォーム入力の完了率も必然的に上がることになります。

 

具体的な実装方法は、下記のコードをマークアップすることで実装します。

<input type=”email” name=”customerEmail” autocomplete=”email”/>

(Googleより「サンプルフォーム」が提供されています。)

 

※ 画面表示の例 (メールアドレスを選択するだけで、簡単に入力が行えます。)

autocomplete属性autocomplete属性autocomplete属性

 

フォームの最適化の威力は絶大!

autocomplete属性の実装に限らず、フォームを使いやすくする、最適化を行うとかなりの威力、効果となって表れます。

ここではいくつか例を挙げてみます。

 

1.EFOを行い入力フォームの申込み完了率が2倍になった成功事例|Ferret

フォームのデザインギャップに着目し、画像、テキストを修正した事例です。

更に使い勝手をよくする(ユーザビリティを上げる)ために、必須項目と任意項目についても明確に記載することによって、改善以前の申し込み完了率が7%だったものが改善以後の申し込み完了率は16%と、CVR(コンバージョンレート)は実に2倍以上にまで伸びています。

 

2.EFOで、コンバージョン数が導入前の1.67倍UP ! 株式会社ウェルクス様の会員登録フォーム導入事例|Gyro-n

実際のEFO導入におけるABテストの結果を紹介した記事です。

必須入力、選択設定と入力支援の設定を行うことでCVRは1.67倍に。

確定率(エラーのない状態で確認ページへ到達した確定数の割合)、フォームの直帰率も改善される結果となっています。

 

3.スマホサイトのEFO(フォーム最適化)で爆発的成果を出すための5原則 | LPO研究

「要素をとにかくデカくしろ」「キーボードを変えさせるな」など、5つの原則を用いることをライフネット生命のフォームを例にして解説しています。

PCサイト向けのフォーム改善「【保存版】問合せを劇的に増やすエントリーフォーム最適化(EFO)15の方法 | LPO研究所」も併せてご覧ください。

スマホで楽に入力!

楽に入力できるのはいいね!

 

 ユーザビリティの改善も立派な施策

サイトの使い勝手(ユーザビリティ)をよくすることで、ユーザーのストレスを軽減することも立派な改善施策だといえます。

入力フォームに限って言えば、昨日の記事にも書いたとおりに「ユーザーが極力ストレスを感じないようにすること」が基本的な考え方となります

 

また、このような内部改善は外部改善と比べると、目に見える数字、結果としてすぐに表れることはありませんが、基礎となりえる改善であるため、長期的な効果が期待できます。

SEOで外部対策のことばかりを考えるのではなく、こうしたサイト改善、内部対策にも目を向け、是非実施してみてください。

 

最後に。

入力フォームの改善をはかることはもちろんですが、肝心要のモバイルフレンドリーテストについてもしっかりと実施して、合格を目指してくださいね!

 

※ 参考

スマホ対応必須!1か月後のGoogleアルゴリズム更新の基礎知識と対応方法まとめ

  • Twiiter
  • Facebook
  • Hatena
  • GooglePlus

この記事を書いた人

敷田憲司

敷田憲司

WEBコンサルタント『サーチサポーター』代表。 WEBで探してもらえるよう、注目されるようにサポートします。 コンテンツの企画立案だけでなくSEO、SEM、アクセス解析などの集客、運用、分析も行い、お客様の状況、目的に合わせて優先度をつけてご提案しています。 趣味はサッカー観戦とフットサルです。

ブログ:『検索サポーター

その他のノウハウ集&コラム
SEO対策事例