以前の記事「フォーム最適化3ステップその1:直帰を減らすために有効な7つのTips」でもお伝えしましたが、EFOにおいて、直帰を減らすことは基本的なアプローチのひとつです。
その内容をふまえたうえで、もう少し踏み込んだ直帰を防ぐためのテクニックについて考えていきたいと思います。

前回のおさらい:直帰を防ぐためには?

以前の記事と重なりますが、直帰を防ぐためにはファーストビューで表示する内容がカギです。
「ぱっと見」の情報で、ユーザーの心理的障壁、特に「面倒だな…」と思わせないことか重要です。
そのためのTipsの1つとして、スクロールしなくても必要項目を入力できる項目配置についてお伝えしました。

ユーザーの多くは驚くほどスクロールを嫌がります。
「次の画面に進む」ボタンが、スクロールしなくても見えるような分量になっているかいないかで、ユーザーの心理的障壁は大きく異なってきます。

今回の記事では具体的にスクロールを減らす(=縦幅をスリムにする)ためのテクニックをご紹介していきます。

はじめに

今回の題材はこちら。当社運営メディアの合宿免許の申込フォームです。
かなり項目が多くページが縦長になっているため、ユーザーにかなりのスクロールを強いてしまうことになります。
改修前のフォーム
改修前のフォームファーストビュー
最近主流のディスプレイのファーストビュー600px~700pxにあわせて縦700pxで切った画像がこちら。
スクロールしないとフォームの全体像がつかめないため面倒な印象を与えています。

それでは、こちらのフォームを実際に改善しながら3つのテクニックをご紹介していきたいと思います。

目次

  1. その1:入力例の表示はプレースホルダーを活用!
  2. その2:任意項目はまとめて折りたたむ
  3. その3:思い切って2カラム構成にする

その1:入力例の表示はプレースホルダーを活用!

プレースホルダーとは、テキストボックスやテキストエリアの中にあらかじめ表示しておくテキスト初期表示文言)のことです。みなさまも、様々なサイトでよく目にするのではないでしょうか?
プレースホルダーの例:ツイッター
◀プレースホルダーの例。Twitterのログイン画面。
「ユーザー名、または…」のような記述をプレースホルダーと呼びます。

今回では、入力エリアの下側に表示している入力例に関するテキストを、プレースホルダーの中に配置してしまいましょう。

実際にやってみた

入力例を下部に表示している場合
プレースホルダー改善後


改善例。左が改善前で、右がプレースホルダーに収めた例です。
少しずつではありますが、塵も積もれば山となります。

その2:任意項目はまとめて折りたたむ

題材のフォームは、必須項目と任意項目が混ざった状態で並んでいます。
項目がある程度少ない場合は問題ないのですが、
項目が多い場合はゴチャゴチャとした印象を与え、必須項目の量が実際より多く感じてしまうことも。
また、こうしたフォームは入力漏れを生みやすくもあるため、おすすめできません。

まずは必須項目をまとめてみよう

解決方法は簡単です。必須項目同士を近くに集めて配置するだけです。
必須をまとめるビフォーアフター
必須項目を固めて配置するだけで、最低限入力しなくてはいけない項目がはっきりわかり、見た目もスッキリとしました。
必須項目をまとめて上部に配置しておけば、ユーザーは少ないスクロールでフォームの全容を把握することができそうです。

さらに任意項目を折りたたむと生まれるメリット

さらにスクロールを大幅に減らすためには、あつめた任意項目を隠すというテクニックがあります。
ガリバー折りたたみビフォーアフター
先進事例:ガリバーさん中古車提案サービス(http://221616.com/search/proposal221616.html)のフォーム。ページのアクセス時には「おクルマについて」の内容はは折りたたまれており、自由に開閉することができます。

実際にやってみた

同様に、さきほどページ下部に集めた任意項目を隠してみました。
折りたたみビフォーアフター
だいぶページ高さが抑えられ、送信ボタンが見え始めるのにさほどスクロールを必要としなくなりました。こちらでだいぶ改善されたのではないでしょうか。
任意項目の数が多いフォームではかなりインパクトを与えられる施策ですので、ぜひお試し下さい。

その3:思い切って2カラム構成にする

最後にご紹介するテクニックは、2カラム構成
サイト上部のオファー画像(メリット表示部分)をフォームの横に配置するという方法です。
フォームはデザイン上、横幅をさほど必要しないため、左右の余白を持て余しているケースは多いのではないでしょうか。
これを逆手に取り、フォームの横側にメリット提示を行うフォームが増えています

あのフォームではもう取り入れていた!

すでにこのテクニックを取り入れている先進サイトをご紹介します。
Google2カラム事例▲Googleのアカウント作成画面。左カラムでアカウント開設のメリットを表示しつつ、右側で登録させる無駄のないレイアウトです。
ガリバー2カラム事例▲またまた、ガリバーさんのフォーム。こちらは右側にメリットを表示しています。赤いフォームのボタンがファーストビューでもはっきりと目に飛び込んできます。

実際にやってみた

2カラムビフォーアフター
オファー画像を縦長に作り直し、フォームの左側に配置しました。
ファーストビューでボタンが見えるようになり、一瞬でフォームの全体像を把握できます。

やみくもに採用するのはNG!まずは検証を

このテクニックは、サイトによっては違和感が生まれ、かえって直帰を生むリスクもありますので、
まずはABテストなどの検証を経てから導入することをおすすめします。

まとめ

今回、最終的なファーストビューのビフォーアフターは次のようになりました。
ファーストビューのビフォーアフター
その差は一目瞭然ですね!
直帰率に悩むフォームをお持ちの方はぜひ、ご紹介したテクニックを採り入れてみてくださいね。