入力フォームはデザインが重要!注意すべき16のポイントと参考にしたい記事8選

デザイン

資料請求や商品購入、イベントへの参加申し込みなど、ホームページ上でユーザーが最終アクション(CV:コンバージョンと言います)を完了させる接点となるのが「入力フォーム」です。

ですが、入力フォームをただ設置すれば問い合わせが増えるわけではありません。
せっかくユーザーが入力画面まで到達しても、フォームの入力を完了させずにページを離脱してしまうことは多々あります。

では、ユーザーに最終アクションを完了してもらう入力フォームは、どのように作ればよいのでしょう。
本記事では入力フォームのデザインを考える際に覚えておきたいことや、フォーム作成の参考になる記事を紹介します。フォームからの問い合わせ数を増やしたい、フォームのデザインを見直したい、という方はぜひ本記事を参考にしてみてください。

なぜ入力フォームにおいてデザインが重要なのか

「入力フォームがあれば問い合わせをしたいユーザーが必ず入力してくれる」と、一概に言い切ることはできません。

ユーザーが入力を進めやすいフォームでなければ、フォーム画面を見た途端にページを離れてしまったり、入力作業にストレスを感じて途中離脱してしまったりする可能性があるからです。

フォーム入力が完了しなければ、資料請求や製品購入などのCVを逃すことになり、ユーザー獲得の機会が失われます。

WebサイトやECサイトのコンテンツをどんなに充実させても、最終的にユーザーが入力を完了させなければ結果に結びつきません。そのため、ユーザーライクなフォームのデザインが重要なのです。

問い合わせフォームのデザインを決めるときに気をつけるべきポイント

「デザイン」と言っても、見た目の綺麗さだけにこだわってはいけません。
ユーザー視点での入力のしやすさ、心地よさといった“体験”を含めてデザインをする必要があります。

ユーザーへのこまめな配慮が、フォーム入力の完了率の向上につながるということです。ぜひ下記の点に留意して、ユーザビリティの高いフォームを作ってみてください。

1.設問項目の順序(構成)に注意する

フォームの設問は、ユーザーに尋ねたいことをただ羅列すればいいわけではありません。
論理性に欠けた会話が理解しにくいのと同じように、入力フォームにおいても、論理性や一貫性のない設問は頭に入りにくいものです。

設問内容がスムーズに理解できないと、ユーザーが入力を途中で諦めてしまう可能性があります。

  • 不必要なことまで尋ねて、質問数が多くなっていないか
  • 最初に名前やメールアドレスなどの基本情報を尋ねるべきなのに、いきなり他の質問内容を挿入していないか
  • 関連性のある質問内容ごとにグループをまとめているか

といった点に注意して、ユーザーが理解しやすい内容構成を考えていくことが重要です。

2.入力欄の配置

フォームには、回答を入力するための入力欄(入力フィールド)が必ず設置されます。

入力欄は、基本的に垂直方向(縦並び)に配置するほうがユーザーにとって入力しやすく、横並びの入力は視線の移動が増えてしまう上、質問内容を理解するのに時間もかかってしまいます。

3.チェックボックス / ラジオボタンの配置

入力欄同様、チェックボックスやラジオボタンも縦に配置することで、見やすく、入力もしやすくなります。垂直方向に配置することでカーソル操作も最小限で済みます。

4.項目名の配置

項目名(ラベル)は、入力欄の上に設置しましょう。

入力欄の縦並びに合わせるほうが自然であり、 項目名がフォームの上に配置されていると入力の完了が早くなるというデータも出ています。

5.項目名と入力欄はグループ化する

項目名と入力欄は、セットでグループ化しましょう。
また、グループ化した入力項目同士を一定間隔で空けておくと、フォームが見やすくなります。

6.大文字だけの表記は避ける

項目名が英語表記になっているときは、大文字と小文字を分けて使いましょう。すべてが大文字の英語表記になっていると、ユーザーが読みづらく感じます。

7.選択肢が少ない場合、ドロップダウンは避ける

選択肢が多いときはドロップダウン機能が便利ですが、少ない選択肢でドロップダウンを使うとかえって操作の手間が増えてしまいます。

選択肢が6つ以下のときは、ドロップダウンは避けすべての選択肢を画面上に表示させましょう。

8.プレースホルダは使いどころを考える

プレースホルダとは、項目名を入力欄内に表示させる機能です。プレースホルダを使うことでフォームの余分なスペースを減らすことができますが、

  • 入力欄が羅列していることで見づらさを与える
  • 「何を入力すべきだったか」が分からなくなり不便

