効果の最大化を図るWebデザイン・Webマーケティング戦略室

2015.04.08

コンバージョン率アップに繋がるスマホサイト特有の入力フォーム最適化(EFO)6つのポイント

コンバージョン率アップに繋がるスマホサイト特有の入力フォーム最適化(EFO)6つのポイント

あなたはスマホサイトのコンバージョン(※問い合わせや購入・成約などのこと)数が、パソコンサイトに比べて伸びないことに悩んでいませんか?今や無視することの出来ないスマートフォンユーザーのためにスマホサイトを持ったが、効果が発揮されない…。意外とそのような悩みを抱えている方は多いそうです。

では一体、どのようにすればスマホサイトで多くのコンバージョンを上げることが出来るのでしょうか?それは、既存のお問い合わせフォームや資料請求フォームなどを、入力フォーム最適化によってストレスなく快適に入力出来るフォームにすることが重要です。コンバージョン率アップ!入力フォーム最適化(EFO)14のポイントでご紹介したように、入力フォームのユーザビリティ(使い勝手)はコンバージョン数に大きく影響するためです。

しかし上記の記事だけではまだスマホサイトの入力フォーム最適化は完了しません。スマートフォン特有の操作性に合わせた入力フォーム最適化が必要なのです。そこで今回は、「コンバージョン率アップに繋がるスマホサイト特有の入力フォーム最適化(EFO)6つのポイント」をご紹介します!

そもそも入力フォーム最適化(EFO)とは?

そもそも入力フォーム最適化とは何のことなのでしょうか?入力フォーム最適化(Entry Form Optimization)」とは、既存の入力フォームにおいてお客様の入力に対するストレスを最大限に減らし、快適且つ的確な情報入力を促すフォームにすることです。フォームのユーザビリティ(使い勝手)は入力完了率やコンバージョン率に大きく影響するためです。

事実、業界別に見るフォーム入力完了率データがすごい!という記事によると、ECサイトの購入フォームでは65%、人材系会員登録フォームでは14%という入力完了率です。つまり意外と多くのお客様がせっかくフォームまで来てくれたのに、離脱してしまっているのです。原因は様々ですが、やはりフォームのユーザビリティが低いことが主な原因です。

あなたはサイトのコンバージョン率に伸び悩んだ場合、まずは何を見直しますか?コンテンツやデザインを見直す方が非常に多いかと思います。しかし、入力フォームを見直したことはありますか?コンテンツやデザインの見直しも重要ですが、コンバージョンに直結する入力フォームの見直しも重要なのです。だからこそ、入力フォーム最適化をする必要があるのです。

具体的に何をするのか?

入力フォーム最適化の概要とその必要性がご理解頂けたところで、では具体的に何をすれば良いのでしょうか?基本的にはスマホサイトもパソコンサイトも同様で、コンバージョン率アップ!入力フォーム最適化(EFO)14のポイントでご紹介したことをまずは実践してみてください。

しかし、上記はパソコンサイトにおいては十分に入力フォーム最適化が完了しますが、スマホサイトにおいてはまた一工夫が必要です。なぜならスマートフォンは「カーソルではなく指で操作」や「表示領域がパソコンより狭い」など、パソコンとは異なる機能性や操作性を持つためです。次にご紹介するのは、上記の14のポイントに合わせ、6つのスマホサイト特有の入力フォーム最適化の方法をご紹介します!

入力欄やボタンをとにかく大きくしよう!

入力欄やボタンをとにかく大きくしよう!

まず初めに、文字の入力欄やボタンなどの要素をとにかく大きくしましょう!パソコンでは、マウスを利用して細かい操作が可能なので、比較的小さい入力欄やボタンでもクリックすることができます。しかしスマートフォンでは指でタップして操作をするので、比較的大きめの入力欄やボタンでないとクリックしづらかったり、押し間違えが発生してしまうことがあるためです。

事実、モバイル利用動向調査(2012年8月調査)によると、スマホユーザーの9割が「文字が小さい」や「間違った所をクリックしてしまう」などの何らかのストレスを感じているそうです。そのため、タップする要素は最低でも44px以上に設定することが望ましいと「iOSヒューマンインタフェースガイドライン」で決められているほどです。ユーザビリティの高いサイトでは、入力欄では50pxほど、ボタンは30~40pxほどの高さでデザインされていることが多いです。

