スマートフォン用のフォームの最適化

あるサイトの改善をおこなっているのですが、
驚くことにこのサイトの流入デバイスの8割以上がスマホという結果が
サイトを立ち上げてから3ヶ月での統計でわかりました。

そうなると優先的に改善しないと行けないのが、
スマホ最適化になっているサイトかどうかです。

ただ、こちらサイトは
レスポンシブデザインサイトで作られています。
確かに更新は楽だし、どのデバイスでもある程度はキレイにみれるので、
便利かとは思いますが、
サイトを中心としたレスポンシブデザインなので、
スマホユーザーには何かと使いづらいサイトとなっています。

目的に合わせて一つの改善手段として
レスポンシブデザインを取り入れるのはいいのですが、
トレンドだからとか、更新が楽だからとかなどで安易に取り入れると
コンバージョンにつながらないサイトになりかねないので注意が必要です。

とりあえず、スマホの離脱率は高いながらもコンバージョンはでていますので、
まずは手っ取り早く実施できて、なおかつ効果が高い
フォームをスマホ用に最適化することにしました。
残念なことにフォームはレスポンシブデザインでもありませんので。

フォームの参考にしたのが下記サイトです。
※スマホで閲覧しないとPC版が表示されます
※申し込みフォームに進んで下さい。

・ジョブセンスリンク
http://job.j-sen.jp/

・ランサーズ
http://www.lancers.jp/

参考のポイントしては下記が主に上がります。

・入力項目が少ない
→スマホなので入力は必要最小限に削る必要があります。
もしくはプルダウンメニューなどで、カバーする。

・エラー箇所がわかりやすい
→どこに、どのタイミングで、どんな文言で伝えるのか。
エラーはストレスの原因、簡潔でわかりやすくするのが大切。

・スマホでも入力しやすい
→フォーム項目の大きさは、タップはどこでできるのか、押したら反応はあるのか、入力は半角・全角なのか。

あとは、今回は実験的に jquery mobileも導入してみて
より入力しやすくしてみたいと思います。

・jquery_mobile
http://dev.screw-axis.com/doc/jquery_mobile/