EFOサービスで蓄積した効果のあるノウハウを紹介しています。

入力フォームをデザインする際のポイント10選!【成功事例あり】

入力フォームをデザインする際のポイント10選!【成功事例あり】

本記事では、入力フォームをデザインする際のポイントをご紹介します。オンライン上での消費活動が増える今、入力フォームは事業者とユーザーをつなぐWeb上の重要な接点です。申込直前の入力フォームで離脱させないために、入力フォームをデザインする際のポイントをおさえましょう!誰でもすぐに実践できるポイントを10個まとめましたので是非参考にしてください。

入力フォームにおいてデザインが重要な理由

入力フォームのデザインが重要なのは、コンバージョン率に直接影響を与えるからです。

視認性の低い項目名や、幅が狭くて操作しにくいデザインは、ユーザーの離脱を誘発し、結果としてコンバージョン率が低下してしまいます。

入力フォームは、購買や契約申し込みの直前に設置されることが多く、一定の申し込み意欲を持ったユーザーがたどり着く場所です。

しかし、そのようなユーザーの約70%が入力フォームで離脱すると言われています。高額な広告費をかけて集客したユーザーを、申し込み直前の入力フォームで離脱させてしまうのは、非常に勿体ないですよね。

本記事では、入力フォームをデザインする際のポイントを押さえ、コンバージョン率の高いフォームを目指しましょう。

▶デザイン性の無い入力フォームを体験したい方:「めちゃくちゃ使いにくい」入力フォームを作ってみた。

デザイン変更だけで離脱・CV率が改善した事例

デザイン変更だけで、本当に離脱は減るの?CV率は向上するの?と半信半疑の方もいるでしょう。

今回は、デザイン変更の成功事例をいくつかご紹介します。

他のEFO(入力フォーム最適化)成功事例を見たい方は、EFO事例|離脱防止・CV率改善を実現した施策を紹介をご参照下さい。

離脱率改善事例

記入例移動によるEFO成功事例イメージ図

始めに、「記入例」の移動によって、直帰離脱が1.0pt改善した事例です。

最大のポイントは、入力フォーム内の余白が増えた事です。仮に、同じ項目数でも余白が多い入力フォームは、入力しやすい印象を与えます。

ECサイトの会員登録フォームや予約フォームには、購買や申込みの直前まで来ているユーザーが到達しています。確実にCVしてもたらうためにも、余白を確保し、シンプルなデザインにする事が重要です。

 

「ZOZO TOWNの新規会員登録フォ―ム」も記入例が項目内に設置してあります。参照:https://zozo.jp/sp/

ECサイト

CV率改善事例

入力項目の幅変更によるEFO成功事例イメージ図

次は、「項目幅の拡張」・「必須ラベルの変更」によって、CV率が5.6pt改善した事例です。

項目幅が狭いと、カーソルインしずらい、入力された文字が小さく誤入力に気が付けない等の問題が発生します。また、早い話「古い・流行りに乗れていないデザイン」に見えます。

必須項目=必要最低限の項目です。ユーザーに最短ルートを提示し離脱の暇を与えずCVしてもらいましょう。

特に、金融系フォーム(口座開設フォーム・保険申込みフォーム)は入力項目が多いため、必須項目の視認性を高めユーザーの入力負担を最小限に抑える事が重要です。

入力フォームをデザインする際のポイント10選

デザインのポイント1:項目をまとめる

項目を1カラムに変更し成功したEFO事例イメージ図

入力項目は極力1カラムのデザインを採用しましょう。理由は、カーソルイン移動の手間を減らせるからです。

入力フォームにおいて作業量の削減はユーザーの負担軽減に繋がり、離脱削減を見込めます。

デザインのポイント2:縦のラインを揃える

入力フォームのデザイン変更しCV率が改善した事例-

 

入力フォーム全体の縦ラインを揃えましょう。項目の幅がまちまちだと、入力フォーム来訪時に入力しずらい印象を与える可能性があります。

最低限のデザイン性や統一感は意識しましょう。

デザインのポイント3:ステップナビを設置する

入力フォームのデザイン変更ポイント:ステップナビを設置した事例

 

入力フォームのファーストビュー内にステップナビの設置をお勧めします。

自分が今何の入力作業をしているか、全体の入力量のうちどれ位進んだのか等、現状のステータスを知らせ、ユーザーを安心させましょう

デザインのポイント4:難易度の低い項目から配置する

入力フォームデザイン例:入力フ項目の配置を変える

 

【難易度が低い項目】:名前・性別・生年月日(考えずとも反射的に入力可能)

【難易度が高い項目】:メールアドレス・運転免許証・クーポン番号・日時選択(準備・参照・調整が必要)

入力フォームでは、入力難易度が低い項目から配置しましょう

入力難易度が低い項目とは、「名前・生年月日・性別」等です。要は、反射的に入力可能な項目を指します。難易度が低い項目を先頭に配置する事で、入力ハードルの低いフォームを演出できます。

反対に、「メールアドレス・運転免許証・クーポン番号・日時選択」は入力難易度が高い項目です。主に、準備・参照・調整が必要な項目が該当します。

デザインポイント5:フォントサイズとカラーを最適化する

入力フォームデザイン例:入力フ項目の配置を変える

 

