スマートフォンもEFO対策してイライラをなくせ！ ｜ SiTest (サイテスト) ブログ

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

それに伴って企業側もスマートフォン向けにウェブサイトを用意しており、ユーザーが快適に閲覧できるような環境は整いつつあります。
 
しかし、ウェブサイト自体はスマートフォン用に最適化されていても、最後の入力フォームやショッピングカートまで最適化できていないケースは散見されます。

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

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

 
 

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

画面サイズを意識する

 
PCとスマートフォンで大きく違う点として、画面サイズがあります。
スマートフォンの場合は画面サイズが小さくなるため、PCよりも項目数や表示のされ方に気を遣う必要があります。
 
画面サイズはiPhoneでは横幅320px、Androidでは横幅360pxが多くなっています。
また、高さはスマートフォンの機種によって横幅以上にバラバラですが、480px～640pxに収まるケースが多いです。
 
なお、iPhone6では横幅360px × 高さ667pxとなっており、今までのスマートフォンより画面サイズは大きくなりました。
しかしそれでも視認できる領域は限られていますので、画面サイズには気をつけましょう。
 

 
 

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

 
PCの場合はマウスを操作してクリックする動作がありますが、スマートフォンの場合は指で押すタップアクションが行われます。
タップを促すボタンなどを設置する時に気をつけたいのが誤タップを減らすことです。
 
誤タップとは、その名の通り誤ってタップしてしまうことです。
これは本来押したくない場所をタップするケースもあれば、押したいと思っている場所がなかなかタップできないケースもあります。

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

 
例えばボタンの大きさを例に挙げると、iOSのガイドラインで「タップ可能領域の最小サイズは44px × 44px」と記述されています(Androidは48px以上を推奨)。
これより小さいと誤タップ(ボタンを押せない)の可能性が高くなってしまうので、最低でもこれより大きくなるように作りましょう。
 
また、タップ領域同士の近さについては Google ウェブマスターツールで確認することができます。
左側のメニューにある「検索トラフィック」から「モバイルユーザビリティ」を選択すると、問題点が表示されます。

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

 
 

回線速度を意識する

 
スマートフォンでの通信環境は年々スピードアップしてきています。
とはいえ、まだまだ回線速度が遅いエリアも存在しており、PCと同等に考えるのは非常に危険です。
 
回線速度が遅いことを考慮した対策では、いかにウェブページの容量を軽くして読み込み時間を高速化できるかが肝と言えます。
画像を使用することを極力避けてCSSで対応するなど注意が必要です。
 
読み込みが遅いとユーザーのフラストレーションは溜まってしまうので、フォーム箇所も含めてユーザーのストレスを軽減できるようにしましょう。
 

 
 

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

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

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

 
 

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

 
PCの場合入力モードの切替はキーボードで簡単に変更できますが、スマートフォンでは項目ごとにいちいち切り替えるのが面倒だと感じやすくなります。
そこで設定しておきたいのが、項目ごとに自動で入力モードを切り替える設定です。
 
例えば電話番号のように半角数字を入力するような項目ではテンキーを表示させ、メールアドレスのように半角英数字を入力する項目ではそのキーボードを表示させることで、ユーザーのストレスは軽減できるでしょう。
 

 
 

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

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

 
参考：楽天トラベル
 
 

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

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

 
参考：やずや
 
 

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

 
これもPCと同様ですが、リアルタイムでエラーを表示させることは重要です。
加えて気をつけたいのが、エラーを表示する場所です。
 
スマートフォンではただでさえ画面サイズが小さいので、視認しやすいような位置(入力欄自体やそのすぐ下など)にエラーを表示させてすぐにユーザーが入力し直せるようにしておきましょう。
 

 
 

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

 
先ほどもご紹介しましたが、スマートフォンではボタンが小さいと「誤タップ」が起きやすくなってしまいます。
それを避けるために、予めボタンは大きいサイズで作っておくことが望まれます。
 
また、これは入力欄にも同じことが言えます。
画面サイズが小さい分、できるだけ大きく表示させてユーザーに見やすくすることを心がけましょう。
 

 
 

SiTest のモニタリング機能とは？

 
SiTest にはEFO対策(フォーム改善)の機能が搭載されていますが、その中でも特に珍しい機能が「モニタリング」です。

これはあなたのウェブサイトに訪れたユーザーが実際にどのようにフォームを入力しているか計測し、 SiTest の管理画面上で再現できる機能です。
 
もちろん個人情報保護法に配慮して実際の入力した文字は収集せず、すべて「*」で表示されますが、どこで離脱しているのか、どこで入力に手間取っているのかを判別することができます。
 

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

しかし、 SiTest のモニタリング機能を活用していただければ、その問題点を見つけることができ、スムーズに改善を行うことができます。
 
 
スマートフォンのEFO対策は、スマートフォンサイトを最適化する際に見落とされがちですが成約に直結する非常に重要な部分です。
力を入れて改善すればするほど効果が見込めるポイントなので、まずは今回ご紹介した改善テクニック、そして SiTest のモニタリング機能を使って改善してくださいね。
 
それでは次回をお楽しみに！