入力完了率を高めるフォームのデザインとは？設計時のポイントも解説

入力フォームは、サイトを訪れたユーザーが問い合わせや商品の購入などのアクションを行う、最後のタッチポイントです。

ユーザーはこの段階で「本当にこのアクションを取るか否か」を最終ジャッジし、晴れて入力完了されれば自社のリード獲得や売上アップに繋がります。

ただし、残念ながら過半数のユーザーがフォームの途中で離脱してしまうケースも多いです。理由は様々ですが、その中には「入力しづらい」「入力内容がわかりにくい」「エラーの理由がわからない」など、見せ方やデザインを調整するだけで改善できる点もあります。

この記事では、フォームの作成をしたい方やデザイン改善をしたい方に向けて、フォームのデザイン設計のコツをお伝えします。

【有料ユーザー数No1】デザインが豊富で、カンタン操作で最適化ができるフォーム作成ツール「formrun」はこちら！

CVRが高いフォームを作ることができるフォーム作成ツールです。無料でも利用できるのでまずはお試しでもご利用ください！

目次

1. フォームにおけるデザインの重要性
2. フォームデザインの考え方
3. フォームデザインのポイント【レイアウト編】
4. フォームデザインのポイント【要素編】
5. フォームデザインのポイント【機能編】「ferret One」
6. フォームをデザインしやすいツール3選
7. まとめ：フォームのデザインを最適化してCVR向上を実現しよう

フォームにおけるデザインの重要性

デザインは、フォームの成果を大きく左右する要素であり、重要性が高いといえます。ユーザーの入力完遂がゴールであるフォームにおいては、どれだけユーザーにとってわかりやすく、スムーズに入力完了できるかが重要であるためです。

例えば、入力内容を間違えた際のエラー表示画面では、「どの枠が該当するのか」と「どう直すべきか」がひと目でわからないと、ユーザーは理解できなくなり、入力を続けるモチベーションが低下してしまいます。

フォーム作成においてデザインが担う役割は、ユーザーの理解と行動を促すことです。本ページで定義するフォームデザインには、下記が該当します。

フォームデザインが指すもの

• 要素の色合いや形
• 各要素の配置・レイアウト
• テキストの見せ方（文言も含まれる）
• ユーザーアクションに対する反応・挙動
• デバイスに合わせた見せ方（レスポンシブ対応）

フォームデザインの考え方

フォームデザインを行う上で大切なことは、見た目の美しさよりも、早く手間なく入力完了できるわかりやすさと操作のしやすさです。

下記3つの心得を念頭に置き、デザインを進めましょう。

デザインはUX（ユーザー体験）を軸に考える

フォーム作成においての主語は、初めから終わりまで「ユーザー」です。つまり、自社が気に入るか否かや、担当者にとっての使いやすさは本筋ではなく、あくまでターゲットユーザーにとっての使いやすさを追求し続けることが最重要です。

例えば、若者がターゲットであればSNS連携を導入したり、ビジネスマンなら業務でよく使われるチャットツールやGoogle等との連携、高齢層がターゲットであれば文字サイズを大きくしてみたりなどの工夫が考えられます。

想定ターゲットのニーズを考えた上で設計しましょう。

入力項目やテキスト内容はわかりやすくする

入力すべき項目やテキストの内容は、どんな人が見ても理解できるようにわかりやすくしなくてはなりません。

入力が必須な箇所には「必須」と表記したり、電話番号でハイフンは入れるのかを明記したり、パスワードが必要な場合には何文字以内でどのような組み合わせがNGかを記載するなどです。

また入力欄には、どのような内容を入力すべきかのサンプルを薄く記載しておくのがよいでしょう。

このように、ユーザーが入力すべき内容やフォームに表記するテキストの内容は、ユーザーにわかりやすいように表示しましょう。

項目数は最小限に抑える

ユーザーが入力する項目数は最小限に抑えましょう。ユーザーにとって、入力項目は多ければ多いほど心理的ハードルが高くなります。

ユーザーは、まだ信頼関係を築けていない相手に個人情報を提供するのは、最小限に抑えたいと考えます。だからこそ、項目数はなるべく減らしたほうがハードルを低くできます。

