スマホサイトのフォームで成果を出すノウハウを解説！おすすめの作成ツール5つも紹介

日本のスマートフォンの普及率（個人）は、総務省の「通信利用動向調査」によると67.6％です。Webサイトやフォームを運営するにあたって、激増しているスマホユーザーの動向は無視できません。特に、スマホサイトのフォームデザインの最適化は必須です。

この記事では、どうすればスマホサイトの入力フォームで成果を出せるかを知りたい方向けに、スマホフォームにおけるデザインのコツを解説します。

ユーザーがストレスなく閲覧・入力できるフォームにするコツとあわせて、スマホフォームを作成できる便利なツールも紹介するので、ぜひ参考にしてください。

【最短30秒】クリック操作だけでスマホフォームを作成できるフォーム作成ツール「formrun」はこちら！

住所の自動入力やリアルタイムのエラー表示、確認画面の設置にも対応！無料でも利用できるのでまずはお試しください。

目次

1. スマホのフォームで成果を出すためのコツ11選
2. スマホのフォームを負担なく作る方法
3. おすすめのスマホフォーム作成ツール5選
4. スマホフォームを最適化して成果を最大化

スマホのフォームで成果を出すためのコツ11選

スマホの入力フォームで成果を出すためには、スマホサイトならではの工夫が必要です。ここでは11のコツを挙げ、それぞれについて解説します。

1.項目を縦方向に配置する

スマホサイトの入力フォームは項目を縦方向に配置しましょう。PCのサイトであれば、項目を横方向に並べても画面上でまとめて見ることができるものの、スマホ画面は縦長の長方形なので、横配置では閲覧・入力がしにくくなります。

スマホの画面を横に回転させれば、横配置でも比較的スムーズに閲覧できるでしょう。しかしスマホを横に傾けること自体、ユーザーにとってはストレスになり離脱の原因となります。

加えて、サイドバーのない1カラムのフォームデザインにすれば、スマホ画面を最大限活用した配置が可能です。

2.フォントをスマホで読みやすいサイズにする

スマホのフォームを見やすくするには、スマホ画面に適したフォントサイズにすることが重要です。フォームを開いたときにフォントが見にくいと、ユーザーは即座に離脱します。

スマホ画面に文字が詰まったように見えず、適切なスクロール回数に抑えられるフォントサイズにしなければなりません。

一般的に、スマホフォームでのフォントサイズは「16px」が良いとされています。Yahoo! JAPANやAll Aboutなど多くのスマホサイトでも、本文のフォントサイズを「16px」に設定しています。

回答欄や文字数とのバランスをとる必要はありますが、まずは16pxを基準とするのがおすすめです。

3.文字数・項目数を絞る

スマホサイトの入力フォームでは、文字数や項目数を絞ることを忘れてはなりません。

フォームの画面内に文字や入力項目が多いと、ユーザーは内容を読むことや入力を面倒だと感じ、離脱してしまいます。文字数や項目数を絞ることは、ユーザーの利便性向上に直結するのです。

スマホサイトは表示領域がPCよりも制限されるため、盛り込める情報量も少なくなります。ユーザーが読みやすいよう適度な余白を入れることも考慮すると、文字や項目の数は必要最低限にすべきです。

4.選択肢が多い項目ではプルダウン形式にする

問い合わせフォームには、都道府県や生年月日をはじめとした選択肢の多い項目があります。そのような項目の回答欄は、プルダウン形式にしましょう。

選択肢が数個程度に限られる項目であれば、ラジオボタン形式で並べても問題ありません。しかし、何十もある選択肢すべてを並べてしまうと画面が選択肢だらけになり、ユーザーに強いストレスを与えることになります。

プルダウン形式であれば回答欄が1つで済むので、見た目もスッキリします。項目の内容に合わせて、テキスト入力・ラジオボタン・プルダウンなどの回答形式を使い分けましょう。

5.ハイフンの入力を不要にする

スマホサイトで成果を出したいなら、ハイフンの入力が不要なフォームデザインにしましょう。

スマホのフォームでは、郵便番号や電話番号のようにハイフンが入った情報を入力する場合があります。スマホでハイフン付きの郵便番号や電話番号を入力するには、数字から記号へと入力形式を変える必要があります。

1つの項目を回答するためにいちいち形式を切り替えるのは、ユーザーにとって手間でしかありません。ハイフンがなくても必要な情報は伝わるので、同じ入力形式ですべて入力できるように配慮しましょう。

6.入力内容に合ったキーボードにする

スマホフォームの回答欄は、入力内容に合ったキーボードを自動で表示するよう設定しておきましょう。

