入力フォームはデザインが命!離脱率を最小化させる13のルール

beginners-must-read-and-cvr-unbelievably-go-up-1
Pocket
LINEで送る

あなたは今、入力フォームを作成しているのだろう。しかし、「デザインを決められない」と悩んでいるのではないか?

そう悩むのも無理はない。入力フォームのデザイン方法は無数にある。調べたとしても、様々な説が飛び交っている。

経験がなければ、何も分からないのは当然だ。

しかし安心してほしい。この記事を読めば、結果の出る入力フォームのデザインが分かる。

じっくり読んで、ぜひ参考にしてほしい。

※ 結果の出る入力フォームをデザインしたいですよね?
弊社はインターネット広告代理店です。コンバージョン率を最大化させる入力フォームのデザインを、専門家が作成・提案いたします。ランディングページ改善・サイトリニューアルにも、経験豊富な担当者が対応いたします。ご質問・ご相談は無料です。「お問い合わせフォーム(全国対応)」からお気軽にご連絡ください。
 
 

1.要確認!入力フォームのデザインの重要性

入力フォームのデザインは、コンバージョン率に大きな影響を及ぼす。

なぜならば、ユーザーのストレスの感じ方が変わるからだ。

極端な例だが、下図の場合、入力を途中で止めてしまうはずだ。

入力フォームの悪いデザイン例

コンバージョンの機会損失を最小化させるためには、最適化が必要不可欠なのだ。

入力フォームのデザインがコンバージョン率に影響を及ぼす証拠

下図は弊社クライアントのランディングページの入力フォームで実施したABテスト結果だ。

「入力フォームのデザイン改善前のLP」と「入力フォームのデザイン改善後のLP」でコンバージョン率をABテストした結果

デザインを変えただけで、コンバージョン率が1.41倍になったのだ。

2.前提知識!入力フォームのデザインの構成要素

入力フォームのデザインの構成要素
構成要素 説明
ラベル 入力ボックスへの入力内容を説明する箇所
入力ボックス 規定の情報を入力する箇所
ボタン 別ページに遷移するためのボタン

3.死守!入力フォームのデザインを決めるときの13のルール

入力フォームを決めるときのルールは合計13個ある。

全てを守れば、コンバージョン率は大幅に上がる。結果、貴社の売上に大きく貢献する。

ぜひ熟読してほしい。

【必ず守るべき】入力フォームのデザインを決めるときの11のルール

ルール1:ブランドイメージと合った色を使う

ユーザーは違和感に敏感だ。

例えば、Amazonの購入ボタンが「赤色」だった場合、購入を一瞬ためらうはずだ。

ラベル・ボタンには、ブランドイメージと合った色を使わなくてはいけないのだ。

ルール2:全体の縦幅を画面内に収める

パソコンの1画面内に入力フォームを収めるデザイン例

ゴールが見えないと、人間は強いストレスを感じる。

全体の縦幅を1画面(1,000×550px)に収めて、入力項目数を知らせなくてはいけないのだ。

不可能なのであれば、複数ページに分けた方がいい。

ルール3:入力ボックスはできる限りまとめる

入力フォーム内の入力ボックスをできる限りまとめるデザイン例

人間は総じて面倒くさがり屋だ。可能ならば、カーソルを動かしたくない。

入力ボックスをできる限りまとめた方がいいのだ。

ルール4:入力ボックスを縦一列に配置する

入力フォームの入力ボックスを縦一列に配置するデザイン例

ユーザーは目線を動かしたくない。そして、入力ボックスの幅は横より縦の方が短い。

入力ボックスは縦一列に配置すべきなのだ。

目線の移動距離をさらに短くできることから、左揃えにした方がいい。

ルール5:入力ボックスの上にラベルを配置する

入力フォームで入力ボックスの上にラベルを配置するデザイン例

目線移動内にある文字の方が、ユーザーは認識しやすい。

「ルール4:入力ボックスを縦一列に配置する」を守るのであれば、入力ボックスの上にラベルを配置すべきなのだ。

このとき、グループ化するとさらに分かりやすくなる。

ルール6:入力ボックスの大きさを最適化する

入力フォーム内の入力ボックスの大きさを最適化するデザイン例

入力ボックスの横幅別のユーザー心理は下記の通りだ。

  • 長すぎる:何を記入すればいいのか分からない
  • 短すぎる:記入しづらい

縦幅別のデメリットは下記の通りだ。

  • 高すぎる:全体の縦幅が高くなる
  • 低すぎる:誤クリック率が上がる

以上のことから、入力ボックスの大きさを最適化しなくてはいけないのだ。

ルール7:記入例を用意する

入力フォーム内の入力ボックスの中に記入例を記載するデザイン例

ユーザーは記入方法を知らない。

「入力ボックス内」または「入力ボックス下」のいずれかに記入例を用意しておくべきなのだ。

ルール8:大文字だけの表記を避ける

入力フォーム内のラベルを大文字と小文字で表記するデザイン例

大文字だけの表記は読みづらい。

情報を正確に伝えるためには、先頭以外は小文字にすべきなのだ。

日本人がターゲットなのであれば、日本語の方が理解しやすい。わざわざ英語を使う必要はない。

ルール9:「必須項目」と「任意項目」を日本語でそれぞれ明記する

入力フォーム内で必須項目と任意項目を明記するデザイン例

必須項目を「*」で示すと、一部のユーザーは「必須項目」と「任意項目」を区別できない。

それぞれ日本語で明記すべきなのだ。

ルール10:ボタン内にアクションを明記する

入力フォームのボタン内にアクションを明記するデザイン例

ユーザーは警戒心が強い。「何が起きるのか分からないボタン」をクリックしない。