また、項目数は増えれば増えるほど手間や時間がかかります。フォームを開いたときに項目数が多いと、ユーザーには面倒という気持ちが湧いてしまいます。それによって、入力をやめてフォームを離脱してしまうのです。

だからこそ、入力フォームの項目数は最小限に抑えましょう。

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

ここからは、フォームデザインを行う上で大切なポイントを、レイアウトや構成・要素の内容・活用機能の3つのカテゴリに分けて解説していきます。

まず、フォームのレイアウトで気をつけるポイントについて解説します。レイアウトや配置は「1カラム」「レスポンシブ」「優先順位の高いもの・文脈似合ったものから」の3点を意識しましょう。

要素は1カラムでまとめる

入力欄、ラジオボタンなどの要素は1カラムに納めるようにします。1カラムとは、入力欄が横に2列や3列になるのでなく、1列という意味です。

ラベルも入力欄の横に並べるのでなく、上に配置するようにしましょう。

この理由は、大きく分けて下記3点です。

• ユーザーの目線を余計に動かす負担を避けるため
• 入力欄が狭くなるのを避けるため
• 異なる要素が横並びになることによる混乱を防ぐため

スマートフォンなどのモバイルサイトは、縦長の作りのため1カラムに納めましょう。PCのサイトの場合には、画面が広いので2カラムなどになってもよいですが、「氏名」や「性別」など同じ要素ごとにまとめて、別要素は下に並べるようにしましょう。

レスポンシブ対応する

モバイルユーザーがメインになっているサイトも増えている今、レスポンシブ対応は必須です。レスポンシブ対応をすることによって、スマートフォン、タブレット、PCのどれから見ても分かりやすく、入力しやすいフォームにすることができます。

レスポンシブ対応では、画面幅や端末によってフォームを最適な形にします。例えば、スマートフォンやタブレットでは、指で押しやすいように入力欄のサイズを調整します。

また、レスポンシブであればHTMLファイルもひとつで済むので、作成や管理の負担も抑えられます。

優先度の高いものから順に配置する

フォームでは優先度の高い要素から順に配置するようにしましょう。基本的にフォームでは、氏名から並ぶことが多いです。そして、他にはメールアドレスや電話番号が聞かれることが多くなります。

そのため、例えば性別、生年月日が上に配置されているとユーザーからしたら違和感やハードルを感じてしまう可能性があります。並び順は、一般的な並び順にならい、優先度の高いものから並ぶようにしましょう。

また、下記のようにそれぞれグループでまとめ、入力欄を順番に設置するとわかりやすいでしょう。

• 個人情報（氏名、メールアドレス、性別、生年月日、年齢、所属組織など）
• 登録に必要な情報（ID、パスワードなど）
• 補足情報（アンケート、備考欄など）

項目の優先度はサイトごとに異なるので、文脈に沿った設問の流れになっているか、ユーザーがどこから入りどんな過程を踏むのかも含め判断しましょう。

フォームデザインのポイント【要素編】

フォームデザインにおいて、各要素で気をつけるポイントもたくさんあります。各要素の内容や見せ方についてのポイントは7つありますので、それぞれ見ていきましょう。

入力完了までのフローを明示する

ユーザーにとって、あとどのくらいで入力完了できるのかは気になるポイントです。入力完了までのフローが図でわかれば、ユーザーはあとどれくらいかかるのかをひと目で知ることができます。そして、「あと少しなら…」と入力のモチベーションを維持しやすくなります。

入力途中では、「あと1つで完了」や「入力完了まで2項目」「2／3 ステップ」のように全体のなかでどの位置にいるかを知らせると、ユーザーの安心感とモチベーション維持に繋がります。

ラジオボタンとドロップダウンを使い分ける

ラジオボタンとドロップダウンリストの使い分けも重要です。最適なものを使うことで、ユーザーの利便性が大きく変わります。

性別など選択肢が少ない設問や複数回答のものにはラジオボタン、都道府県など横1列に並びきらない数の選択肢がある場合にはドロップダウンリストが答えやすいでしょう。

ただ、なんでもかんでもこれらを利用する必要はなく、テキストで入力した方が早いようなものはテキストで入力してもらうようにしましょう。実際に利用してみて、ラジオボタンやドロップダウンリストが便利という場合に利用するようにしましょう。

