フォームをスマホに最適化するために知っておきたいポイントをご紹介

　今日、Webサイトを閲覧し、何らかのフォーム（注文、お問い合わせ、メルマガ登録など）への入力作業は、デスクトップとスマートフォンの両方で行われています。デスクトップとスマートフォンの比率は業種や用途によっても異なりますが、半数以上がスマートフォンからという場合も少なくありません。

　そのため、フォームをスマートフォンからでも使いやすくしておくことが求められます。もしフォームがスマートフォン用に最適化されていなかった場合、ユーザーはフォームに入力することを躊躇してしまうでしょう。これは、あと一歩で獲得できたはずのコンバージョンを逃してしまうことになります。

　そこで、本記事では、モバイルフレンドリーなフォームを作成することの重要性と、フォームをスマートフォン用に最適化するために知っておきたい重要なポイントをご紹介いたします。

モバイルフレンドリーなフォームが重要な理由

　スマートフォン端末は、以下のような特徴があるため、フォームがモバイルフレンドリーでない場合、フォームの使用に支障が出る場合があります。

　優れたモバイル用のフォームは、これらの特徴を踏まえてデザインされており、スマートフォンからでも良好なユーザー体験を提供し、多くのコンバージョンを獲得することができるでしょう。

　逆に、フォームがモバイルフレンドリーでない場合、スマートフォンからのコンバージョンは減少し、Webサイトや企業に対して不満を抱くユーザーが増加するかもしれません。

　このように、フォームがモバイルフレンドリーであるか否かによって、Webサイトから得られる成果が大きく変わってくる可能性があります。今すぐにでもモバイル用のフォーム作成に真剣に取り組まなければなりません。

フォームをスマホに最適化するための10のポイント

　それでは、ここからはフォームをスマートフォンからでも使いやすくするためのポイントを1つずつ見ていきましょう。

1. フォーム項目の数は最小限にする

　外出先や接続状態が悪かったりするモバイル環境では、フォームの放棄率やエラー率が高くなります。そのため、ユーザーが入力しなければならない項目の数は、最小限の数にとどめましょう。そうすることで入力ミスを防ぎ、フォームの完了率が高くなります。

　すぐに必要ではない先送りできる質問項目は削除し、本当に必要な質問項目のみを残すようにしてください。理想的なのは、フォーム項目は必須の入力項目のみで、任意のオプション入力項目はゼロにすることです。

　フォーム項目の数を最適化する場合、デスクトップ用のフォームでは残して、モバイル用のフォームでは削除するといった柔軟な対応にするのも良い方法です。モバイル用のフォームでは完了率を優先させましょう。

2. 選択肢から選ばせる

　モバイルユーザーがフォーム項目のすべてに文字入力をする必要がないように、可能な限り選択肢から選ばせるようにしましょう。そうすることでフォームへの入力が早くなります。フォームで選択肢を提示するには、いくつかの方法があります。

・チェックボックス
主に選択肢の中から、同時に複数の選択肢を選ばせたい場合に使用します。複数選択可とすることによって、得られるデータが曖昧になりやすいので注意しましょう。

・ラジオボタン
選択肢の中から、1つだけ選ばせたい場合に使用します。選択肢が5つ以下の場合に良く使用されます。

・セレクトボックス
選択肢の中から、1つだけ選ばせたい場合に使用します。選択肢が5つ以上の場合に良く使用されます。

　モバイル用のフォームの場合、選択肢が20を超えるような長いセレクトボックスの使用には慎重になるべきです。ユーザーはセレクトボックスをタップするまで選択肢が見えないことや、長いスクロール操作を行って、選択肢が何順に並んでいるのかを推測しなければなりません。さらに選択するには正確なタップ操作も必要になり、入力ミスやユーザーの不満を招く可能性が高くなります。

　都道府県などの非常に長いセレクトボックスの場合は、郵便番号検索による住所の自動入力や、オートコンプリートのテキストエリアに置き換えるなど、スマートフォンからの入力をサポートする仕組みを導入しましょう。

3. オートコンプリート機能を有効にする

　スマートフォンからの入力時間を短縮する方法として、過去にブラウザで入力した文字を記憶して、次に入力される語句を予測表示するオートコンプリート機能があります。具体的には、ユーザーが配送先の住所などを入力し始めると、残り住所の入力エリアにブラウザに保存された内容が自動入力されます。

　オートコンプリート機能を使うには、ユーザーのブラウザ設定にも依存しますが、フォーム側でもオートコンプリートを有効・無効の設定を行うことができます。特定のフォーム項目ごとに有効・無効を指定することも可能です。

　具体的な設定方法については、＜form＞、＜input＞、＜select＞、＜textarea＞要素に、autocomplete属性を付加します。

設定例

<!-- フォーム全体にオートコンプリートを設定にする場合 -->
<form method="post" action="form.cgi" autocomplete="on">
[…]
</form>


<!-- 特定の入力エリアごとにオートコンプリートを設定する場合 -->
<form method="post" action="/form">
  […]
    <label for="card">クレジットカード番号</label>
    <input type="text" id="card" name="card" autocomplete="off">
</form>

4. モバイルフレンドリーなエラーメッセージ

　適切なエラーメッセージは、ユーザーが正常にフォームを完了する可能性を高めます。逆に不適切なエラーメッセージは、ユーザーの混乱を招き、フォームを完了させる妨げとなります。

