入力フォームを改善して入力完了率を上げる！ エントリーフォーム最適化15カ条 [勝手にEFO分析-エントリーフォーム改善] | Web担当者Forum

Image may be NSFW.
Clik here to view.

入力フォーム（エントリーフォーム）を入力していて、イライラする……と感じたことありませんか。ありますよね。自社サイトの入力フォームでユーザーにイライラを与えていませんか。

小さなイライラが積み重なった先にあるのは、エントリーフォームからの離脱です。ユーザーが一度エントリーフォームから離脱してしまったら、もう戻ってきてはくれないと覚悟しておくべきです。入力を完了してもらいエントリーフォームの「入力完了率^※」を上げるためにはどうしたらよいのでしょうか。

そこで、この記事ではEFO（エントリーフォームを最適化）を行い離脱要因を減らして、入力完了率を上げる15カ条を紹介します。

少し手間をかければ劇的に入力完了率アップが期待できるはずの、「惜しい」エントリーフォームを各条1つずつ取り上げて、頼まれてもいないのに、勝手にそのフォームを分析して作った改善案とともに、ポイントとなるエントリーフォーム改善の鉄則を紹介していきます。

※エントリーフォームへの流入数のうち完了ページに到達した比率を「入力完了率」といいます。

入力完了率をUPさせる15カ条
ユーザーを入力に進ませる編

【第1条】1つ目の項目は、入力しやすい項目にすべし

• エントリーフォームの1つ目の項目は、自由度が少なく、ユーザーが迷わず入力できる内容にする

  入力をスムーズに始めてもらうことが重要

  入力が進めば進むほど、自分の作業がもったいなくなるから、ユーザーは離脱しにくくなる

具体的な例を挙げての詳しい解説は3月公開予定

【第2条】何のためのフォームかを伝えるべし

• 「会員登録」「問い合わせ」などのフォーム名は大きく表示する

  フォームが何のためにあるかをユーザーに伝える

• エントリーフォームの入力が完了し送信ボタンを押した後を明確にする

  自動返信メールが来る、担当者から返信があるなどを伝える

  ユーザーが得るメリットがあるならば伝える

• 入力完了までの「ステップ」を入れる

  ユーザーが迷わないようにする

具体的な例を挙げての詳しい解説は近日公開予定

【第3条】ファーストビューに収めるべし

• ファーストビューに収めるために「項目を減らす」「レイアウトを変更する」収められないのならページを分ける

  終わりが見えているとユーザーは気が楽になる

  「個人情報に関するポリシーの同意」についてを最初に持ってくるのも手

  個人情報ポリシー表記は小さくするのも手

  確認ページはなくすのも手

具体的な例を挙げての詳しい解説は近日公開予定

ユーザーの入力を励ます編

【第4条】入力例や入力形式を明記すべし

• 入力例を明記する

  入力項目内（プレースホルダー）に記載するほうが、項目の脇に書くよりもスッキリする

• 入力形式はできるだけ制限しないようにする

  システム上制限があるなら入力形式を記す

具体的な例を挙げての詳しい解説は近日公開予定

【第5条】入力に達成感を感じてもらうべし

• 残りの必須項目数をリアルタイムで表示する

• ユーザーが入力している項目に色を付ける

• 項目の入力を終えたら色を消す

具体的な例を挙げての詳しい解説は近日公開予定

入力をスムーズに進行させる編

【第6条】最低限どの項目に入力すれば良いかを伝えるべし

• 「必須」「任意」をわかりやすいマークで明記する

• 「必須」はまとめてレイアウトする

  ユーザーの視線の移動を減らす

  入力項目は任意をなくし、必須のみに絞り込むのも手

具体的な例を挙げての詳しい解説は近日公開予定

【第7条】入力エラーをリアルタイムで伝えるべし

• 入力項目毎にユーザーの入力内容でエラーが出ないように、フォームが求める入力形式に合うように細かな軌道修正をしていく

• ユーザーが「確認／送信ボタン」をクリックするときは、エラーがない状態になっているようにする

  入力が完了して「確認／送信ボタン」をクリックしてエラーが出たときのガッカリ感は、ユーザーが離脱する最大の要因

