メニューボタン閉じるボタン

スマートフォンでもEFO対策を。6つのテクニックを紹介!

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

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

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

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

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

スマートフォンで意識して欲しい3つのポイント

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

画面サイズを意識する

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

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

iPhone8の画像サイズ

 

「タップ」というアクションを意識する

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

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

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

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

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

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

Google サーチコンソール

回線速度を意識する

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

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

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

回線速度

スマートフォンでのEFO対策テクニック

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

1.フォームのラベルは上に持っていこう

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

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

ラベルを上に

2.入力モードを切り替えよう

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

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

入力モードを切り替えよう

3.ドラムロールやモーダルウィンドウを活用しよう

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

カレンダー

参考:楽天トラベル

4.自動入力を設定しよう

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

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

自動入力設定をしよう

参考:やずや

5.エラーはリアルタイムで視認しやすい場所に表示させよう

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

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

エラーはリアルタイムで表示

6.ボタンも入力欄も大きくしよう

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

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

ボタンも入力欄も大きくしよう

SiTest のセッションリプレイでEFO対策のヒントを

SiTest のセッションリプレイ機能とは?

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

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

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

モニタリング

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

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

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

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

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

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

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

グラッドキューブは
「ISMS認証」を取得しています。

認証範囲:
プロモーション事業部、プロダクト開発、メディア事業部
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業

「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。

いますぐ無料で
お試しください。

SiTest の革新的な機能を、
1か月間無料でお試しいただけます。
利用規約

お名前【必須】
メールアドレス【必須】
電話番号【必須】