プレースホルダテキストは「補足」として使う

プレースホルダテキストとは、入力欄に表示される説明用のテキストのことです。ユーザーが入力欄にカーソルを合わせたり、テキスト入力をすると消えてしまうため、使い方には注意が必要な機能となります。

そのため、プレースホルダテキストはラベルとしてではなく、入力サポートをする補足用テキストとしての活用がおすすめです。ラベルとして使ってしまうとユーザーがカーソルを合わせたときに情報が消えてしまい、今何の項目に答えようとしているのか分からなくなってしまうため、ラベルは左下図のように記載しましょう。

また、入力欄に入力例などを記載しておけば、ユーザーは答え方に迷うことなくスムーズに進むことができます。

必須項目を明示する

必須項目の箇所に「※」だけが記載されていることがありますが、ぱっと見て何を表しているのか理解できないユーザーもいます。

必須項目には赤文字など目立つ色や太字などで「必須」と表示したり、必須ではない場合には「任意」と表示するなど、ひと目で分かるような目印をつけましょう。

さらに、必須の項目が入力されなかった場合には、「入力してください」とすぐにエラーを表示するようにデザインしましょう。

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

エラー表示はユーザーにとってストレスのかかるものです。エラー表示は下記を参考に分かりやすく伝えましょう。

• リアルタイムエラー表示
• エラー発生箇所にテキストや色で合図
• エラー項目へのリンク

まずエラー表示は入力が間違っている、入力されなかった場合にリアルタイムで出すようにしましょう。エラー発生箇所は目立つように色やテキストですぐに発見できるようにしましょう。

またそれだけでなく、ページの上部や下部にエラー箇所へのリンクを設置し、すぐにたどりつけるようにしましょう。このようにエラーに対するデザインに工夫をして、ストレスを最小限に抑えましょう。

カラーやテイストはサイトに合わせる

フォームページのカラーやテイストはWebサイトのテイストに合わせましょう。

気をつけるポイントとしては、Webサイトのテーマカラーに揃える、使用イラストのトンマナを他ページと統一する、フォントや装飾は他ページとできる限り同じものにする、などが挙げられます。

WordPressやGoogleフォームでフォームデザインをカスタマイズする場合はCSSなど専門知識が必要です。フォームのデザインテイストが前後のページやサービス自体のイメージと大きくずれることのないように色合いやフォント、装飾のテイストを合わせてください。

個人情報保護を記載する

ユーザーの多くは、入力した個人情報がどのように利用されるか、個人情報が流出しないかをとても気にしています。下記の調査では、Webフォームから途中離脱する理由としてセキュリティが大きな割合を占めています。

オンラインフォームの放棄を回避するための6つのステップ | THE MANIFEST

そのため、フォームにおいてはプライバシーポリシーや個人情報保護方針を表示して、個人情報がどのように利用されるか、どのように保護するかを表示するようにしましょう。

また、プライバシーマークを取得していたり、サーバー監視体制がある場合などは、プライバシーポリシーのなかに明記するようにしましょう。

フォームデザインのポイント【機能編】

フォームデザインにおいては、機能もユーザーのフォーム入力を便利にしてくれます。ここでは、ユーザーの操作時の負担を減らす機能「オートフォーカス」「オートコンプリート」「キーボード自動切替」を紹介します。

オートフォーカス

ページにたどり着いた時に、自動で先頭項目にカーソルを合わせてくれるのがオートフォーカス機能です。スクロールする必要なく、すぐに入力ができます。

マウス操作やスクロールをしなくて済むので、スムーズにキーボード操作を始められ、負担が軽減されます。オートフォーカスは、エラーがある状態で送信ボタンを押したときに、エラーの箇所まで移動させることもできます。

オートコンプリート

オートコンプリートとは、途中まで入力すると続きの内容を予測表示してくれる機能です。住所の入力など、入力に手間がかかったり内容を忘れやすい質問項目で役立ちます。

すべてを入力するのが面倒だったり、確認に時間がかかると入力をやめるユーザーもいますので、離脱防止に寄与するでしょう。

キーボード自動切替

スマートフォンやタブレットなどでは、キーボードの自動切替を導入するようにしましょう。