　エラーメッセージは、デスクトップでもモバイルでも、曖昧な表現を避け、明確で完結な表現を使い、エラーの内容に応じたメッセージを表示しなくてはなりません。モバイルユーザー向けには、小さな面サイズや、屋外で使用している場合などを考慮して、いくつか気をつけるべき点があります。

5. ピンチによる拡大・縮小の可否を設定する

　スマートフォンの画面に、2本の指をタッチしたまま広げたり、狭めたりするピンチアウト・ピンチインの操作で、不用意にページを拡大・縮小してしまうと、フォームを見失ったり、入力作業に集中できなくなる可能性があります。

　これをコントロールするには、viewport metaタグを使用して、画面の拡大・縮小に関する設定を行います。

設定例

<!-- ピンチによる拡大・縮小ができない設定 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">


<!-- ピンチによる拡大・縮小ができる設定 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">

6. 指で押しやすい送信ボタンにする

　スマートフォンの画面に表示されるフォームの送信ボタンは、指で押しやすいサイズにしておく必要があります。小さなスマートフォンの画面に表示される小さなオブジェクトはタッチ操作が難しくなります。ユーザーが苦労せずとも簡単に押せる大きさのボタンをデザインすることが重要です。

　成人の平均的な人差し指の幅は、15mm前後だと言われています。ピクセルにすると43ピクセルに相当します。送信ボタンの縦幅はこれを下回らないようにし、横幅に関しては、より多くのユーザーに対応するために画面の横幅いっぱいにデザインしておくことが望ましいでしょう。

　また、送信ボタンの大きさだけでなく、送信ボタンの近くには、他のタッチターゲットを置かないことも重要です。よくある例としては、個人情報保護の「同意する」チェックボックスが、送信ボタンに近接している場合などが挙げられます。要素と要素の間には、十分なスペースを確保するようにしましょう。

7. タップした後に送信ボタンを無効にする

　通常、フォームの送信には処理に時間が掛かります。通信速度の遅いモバイル環境であれば尚更時間を要します。

　ユーザーは、送信ボタンを押して、処理に時間が掛かっている場合、押せていないのではと勘違いして、同じボタンを何度も押してしまうことがあります。ユーザーが間違って送信ボタンを2回タップしないように、タップした後に送信ボタンを無効にすることが必要不可欠です。

　送信ボタンを無効にし、押せないような見た目のデザインにすることで、重複送信を防ぐだけでなく、ユーザーに正しくフォームの送信処理が実行されたことを知らせることができます。ユーザーは安心して処理が完了するのを待つことができます。

8. クリアボタンやリセットボタンを入れない

　フォーム内に「クリア」や「リセット」といった、ユーザーが入力したフォーム内のデータを全て消去するボタンは入れるべきではありません。

　こういったボタンは、送信ボタンのすぐ近くに置かれることが多く、ユーザーが誤って押してしまうリスクがあります。これは、スマートフォンの小さな画面ではより起こりやすい問題です。もし入力に手間の掛かる長いフォームであった場合、最初からやり直してもらえない可能性が高くなります。

　そもそも、フォーム内に入力したデータを全て消して、最初からやり直したいという需要はどれほどあるでしょうか？特定のフォーム項目を手作業で消して入れ替える事はあっても、全てやり直したいというのは非常に稀なケースではないでしょうか。多くのユーザーにとって、利用価値の無いボタンであれば、入れるべきではありません。

9. 十分なコントラストを確保する

　スマートフォンを使って、屋外からフォームの入力をする場合も想定して、明るい太陽光の下や、逆に光が少ない夜間など、どんな光の下でも正しくフォームの内容を認識できるようにしなければなりません。例えば、Webサイトでよく使われる薄いライトグレーなどは、強い太陽光の下では、ほとんど色を認識できない可能性があります。

　注意すべき点としては、背景色とフォームのラベルや入力テキストの間に十分なコントラストを確保することです。フォームで使われる一般的な文字サイズ（14〜18px）の場合、背景色とテキスト色のコントラスト比は、1対4.5以上になるように設定すると、屋外でも認識し易くなります。

　ただし、コントラストが高くても、人によっては色覚の異常によって、区別が付きにくい色の組み合わせもあるので注意してください。例えば「赤と黒」「緑と赤」「茶と緑」「ピンクと灰色」「ピンクと水色」「青と紫」などが区別が付きにくい場合があると言われています。

※背景色とテキスト色のコントラス比は、Web上にいくつかのツールが存在し、比率を簡単に調べることができます。

10. スマートフォン実機でフォームをテストする

　フォームを公開する前に、スマートフォン実機を使って必ずテストをしてください。デスクトップブラウザのモバイルシミュレーターや、スマホ端末検証サービスを使って、おおよそのUIをチェックする事は構いませんが、最終的には実際のユーザーと同じようにスマートフォンを手にとって、作成したフォームの使い勝手を体験してみるべきです。

　フォームのユーザーエクスペリエンスを向上させることを意識しながら、室内、屋内、太陽光の下、夜の街灯の下、3G〜5G回線、右手、左手など、いろいろな環境や条件でフォームをテストしてみましょう。デスクトップの画面上では気が付かなかったような改善点を発見できる可能性があります。

まとめ

　いかがでしたでしょうか。ほとんど人がスマートフォンを持ち歩くようになった今、フォームがモバイルフレンドリーであることは非常に重要です。今回ご紹介した10のポイントを参考にしながら、モバイルユーザーにとって使いやすく、多くのコンバージョンが獲得できる効果的なフォームを作成しましょう。

　以下の記事も参考になります。ぜひチェックしてみてください。