あなたは今、入力フォームを作成しているのだろう。しかし、「デザインを決められない」と悩んでいるのではないか？
そう悩むのも無理はない。入力フォームのデザイン方法は無数にある。調べたとしても、様々な説が飛び交っている。
経験がなければ、何も分からないのは当然だ。
しかし安心してほしい。この記事を読めば、結果の出る入力フォームのデザインが分かる。
じっくり読んで、ぜひ参考にしてほしい。
目次
1．要確認！入力フォームのデザインの重要性
入力フォームのデザインは、コンバージョン率に大きな影響を及ぼす。
なぜならば、ユーザーのストレスの感じ方が変わるからだ。
極端な例だが、下図の場合、入力を途中で止めてしまうはずだ。
コンバージョンの機会損失を最小化させるためには、最適化が必要不可欠なのだ。
入力フォームのデザインがコンバージョン率に影響を及ぼす証拠
下図は弊社クライアントのランディングページの入力フォームで実施したABテスト結果だ。
デザインを変えただけで、コンバージョン率が1.41倍になったのだ。
2．前提知識！入力フォームのデザインの構成要素
| 構成要素 | 説明 |
| ラベル | 入力ボックスへの入力内容を説明する箇所 |
| 入力ボックス | 規定の情報を入力する箇所 |
| ボタン | 別ページに遷移するためのボタン |
3．死守！入力フォームのデザインを決めるときの13のルール
入力フォームを決めるときのルールは合計13個ある。
全てを守れば、コンバージョン率は大幅に上がる。結果、貴社の売上に大きく貢献する。
ぜひ熟読してほしい。
【必ず守るべき】入力フォームのデザインを決めるときの11のルール
ルール1：ブランドイメージと合った色を使う
ユーザーは違和感に敏感だ。
例えば、Amazonの購入ボタンが「赤色」だった場合、購入を一瞬ためらうはずだ。
ラベル・ボタンには、ブランドイメージと合った色を使わなくてはいけないのだ。
ルール2：全体の縦幅を画面内に収める
ゴールが見えないと、人間は強いストレスを感じる。
全体の縦幅を1画面（1,000×550px）に収めて、入力項目数を知らせなくてはいけないのだ。
不可能なのであれば、複数ページに分けた方がいい。
ルール3：入力ボックスはできる限りまとめる
人間は総じて面倒くさがり屋だ。可能ならば、カーソルを動かしたくない。
入力ボックスをできる限りまとめた方がいいのだ。
ルール4：入力ボックスを縦一列に配置する
ユーザーは目線を動かしたくない。そして、入力ボックスの幅は横より縦の方が短い。
入力ボックスは縦一列に配置すべきなのだ。
目線の移動距離をさらに短くできることから、左揃えにした方がいい。
ルール5：入力ボックスの上にラベルを配置する
目線移動内にある文字の方が、ユーザーは認識しやすい。
「ルール4：入力ボックスを縦一列に配置する」を守るのであれば、入力ボックスの上にラベルを配置すべきなのだ。
このとき、グループ化するとさらに分かりやすくなる。
ルール6：入力ボックスの大きさを最適化する
入力ボックスの横幅別のユーザー心理は下記の通りだ。
- 長すぎる：何を記入すればいいのか分からない
- 短すぎる：記入しづらい
縦幅別のデメリットは下記の通りだ。
- 高すぎる：全体の縦幅が高くなる
- 低すぎる：誤クリック率が上がる
以上のことから、入力ボックスの大きさを最適化しなくてはいけないのだ。
ルール7：記入例を用意する
ユーザーは記入方法を知らない。
「入力ボックス内」または「入力ボックス下」のいずれかに記入例を用意しておくべきなのだ。
ルール8：大文字だけの表記を避ける
大文字だけの表記は読みづらい。
情報を正確に伝えるためには、先頭以外は小文字にすべきなのだ。
日本人がターゲットなのであれば、日本語の方が理解しやすい。わざわざ英語を使う必要はない。
ルール9：「必須項目」と「任意項目」を日本語でそれぞれ明記する
必須項目を「＊」で示すと、一部のユーザーは「必須項目」と「任意項目」を区別できない。
それぞれ日本語で明記すべきなのだ。
ルール10：ボタン内にアクションを明記する
ユーザーは警戒心が強い。「何が起きるのか分からないボタン」をクリックしない。
ボタン内には具体的なアクションを明記しておかなくてはいけないのだ。
ルール11：コンバージョンボタンを目立たせる
想像以上にユーザーは情報を読み取る気がない。
コンバージョンボタンは目立たせなくてはいけないのだ。
ポイントは下記の2つだ。
- 戻るボタンより大きくする
- 「赤色」または「緑色」を使う
ただし、目立たせすぎると、ユーザーは強い違和感を抱く。十分注意すべきだ。
【状況次第で守るべき】入力フォームのデザインを決めるときの2のルール
ルール12：関連項目ごとにグループ化する
統一性のない情報を大量に見ると、人間は拒絶反応を示す。
入力項目が多いときは、関連項目ごとにグループ化すべきなのだ。
ルール13：選択肢をチェックボックスで表記する
選択肢をドロップダウンで表記すると、選択までに2クリックもかかる。
選択肢が5個以下なのであれば、チェックボックスで表記すべきなのだ。
ユーザーの目線移動に沿えることから、縦一列にした方がいい。
4．必見！入力フォームのデザインを参考にすべき5のサイト
入力フォームのデザインを決めるときの参考サイトを5つ紹介する。
どれもレベルが非常に高い。ぜひ一度、目を通してほしい。
【会員登録系】入力フォームのデザインを参考にすべき3のサイト
サイト1：Amazon
ネット通販サイト「Amazon」の新規アカウント作成フォームだ。
ポイントは下記の4つだ。
- ブランドイメージに合った配色
- 全体の縦幅が1画面内に収まっている
- 入力ボックス・ラベルを縦一列に配置
- ボタン内にアクション「Amazonアカウントを作成」を記載
誰もが参考にすべき入力フォームのデザインだ。
サイト2：Netflix
URL：https://www.netflix.com/jp/
動画サイト「Netflix」のメールアドレス登録フォームだ。
参考ポイントは下記の2つだ。
- ボタンをあえて横配置（※ 入力ボックス上の文章が横書きのため、ユーザーの目線移動が横になっている）
- ボタン内に「今すぐはじめる」と記載
「簡素な入力フォームをデザインするとき」に参考にすべきだ。
サイト3：DMM Bitcoin
ビットコイン取引所「DMM Bitcoin」の口座開設フォームだ。
ポイントは下記の3つだ。
- 入力ボックス内に記入例を記載
- 関連項目ごとにグループ化
- 選択肢の数によって「ドロップダウン」と「チェックボックス」を使い分け
「項目数が多い入力フォームをデザインするとき」に参考にすべきだ。
【購入・リード獲得系】入力フォームのデザインを参考にすべき2のサイト
サイト4：オデコディープパッチ
URL：https://www.kaitekikobo.jp/odekodeep/gdn/h036001_518.html
美容液注入シート「オデコディープパッチ」のお客様情報登録フォームだ。
ポイントは下記の4つだ。
- ブランド色「オレンジ」を基調に配色
- 入力項目に応じて入力ボックスの大きさを最適化
- 入力ボックス下に記入例を記載
- 目立つラベルで「必須」と記載
「単品通販のランディングページの入力フォームをデザインするとき」に参考にすべきだ。
サイト5：SmartHR
労務管理ソフト「SmartHR」の無料トライアル申込フォームだ。
ポイントは下記の2つだ。
- 「勤務先のメールアドレス」と記載して入力アドレスを指定
- ボタンを色で目立たせている
「BtoB商材のランディングページの入力フォームをデザインするとき」に参考にすべきだ。
最後に
本記事では入力フォームのデザインを徹底解説した。
内容は下記の通りだ。
- 重要性
- 構成要素
- 13のルール
- 5の参考サイト
まずは1と2の内容を確実に覚えてほしい。そして、3の内容を抑えつつ、4の内容を参考にしてほしい。
そうすることで、結果の出せる入力フォームのデザインが完成する。
ランディングページのデザインで参考にすべきサイト・事例を、「ランディングページのデザイン」で詳しく説明している。ランディングページの入力フォームのデザインを決めるのであれば、そちらも合わせて参照してほしい。
現在、公式LINEで「たった6ヶ月で利益を平均80.4％増やすWebマーケティング手法」を無料で発信している。弊社のクライアントがWebマーケティングに取り組み、実際に成果を出したやり方・考え方が分かる。
「Adell公式LINEの登録ページ」にて3秒で登録できる。今すぐクリックして、QRコードを読み込んでほしい。
入力フォーム作成ツールのおすすめ10選を「入力フォーム作成ツール」で紹介している。自作するのであれば、ぜひ参照してほしい。
