【スマホ向けEFO対策7選】CVRを改善するためのポイントとテクニックを解説

スマートフォンの普及が進み、今やユーザーがスマートフォンから商品を購入したり、サービスに申し込んだりすることは当たり前になってきました。

それに伴って企業側もスマートフォン向けにウェブサイトを用意しており、ユーザーが快適に閲覧できるような環境は整いつつあります。

しかし、ウェブサイト自体はスマートフォン用に最適化されていても、最後の入力フォームやショッピングカートまで最適化できていないケースは散見されます。

そこで、今回はスマートフォンでのEFO対策についてご紹介していきます。

PC同様にスマートフォンの入力フォームも最適化し、ユーザーを逃さないように設計していきましょう。

スマートフォンのフォームをPCと同じように考えてしまうと、ユーザビリティは高まりません。
まずはその違いを認識するところから始めていきましょう。

PCとスマートフォンで大きく違う点として、画面サイズがあります。
スマートフォンの場合は画面サイズが小さくなるため、PCよりも項目数や表示のされ方に気を遣う必要があります。

国内の普及端末であるiPhone6~8,SE(第二世代)のサイズは横幅375px、縦幅667pxとなっております。
iPhoneXや12など画面サイズが大きくなる傾向はありますが、しかしそれでも視認できる領域は限られていますので、項目数や表示のされ方には気をつけましょう。

PCの場合はマウスを操作してクリックする動作がありますが、スマートフォンの場合は指で押すタップアクションが行われます。
タップを促すボタンなどを設置する時に気をつけたいのが誤タップを減らすことです。

誤タップとは、その名の通り誤ってタップしてしまうことです。
これは本来押したくない場所をタップするケースもあれば、押したいと思っている場所がなかなかタップできないケースもあります。

気をつけるべきは押す場所(主にボタンやリンク、フォーム入力欄)を大きめに設計すること、そして押せる場所同士を近づけすぎないことです。

例えばボタンの大きさを例に挙げると、iOSのガイドラインで「タップ可能領域の最小サイズは44px × 44px」と記述されています(Androidは48px以上を推奨)。
これより小さいと誤タップ(ボタンを押せない)の可能性が高くなってしまうので、最低でもこれより大きくなるように作りましょう。

また、タップ領域同士の近さについては Google Search Console で確認することができます。
左側のメニューにある「エクスペリエンス」から「モバイル ユーザビリティ」を選択すると、問題点が表示されます。

その中の1つに「クリック可能な要素同士が近すぎます」というものがあり、これが表示された場合はタップできるもの同士の距離を見直してみましょう。

5Gの登場などスマートフォンでの通信環境は年々スピードアップしてきています。
とはいえ、まだまだPCと同等に考えるのは非常に危険です。

回線速度が遅いことを考慮した対策では、いかにウェブページの容量を軽くして読み込み時間を高速化できるかが肝と言えます。
画像を使用することを極力避けてCSSで対応するなど注意が必要です。

読み込みが遅いとユーザーのフラストレーションは溜まってしまうので、フォーム箇所も含めてユーザーのストレスを軽減できるようにしましょう。

それではここからスマートフォンの入力フォームで実践して欲しい6個のテクニックをご紹介していきます。

PCでの入力フォームは左側にフォーム項目、右側に入力欄が設置されているケースが多いです。
しかし画面サイズが小さくなってしまうスマートフォンでは、このような組み方だと入力欄が狭くなってしまい、ストレスを感じる原因になりかねません。

スマートフォンではラベルを上に持ってくるように組み、画面を広く使って入力できるようにしておきましょう。

PCの場合入力モードの切替はキーボードで簡単に変更できますが、スマートフォンでは項目ごとにいちいち切り替えるのが面倒だと感じやすくなります。
そこで設定しておきたいのが、項目ごとに自動で入力モードを切り替える設定です。

例えば電話番号のように半角数字を入力するような項目ではテンキーを表示させ、メールアドレスのように半角英数字を入力する項目ではそのキーボードを表示させることで、ユーザーのストレスは軽減できるでしょう。

スマートフォンでは入力すること自体が面倒だと感じられるケースもあります。
生年月日(日付)や都道府県など選択項目数が限られている場合には、ドラムロールやモーダルウィンドウを活用することでユーザーの入力ストレスを軽減することができます。

参考：楽天トラベル

PCでも共通のEFO対策ですが、住所は特にスマートフォンの場合に入力する文字数が非常に多いため、面倒に感じやすくなります。

郵便番号を入力すれば住所が途中まで自動で入力されるような設定はスマートフォンの場合必要不可欠と言っても過言ではありません。
少しでもユーザーの手間を省くためにできることを考えるのがEFO対策の基本です。

参考：やずや

これもPCと同様ですが、リアルタイムでエラーを表示させることは重要です。
加えて気をつけたいのが、エラーを表示する場所です。

スマートフォンではただでさえ画面サイズが小さいので、視認しやすいような位置(入力欄自体やそのすぐ下など)にエラーを表示させてすぐにユーザーが入力し直せるようにしておきましょう。

先ほどもご紹介しましたが、スマートフォンではボタンが小さいと「誤タップ」が起きやすくなってしまいます。
それを避けるために、予めボタンは大きいサイズで作っておくことが望まれます。

また、これは入力欄にも同じことが言えます。
画面サイズが小さい分、できるだけ大きく表示させてユーザーに見やすくすることを心がけましょう。

ここまでお伝えした通り、スマートフォンでは画面の小ささから、誤タップや入力間違いなどが頻発します。
そこで、これまでの6つのテクニックを踏まえながら、複数の質問を1質問につき1画面に分割するステップ型フォームへの変更により、コンバージョン率が大きく改善します。

ステップ型フォームは「スマホに最適化されたUI」「視線を固定して迷わず確実な入力を促す」「ページをめくっていくような心地良さを感じる入力体験」などを理由に、ECサイトや求人サイトのフォームで導入が進んでいます。
なお、専用のツールを使用すれば、今のフォームを簡単にステップ型に変更できます。

SiTest にはLPOやEFO対策の様々な機能が搭載されていますが、その中でも特に珍しい機能が「セッションリプレイ」です。

これはあなたのウェブサイトに訪れたユーザーが実際にどのようにページを読んでいるか、フォームを入力しているか計測し、SiTest の管理画面上で再現できる機能です。

もちろん個人情報保護法に配慮して実際の入力した文字は収集せず、すべて「*」で表示されますが、どこで離脱しているのか、どこで入力に手間取っているのかを判別することができます。

これはスマートフォンのEFO対策でも非常に役立つ機能です。

先ほどご紹介した改善テクニックはあくまで一般的な入力フォームに対するものなので、あなたのウェブサイトの入力フォームが固有に抱えている問題点を解決することはできません。

しかし、SiTest のセッションリプレイ機能を活用していただければ、その問題点を見つけることができ、スムーズに改善を行うことができます。

スマートフォンのEFO対策は、スマートフォンサイトを最適化する際に見落とされがちですが成約に直結する非常に重要な部分です。
力を入れて改善すればするほど効果が見込めるポイントなので、まずは今回ご紹介した改善テクニック、そして SiTest のセッションリプレイ機能を使って改善してくださいね。

2週間の無料トライアルも可能です！ ぜひ実際に使ってみて、試してみてください。

無料トライアルはこちら！