言われてみれば当たり前のことなのですが、意外とこれが守られていないサイトが非常に多いように感じます。特に日本のウェブサイトは要素が比較的小さめと言われていますから、これを機に変わってもらいたいものですね。要素をとにかく大きくして、入力や選択がしやすいようにしましょう!

出来るだけ入力させないようにしよう!

出来るだけ入力させないようにしよう!

スマホサイトの入力フォームでは、出来るだけ入力の手間がかからないようにしましょう!スマートフォンでの入力はパソコンに比べると大幅に時間がかかります。そのストレスはフォームの離脱率や、誤入力に繋がってしまうためです。

例えば、生年月日を1つ1つ入力するのはとても面倒ですよね?ですから、この場合は入力させるのではなくプルダウンで年月日を選択出来るようにしておきましょう。「選択」で操作が可能なものは、出来るだけ「選択」してもらうということです。入力に対するストレスを感じさせないよう、テキストボックスやチェックボタンなどを適切に使い分けましょう!

キーボードを予め設定してあげよう!

スマートフォンで文字を入力する際に日本語入力や英字入力、数字入力をわざわざ変更させることのないよう、適切なキーボードを予め設定してあげましょう!スマートフォンではキーボードの切り替えが想像以上に面倒なためです。

例えば、郵便番号を入力する際は数字以外を使うことはありませんよね。郵便番号を入力しようとした際に、キーボードが日本語であれば数字に切り替えなければなりません。「そんなのすぐ出来るじゃん」と思われるかもしれませんが、スマートフォンではこの切り替えを繰り返すのが意外と面倒なのです。入力欄にはtype属性を指定することで、切り替えの手間を減らしましょう!

項目名が隠れるのを防ぐために縦方向に配置しよう!

項目名が隠れるのを防ぐために縦方向に配置しよう!

パソコンサイトの入力フォームとは違い、スマホサイトでは項目名と入力欄を縦方向に配置しましょう!パソコンサイトでよく見る「項目名が左にあり、入力欄が右にある」というテーブルレイアウトはNGです。

スマホサイトでは項目名が左にある場合、入力欄やボタンをタップするとそこにズームしてしまい、項目名が見えなくなってしまう可能性があるためです。項目名が見えないと何を入力すれば良いのか分からなくなる上に、項目名を確認する度に縮小しなければならず、非常に使い勝手が悪いのです。

それに入力欄の幅を狭めることにもなりますので、スマホサイトでは項目名と入力欄を縦方向に配置することを心がけましょう!

別タブを開かないで済む設計にしよう!

別タブを開かないで済む設計にしよう!

プライバシーポリシーなどの注意事項は、別タブで開かないで済む設計にしましょう!例えばフワッと表示されるモーダルウィンドウなどがその例です。

パソコンのブラウザとは違い、スマートフォンのブラウザではタブ間の移動が非常に手間で、お客様を迷子にさせてしまうためです。また慣れていないお客様だと、フォームに戻るために別タブ上で「戻る」ボタンを押してしまいます。タブが別なので戻るボタンを押しても何も反応しないのですが、これがフォームの離脱に繋がってしまいます。

お客様を迷子にさせないために、プライバシーポリシーなどの注意事項は、別タブで開かないで済む設計にしましょう!

プルダウンメニュー内の文字数に注意しよう!

プルダウンメニュー内の文字数に注意しよう!

スマホサイトでは、プルダウンメニュー内の文字数に注意しましょう!パソコンに比べると表示領域の狭いスマートフォンでは、プルダウンメニュー内の選択名が長すぎると読めなくなってしまうためです。選択名が読めないと元も子もないので、文字数をしっかり意識しましょう!

まとめ

いかがでしたか?コンバージョンに直結する入力フォームだからこそパソコンサイトの入力フォーム最適化をベースに、スマホサイト特有の最適化を施し、お客様の入力に対するストレスを最大限に減らし、快適且つ的確な情報入力を促すフォームにすることが重要なのです。

合わせて読んでおきたい記事はこちら!

この記事をシェアする