などの問題が考えられます。
ユーザー名やパスワードなど、単純な内容以外でのプレースホルダ機能の使用は避けたほうがよいでしょう。

9.エラー表示は分かりやすく示す

入力エラーが発生した場合、どの入力項目でエラーが発生したか分かりやすく示しましょう。

また、入力中に発生したエラーはリアルタイムで通知する設定をしておくと、エラー箇所を探すユーザーの負担を減らすことができます。

10.フィールドフォーカス機能を使う

フィールドフォーカスとは、編集中の入力欄を教える機能です。どこまで入力したか分かりやすくなることで、入力箇所を見失ったり、どこまで入力したか考えたりする負担・リスクがなくなります。

11.必須項目と任意項目は分かりやすく表示する

どの入力欄が必須 / 任意項目なのか、分かりやすく表示しておきましょう。
「*」などの表示だけだど分かりづらく、ユーザーが見落とす可能性もあります。

12.オートコンプリート機能を活用する

オートコンプリート(自動補完)は、途中入力の段階で、入力内容を予測し表示させる機能です。
住所など入力内容が長いとき、オートコンプリート機能が使えるとユーザーの入力負担が軽減されます。

13.入力欄の幅は入力内容に合わせる

入力欄の幅は、入力内容に合わせたサイズに設定することが望ましいです。

メールアドレスや住所など入力すべき内容が多い項目は幅を長めに、郵便番号など入力文字数が少ない項目は余分な幅を取らないようにしましょう。

14.モバイルに最適化する

モバイル端末からの入力では、文字を入力するか数値を入力するかでキーボードの種類が変わります。数字を入力するためにキーボードを切り替える作業は、ユーザーにとって手間になってしまいます。

入力するテキストの種類に応じて、キーボードが自動で切り替わる設定を搭載しておきましょう。ユーザーの入力作業がより楽になります。

15.カラー設定

フォームのテーマカラーは、会社のブランドイメージから極力かけ離れない色、またフォームのデザインを壊さない程度の色合いのものを選びましょう。

カラー設定は必ずしも必要ではありませんが、色合いがまったくないフォームよりも、ポイントごとに色を使ったり背景に色を与えたりするだけでフォームの印象が変わります。フォームのテーマカラー以外に、文字色やチェックボックス、ボタンなどの部分にカラーを設定するのも良いでしょう。

16.写真の挿入

猫ちゃんの画像選択

参考:フォーム作成ツールformrun(フォームラン)の画像選択パーツ

設問内容によって「図や写真があると回答しやすい」という場合、画像を入れ込むとユーザーに親切です。
たとえば「●●という場所を知っていますか?」という質問に対して、地域名だけを表示するよりも写真が添えられていることで設問内容のイメージが湧きやすくなります。

フォームのデザインを考える際に参考にしたい記事

最後に、入力フォームを実際に作成するにあたり参考にしたい記事をピックアップしました。

「HTMLやCSSで作成するには?」「スマホ向けのデザインを作るには?」など目的別にまとめているので、あわせてご活用ください。

お問い合わせフォームをデザインする際の参考記事

効果的なフォームをデザインするヒント – 要素の配置、ラベル、入力フィールド、アクションボタンの使い方 | アドビUX道場 #UXDojoーAdobe Blog

https://blogs.adobe.com/japan/web-designing-more-efficient-forms-structure-inputs-labels-and-actions/

アドビシステムズが運営するAdobe Blog内の記事です。

入力フォームを「構造」「ラベル」「入力欄(フィールド)」「アクションボタン」「フィードバック」の5つの要素に分け、各要素の中でもさらに複数の項目を設けてフォーム作成における注意点を挙げています。
フォームの画像付きで丁寧に説明されているので、フォーム作成初心者でも分かりやすくなっています。

「ユーザーがいかに簡単なプロセスで入力を素早く完了できるか」を重点目的として、入力フォームをデザインするためのヒントがまとめられています。

入力フォームをデザインする時に気をつけること8つ

https://liginc.co.jp/395158

株式会社LIGが運営するブログ内の記事です。フォーム作成時に気をつけたい8つのポイントが、コンテンツ制作会社のデザイナー視点でまとめられています。

項目を厳選してシンプルに書かれている記事なので、フォーム作成における最重要ポイントをすぐに把握することができます。
良いフォームと悪いフォームの例を、比較画像付きで分かりやすく紹介しています。

HTMLやCSSで作成する際のフォームデザイン参考記事

