スマホ向けEFOの必要性

モバイルファーストインデックスへと強制移行があったように、現在のWEBサイトではモバイルユーザーへの最適化は当たり前といってもいいほど重要であり、これはCVR改善に必要となるEFO（エントリーフォーム最適化）においても同じです。
今回はそんなスマホ向けのEFOについて、気を付けるべきポイントをご紹介します。

スマホのEFOで気を付けるべきポイント！

そもそも、スマホ向けEFOとPC向けのEFOでは、注意点はどのように変わってくるのでしょうか。そのあたりも含めて解説していきます。

レイアウトは1カラムが理想

スマホとPCの大きな違いの一つに、画面サイズの違いがあります。スマホのディスプレイは、片手に収まる程度のサイズとなっているため、PCに比べて1画面内で表示することのできる情報量が少なくなります。
PCの入力フォームの場合、2カラムのレイアウトが多いのではないでしょうか。この場合、表組みを用いて左側に項目名が記載されており、入力・選択エリアは右側に配置されます。
このまま2カラムレイアウトをスマホの入力フォームにも採用した場合、文字サイズや入力ボックスが小さく、見づらくなってしまうため、ユーザーにとってはストレスになるかもしれません。
スマホ向けに入力フォームを作成する場合には、上に項目名、下に入力・選択エリアを配置した1カラムレイアウトを採用するといいでしょう。2カラムレイアウトと比較すると1画面の長さは長くなってしまうものの、ユーザーにとってはパッと見たときにわかりやすく、入力しやすフォームになります。

複数のページに亘って入力フォームが続く場合も離脱率を上げる原因になることがあります。
そのため、1ページで入力を完結させ、さらにフォームの項目数を最小限にすることで、ユーザーの離脱を改善できる可能性があるといえます。
例えば、商品購入からサイトの会員登録に繋げたい場合には、一度に複数のページを使って入力してもらうのではなく、別で入力欄を設けるか、別の機会に会員登録を促すのがオススメです。
なぜなら一度にたくさんの入力を促してユーザーが離脱する可能性を考慮すると、1度購入を済ませ、「次も使いたい」と思ったユーザーに会員登録してもらう方が効率的だからです。

タップ可能なボタンを明確に表示

スマホの入力フォームでユーザーが見落としやすい要素が、タップ可能なボタンです。
PCの場合はマウスをボタンに合わせた際に、色を反転させるなどといったマウスオーバーの表現により、クリック可能であることをユーザーに伝えることが可能です。
しかしスマホの場合、マウスオーバーの表現が機能しませんので、簡単に図形で囲っただけのようなボタンの場合は視認性が低く、ボタンであることを視覚的に伝えられないでしょう。
ボタンだけでなくアイコンを付けたり、背景色・境界線をはっきりと示す、ボタンに影をつけるなど、ボタンがクリック可能であることがしっかりと伝わるようなデザインにしてみましょう。

テキスト入力を減らして選択式にする

スマホでのテキスト入力の場合、PCでのテキスト入力と比較するとユーザーへの負担はより大きいです。PCと違いスマホは指で操作するため、誤入力も多く、それを修正する際にもユーザーに手間や負担がかかるのです。
このようなユーザーの負担をできるだけ減らすためには、可能な限り入力項目は選択式にしてテキスト入力をさせないことや、自動入力機能、郵便番号の検索機能を活用することが考えられます。

▽EFO CUBEなら住所入力補助機能があります
EFO CUBEなら、郵便番号を入力した際に自動で町名までの住所を入力することができ、入力途中でリストからも選択することが可能です。
〇業界最多数26個の入力補助機能を搭載！EFO CUBEの機能一覧ページはこちら

要素を大きくする

スマホは指で操作するデバイスですので、一つひとつの要素が小さい場合、ユーザーにとっては見づらいだけではなく、誤タップや誤入力を起こす原因となってしまいます。
項目名や入力テキストの文字サイズはもちろんそうですが、選択式のそれぞれの項目や入力ボックスなど、入力フォーム内の要素は全体的に大きくデザインしておきましょう。
これは項目ごとの余白についても言えることで、入力フォーム内に選択項目が複数ある場合や選択項目が隣り合っている場合など、それぞれの項目に適切な余白が確保されていなければユーザーの誤タップを招くことになるでしょう。

不要なテキストボックスを減らす

PCの場合にはキーボードのTabキーを使うことで文字を入力しながらでもスムーズに次に入力したいテキストボックスに移動できますが、スマホの場合には毎回入力したいテキストボックスをタップしなければなりません。
テキストボックスの煩わしさが顕著になる例として、電話番号や郵便番号の入力ボックスが挙げられます。
大抵は郵便番号を2つのボックスに、電話番号を3つのボックスに分けて入力するパターンが多いと思いますが、わざわざボックスを分けず、1つの入力ボックスに統一した方がユーザーにとっては手間にならないでしょう。
データベースに格納するためにボックスを分けなければならないなど、管理側の都合によっては仕方ない場合もあるかもしれませんが、ユーザーを第一に考えるのであれば、テキストボックス間の不要なタップは減らすべきです。

さらに注意したいのは「-（ハイフン）」についてです。1つのテキストボックスに入力できるように改善したとしても、ハイフンを含めて入力するのか、ハイフンは必要ないのかでユーザーは混乱するでしょう。ハイフンを入力しようとする場合、ユーザーは各々キーボードを切り替えて入力しなければならないため、ここでも誤操作が引き起こされる可能性があるでしょう。ハイフンが不要であることを明確に記載して、ユーザーの混乱を避けましょう。

プルダウンメニュー内の文字数は少なめに！

レスポンシブデザインの入力フォームによくあるケースなのですが、PCではきれいに表示されているにも関わらず、スマホで表示してみるとプルダウンメニュー内の文字数が多く、選択項目が一部しか確認できないということがあります。

スマホはPCのように表示できる範囲が広くはないため、プルダウンメニュー内の文字数が多すぎると途中で見切れてしまうので、注意が必要です。

入力形式によってキーボード表示を変更する

テキストを入力する際、小さなストレスとなるのがキーボードの切り替えです。PCのキーボートとは異なり、スマホの場合には英字や数字を入力する際にキーボードを切り替えて入力する必要があります。この時、入力すべき項目に合わせて入力形式に合ったキーボードを表示させることが可能です。
例えばメールアドレスを入力するボックスをタップした場合には“英字キーボード”を表示し、電話番号や郵便番号を入力するボックスをタップした場合には“数字キーボード”を表示されるように設計しておけば、ユーザーにとって面倒であるキーボードの切り替えをなるべく無くすことができるのです。

まとめ

今回解説した要素一つひとつは小さなことですが、その小さな配慮を積み重ねることでユーザーのストレスを減らし、大きな結果をもたらします。
PCだけでなくスマホでもユーザーが快適に操作できる入力フォームを目指して、改善点を探っていきましょう。
電話番号について忘れがちですが、スマホはPCに比べて電話でのコンバージョンを取りやすいデバイスですので、電話での問い合わせを受け付けている場合には必ず、タップして電話発信ができるように電話発信用のリンク設定を行っておきましょう！

また、EFO CUBEには多彩なフォームに対応するために、業界最多数である26個の入力補助機能を搭載しています。どの機能を搭載するべきかは、過去の実績とヒアリングからご提案させていただきますので、お気軽にお問い合わせください。
〇お問い合わせはこちら