さて、今週は「スマホサイトのフォーム最適化」についてお話したいと
思います。
フォームは、ホームページで成果をあげるために非常に大事なポイント
です。
例えば、お問い合わせや資料請求などのフォームを入力する際、
・入力項目が必要以上に多い
・エラーが出て何回も入力しなおしになる
といったことがあると、訪問者はストレスを感じ、入力をやめて離脱し
てしまいます。
フォームのページまで来てくれた訪問者を、いかに離脱させることなく
送信を完了してもらうか・・・
そのためのさまざまな配慮を「フォーム最適化」と呼んだりします。
この「フォーム最適化」、ＰＣ用のサイトでは積極的に取り組まれてい
て、以前に比べると、ストレスなくフォームを入力できるサイトが増え
てきました。
ところが、スマホでホームページを開いてフォーム送信を行うときはど
うでしょう？ＰＣサイト用のフォームがそのまま表示されて、とても入
力しにくかったという経験はないでしょうか？
スマホとＰＣの違い
スマホは、
・画面が小さい
・指で操作する
など、パソコンでホームページを見るのとは異なる点が多々あります。
そのためＰＣサイトとは別に、スマホ用に最適化された「スマホサイ
ト」を用意することが一般的になってきていますが、スマホサイト内の
フォームまでは手が回っていない、というケースも多いようです。
スマホサイト内のフォームもスマホ用に最適化されていないと、入力に
ストレスを感じさせ、離脱の原因となってしまいます。
せっかくスマホサイトを作っても、フォームがスマホに最適化されてい
ないのは、かなりの機会損失といえるでしょう。
スマホサイトのフォームで配慮したい点
それでは、スマホサイトのフォームでは、どのような点に配慮すれば訪
問者にストレスを感じさせずに送信完了してもらえるのでしょうか。
今回は「スマホならでは」のフォーム最適化ポイントを、３つに絞って
ご紹介します。
（１）入力欄を大きくする
スマホは指で操作します。入力欄が小さすぎると、誤って別の箇所をタ
ップしてしまったり、目的の操作ができずにストレスを感じます。
テキスト入力欄やラジオボタン、チェックボックスなどの要素は大きな
デザインのものを表示するようにしましょう。
行間や余白も広めにとると、誤タップが起きにくくなります。
また、ラジオボタンやチェックボックスでは、項目名部分をタップして
もボタンやボックスが選択されるようにしておくと、さらに親切です。
（２）項目名を入力欄の上に配置する
ＰＣサイト用では、入力欄の左に項目名がある「表形式」のフォームが
一般的です。
画面の小さいスマホでは、表形式のフォームにすると、入力欄が画面か
らはみ出してしまったり、入力欄側にフォーカスすると左側が見切れて、
項目名がわからなくなります。
左右のスクロールが頻繁に発生することは、訪問者にとって大変なスト
レスになります。
そのため、スマホ用のフォームでは、項目名を入力欄の上に配置しまし
ょう。
また、入力欄を横に並べるのも避け、必ず縦に並べるようにしましょう。
（３）電話をかけられるようにする
スマホサイトについて考えるとき、意外と忘れがちなのが、「スマホは
電話である」ということ。
画面の小さいスマホでは、長い文章の入力に抵抗を感じる人は少なくあ
りません。そのため「電話できるなら電話のほうが早い」と考える訪問
者は多いものです。
電話発信が簡単にできるという特性を生かして、「電話で問い合わせ
る」というボタンをフォームの上に設置しておきましょう。
クリックすると自動的にコールするボタンであれば、電話番号を入力す
ることもなく電話をかけることができます。
まとめ
スマホサイトでは、スマホ用に最適化した専用フォームを用意しましょ
う。
スマホの特性に配慮した下記のようなフォームを作成しましょう。
・入力欄を大きくする
・項目名を入力欄の上に配置する
・電話をかけられるようにする
なお、スマホサイトの作成方法についてもっと詳しく知りたい方はこちら
をご覧ください。