スマートフォンやタブレットでは日本語、英数字の切り替えが面倒です。いちいち切り替えをする作業が面倒になって、フォームから離脱してしまう可能性もあります。

モバイルユーザーが入力しやすいよう、日本語で入力する欄は日本語キーボード、メールアドレスやパスワードなどは英数字のキーボードなどに切り替わるよう設定しておきましょう。

誤作動防止

広告を誤ってクリックしてしまうなどの操作ミスにより、回答途中でフォームを離脱してしまうケースもあります。誤った操作時には「まだ入力途中です。ページを離れますか？」のような確認メッセージを出しましょう。意図せぬ離脱を回避でき、ユーザーの再入力の負担も減らせます。

また、スマホなどでも誤作動が起こらないように要素は大きくデザインしましょう。

このように、フォームデザインを改善するアイディアは豊富にあります。一度に全て変えることは難しいかもしれませんが、優先度を決めて1つずつデザインを改善していきましょう。

フォームをデザインしやすいツール3選

入力完了されるフォーム作りには、ここまで説明してきたポイントへ全て対応することが効果的です。ただ、フォームのカスタマイズにはデザインやコーディングのスキルが必要ですし、対応の手間も時間もかかります。

そこで便利なのがフォームツールです。知識がなくても簡単にフォーム設置からカスタマイズができますし、ツールに用意されているデザインテンプレートを活用すれば、デザイン性・機能性ともに優れたフォームを簡単に作成できます。

1.formrun（フォームラン）

formrunは直感的な操作でフォーム編集ができるため、技術的な知識が無くてもスピーディに見せ方や要素などのデザインの変更が可能です。

特徴

• ノーコードでデザインを編集可能
• グッドデザイン賞を受賞しておりフォームのデザイン性が高い
• フォーム単体ページ・サイト埋め込みどちらでも運用可

Slack、Chatworkなどのチャットツールとの連携も可能なので、スピーディな問い合わせ対応ができます。その際、対応状況（未対応、対応中、対応済みなど）も記載できるので対応漏れを防げるのも安心です。

住所入力を自動補完する機能など、UXを高めるフォームデザインにも一役買うフォーム作成ツールです。

2.Formmailer（フォームメーラー）

Formmailerは株式会社フューチャースピリッツが運営しているツールで、専門知識がなくても様々なタイプのフォームやLP作成が可能です。

特徴

• LP作成プラン有り
• Google Analytics、タグマネージャと連携可
• SSL暗号化でセキュリティも安心

有料にはなりますがLP作成プランがあるので、このツールが1つあればユーザーの入り口（LP）から出口（フォーム）まで完結できるのは大きな強みといえるでしょう。

3.formzu（フォームズ）

フォームズ株式会社が提供するformzuは、忙しい担当者に役立つ自動返信メール機能やセキュリティが特徴のフォーム作成ツールです。

特徴

• 自動返信機能
• 統計機能搭載でアンケートに便利
• SSL化・パスワード認証・スパム対策が可能（reCAPTCHA認証）

データはCSVに出力されるため、Excelでの情報管理が可能です。PayPalやクレジットカード決済対応はECサイト運営にも役立つでしょう。住所の自動検索機能や、半角カタカナを自動で全角カタカナに変換する機能もあるため、ユーザーの負担を軽減できます。

まとめ：フォームのデザインを最適化してCVR向上を実現しよう

フォームデザインが離脱に与える影響は大きいです。だからこそ、フォームのデザインを最適化することで、離脱率を大きく変えられます。

そして、多くのサイトではフォームの入力をしてもらうことが目的なので、フォームのデザインは企業の業績に大きな影響を与えることになります。だからこそ、フォームのデザインを優先的に改善する必要があります。

デザインやフォーム設置に関するノウハウが無い場合や、担当者のリソースが限られている場合には、今回ご紹介したようなフォーム作成ツールが便利でしょう。弊社が提供する「formrun」は、フォームのデザインを簡単に最適化できるツールとなっています。無料で利用できるので、ぜひご利用ください。

【有料ユーザー数No1】デザインが豊富で、カンタン操作で最適化ができるフォーム作成ツール「formrun」はこちら！

CVRが高いフォームを作ることができるフォーム作成ツールです。無料でも利用できるのでまずはお試しでもご利用ください！