入力フォームのフォントサイズとカラーを上手に活用しましょう全て同じフォントサイズ・カラーでは、メリハリが付かず重要なポイントに目が行きません。

まずは、「項目名→記入例→注釈」の順で目立つデザインを意識してみてください。

デザインポイント6:案内を非表示化する

入力フォームのデザインポケット:アコーディオン化

基本的に、入力フォームは項目名と入力欄(項目)があれば成立します。しかし、お知らせや申し送り事項等、ユーザーへの伝達事項が多いのが現状です。

企業側に負い目が無いよう、丁寧に細かく注意書きを羅列していませんか?

特定のユーザーにのみ該当する注釈や法的に表示不要な内容はデフォルトで非表示化しましょうユーザー自身で情報の取捨選択ができるデザインが理想です

また、デフォルトで非表示化する事でページ全体が短く、文字量が減るためスッキリとした印象になります。

※よく用いられるのが、「アコーディオン」という表示方法です。アコーディオン化した要素部分を押すと、下部に隠した内容が表示されます。

他のEFO機能を知りたい方はこちら▶【EFO機能一覧】入力フォームに導入したいオススメ20選!

デザインポイント7:不要な項目を設置しない

申込みに不要な項目を設置している入力フォームを良く目にします。EC業界の入力フォームで多いのはアンケート項目、金融業界の入力フォームで多いのは余計な審査項目です。

アンケートデータは集計して本当に活用していますか?審査には不要だけど「情報として欲しい」という理由で項目を設置していませんか?不要な項目の設置は両者にとって不利益です。該当する場合には見直しを行いましょう。

デザインポイント8:必須項目のデザインを最適化する

入力フォームのデザイン:必須ラベル

 

ユーザーは常に楽をしたいと考えています。必須項目を強調し入力フォームを最短で駆け抜けてもらいましょう。必須項目のデザイン例をまとめました。是非参考にして下さい。

デザインポイント9:CTAボタンを最適化する

入力フォームのデザイン:CTAボタン

 

入力フォームのCTAボタンは、「押すとどうなるのか」が伝わるデザインや文言にしましょう。

「次のページに進むのか・前ぺージに戻るのか・押すと申し込んだ事になるのか」等、ユーザーが安心して行動出来る様にデザインしましょう。また、進むためのボタンが目立つデザインを採用し、誤操作によるページ戻りも防止しましょう。

デザインポイント10:ピンチインを防止する

項目にカーソルを合わせると、画面が拡大(=ピンチイン)される入力フォームをたまに見かけます。スマホ用の画面幅で表示されないため、いちいち指で画面を縮小しながら入力を進める必要があり、非常に面倒です。スマホ対応を行い適正な画面幅で表示しましょう。

 

まとめ

入力フォームにおいてデザインが重要な理由

⇒コンバージョン率に直結するからです。項目名の視認性が低いデザインや、項目幅が狭く操作しずらいデザインは離脱を誘発し、コンバージョン率低下に繋がるので注意しましょう。

入力フォームをデザインする際の心がけ

入力フォームにおけるデザインのゴールは、「これ位なら入力してみようかな・入力しやすそう」と思わせる事です。「おしゃれ・かっこいい」と思わせる事ではありません。

入力ハードルの低さを演出し、入力すべき内容が正確に伝わるデザインを心がけましょう。

入力作業は「必要不可欠だけどやりたく無い事」です。ユーザーが重い腰を上げ、「これなら入力してもいいかな」という気持ちにさせるデザインはどの様なものでしょうか。

ユーザーの目線に立ち、少し気の利いたデザインを採用する事で一緒に入力開始率・コンバージョン率をあげていきましょう。

入力フォームをデザインする際のポイント10選

目的別にデザインのポイントをグルーピングしました。

∟入力フォームの印象を改善したい

ポイント2:縦と横のラインを揃える

ポイント3:ステップナビを設置する

ポイント4:難易度の低い項目から配置する

ポイント5:フォントサイズとカラーを最適化する

ポイント6:案内を非表示化する

∟入力の手間を削減したい

ポイント1:項目をまとめる

ポイント7:不要な項目を設置しない

ポイント8:必須項目と任意項目の差を明確にする

ポイント10:ピンチインを防止する

∟次ページへの遷移率をあげたい

ポイント9:CTAボタンを最適化する

入力フォームを改善するなら「フォームアシスト」

  1. 5,000フォーム以上の導入実績を活かした分析とご提案
  2. どんなお悩みも対応できる40種類以上のEFO機能
  3. タグ設置だけの簡単導入

EFOツール「フォームアシスト」説明画像

よくある質問と関連記事

Q:EFO(入力フォーム最適化)とは何ですか?

A:EFOとは

Q:EFOでCVRが改善した事例を知りたいです

A:EFO事例|離脱防止・CV率改善を実現した施策を紹介

Q:EFO機能について知りたいです

A:【EFO機能一覧】入力フォームに導入したいオススメ20選!

Q:入力しやすいフォームとしにくい入力フォームの違いを知りたいです!

A:「めちゃくちゃ使いにくい」入力フォームを作ってみた。

Q:EFO(入力フォーム最適化)の事例集やテクニックを知りたいです!

A:こちらから資料をダウンロードできます!CV率改善必勝テクニック集ダウンロード