スマホのefoで重要なポイント8選

スマホが全国的に普及した現代において、エントリーフォームの最適化(efo)は欠かせない要素となっています。コンバージョン率を上げるためにも、スマホ利用者に配慮したフォームを作り上げなければいけません。そこでこの記事では、スマホのefoで特に重要なポイントを8つご紹介します。

これらをしっかりと押さえておけば、きっと成果にも繋がるのではないでしょうか。

efoでユーザーの離脱を防ぐ!最適化を行うことで得られるメリット

2カラムより1カラム

パソコンとスマホのエントリーフォームを比較した際、最も異なる部分が画面の大きさです。スマホのディスプレイは片手で収まるほど小さいので、1画面に表示可能な情報量も限られてしまうのです。一般的にパソコンのフォームには、入力ボックスの左側に項目名を表示する表組み(2カラム)が採用されています。

しかし画面の小さなスマホで2カラムのレイアウトを採用すると、入力ボックスや文字サイズが小さくなって全体的に見づらくなってしまいます。スマホのエントリーフォームには、入力ボックスの上に項目名などを表示させる1カラムの方が適していると言えるでしょう。

余白を十分に確保する

スマホはすべての操作を指で行うため、タップする要素が小さかったり、余白が少ないと誤操作を招くきっかけとなります。ユーザーが快適に操作できるよう、隣接する項目の間には十分な余白を設定しましょう。また、文字サイズやラジオボタン、入力ボックスなどの要素もできるだけ大きくすることをおすすめします。

それぞれの要素が小さいと誤操作の原因となるだけではなく、全体的に窮屈な印象を与えてしまいかねないからです。

指の負担を最小限に抑える配慮を

パソコンのキーボードによるテキスト入力とは異なり、スマホは指で細かな操作が要求されるため、ユーザーに負担を強いることになります。そこでなるべくストレスを感じないよう、指に優しいフォーム作りを心がけましょう。

具体的には、郵便番号から自動的に住所を取得する機能を用いたり、生年月日は選択式で代用するなどして面倒な入力作業を省きます。これだけでもフォーム入力に伴う指の負担は大幅に軽減できるはずです。入力の際に使用するキーボードにも配慮しましょう。

通常、スマホで使用するソフトウェアキーボードは入力する項目に合わせて自分で変更します。しかし入力の都度、英字/数字/カナとキーボードの表示を変更するのは不便ですよね。実はHTMLで指定すれば、項目ごとに表示させるソフトウェアキーボードの種類を設定することができます。

例えば郵便番号や電話番号を入力する項目には最初から数字キーボードを表示させます。毎回手動で切り替えを行う煩わしさがなくなるので、ストレスなくフォーム入力してもらえるようになるでしょう。

efoツールの役割とは?成果に繋がるおすすめツール5選!

入力ボックスは極力少なくする

入力ボックスが多いと、その分ユーザーの負担は増えることになります。ただでさえ小さな入力ボックスを細かくタップして移動する作業は、多大な神経を使うのでストレスを感じてしまうでしょう。そんな時は入力ボックスの数を減らして移動の手間を少なくすることが重要です。

一般的には郵便番号が2つ、電話番号は3つの入力ボックスに分かれていますが、これを1つにまとめてしまいます。これで細かくボックス間を移動する手間が省け、ユーザーの負担が抑えられます。入力ボックスを1つにすると、ユーザーは「-」(ハイフン)を入力すべきかどうかわかりにくくなってしまいます。

それを避けるためにも、きちんと「ハイフンは不要」と明記しておきましょう。

ページには無駄なコンテンツを置かない

エントリーフォームにナビゲーションやフッターコンテンツなどを充実させると、ページが縦に長く伸びてしまいます。するとスクロールバーが長くなるばかりか、ページの読み込みに時間がかかるなどデメリットが多くなります。

フォームとの関連性が薄いコンテンツは可能な限りページから排除することが望ましいです。広告などのバナーを表示させていると誤タップしてしまうリスクも出てくるので、無駄な要素は取り除きましょう。スマホは屋外で利用されるケースも多いため、場合によっては劣悪な回線状況で接続されることもあります。

そんな時にページの容量が重いと、タップをしてもなかなか反応しないといった状態に陥りかねません。もし不要なコンテンツを除去してもページの読み込みに時間を要する場合は、プログレスバーを表示させましょう。読み込み状況が視覚的にわかるだけでも、ユーザーのストレスは軽減します。

屋外でもくっきり見えるようにする

太陽の下でスマホが利用されることも考慮して、フォームは見やすいようデザインします。重要なのは背景とテキストのコントラストを明瞭にすることです。背景が白の場合は文字色を黒く、逆に黒い背景であれば文字色は白くしましょう。

これで日中の屋外における視認性が上がります。スマホはただでさえ画面が小さいのに、さらに文字まで見にくいとユーザーはフォームへ入力するのが億劫になってしまいます。もし不安であれば、実際に自分で設定したフォームを日中の屋外で確認してみましょう。

ユーザーの目線に立ってチェックすることは、フォームの質を向上させることにも繋がります。


電話番号を記載する

フォームには必ず電話番号を記載しておきましょう。スマホはパソコンと違って簡単に電話で連絡できるという特徴があります。これを活かさない手はないですね。手間のかかるフォームへの入力ではなく、電話で直接申し込みを行いたいと考えるユーザーもいるでしょう。

電話番号を記載しておけば、そんなユーザーを取り込むことができます。電話番号はタップですぐに発信できるよう、単なるテキストとしてではなくリンクとして設定しておきます。営業時間も一緒に明記しておけば、ユーザーは安心できるはずです。

入力エラーがあった場合の対応策

入力内容に誤りや表記ミスがあった場合、エラーを表示することになります。しかしこのエラー判定を画面の上部などに表示させてしまうと、ユーザーはその度にページを上下にスクロールしなければいけなくなり、大きな負担となります。

ユーザービリティを向上させるためにもエラー判定はリアルタイムで実施し、メッセージは誤りのあった入力項目の近くに表示させましょう。例えば未入力の項目があれば、目立つ赤文字などで「必須項目です」と表示します。

これでユーザーはミスのあった箇所がわかりやすくなり、すぐに修正を行えるようになります。