スマホ・モバイルフレンドリーなフォームを作るには？コツやポイントを詳しく解説

　近年、モバイルフレンドリーなWebデザインが当たり前の時代になっていますが、フォームに関してはどうでしょうか？せっかくWebサイトをスマホ用に最適化していても、出口となるフォームがスマホ用に最適化されていなければ、多くのコンバージョンを失っているかもしれません。

　前回の記事「フォームをスマホに最適化するために知っておきたいポイント」では、フォームのデザインや技術的な側面を中心にご紹介しました。本記事では、スマホ用のフォームを作成し始める前に知っておくべき、基本的なノウハウやコツをご紹介します。

モバイルフレンドリーなフォームとは

　モバイルフレンドリーなフォームとは、スマートフォン端末からのインターネットアクセスの増加を考慮して、モバイルファーストで作成された、モバイルユーザーにとって使い勝手の良いフォームのことです。

　つまり、旧来のデスクトップ用に作成したフォームの一部の機能やコンテンツを削って、スマートフォン端末に対応させるというアプローチではなく、先にスマートフォン端末から使いやすいモバイル向けのフォームを設計し、その後にデスクトップ向けにフォームの内容を充実させて行くというアプローチで作成するフォームのことです。

スマートフォン端末とデスクトップ端末の違い

　スマートフォン端末とデスクトップ端末で、特に大きな違いは、以下の3点になります。

1. 画面サイズ

　スマートフォン端末の画面サイズは、通常4.7インチから6.7インチ。一方、デスクトップ端末に使われるモニターの画面サイズは、通常21インチから27インチになります。デスクトップ用に作成したフォームをそのままモバイル用に流用しても、スマートフォンの画面にフィットするわけがないのは明らかです。

2. 入力デバイス

　スマートフォン端末でフォーム入力を行う場合は、通常タッチスクリーン上の仮想キーボードとタップ操作で入力を行います。デスクトップ端末の場合は、物理キーボードとマウスを使った入力になります。スマートフォン端末での文字入力は、デスクトップ端末に比べて難易度が高く、入力に時間が掛かったり、入力ミスが起こりやすくなります。

3. 使用環境

　スマートフォン端末は、屋内、屋外、様々な場所で使用され、使用場所や回線状況によってはインターネット通信が不安定な場合があります。デスクトップ端末は、一般的には屋内の落ち着いた場所で、光ファイバーなどの高速インターネット回線が使用されます。

　上記3点は、いずれも言われてみれば当たり前のことですが、モバイルフレンドリーなフォームを作成する際には、これらの違いをしっかり意識しながら、最適なフォームを設計し、デザインに反映させることが重要です。

自社のモバイルユーザーを意識する

　モバイル向けのフォームを作成し始める前に、自社のモバイルユーザーについて調査を行うようにしましょう。アナリティクスを使えば、Webサイトに訪れているモバイルユーザーについての統計データを調べることができます。

モバイルユーザーの比率

　Webサイトに訪れているユーザーのうち、スマートフォン端末とデスクトップ端末の比率を調べてみましょう。サイト全体、ランディングページ、フォームごとに比率を調べましょう。全体的にスマートフォン端末の比率が高い場合、モバイルフレンドリーなページやフォームを作成する必要性が高いと言えます。

スマートフォン端末の画面サイズ

　アナリティクスから、モバイルユーザーが使っているスマートフォン端末の画面解像度を調べることができます。自社のWebサイトに訪れているスマートフォンユーザーの画面解像度の統計データを把握しておけば、フォームをデザインする際の推奨画面サイズとしての参考データになります。

競合サイトのモバイルフォームを調査する

　競合他社のWebサイトで、モバイル向けのフォームがどのような内容やデザインになっているか、モバイル向けに最適化されているか否か、デスクトップ向けのフォームとモバイル向けのフォームで、何か違いがあるのかなどを調査してみましょう。

　競合サイトのモバイルフォームがどうなっているかがわかれば、自社のモバイルフォームをどのように設計すべきかが明確になってくるはずです。特に意識している競合サイトや、参考にしたいモバイルフォームがある場合は、実際にスマートフォン端末でフォーム入力を体験してみるのも良い方法です。