氏名なら日本語、郵便番号や電話番号なら数字、メールアドレスなら英数字と、入力に適したキーボードは項目によって様々です。ユーザー自身にキーボード変更をさせるフォームデザインだと、面倒に感じてすぐに離脱されてしまいます。

回答欄をタップした時点で最適なキーボードに自動で切り替われば、ユーザーの手間が1つ減ることになり、自然と回答率はアップするでしょう。

7.郵便番号自動入力を利用する

スマホフォームに住所の入力欄を設置する場合は、郵便番号自動入力を利用しましょう。郵便番号自動入力を利用すれば、ユーザーが入力するのは残りの町名や番地、マンション名だけで済むため、ユーザーの負担を大きく軽減できます。

また、郵便番号の一部を入力するだけで候補が表示されるようにする「サジェスト機能」を使えば、入力がさらに楽になるので離脱率を抑えられるでしょう。

8.タップできることがわかるようにする

スマホ用のフォームに設置する項目は、ひと目でタップできることがわかるようなデザインにしましょう。タップできることがわかりにくいと、ユーザーの利便性が低下するうえ、入力ミスも増えます。

タッチパネル式のスマホではマウスオーバーのような表示はできないため、回答欄の装飾を変化させるのがおすすめです。タップできる欄の枠を太くする、入力不要な欄を網掛けにするなど、視覚的な工夫を施しましょう。

9.テキスト入力を減らす

スマホのフォームでは、できるだけテキスト入力の項目を減らすようにしましょう。
テキスト入力の項目と選択形式の項目では、ユーザーの負担が少ないのは明らかに後者です。

テキスト入力の際にちょっとしたタップミスをしただけでも、ユーザーの入力意欲は削がれてしまいます。1度のタップミスで離脱するユーザーもいるので、テキスト入力の項目は少ないに越したことはありません。

少しでも入力の手間を減らすために、テキスト入力の項目を減らすほか、選択形式に置き換えられないか検討してみましょう。

10.確認画面を設置する

スマホフォームでの成果を高めたいなら、送信前に入力内容が正しいかをチェックできる確認画面を設置するのが有効です。

多くのユーザーは確認画面が表示されることに慣れているため、「最後に確認すればいい」と考え、スピード重視で入力します。確認画面を挟まずに送信という流れだと、ユーザーは正しく入力できたか不安に感じてしまうでしょう。

また、確認画面がないとユーザーが入力ミスに気づかないまま送信してしまう可能性もあります。入力ミスがあるとユーザーの情報を正しく把握できず成果に結びつきにくくなるため、確認画面を設置し、正しい情報を送信してもらいましょう。

11.エラーはリアルタイムに表示する

スマホのフォームにおけるエラーは、リアルタイムに表示するようにしましょう。項目の入力後すぐにエラーが表示されれば、ユーザーはその場で修正することができます。

送信ボタンを押してからまとめてエラーを表示する仕様だと、ユーザー自身がスクロールして該当箇所に戻り、修正しなければなりません。エラーの箇所を探すのに時間がかかってしまうと、再入力を面倒に感じ離脱につながります。

また、エラーの箇所には赤字のコメントを入れたり、回答欄の枠を赤くしたりして、視覚的にわかりやすくすると良いでしょう。

スマホのフォームを負担なく作る方法

スマホのフォームを作るには様々な方法があります。ここでは、その中でも特に負担が少ない作り方を2つ解説します。

WordPressプラグインを利用

WordPressでサイトを作成した場合は、プラグインを利用することでスマホ対応のフォームが手軽に作れます。問い合わせフォームの作成で特に認知度が高いのは、「Contact Form 7」というプラグインです。

他にも「MW WP Form」というプラグインでは、確認画面や自動返信メールの設定などができます。

ただし、プラグインで作った入力フォームに細かなカスタマイズやデザイン変更などを施すには、HTMLやCSS、PHPといったプログラミングの知識が必要です。

バリデーションの設定やセキュリティ対策も自身で行う必要があるため、それに関する知識がある場合におすすめできる方法です。

フォーム作成ツールを利用

手間をかけずに多機能なスマホフォームを作成したいなら、フォーム作成ツールを使うのがおすすめです。ツールで作成したフォームは、WordPressで作成したページに埋め込むこともできます。

フォーム作成ツールの多くは、はじめからスマホ対応しており無料プランもあるので、コスト面での負担が少なくて済みます。さらにデザインの変更が簡単で、ドラッグ&ドロップの操作のみでフォームを作成・編集できるツールもあります。

セキュリティ対策も行われているツールがほとんどであり、フォームから送信された顧客の個人情報も安心して扱えます。

入力を補助するための機能も豊富なため、手間や時間をかけずにスマホに適したフォームを作成したい場合は、ツールの利用をおすすめします。

おすすめのスマホフォーム作成ツール5選

