スマホ入力フォームを最適化する4つの方法

あなたのサイトの入力フォーム、きちんとスマホ最適化してますか？
Webサイトにおいて「いかにフォームからのコンバージョンを獲得するか」は最も重要なミッションです。単にPCサイトのCSSを切り替えて設置しただけでは、スマホに最適化されているとは言えません。操作領域が小さく、使用環境も異なるスマホユーザーに対しては、PCサイトと異なるアプローチが必要です。今回は、特に対応が難しい「膨大な項目数と情報量をもつ入力フォーム」にケースをしぼり、スマホサイトでのページの離脱を防ぐUI改善メソッド（EFO）を前編・後編にわたってお届けします。

▼後編はこちらから
スマホ版入力フォーム改善メソッド（後編）〜入力エラーを未然に防ぐ４つのメソッド〜
/archives/730

当たり前ですが、入力項目は少なければ少ないほどコンバージョンは向上します。ただでさえ入力に時間が掛かるスマートフォン。長すぎるフォームは、見ただけで入力する気が削がれますよね。つまり「ページボリュームを短縮し、いかに入力完了に至るまでの時間を短くするか」が重要な改善ポイントなのです。

そうはいっても「項目数を減らすことは不可能！補足系文言も省略できないし…」とあきらめていませんか？情報過多なコンテンツも、スマホライクなUIを取り入れることで大幅なボリュームダウンが図れますよ。

スマホではスクロールによる読み飛ばしが起こりやすいため、重要な項目を意識的に目立たせる工夫が必要です。構成要素には優先順位をつけ、メリハリが付く配置を心がけましょう。繰り返しつかわれる必須項目などはアイコン化し、単調にみえない工夫をしましょう。

項目ごとに繰り返される記入例によって縦幅のボリュームをとられがち。１スクロールでの表示エリアを広げるためにも、例文はプレースホルダ（テキストボックスの中）に表示して、項目毎の縦幅を軽減しましょう。

補足文のようなボリュームをとりがちなテキスト要素は、全てのユーザにとって表示必須とは限りません。そんな時は、モーダルをうまく活用しましょう。モーダル表示することでデフォルト時のコンテンツボリュームを軽減させ、必要な要素をより目立たせる事ができます。

選択内容によって入力不要となる項目は、デフォルト状態時には非表示にしましょう。
押した項目によってその後の内容を変化させるだけで、余計な項目が減りスマートな印象を与えます。

膨大な項目数をもつ入力フォームは、カテゴリ別に入力ページを分割するのも手です。分割したページはきちんとステップ表示を設けることで、進捗度合を把握することができてストレスを感じにくくなりますよ。

情報過多でスクロールが多い単調なフォームは、ユーザーの混乱を招きページの離脱に直結します。とくに表示領域の狭いスマートフォンでは、膨大な縦幅になるためPCサイト以上に気を使う必要があります。
PC用に作成された入力フォームも、デバイスに応じて表示方法を工夫することで、ページ自体をスマートにしコンバージョンのハードルを下げることができますよ。

次回は後編「入力エラーを未然に防ぐ４つのメソッド」を解説します。