フォームのたった1つの項目が、売上の損失として年間1,200万ドルものコストを生んでいるとしたらどうでしょうか。これはまさに、Expediaが予約プロセスから任意の「会社名」項目を削除した際に判明した事実です。同様に、ユーザーが入力ミスをした瞬間に知らせてくれるインライン検証は、コンバージョン率を22％向上させることができます。
フォーム最適化においては、こうしたほんの小さな調整でも大きな成果をもたらすことがあります。逆に言えば、フォームがなかなかコンバージョンにつながらないのは、ちょっとした、しかも修正可能なデザイン上の問題が原因かもしれません。
ここでは、フォームのコンバージョン率を高め、フォームの離脱を減らすためのフォーム最適化の方法を見ていきましょう。以下に、入力フォーム改善のための5つの重要なテクニックを紹介します。これらは、優れたフォームを支える5つの柱だと考えてください。
- ユーザーが考え込まなくてすむようにフォームを構成する。
- 不要なものはすべて取り除く。
- 質問ごとに適切な入力形式を選ぶ。
- 「送信」の使用をやめる。もっと良い表現ができるはずです。
- モバイル向けに作る。公開前にテストする。
Jotformは最高のオンラインフォームビルダーの一つであり、これらの機能がすべて標準で備わっています。
Migrate existing forms instantly
オンラインフォームを一から作り直す必要はありません。既存のフォームや送信データを、ワンクリックで、Jotformアカウントに移行できます。これにより、手を抜くことなくデータを収集することができます。
Your form can not be migrated.
Please ensure that your form URL is correct and that your form is set to “public” before attempting to migrate it again.
1. ユーザーが考え込まなくてすむようにフォームを構成する
フォームの見た目は、ユーザーがそもそも入力を始めるかどうかを左右します。ごちゃごちゃして分かりにくいレイアウトでは、名前を入力する前に離れていってしまいます。まずは成功するフォーム構造から始めれば、あとはすべてがずっと楽になります。
単一カラムを使う。視線をジグザグさせない
複数カラムのレイアウトは、自然な読みの流れを妨げます。左右を行き来させるような悪いフォームデザインは、ユーザーが項目を飛ばしたり、どこまで入力したか分からなくなったり、ひとつも項目を記入しないまま離脱したりする原因となります。特にモバイルでは顕著です。
単一カラムは安全な基本形です。ユーザーは上から始めて下で終わり、項目を飛ばしてしまった場合もひと目で分かります。
とはいえ、複数カラムの項目が決して機能しないというわけではありません。2カラムが最も効果的なのは、密接に関連した短い項目が2つある場合（例：姓／名、市／都道府県）で、それらを分けるとかえって不自然に感じられるようなときです。しかし、迷ったときは単一カラムにしておきましょう。
項目は簡単なものから難しいものへと並べる
フォームを最適化する簡単な方法のひとつは、機密性の高い情報や複雑な情報、あるいはユーザーが調べたり、検索したり、考えたりしなければならない項目を尋ねる前に、手間がかからず簡単に答えられる項目から始めることです。支払い情報や任意の追加パッケージ、パートナーの電話番号といった項目に進む前に、まずは名前とメールアドレスを入力してもらいましょう。
単純なことに聞こえるかもしれませんが、これは実際の心理学に基づいています。人はいったんフォームの記入を始めると、途中でやめる可能性がぐっと低くなります。これは、ユーザーが「5分もかけたのだから、ついでに最後までやってしまおう」と考えるためで、これはサンクコスト（埋没費用）の誤謬と呼ばれる心理です。あるいは「始めたことは最後までやり遂げるのが責任ある行動だ」と考えるからです。
ユーザーの内面的な動機が何であれ、まずは簡単なものから始め、それから徐々に複雑なものへと進めましょう。
長いフォームはステップに分割する。すべてを一度に表示しない
フォームに5つか6つ以上の項目がある場合は、ステップに分割しましょう。1ページの中でフォームをセクションに分けることもできますし、さらに良いのは複数ページにわたって分割することです。こうすれば、ユーザーが何百ものチェックボックスをかき分けなければならないような、長くて威圧的なフォームと向き合わずに済みます。
進捗バーを備えたマルチステップフォームは特に効果的で、単一ページのフォームを一貫して上回る成果を上げます。進捗バーは、ゴールまでたどり着こうという意欲を高めてくれます。
Jotformのドラッグ＆ドロップエディタにはマルチステップ機能があり、進捗バーの自動生成を含め、こうしたことをすべて自動で処理してくれます。
2. 不要なものはすべて取り除く
余分な項目、不要なステップ、そしてすべてのCAPTCHAは、離脱の理由になります。フォームに対して徹底的に無駄をそぎ落とせば、ユーザーが離脱する理由は大幅に減ります。
本当に必要なものだけを尋ねる
Expediaの事例は何度でも繰り返す価値があります。同社は任意の項目を1つ削除しただけで、年間1,200万ドルの増収を実現しました。ホテルを予約する人がMicrosoftに勤めているのかMcDonald’sに勤めているのかを知るために、これはあまりにも高い代償です。
ある情報がなぜ必要なのかを明確に説明できないのなら、それは尋ねないことです。「あとで役立つかもしれない」というのは、フォームを必要以上に長くするのに十分な理由にはなりません。ほとんどのフォームに必要な項目は3つから5つだけです。たとえばリード獲得なら、多くの場合、相手の名前、メールアドレス、連絡先の電話番号、そして興味のある製品を尋ねれば十分です。
オートフィルとスマートな初期値に入力を任せる
ユーザーのためにあらかじめ入力されている項目が増えるほど、離脱の理由はひとつ減ります。ブラウザのオートフィルを有効にして、すでに取得している情報を入力できるようにしましょう。ログイン済みのユーザーであれば、改めてメールアドレスを尋ねる必要はありません。最も人気のある選択肢を自動で選択しておく、IPアドレスを使って国の項目を設定するなど、スマートな初期値を活用しましょう。
Pro Tip
住所については、Googleマップのオートコンプリートを使いましょう。これにより、ユーザーは4つも5つもの項目を入力する手間から解放されます。
CAPTCHAをなくす。コンバージョンの損失につながっている
CAPTCHAは誰もが嫌うものであり、それを裏付けるデータもあります。ある調査では、フォームにCAPTCHAを設置するとコンバージョンが最大40％低下することが分かっています。
現代的なスパム対策には、より優れた代替手段があります。たとえば、ハニーポット項目（ボットだけが入力する隠し入力欄）、見えないreCAPTCHA、組み込みのスパムフィルターなどです。Jotformのフィルターは、ユーザーに信号機や自転車をクリックさせることなくスパムを検出します。
もし今でも従来型のCAPTCHAを使っているなら、それを切り替えることこそ、今日すぐにできる最も効果が高く、最も手間のかからない変更です。これはオンラインフォームの最重要ベストプラクティスのひとつと考えてよいでしょう。
3. 質問ごとに適切な入力形式を選ぶ
間違った入力形式は、ユーザーに不要な手間を強いることになります。ドロップダウンで済むところにテキストボックスを使ったり、ラジオボタンの方が分かりやすい場面でドロップダウンを使ったりしないようにしましょう。こうした小さなミスマッチは、あっという間に積み重なっていきます。
入力形式を質問に合わせる。安易にテキストボックスを使わない
テキストボックスは最も便利な選択肢に思えますが、ユーザーに最も大きな認知的負担を強いるものでもあります。選択肢から選ぶのではなく、何を入力すべきかを考えなければならないからです。テキストボックスは、名前やメールアドレスのように自由記述の回答が必要な場合にのみ使いましょう。
それ以外のすべてについては、入力形式を質問に合わせましょう。
- ユーザーに2つから5つの選択肢から1つを選んでもらう場合は、ラジオボタンを使います。すべての選択肢がひと目で見渡せます。
- ユーザーに複数の項目を選んでもらう場合は、チェックボックスを使います。簡単で分かりやすいです。
- ユーザーに6つ以上の選択肢から選んでもらう必要がある場合は、ドロップダウンを使います。選択肢を保ちつつ、フォームをコンパクトに保てます。
- シンプルな数値入力には、ステッパーやスライダーを使います。ただし常識は働かせましょう。電話番号にステッパーを使うことはないはずです。
- 日付には、必ず日付ピッカーを使います。
- はい／いいえの回答には、トグルまたは単一のチェックボックスを使います。
ユーザーが「送信」を押す前に、何が間違っているかを伝える
インライン検証は、ユーザーが誤った値や入力できない値を入力した瞬間にそれを知らせてくれる機能で、コンバージョンを22％向上させるだけでなく、エラーを22％減らし、満足度を31％高め、入力完了スピードを42％向上させます。
これらのエラーメッセージは、役に立つものであるべきです。入力しようとしたパスワードが無効だと伝えるだけでは煩わしいですが、最低8文字必要である、あるいは特殊記号を含める必要があると伝えれば、それは役立つ情報になります。
モバイルユーザーに適切なキーボードを設定する
スマートフォンには、入力項目ごとに異なるキーボードがあります。入力項目を「tel」や「email」に設定すれば、ユーザーには適切なキーボードが表示されます。数字キーパッドか、あるいは@記号が見つけやすいフルキーボードのいずれかです。些細なことに聞こえるかもしれませんが、これは実際に摩擦となるポイントです。QWERTYキーボードで電話番号を入力するのは苦痛です。
良い知らせがあります。Jotformは、すべての項目タイプについてこれを自動で処理してくれます。
4. 「送信」の使用をやめる。もっと良い表現ができるはず
ContentVerveは、ボタンの表記を「Start your free 30-day trial（あなたの30日間無料トライアルを始める）」から「Start my free 30-day trial（私の30日間無料トライアルを始める）」に変更するテストを実施しました。たった1語を変えただけで、クリック率が90％向上する結果となりました。こうした小さな文言の調整が、桁違いの成果をもたらすことがあるのです。
「送信」を、ユーザーに何が得られるかを伝えるボタンに置き換える
「送信」には意味がありません。次に何が起こるのか、フォームを完了することで何が得られるのかを、ユーザーに伝えていません。これはウェブデザイン黎明期の名残です。
行動を促すタイプのCTA（コールトゥアクション）は、ありきたりな「送信」ボタンを一貫して上回る成果を上げます。「無料ガイドを受け取る」「アカウントを作成する」「リクエストを送る」は、いずれも次に何が起こるのかを具体的に約束するものです。ボタンは、ユーザーが行動を決断する前に最後に目にするものです。だからこそ、クリックする価値があると感じられるものにしましょう。
ラベルは項目の中ではなく、項目の前に置く
項目の中に表示されるプレースホルダーテキスト（たとえば、薄いグレーの「メールアドレスを入力してください」）は、ユーザーがクリックした瞬間に消えてしまいます。少しでも気がそれてしまうと、何を入力すべきだったのか分からなくなってしまいます。
その代わりに、上揃えで常に表示されるラベルを使いましょう。ざっと目を通しやすく、モバイルでもうまく機能します。プレースホルダーはモックアップ上では見た目がすっきりしますが、実際の運用では役に立ちません。補足的なヒントとして使う分には構いませんが、唯一のラベルにすべきではありません。
ためらいを取り除くマイクロコピーを添える
ユーザーは、特定の場面で特定の不安を抱くことがよくあります。メールアドレスを入力するときにはスパムを心配し、クレジットカードを入力するときには過剰に請求されるのではないかと心配し、長いフォームを見たときには時間を無駄にするのではないかと心配します。
小さくても適切な場所に配置した文言は、ユーザーを安心させてくれます。
- メールアドレスの項目の横に「スパムメールを送ることは決してありません」と添える。
- 登録フォームに「2分もかかりません」と入れてみる。
- 無料トライアルのフォームには「クレジットカードは不要です」が役立ちます。
また、セキュリティバッジ、コンプライアンスバッジ、SSL表示といった信頼のシグナルを使って、機密性の高いデータを安心して任せられるとユーザーに示すこともできます。
5. モバイルを前提に作る。公開する前にテストする
デスクトップでは見栄えが良くても、スマートフォンやタブレットで崩れてしまうフォームは、どんな最適化が効果を発揮し始めるよりも前に、膨大な数のユーザーを失ってしまいます。CTAをいくら調整しても、サイズが不適切なためにスマートフォンの画面に表示されなければ、何の意味もありません。
まず親指での操作を前提に、マウスは二の次で設計する
ウェブトラフィックの半分以上はモバイルからのものです。項目、ボタン、タップ対象は、小さな画面でも快適に操作できる十分な大きさにする必要があります。ズームインする必要を減らし、ユーザーが誤って別の項目をタップしてしまう可能性を下げましょう。
これもまた、Jotformが物事を簡単にしてくれる領域のひとつです。Jotformのフォームは、デフォルトでモバイルレスポンシブ対応です。追加の作業は一切必要ありません。
動作の遅いフォームスクリプトでコンバージョン率を落とさない
読み込みの遅いフォームは、静かにコンバージョンを奪っていく存在です。重いスクリプト、最適化されていない埋め込み、サードパーティのトラッカーは、いずれもフォームの読み込み時間を長くし、特にモバイル回線では、ユーザーが離脱する可能性を高めてしまいます。
その対策にはある程度の技術的な知識が必要ですが、取り組む価値はあります。ページの描画をブロックしないようにスクリプトを非同期で読み込む、サードパーティへの依存を最小限に抑える、そしてフォームの読み込み時間をGoogleのPageSpeedツールや、オフィスのWi-Fiではなく実際のモバイル回線を使ってテストする、といった対策です。
あるいは、これらの作業をすべて代わりに行ってくれるJotformのようなツールを使うこともできます。モバイルフレンドリーなフォームは、フォームの送信数を大幅に増やすことができます。
思い込む前にテストする。5秒ルールを使う
あなたのフォームを見る人は誰でも、それが何のためのもので、なぜ記入すべきなのかを5秒以内に理解できるべきです。もし理解できないなら、そのフォームは複雑すぎます。
これはテストできます。友人や同僚に数秒間だけフォームを見せて、それが何のためのものかを尋ねてみましょう。もし答えられなければ、もっと分かりやすくしましょう。これは、実施できる中で最も安く、最も速いユーザビリティテストです。
1行もコードを書かずにフォームを最適化する
フォームの最適化は、複雑なプロセスである必要はありません。Jotformなら、そのあらゆる側面をネイティブに処理できます。
- マルチステップフォームと1カラムレイアウトにより、フォームの構成を簡単に組み立てられます。
- 不要なものをそぎ落とすという点では、Jotformの条件分岐ロジックとスパムフィルターが鍵となります。
- 30種類以上の項目タイプを備えたJotformなら、どんな質問にも適切な入力形式が見つかります。
- あらゆるボタンや項目をカスタマイズして、「送信」を本物のCTAに変えたり、ラベルを追加したり、役立つマイクロコピーを添えたりできます。
- すべてのJotformフォームはモバイルレスポンシブ対応です。作成するどんなフォームも、モバイルを前提に作られています。
これらすべてが、Jotformのドラッグ＆ドロップエディタで簡単に実現できます。Mountain West Conferenceは、別のフォームビルダーからJotformに乗り換え、管理業務の時間を50％削減しました。さらに、業務プロセスやデータ整理の面でも改善が見られました。
「Mountain Westは以前、別のフォームビルダーを使っていましたが、従業員はそれでタイムリーで整理されたデータを得ることができませんでした」と、Mountain Westの最高財務責任者であるGary Walenga氏は語ります。「いろいろと探した末に、私たちはJotformに乗り換えました。それ以来、当カンファレンスでは業務プロセスとJotformの両面で改善が見られています。」
ですから、フォームを最適化してコンバージョン率を改善したいなら、今日Jotformを試してみるのが一番です。Jotformは最高のフォームビルダーのひとつであり、無料で試すことができます。Jotformなら、手軽にフォーム最適化を実現できます。
フォーム最適化に関するよくある質問
基本的なビジュアルデザインの原則と、ユーザー体験のベストプラクティスはフォームにも当てはまります。ブランドに沿った色やタイポグラフィを用いて一貫したブランディングを行い、十分な余白を確保し、すっきりとした1カラムレイアウトをデフォルトにしましょう。あるいは、単にJotformを使うという手もあります。1,000種類以上のテーマと、使いやすいカスタムテーマビルダーを備えています。
良いフォームの5つの柱を守りましょう。
- ユーザーが記入しやすいようにフォームを構成する。
- 不要な項目は思い切ってそぎ落とす。
- すべての質問に適切な入力形式を選ぶ。
- CTA、ラベル、マイクロコピーを盛り込み、ユーザーをフォームに沿って導く。
- ウェブトラフィックの半分を占めるモバイル端末を前提に作る。
効果的なフォームとは、最小限の摩擦で適切なデータを収集できるフォームです。どんなデータが必要かを把握し、そのデータを得るための質問だけを尋ね、それ以上は尋ねないようにしましょう。質問は明確で、具体的で、行動につながるものにします。何が必要なのか、なぜ必要なのか、各ステップで何が起こるのかを、ユーザーに分かりやすく伝えましょう。
最もシンプルなフォームは、項目が最も少なく、できるだけ多くの回答があらかじめ入力されているフォームです。不要な質問を削り、ブラウザの自動入力を許可し、回答をインラインで検証し、適切な入力タイプを使い、何を求められているのかユーザーが理解できるようにすべてに明確なラベルを付けましょう。また、CAPTCHAの代わりに、最新のスパム対策の手法を使いましょう。
この記事は、リード獲得、登録、購入手続きのフォームを作成しており、離脱を減らし、完了率を高め、すでにあるトラフィックをより有効に活用したいと考えているマーケター、UXデザイナー、プロダクトマネージャー向けの内容です。
コメントの送信: