コラム
萩原印刷メルマガ
コンバージョン率を高める入力フォームのルール（2016年9月30日）
クロスメディア部
◎ コラム ◎ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
コンバージョン率を高める入力フォームのルール
—————————————————————————-
ホームページやアプリ内には、
必ずといってよいほど「入力フォーム」を設置します。
ユーザーからのお問い合わせはもちろん、
アンケート、資料請求、来店予約、商品の購入やサービスの申し込みなども、
フォームを通して受け付けるのが一般的です。
このようなユーザーによるアクションのことを、
専門用語で「コンバージョン」といいます。
フォームは、ユーザーと企業とをつなぐ大切な役割を担っており、
正確かつ簡単に、素早く入力できるのが理想です。
最後まできちんと入力してくれるか、送信ボタンを押してくれるかは、
作り手側の配慮が行き届いたフォームかどうかにかかっています。
それでは、コンバージョン率を高めるための
入力フォームのルールをご紹介します。
—————————————————————-
■ 入力フォームの10個のルール
—————————————————————-
1. ユーザーが不自然さを感じない流れにする
ユーザーと対話できるような、自然な流れになっていることが大切です。
回答の選択肢は、直感的な順番にしましょう。
たとえば、曜日は「月」「火」「水」の順、
都道府県は「北海道」から「沖縄」へ、といった流れです。
2. 縦1列で構成する
入力項目が横2列に並んでいると（たとえば「姓」と「名」）、
ユーザーはストレスを感じて、完了に至らないケースが出てきます。
特にスマートフォンは横幅が狭いので、
上から下に一直線に並べるのがよいでしょう。
3. 入力する項目を極力減らしたり、文字入力を最小限にする
項目がたくさんあると、それだけで強いプレッシャーをユーザーに与えます。
また、特にスマートフォンでは、文字入力が倦厭されがちです。
入力項目の代わりに選択肢（セレクトメニュー）にするなど、
必要最低限の項目と文字入力にできるように心がけ、
簡単に回答できるようにするとよいでしょう。
4. 入力文字数にフィールドの大きさを合わせる
たまに、入力フィールドが入力する内容よりも短すぎたり、
逆に長すぎたりする場合があります。
短い場合は、入力しても途中から見えないので確認がしづらく、
エラーになった場合の修正に手間取るため、
そのまま離脱してしまう可能性があります。
必要以上に長い場合は、本当にこの入力内容でいいのか、
混乱させてしまう場合があります。
やはりユーザーを悩ませるフォームにはコンバージョン率を高められません。
5. 入力フィールドの上にラベルを貼る
項目名（ラベル）を入力フィールドよりも上に配置する方が
読みやすいようです。
スマートフォンは特に横幅が狭いので、項目名を上に、
入力フィールドや選択肢は下に配置するとよいでしょう。
6. 入力形式の許容範囲を広くとる
たとえば「電話番号」で、市外局番と市内局番を分けて
入力するフォームがありますが、
それよりも、-（ハイフン）の有無などはユーザーに任せると、
入力スピードが速くなり、ミスにも気づきやすくなります。
ただ、プログラムとの兼ね合いで
許容範囲を広くとれないこともあると思いますので、
可能であれば、と考えましょう。
7. 入力例や説明文を入力フィールド内に入れない
入力フィールドにあらかじめ表示しておける内容を
「プレースホルダー」といいます。
プレースホルダーには入力例や説明文（入力ルールなど）を
指定しておくのが一般的ですが、すでに入力していると勘違いしたり、
入力しはじめると表示が消えてしまうので、実効性は低いといえます。
これらは入力フィールドの前で、
ふつうのテキストとして提示するのがよいでしょう。
8. 必須項目と任意項目をわかりやすくする
そもそも必須項目を最低限にすること、
任意項目も必要なものだけにすることが大切です。
その上で、必須と任意がわかりやすいようにします。
具体的には、必須項目の場合は項目名の近くに「必須」という
ラベルをつけ、一目でわかるようにするなどです。
9. リセットボタンは置かない
リセットボタンは、ほとんど使われない不要なものです。
間違えて押してしまい、せっかく入力した項目をすべて消してしまう
リスクもありますので、置かないようにしましょう。
10. エラーメッセージをわかりやすくする
どの項目がどのように間違って入力されたのかを、
エラーメッセージとしてわかりやすく表示しましょう。
入力直後にリアルタイムでエラーメッセージを表示する方法や、
確認画面に進む前にまとめて表示する方法などがあります。
どのようなタイミングでエラーメッセージを表示するとしても、
具体的にどうすればよいのかをわかりやすく提示しましょう。
—————————————————————-
■ スマートフォン特有の入力エラーを防ぐルール
—————————————————————-
どのサイトも、ここ数年でスマートフォンからのアクセスが急増しています。
スマホでの入力エラーを防ぎ、ユーザーのストレスを軽減しましょう。
●指でタッチすることを考える
タッチエリアは大きく用意しましょう。
タップする領域が小さいと、他のものをタップしてしまう場合があります。
特にフォームの入力フィールドは、そのままでは小さいことが多いので、
やや大きめに設定するとよいでしょう。
●選択肢の選択方法を、スマートフォンに合わせたものにする
指で操作することを考えると、ラジオボタンやチェックボックスよりも、
セレクトメニューのほうが望ましいとされています。
また、選択肢が多くない場合は、
それぞれを四角くて大きなボタン風のデザインにすると、
タップしやすくなるでしょう。
●入力フィールドの入力モードを設定する
スマートフォンでの英語、数字、日本語の切り替えは、
OSや機種、設定によって異なるケースがあります。
電話番号では数字入力モード、メールアドレスでは英語モードというように、
入力フィールドごとに適切な入力モードを設定しておくと（HTMLに設定可能）、
ユーザーが入力しやすくなります。
これらルールに合わせられるとコンバージョン率が
今まで以上に伸びるかもしれません。
少しずつでも反映してみてはいかがでしょうか。
▼参考
コンバージョン率を改善する入力フォームにおける10のルール | UX MILK
http://uxmilk.jp/49200
スマホ版：入力エラー防止！入力フォームを改善する4つの方法｜株式会社シンメトリック
http://www.site-convert.com/archives/730
萩原印刷株式会社 クロスメディア部
コンバージョン率を高める入力フォームのルール
—————————————————————————-
ホームページやアプリ内には、
必ずといってよいほど「入力フォーム」を設置します。
ユーザーからのお問い合わせはもちろん、
アンケート、資料請求、来店予約、商品の購入やサービスの申し込みなども、
フォームを通して受け付けるのが一般的です。
このようなユーザーによるアクションのことを、
専門用語で「コンバージョン」といいます。
フォームは、ユーザーと企業とをつなぐ大切な役割を担っており、
正確かつ簡単に、素早く入力できるのが理想です。
最後まできちんと入力してくれるか、送信ボタンを押してくれるかは、
作り手側の配慮が行き届いたフォームかどうかにかかっています。
それでは、コンバージョン率を高めるための
入力フォームのルールをご紹介します。
—————————————————————-
■ 入力フォームの10個のルール
—————————————————————-
1. ユーザーが不自然さを感じない流れにする
ユーザーと対話できるような、自然な流れになっていることが大切です。
回答の選択肢は、直感的な順番にしましょう。
たとえば、曜日は「月」「火」「水」の順、
都道府県は「北海道」から「沖縄」へ、といった流れです。
2. 縦1列で構成する
入力項目が横2列に並んでいると（たとえば「姓」と「名」）、
ユーザーはストレスを感じて、完了に至らないケースが出てきます。
特にスマートフォンは横幅が狭いので、
上から下に一直線に並べるのがよいでしょう。
3. 入力する項目を極力減らしたり、文字入力を最小限にする
項目がたくさんあると、それだけで強いプレッシャーをユーザーに与えます。
また、特にスマートフォンでは、文字入力が倦厭されがちです。
入力項目の代わりに選択肢（セレクトメニュー）にするなど、
必要最低限の項目と文字入力にできるように心がけ、
簡単に回答できるようにするとよいでしょう。
4. 入力文字数にフィールドの大きさを合わせる
たまに、入力フィールドが入力する内容よりも短すぎたり、
逆に長すぎたりする場合があります。
短い場合は、入力しても途中から見えないので確認がしづらく、
エラーになった場合の修正に手間取るため、
そのまま離脱してしまう可能性があります。
必要以上に長い場合は、本当にこの入力内容でいいのか、
混乱させてしまう場合があります。
やはりユーザーを悩ませるフォームにはコンバージョン率を高められません。
5. 入力フィールドの上にラベルを貼る
項目名（ラベル）を入力フィールドよりも上に配置する方が
読みやすいようです。
スマートフォンは特に横幅が狭いので、項目名を上に、
入力フィールドや選択肢は下に配置するとよいでしょう。
6. 入力形式の許容範囲を広くとる
たとえば「電話番号」で、市外局番と市内局番を分けて
入力するフォームがありますが、
それよりも、-（ハイフン）の有無などはユーザーに任せると、
入力スピードが速くなり、ミスにも気づきやすくなります。
ただ、プログラムとの兼ね合いで
許容範囲を広くとれないこともあると思いますので、
可能であれば、と考えましょう。
7. 入力例や説明文を入力フィールド内に入れない
入力フィールドにあらかじめ表示しておける内容を
「プレースホルダー」といいます。
プレースホルダーには入力例や説明文（入力ルールなど）を
指定しておくのが一般的ですが、すでに入力していると勘違いしたり、
入力しはじめると表示が消えてしまうので、実効性は低いといえます。
これらは入力フィールドの前で、
ふつうのテキストとして提示するのがよいでしょう。
8. 必須項目と任意項目をわかりやすくする
そもそも必須項目を最低限にすること、
任意項目も必要なものだけにすることが大切です。
その上で、必須と任意がわかりやすいようにします。
具体的には、必須項目の場合は項目名の近くに「必須」という
ラベルをつけ、一目でわかるようにするなどです。
9. リセットボタンは置かない
リセットボタンは、ほとんど使われない不要なものです。
間違えて押してしまい、せっかく入力した項目をすべて消してしまう
リスクもありますので、置かないようにしましょう。
10. エラーメッセージをわかりやすくする
どの項目がどのように間違って入力されたのかを、
エラーメッセージとしてわかりやすく表示しましょう。
入力直後にリアルタイムでエラーメッセージを表示する方法や、
確認画面に進む前にまとめて表示する方法などがあります。
どのようなタイミングでエラーメッセージを表示するとしても、
具体的にどうすればよいのかをわかりやすく提示しましょう。
—————————————————————-
■ スマートフォン特有の入力エラーを防ぐルール
—————————————————————-
どのサイトも、ここ数年でスマートフォンからのアクセスが急増しています。
スマホでの入力エラーを防ぎ、ユーザーのストレスを軽減しましょう。
●指でタッチすることを考える
タッチエリアは大きく用意しましょう。
タップする領域が小さいと、他のものをタップしてしまう場合があります。
特にフォームの入力フィールドは、そのままでは小さいことが多いので、
やや大きめに設定するとよいでしょう。
●選択肢の選択方法を、スマートフォンに合わせたものにする
指で操作することを考えると、ラジオボタンやチェックボックスよりも、
セレクトメニューのほうが望ましいとされています。
また、選択肢が多くない場合は、
それぞれを四角くて大きなボタン風のデザインにすると、
タップしやすくなるでしょう。
●入力フィールドの入力モードを設定する
スマートフォンでの英語、数字、日本語の切り替えは、
OSや機種、設定によって異なるケースがあります。
電話番号では数字入力モード、メールアドレスでは英語モードというように、
入力フィールドごとに適切な入力モードを設定しておくと（HTMLに設定可能）、
ユーザーが入力しやすくなります。
これらルールに合わせられるとコンバージョン率が
今まで以上に伸びるかもしれません。
少しずつでも反映してみてはいかがでしょうか。
▼参考
コンバージョン率を改善する入力フォームにおける10のルール | UX MILK
http://uxmilk.jp/49200
スマホ版：入力エラー防止！入力フォームを改善する4つの方法｜株式会社シンメトリック
http://www.site-convert.com/archives/730
萩原印刷株式会社 クロスメディア部
