catch-img

スマートフォン向けフォーム作成を行う際に確認すべき5つのポイント

スマートフォンによるネット利用が一般化したことで、いまやどのようなウェブサイトでもスマートフォンの表示形式に最適化することは当然のこととなっています。
ところが企業のお問い合わせフォームなどの各種入力フォームでは、まだまだスマートフォン対応が十分に進んでいません。
このため未導入の企業は早めの対策が求められているといえます。 本記事では、スマートフォン向けフォームの導入を便利なツールで進める際のチェックポイントを5つご紹介します。


目次[非表示]

  1. 1.サイト離脱者防止のため、スマートフォン向けEFO対策は必須
  2. 2.フォームを作成する際に気を付けたい5つのポイント
    1. 2.1.ポイント(1):ツールのマルチデバイス対応を確認
    2. 2.2.ポイント(2):フォローメール設定や自動差し込み機能の存在
    3. 2.3.ポイント(3):入力エリアやボタンを大きめに作る
      1. 2.3.1.入力エリアやボタンを大きめに作るポイント
    4. 2.4.ポイント(4):入力文字数と設問数は最小限に
      1. 2.4.1.ユーザの入力回数を減らすための対策
    5. 2.5.ポイント(5):なるべく画面をスクロールさせない
      1. 2.5.1.画面をスクロールさせないためのポイント
  3. 3.スマートフォンサイト用フォームの作成時のまとめ

サイト離脱者防止のため、スマートフォン向けEFO対策は必須

スマートフォンなどのモバイル端末とPCでは液晶画面の幅が大きく異なります。
PCサイト向けフォームをスマートフォンで表示すると、PCで閲覧した時と比べてボタンやテキストボックスなど各フォームパーツが縮小表示されます。
パーツが小さければフォームの視認性が落ちますし、ユーザーによる誤操作を誘引しかねません。
また不便なフォームはユーザーに強いストレスを与えるため、サイトからの離脱者を増加させる原因にもなります。
このためスマートフォンユーザーのコンバージョン率を高めるためには、フォームデザインをスマートフォン表示に最適化するEFO対策を講じなければなりません。
EFO対策を行うにはフォーム作成ツールが必要になります。 ただし実際にフォームを作る際には、事前に確認すべきポイントがいくつかありますので、以下で紹介していきます。

フォームを作成する際に気を付けたい5つのポイント

ポイント(1):ツールのマルチデバイス対応を確認

基本的なことですが、まずは導入検討中のフォーム作成ツールがマルチデバイス対応しているかを確認しましょう。
PCだけではなく、iPhoneやAndroidなどのスマートフォン表示に対応したフォームが作れるかを事前に調べておくことが大切です。
また、スマートフォン以外にも携帯電話など各種モバイル端末にも対応しているか確認してください。携帯電話の場合、auやdocomoなど各キャリアによって表示形式が異なる可能性もあります。
これらの点もあらかじめチェックしておきましょう。

ポイント(2):フォローメール設定や自動差し込み機能の存在

フォーム作成ツールによっては、アクセスしてきたユーザーのユーザーエージェント情報を自動識別する機能を搭載しているものがあります。
この機能を使えば、PCでアクセスしてきたユーザーにはPC用フォームを、スマートフォンでアクセスしてきたユーザーにはスマートフォン用フォームをそれぞれ表示させることが可能です。
ユーザーの使っている端末に応じたフォームを自動的に振り分けて表示できる便利な機能です。
キャンペーン用応募フォームなど、多様な端末からの流入があらかじめ想定される場合に役立ちます。

ポイント(3):入力エリアやボタンを大きめに作る

ユーザーが操作しやすいフォームを作るためには 回答入力用のテキストボックスや各種ボタンを大きめに設計しておく必要があります。
サイズの小さなテキストボックスはタップしづらく、回答を入力しようとしたユーザーに不要なストレスを与えてしまう原因となります。
おおよその目安として、フォーム上に表示される文字の2倍程度の大きさでボックスサイズを設計しておくとよいでしょう。
またボタンの場合、大きめのサイズで作ることはもちろん、そのボタンがタップできることを視覚的にわかりやすく表しておくべきです。
ボタンに色を付けるほか、影を付けて背景との境界線を設けるなど工夫を盛り込み、ユーザーがそのボタンをタップできることをしっかりと示しましょう。

入力エリアやボタンを大きめに作るポイント

  • フォーム上に表示される文字の2倍程度の大きさのボックスサイズで作成する。
  • ボタンに色を付けさらに線や影を付けて背景との境界を明確にし線をつけ、ボタンがタップできることを視覚的にわかりやすくする。

ポイント(4):入力文字数と設問数は最小限に

スマートフォンでのテキスト入力は全て指先で行うため、PCでの操作時よりも大きな負担をユーザーに与えることになります。
このためスマートフォン向けのフォームを作成する時は、出来る限りユーザーの入力回数を減らせるように設計すべきです。
まずはフォームの入力文字数や設問数を見直し、削れる箇所はできるだけ削っていくなどの対策が必要となります。
このほかにも、テキストボックスではなくプルダウン方式の選択回答式設問を設置する郵便番号から自動的に住所取得を行い住所記入欄に入力してユーザーの手間を省力化する対策も考えられるでしょう。

ユーザの入力回数を減らすための対策

  • テキストボックスではなくプルダウン方式の選択回答式設問を設置する。
  • 郵便番号から自動的に住所取得を行い住所記入欄に入力してユーザーの手間を省力化する。

ポイント(5):なるべく画面をスクロールさせない

PCでサイトを閲覧している場合、スクロールが必要なサイトにアクセスすると、ブラウザの画面端にスクロールバーが出現します。
しかし最近のスマートフォン向けブラウザの仕様では、スクロールバーは常に表示されるようにはなっていません。
このためテキストボックス内部にスクロール領域を設けるフォームデザインを設計してしまうと、スマートフォンユーザーにとって入力しづらいフォームとなってしまいます。
スマートフォン向けフォームを制作する際には、必ずユーザーにスクロールバーが見えていないことを前提に設計するのが望ましいでしょう。

画面をスクロールさせないためのポイント

  • ユーザーにスクロールバーが見えてないことを前提に設計する。

スマートフォンサイト用フォームの作成時のまとめ

スマートフォン利用が一般化した現在、企業サイトの入力フォームをスマートフォン向けに最適化する作業は避けて通れません。
スマートフォン向け入力フォームは、フォーム作成ツールを使うことで簡単に制作できます。
実際にフォームを作る際には各種フォームパーツを大きめのサイズで作り、またツールの自動振り分け機能を活用するなどいくつかの工夫を盛り込む必要があります。

SHOHE URA

SHOHE URA

データマーケティンググループ所属。 マーケティング担当者としてデジタルマーケティング全般に従事。 保有資格:GAIQ(GoogleAnalytics認定資格)