スマートフォンのフォーム特有の改善ポイントは多くありますが、
今回はとくに、スマートフォンを利用するユーザーを取り巻く通信環境にスポットをあてながら、改善ポイントを考えていきたいと思います。
ダウンロード速度の遅さ
スマートフォンを利用するとき、wi-fi環境であればさほど回線速度に問題は感じないかもしれませんが、多くのユーザーはモバイル通信でページを閲覧する機会が多いと思います。
モバイル通信の速度はかなり進化しており、4G（LTE）環境下ではPC向けのWEBページでもダウンロード速度にそこまでストレスは感じなくなってきているように思います。とはいえ対応エリアの拡大は現在進行中で、都市部を除くと３G環境でしか通信できないエリアはまだまだ多いように思います。
ダウンロード速度が遅く、ページをなかなか表示することができずイライラした経験はスマートフォンユーザーであれば誰しも感じたことがあるかと思います。
当然、このイライラはフォームからの離脱を招いてしまうでしょう。
この点を解決するにはページの容量を軽くするという対策が効果的です。
ページのファイル容量を抑える具体的なテクニックを何点か挙げてみましょう。
スマートフォン用のページを用意する
基本中の基本ですね。小さい画面用に最適化されたスマートフォン用のページは、単純な見やすさ・使いやすさのほかにもページ容量を抑えてくれる効果があります。
ただし、レスポンシブデザインでスマートフォン用対応をおこなっている場合は要注意。
PCページで使用しているコンテンツを単純に見た目上隠していたとしても、読み込み処理自体は発生してしまうためにダウンロード速度は改善されませんので注意しましょう。
ファイルサイズの大きな画像の利用や、画像多用を控える
ファイルサイズを大きくしがちなのは画像。スマートフォンではなるべく大きな画像を使わないというのも手です。
それが難しい場合、同じ大きさの画像でも書き出しの形式によってはファイルサイズをぐんと抑えることができるので、ファイル形式や書き出し方法を確認してみましょう。
また、画像ひとつひとつのファイルサイズに加え、画像の点数も読み込み速度に影響を与えます。
CSSスプライトという方法を取ることで、細かいアイコン類などの画像を１つの画像ファイルから表現することが可能ですので、ぜひ採り入れてみてください。
そのほか、できるだけ画像を使わずCSSなどを用いて装飾すると良いでしょう。
その他リッチコンテンツの見なおし
javascriptや動画、外部コンテンツの呼び出などは読み込み速度に影響を与えます。
特に盲点になりがちなのはfacebookの「いいね！」やTwitterの「ツイートする」などのソーシャルボタン類。
フォームに設置する必要性も薄いと思いますので、できるだけページから削除しておくのが吉です。
接続の安定性
モバイル通信では回線速度の問題だけではなく、接続の安定性という側面も考慮しなくてはなりません。
電波が弱い場所では接続が不安定になりがちですし、車や電車などで移動している場合はとくに、途中で接続が途切れてしまうケースが発生しやすくなります。
入力内容を保持する
フォームを送信しようとして万が一接続が途切れてしまったとき、これまでの入力内容がすべて消えてしまったら…？
また一から入力しなおしてくれる根気のあるユーザーは多くはないと思います。
たとえ途中で切断されてしまっても、入力された値を復元できるようなフォームにしておきたいですね。
フォームの遷移回数＝切断リスクを減らす
フォームが送信完了に至るまでの画面読み込み回数が多ければ多いほど、途中で接続が切断してしまうリスクも大きくなります。
つまり、入力画面や確認画面などの遷移回数を減らすことにも効果がありそうです。
会員登録など簡単なフォームであれば確認画面を省略してしまったり、モバイル用のフォームでは入力項目を減らして複数の入力ページをひとつにまとめるなどの工夫が有効です。
最後に
いかがだったでしょうか。本日はスマートフォン利用者の通信環境に応じた対象方法を考えてみました。
完全な通信環境でなくとも、ユーザーがなるべくストレスを溜めてしまうことのないスマートフォンフォームづくりを心がけたいですね。