ここでは、おすすめのスマホフォーム作成ツールを5つ紹介します。それぞれの特徴を比較し、最適なものを探してみてください。

1.formrun（フォームラン）

formrunは、「ferret」を運営する株式会社ベーシックが提供しているフォーム作成ツールです。弁護士ドットコム株式会社や合同会社DMM.com、株式会社文化放送など、幅広い企業で利用されています。

スマホ対応なのはもちろんのこと、最短30秒でフォームが作れるという手軽さが魅力です。クリック操作だけでフォームの作成や編集ができるので、コーディングの知識は必要ありません。

テンプレートの種類が豊富でそれぞれのデザイン性も高いため、初めて使う方でも直感的に作業できます。さらに、フォーム単体のページでもサイトへの埋め込みでも運用可能なので、使い勝手の良いツールです。

住所補完機能やリアルタイムバリデーションなど、スマホでの入力を補助する機能が備わっており、フォームの編集画面からはスマホ版のプレビューも簡単に確認できます。

無料のプランも用意されているため、まずはお試しで使用することもできます。

2.Googleフォーム

Googleフォームは、Googleが提供している無料のフォーム作成ツールです。Googleアカウントがあれば誰でも利用できるため、個人から法人まで広く使われています。

アンケートやテストなど様々なテンプレートから合うものを選び、設問や選択肢を組み合わせるだけで問い合わせフォームの作成が可能です。

レスポンシブデザインを採用しているので、ユーザーがスマホから閲覧しても、画面サイズに合わせてページレイアウトが調整されます。

ただ、フォームデザインがシンプルであるため、見ればすぐにGoogleフォームだとわかってしまうのがデメリットです。細かなカスタマイズをするには、HTMLやCSSの知識が必要です。

3.formcats（フォームキャッツ）

formcatsは、株式会社エフカフェが提供するアンケートフォーム作成ツールです。ドラッグ＆ドロップとテキスト入力だけでフォームを作成できます。

1画面に1項目というスマホ向けのフォームデザインであるため、ユーザーはスクロールする必要がありません。入力しやすい形式のため、回答率アップを期待できるでしょう。

ほかにも、リアルタイムでのエラー表示や回答の進捗状況がわかるバーの表示など、ユーザーの手間やストレスを軽減させる機能が搭載されています。

4.Tayori（タヨリ）

Tayoriは、株式会社PR TIMESが提供しているクラウド情報管理ツールです。情報管理がメインの使い方ではありますが、メールフォームやアンケートなどを作成できる機能も備わっています。

フォームを作成する際は、ナビゲーションに従って項目を入力するだけで作成可能です。数あるテンプレートから用途に合ったものを選べば、5分ほどで問い合わせフォームが完成します。

フォームとFAQを連携できる機能があり、利用することで問い合わせフォーム内にFAQをセットで表示することができます。これにより、ユーザーの疑問をスピーディに解決できるようになり、離脱率の減少が期待できるでしょう。

LINEやチャットツールのような形式で回答できる「トーク形式メールフォーム」の設置も可能なため、スマホから入力するユーザーの負担を軽減できます。

5.formzu（フォームズ）

formzuは、フォームズ株式会社が提供しているフォーム作成クラウドサービスです。問い合わせフォームであれば30秒で作成でき、項目の多い宿泊予約フォームや商品注文フォームなどの作成も可能です。

パソコンやスマホなど、ユーザーのアクセス端末に適したフォームを表示する機能や、住所の自動検索機能などが利用できます。また、作成したフォームはフォームズ株式会社のサーバーで動作するため、SSL通信付きのフォームを設置できます。

無料プランでは作成できるフォーム数に制限はありませんが、作成したフォームには広告が表示されたり、一部機能の利用も制限されるため注意が必要です。

スマホフォームを最適化して成果を最大化

スマホユーザーが増えている近年では、サイトのスマホ対応は必須です。フォームを設置する際は、スマホでの閲覧や入力を意識したフォームデザインにする必要があります。

フォーム作成ツールを使うことで、スマホでの入力に適したフォームを簡単に作成できます。特におすすめなのが、デザイン性の高いフォームを最短30秒で作成できる「formrun」です。

ノーコードで編集でき、フォーム単体ページでもサイト埋め込みでも運用可能なため、汎用性も高いです。リアルタイムバリデーションや住所の自動入力など、スマホユーザーの負担を軽減できる機能も用意されています。

無料でも利用できるので、手間をかけずにスマホに適したフォームを作成したい場合は、ぜひお試しください。

【最短30秒】クリック操作だけでスマホフォームを作成できるフォーム作成ツール「formrun」はこちら！

住所の自動入力やリアルタイムのエラー表示、確認画面の設置にも対応！無料でも利用できるのでまずはお試しください。