ボタン内には具体的なアクションを明記しておかなくてはいけないのだ。

ルール11:コンバージョンボタンを目立たせる

入力フォームのコンバージョンボタンを目立たせるデザイン例

想像以上にユーザーは情報を読み取る気がない。

コンバージョンボタンは目立たせなくてはいけないのだ。

ポイントは下記の2つだ。

  1. 戻るボタンより大きくする
  2. 「赤色」または「緑色」を使う

ただし、目立たせすぎると、ユーザーは強い違和感を抱く。十分注意すべきだ。

【状況次第で守るべき】入力フォームのデザインを決めるときの2のルール

ルール12:関連項目ごとにグループ化する

入力フォーム内の関連項目をグループ化するデザイン例

統一性のない情報を大量に見ると、人間は拒絶反応を示す。

入力項目が多いときは、関連項目ごとにグループ化すべきなのだ。

ルール13:選択肢をチェックボックスで表記する

入力フォーム内の選択肢をチェックボックスで表記するデザイン例

選択肢をドロップダウンで表記すると、選択までに2クリックもかかる。

選択肢が5個以下なのであれば、チェックボックスで表記すべきなのだ。

ユーザーの目線移動に沿えることから、縦一列にした方がいい。

4.必見!入力フォームのデザインを参考にすべき5のサイト

入力フォームのデザインを決めるときの参考サイトを5つ紹介する。

どれもレベルが非常に高い。ぜひ一度、目を通してほしい。

【会員登録系】入力フォームのデザインを参考にすべき3のサイト

サイト1:Amazon

ネット通販サイト「Amazon」のアカウント作成フォームURL:https://www.amazon.co.jp/

ネット通販サイト「Amazon」の新規アカウント作成フォームだ。

ポイントは下記の4つだ。

  1. ブランドイメージに合った配色
  2. 全体の縦幅が1画面内に収まっている
  3. 入力ボックス・ラベルを縦一列に配置
  4. ボタン内にアクション「Amazonアカウントを作成」を記載

誰もが参考にすべき入力フォームのデザインだ。

サイト2:Netflix

動画サービス「Netflix」のメールアドレス登録フォームURL:https://www.netflix.com/jp/

動画サイト「Netflix」のメールアドレス登録フォームだ。

参考ポイントは下記の2つだ。

  1. ボタンをあえて横配置(※ 入力ボックス上の文章が横書きのため、ユーザーの目線移動が横になっている)
  2. ボタン内に「今すぐはじめる」と記載

「簡素な入力フォームをデザインするとき」に参考にすべきだ。

サイト3:DMM Bitcoin

ビットコイン取引所「DMM Bitcoin」の口座開設フォームURL:https://bitcoin.dmm.com/

ビットコイン取引所「DMM Bitcoin」の口座開設フォームだ。

ポイントは下記の3つだ。

  1. 入力ボックス内に記入例を記載
  2. 関連項目ごとにグループ化
  3. 選択肢の数によって「ドロップダウン」と「チェックボックス」を使い分け

「項目数が多い入力フォームをデザインするとき」に参考にすべきだ。

【購入・リード獲得系】入力フォームのデザインを参考にすべき2のサイト

サイト4:オデコディープパッチ

美容液注入シート「オデコディープパッチ」のお客様情報登録フォームURL:https://www.kaitekikobo.jp/odekodeep/gdn/h036001_518.html

美容液注入シート「オデコディープパッチ」のお客様情報登録フォームだ。

ポイントは下記の4つだ。

  1. ブランド色「オレンジ」を基調に配色
  2. 入力項目に応じて入力ボックスの大きさを最適化
  3. 入力ボックス下に記入例を記載
  4. 目立つラベルで「必須」と記載

「単品通販のランディングページの入力フォームをデザインするとき」に参考にすべきだ。

サイト5:SmartHR

労務管理ソフト「SmartHR」の無料トライアルプラン申し込みフォームURL:https://smarthr.jp/

労務管理ソフト「SmartHR」の無料トライアル申込フォームだ。

ポイントは下記の2つだ。

  1. 「勤務先のメールアドレス」と記載して入力アドレスを指定
  2. ボタンを色で目立たせている

「BtoB商材のランディングページの入力フォームをデザインするとき」に参考にすべきだ。

最後に

本記事では入力フォームのデザインを徹底解説した。

内容は下記の通りだ。

  1. 重要性
  2. 構成要素
  3. 13のルール
  4. 5の参考サイト

まずは1と2の内容を確実に覚えてほしい。そして、3の内容を抑えつつ、4の内容を参考にしてほしい。

そうすることで、結果の出せる入力フォームのデザインが完成する。

弊社はインターネット広告代理店です。

紹介した13のルールを守るのはもちろんのこと、高度なテクニックを用いて、貴社に最適な入力フォームを作成します。

ランディングページの改善・サイトリニューアルにも、経験豊富な担当者が対応いたします。

ご質問・ご相談は無料です。「お問い合わせフォーム(全国対応)」からお気軽にお問い合わせください。

入力フォーム作成ツールのおすすめ10選を「入力フォーム作成ツール」で紹介しています。自作するのであれば、ぜひ参照してください。

Pocket
LINEで送る


Web集客なら全てお任せください!

adell-cta-logo-3

Adellを運営する合同会社ビーエイチは、インターネット広告代理店です。

・リスティング広告
・SNS広告
・ネイティブ広告
・記事広告
・純広告
・コンテンツマーケティング
・SEO対策

全てのWebマーケティング施策において、あなたのお役に立つことができます。

ご質問・ご相談は無料ですので、下記のお問い合わせフォームからお気軽にご連絡ください。