具体的な例を挙げての詳しい解説は近日公開予定

【第8条】エラー画面をわかりやすくすべし

• 「確認／送信ボタン」をクリックする時点でエラーは出さない

• エラーメッセージを、フォーム上部に箇条書きで羅列しない

  どの項目の内容を修正しなければならないか、探す労力をユーザーに強いるのはよくない

• エラーメッセージは該当する入力項目毎にそれぞれの近くに出す

  エラーの項目に色付けなどするのも有効な手

具体的な例を挙げての詳しい解説は近日公開予定

ユーザーの離脱を止める編

【第9条】離脱要因となる不要なリンクを減らすべし

• フォームは入力要素以外の要素は極力いれず、シンプルなフォームにする

  入力完了率を上げるには、ユーザーが離脱する要因を減らすことが大事

  グローバルナビゲーションを用意することはサイト制作の大原則だが、エントリーフォームにおいてはそれは当てはまらない

具体的な例を挙げての詳しい解説は近日公開予定

【第10条】離脱ブロックを導入すべし

• ウィンドウを閉じようとしたらブラウザのダイアログで本当に閉じてOKかを確認する

• ユーザーが能動的に離脱しようとしている、それを食い止める最後の手が「離脱ブロック」

  確認ページを表示した段階で送信完了したと誤解してウィンドウを閉じるのを防ぐ

  ユーザーがキーボードのショーットカットで誤って「Ctrl+W」でタブを閉じるのを防ぐ

具体的な例を挙げての詳しい解説は近日公開予定

【第11条】クリアボタン、キャンセルボタンはなくすべし

• 「クリアボタン・キャンセルボタン」はなくす

• 一度入力された項目の値は保持する

具体的な例を挙げての詳しい解説は近日公開予定

ユーザーの負担を減らす編

【第12条】入力の手間を減らすべし

• 郵便番号を入力することで、住所が自動で入力されるようにする

  かな入力を自動にするのも手

具体的な例を挙げての詳しい解説は近日公開予定

ユーザーの送信前のためらいをなくす編

【第13条】他のCV（コンバージョン）手段があれば伝えるべし

• フォーム入力以外のCV（コンバージョン）の手段を用意する

  電話番号を記載しておくのも手

  「離脱ブロック」のメッセージに他の手段を書くのも手

具体的な例を挙げての詳しい解説は近日公開予定

【第14条】送信完了の勘違いをなくすべし

• ユーザーが送信完了したと勘違いさせない

  確認ページにおける「離脱ブロック」も重要

  確認ページで完了したと勘違いして閉じるケースがある

具体的な例を挙げての詳しい解説は近日公開予定

【第15条】送信ボタンは大きく、具体的な文言にすべし

• 何をする／何が起きるボタンなのかをわかりやすく表記する

• 「送信ボタン」は大きく・重要な色を付ける

• 「戻るボタン」を用意するなら「主導線ボタン（送信ボタンなど）」とメリハリを付ける

具体的な例を挙げての詳しい解説は近日公開予定

この記事の筆者

Image may be NSFW.
Clik here to view.

田中慶樹（たなか よしき）

1974年東京都生まれ。東京大学工学部建築学科卒業。株式会社エフ・コードでは開発チームに所属、ASP型EFOツール「f-traEFO」のいわゆる「なかのひと」。Web制作とプログラムがともにわかる人材として、エントリーフォーム改善の支援に従事する。

大学卒業後、Web制作会社勤務を経て、Webディレクター/コーダーとして活動。その後、東京R不動産 制作チーム所属を経て、株式会社エフ・コード入社、現在に至る。

→株式会社エフ・コード
→f-traEFO

• 内容カテゴリ：ユーザビリティ／ペルソナ／IA
• コーナー：勝手にEFO分析-エントリーフォーム改善

※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：入力フォームを改善して入力完了率を上げる！ エントリーフォーム最適化15カ条 [勝手にEFO分析-エントリーフォーム改善] | Web担当者Forum
Copyright (C) IMPRESS BUSINESS MEDIA CORPORATION, an Impress Group company. All rights reserved.

Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.