モバイル専用フォームを別に作らない

　モバイルフレンドリーなフォームを作成する方法として、モバイル専用のフォームをデスクトップ用のフォームとは別のHTMLソースとURLで作成し、ユーザーエージェントによって、表示するページを振り分ける方法があります。

　Googleでは複数のURLを同一ページとして認識する設定をサポートはしていますが、モバイルとデスクトップで別々のURLを使用することは推奨していません。サイトの保守や運用の手間が大幅に増え、技術的な問題が発生するリスクが高くなるためです。

レスポンシブデザインを採用する

　多くの場合、モバイルフレンドリーなフォームを作成する方法として、デバイスの画面サイズに応じて、ページの表示を自動的に切り替えてくれるレスポンシブデザインが採用されます。

　レスポンシブデザインは、モバイル用とデスクトップ用のページを同一のHTMLソースとURLで公開することができるため、モバイル専用フォームを別に作る必要はありません。

　Googleでもモバイルフレンドリーな手法として、サイトへの実装と維持が最も簡単なレスポンシブデザインの採用が正式に推奨されています。

フォームの読み込みを速くする

　前述した通り、スマートフォン端末の使用環境は様々で、全てのユーザーが高速なインターネット回線を使用しているわけではありません。そのため、モバイル用フォームの読み込み速度にも注意をする必要があります。目安としては、フォームの読み込みに2秒以上かかるべきではありません。

　モバイルユーザーがフォームにたどり着いたということは、何かしらのアクションを起こそうとしているということです。読み込みが完了するまでに時間の掛かるフォームは、ユーザーに不安や不満を与え、フォームからの離脱を招く原因になります。

　ユーザー側の使用環境は変えられないため、フォームの読み込みを早くする対策として、フォームフィールドの数やフォーム以外のページ要素を最適化する必要があります。また、使用中のサーバー環境が影響している場合には、より良いホスティングサービスや、フォーム作成ASPへの乗り換えも検討しましょう。

モバイルアクセシビリティを考慮する

　近年、高齢者や視覚障害者のスマートフォン利用率が少しずつ高まって来ています。その要因として、スマートフォン端末の利便性向上や、Webページの読み上げ機能、音声入力機能などの技術向上が挙げられます。しかしながら、いくら端末側の機能が向上しても、Webサイト側のモバイルアクセシビリティが考慮されていなければ、ユーザーを満足させることはできません。

　モバイル用フォームのアクセシビリティを考慮する方法としては、「フォームフィールドの数」「コントラストの高いUI」「派手な色を使いすぎない」「音声読み上げへの対応」「フォームフィールドの音声入力」「ピンチ操作による画面拡大の許可」などが考えられます。また、フォーム入力ができなかった場合に備えて、カスタマーサポートなどにすぐに電話やメールができるようにしておくことも大切です。

モバイルフレンドリーなデザインを採用する

　ここまででご紹介した基本的なポイントをしっかりと考慮しながら、デザイナーはモバイルフレンドリーなフォームを作成するために、ページレイアウトやフォームフィールドのデザインを慎重に最適化して行きましょう。

　具体的なフォームデザインの最適化については、以下の記事で詳しく解説していますので、参考にしてください。

定期的な効果測定を行う

　スマホ用に最適化したフォームを公開したら、定期的な効果測定を行うことを忘れないようにしてください。

　アナリティクスを使って、スマートフォン端末からのフォーム完了率や離脱率の推移を調べることで、フォームがモバイルフレンドリーであるか否かを測定することができます。Webサイトにヒートマップツールを導入すれば、フォームの抱える問題点をピンポイントで見つけ出すこともできるでしょう。

　また、Googleのモバイルフレンドリーテストや、PageSpeed Insightsを使えば、公開中のフォームがモバイル用に最適化されているかどうかを簡単に診断することができます。

まとめ

　いかがでしたでしょうか。スマホ用に最適化したフォームを作成することは、モバイルユーザーとの良好な関係を築くための重要な施策のひとつです。

　今回ご紹介したポイントをひとつずつ慎重に実施することで、モバイル用フォームのユーザー体験を向上させ、コンバージョン率を高めることができるでしょう。