フォーム周りで覚えておくと便利なCSS Snippets

https://www.nxworld.net/tips/15-useful-css-snippets-in-form-style.html

web制作やデザインの知識をまとめている個人ブログ内の記事です。

フォーム作成時に覚えておくと便利なCSSスニペット(テンプレート化されたコード。一部を変えるだけで利用することができます)を、15の目的別に紹介しています。各項目ごとに挿入時の注意点も書かれています。また、実際のフォーム画面にどのように表示されるのかをデモで確認することができます。

フォーム作成時の使用頻度が高いスニペットばかりがまとめられているので、これからCSSを使い始めるという方はぜひ参考にしてみてください。

コピペで実装!すぐに使えるCSSサンプルコードまとめ

https://webdesign-trends.net/entry/2394

Webデザインにおいて使用頻度が高いCSSコードを紹介しているページをまとめています。

CSSのサンプルコードをまとめたページを、「ボタン」「見出し」「メニュー」「フォーム」などWebデザインでよく使われる10個のパーツ別に紹介しています。

多彩なデザインの種類や、豊富なサンプルコードが紹介されています。「デザインにこだわったフォームを作成したい」「CSSコードをたくさん知りたい」という方にとって、参考になる情報がたくさんあります。

Googleフォームを利用する際の参考記事

フォーム スタートガイド – G Suite ラーニング センター

https://gsuite.google.jp/learning-center/products/forms/get-started/#!/

グループウェア「G Suite」に搭載されているフォーム作成ツール「Googleフォーム」について、操作ガイドを提供しているページです。

フォーム作成の基本操作をはじめ、フォームで集まった回答の分析方法やメール通知の設定方法など、フォームの様々な活用方法がまとめられています。

ページの下部からフォーム作成画面に移動できるので、操作を覚えてからすぐ実践に移ることも可能です。

初心者におすすめ!簡単にアンケート作成ができるGoogleフォームの使い方

https://form.run/media/contents/enquete/googleform/

フォーム作成管理サービス「formrun(フォームラン)」が運営する当情報サイト「formLab(フォームラボ)」内に掲載されている記事です。

Googleフォーム利用のメリット・デメリットから、具体的な操作手順、応用的な使い方までGoogleフォームにまつわる幅広い情報をお届けしています。

操作手順は、実際の操作画面の画像付きで説明しているので、Googleフォームを初めて利用する方に読んでいただきたい記事です。

スマホ向けのフォームデザインを作成する際の参考記事

【保存版】スマホサイトの入力フォームで成果を出す10のテクニック

https://www.i3design.jp/in-pocket/3032

株式会社アイスリーデザインが運営するブログ内のページです。

スマートフォンサイトのデザインを手がけるデザイナーが、フォームをデザインするときに気をつけておきたい10のポイントが挙げられています。

ユーザーが「どうすれば登録してくれるのか」「どうすれば入力しやすいのか」という視点で考えられた、フォーム作成時の注意点が分かりやすく紹介されています。

実際のスマートフォン画面の画像付きで解説しているので、「実際にこんなフォームだったらどうだろうか」というイメージが湧きやすいです。

スマホサイトの入力フォームで注意すべき7つのチェックポイント!

https://www.gyro-n.com/column/smartphone-form-checkpoint/

株式会社ユニヴァ・ペイキャストが提供するサイト改善・運営サポートツール「Gyro-n(ジャイロン)」のコラム記事です。

EFOツールも提供するGyro-nが、スマートフォンフォーム最適化のためにチェックすべきポイントを7つに厳選しまとめています。

「スマホユーザーがフォーム入力を行う際、どのようなことが煩わしく感じるのか」を指摘した上で、どのような改善を行うべきかを解説しています。
サイト改善を手がける会社側から見た注意点を参考にすることができます。

まとめ:ユーザーが使いやすい入力フォームをデザインしよう!

入力フォームは、WebサイトやECサイトなどのコンテンツと比べると対策が手薄になりがちですが、ユーザーからの問い合わせを獲得するために必要不可欠な存在でもあります。

せっかく問い合わせ直前までたどり着いても、「フォーム入力が手間だ」と離脱されると売り上げやCV獲得のチャンスを逃すことに。

サイトコンテンツだけでなく、入力フォームにおいてもユーザー目線を考えた対策が必要です。
EFO(エントリーフォーム最適化)の観点でもフォームのデザインは重要な要素ですので、ユーザーがストレスなく作業でき、スムーズに入力を完了できるようなフォーム作りを行っていきましょう。