【Webデザイナー向け】入力完了率UP!フォームデザインのポイントをご紹介

スキルアップ

Webサイトの中で重要な「入力フォーム」ですが入力しづらかったり、入力内容がわかりにくいといった理由から、途中で離脱してしまうユーザーは少なくありません。

そこで今回はフォームのデザイン設計のポイントについて解説いたします。

もくじ

  1. フォームデザインの重要性
  2. フォームデザインで大切なポイント
  3. フォームデザインのレイアウトポイント
  4. まとめ

フォームデザインの重要性

入力フォームは、Webサイトにおいて「問い合わせ」や「購入する」などのユーザーがアクションを行う、重要な最後のタッチポイントです。

そのため入力フォームのデザインはCVに直結し、フォームの成果に大きく影響します。入力内容がわかりにくいデザインや、入力方法がわかりづらいデザインだとユーザーが面倒くさいと感じ、フォームの途中で離脱してしまうため、CVにつながりません。

フォームデザインで大切なポイント

  • UX(ユーザー体験)を高める
    フォームデザインで優先するべきポイントは、ユーザーにとっての使いやすさです。
    簡単にSNSと連携できるようにしたり、チャットツールやGoogle等と連携させたり、高齢層向けに文字サイズを大きくしてみたりなどの工夫が必要です。
  • 入力項目はわかりやすく
    入力する項目は誰が見ても理解できるように、わかりやすく簡潔にする必要があります。
    必須項目はテキストや画像などで目立たせてわかりやすいように工夫したり、入力欄に記入例などを入れたりすることで、ユーザーがすぐに理解して入力に進めるように誘導しましょう。
  • 項目数は最小限に
    入力の項目が多いほど心理的ハードルが高くなりユーザーに負担がかかります。
    また、項目数が増えるほど手間や時間がかかり、離脱率も上がってしまうため、入力の項目は必要最低限に絞ることが大切です。

フォームデザインのレイアウトポイント

  • 要素は1カラムに収める
    入力欄は横に2列や3列ではなく1列に収めましょう。
  • レシポンシブ対応にする
    スマートフォンでもストレスなく閲覧できるように、レスポンシブ対応は必須です。
  • 入力項目は優先度の高い順にする
    入力フォームでは優先度の高い項目から順に配置するようにしましょう。
    並び順は一般的な並び順にならうことをおすすめします。
    一般的には、氏名や住所、メールアドレス、電話番号などの個人情報が一番目で、次にID、パスワードや補足情報と並ぶことが多いです。
  • トンマナをサイトに合わせる
    フォームページのカラーなどのトンマナ(トーン&マナー)はWebサイトのテイストに合わせましょう。
  • エラー表示はわかりやすく
    エラーを表示する際には一目で認識できるようにカラーやテキストなどを工夫しましょう。

◆まとめ

フォームデザインは離脱率に大きく影響する要素なため、最適化すると離脱率を下げることもできます。

フォームデザインを効果的に改善してCV率アップにつなげていきましょう。

採用情報を見る >