以前の記事「フォーム最適化３ステップその１:直帰を減らすために有効な７つのTips」でもお伝えしましたが、EFOにおいて、直帰を減らすことは基本的なアプローチのひとつです。
その内容をふまえたうえで、もう少し踏み込んだ直帰を防ぐためのテクニックについて考えていきたいと思います。
前回のおさらい：直帰を防ぐためには？
以前の記事と重なりますが、直帰を防ぐためにはファーストビューで表示する内容がカギです。
「ぱっと見」の情報で、ユーザーの心理的障壁、特に「面倒だな…」と思わせないことか重要です。
そのためのTipsの１つとして、スクロールしなくても必要項目を入力できる項目配置についてお伝えしました。
ユーザーの多くは驚くほどスクロールを嫌がります。
「次の画面に進む」ボタンが、スクロールしなくても見えるような分量になっているかいないかで、ユーザーの心理的障壁は大きく異なってきます。
今回の記事では具体的にスクロールを減らす（＝縦幅をスリムにする）ためのテクニックをご紹介していきます。
はじめに
今回の題材はこちら。当社運営メディアの合宿免許の申込フォームです。
かなり項目が多くページが縦長になっているため、ユーザーにかなりのスクロールを強いてしまうことになります。
最近主流のディスプレイのファーストビュー600px～700pxにあわせて縦700pxで切った画像がこちら。
スクロールしないとフォームの全体像がつかめないため面倒な印象を与えています。
それでは、こちらのフォームを実際に改善しながら３つのテクニックをご紹介していきたいと思います。
目次
その1：入力例の表示はプレースホルダーを活用！
プレースホルダーとは、テキストボックスやテキストエリアの中にあらかじめ表示しておくテキスト（初期表示文言）のことです。みなさまも、様々なサイトでよく目にするのではないでしょうか？
◀プレースホルダーの例。Twitterのログイン画面。
「ユーザー名、または…」のような記述をプレースホルダーと呼びます。
今回では、入力エリアの下側に表示している入力例に関するテキストを、プレースホルダーの中に配置してしまいましょう。
実際にやってみた
改善例。左が改善前で、右がプレースホルダーに収めた例です。
少しずつではありますが、塵も積もれば山となります。
その2：任意項目はまとめて折りたたむ
題材のフォームは、必須項目と任意項目が混ざった状態で並んでいます。
項目がある程度少ない場合は問題ないのですが、
項目が多い場合はゴチャゴチャとした印象を与え、必須項目の量が実際より多く感じてしまうことも。
また、こうしたフォームは入力漏れを生みやすくもあるため、おすすめできません。
まずは必須項目をまとめてみよう
解決方法は簡単です。必須項目同士を近くに集めて配置するだけです。
必須項目を固めて配置するだけで、最低限入力しなくてはいけない項目がはっきりわかり、見た目もスッキリとしました。
必須項目をまとめて上部に配置しておけば、ユーザーは少ないスクロールでフォームの全容を把握することができそうです。
さらに任意項目を折りたたむと生まれるメリット
さらにスクロールを大幅に減らすためには、あつめた任意項目を隠すというテクニックがあります。
先進事例：ガリバーさん中古車提案サービス（http://221616.com/search/proposal221616.html）のフォーム。ページのアクセス時には「おクルマについて」の内容はは折りたたまれており、自由に開閉することができます。
実際にやってみた
同様に、さきほどページ下部に集めた任意項目を隠してみました。
だいぶページ高さが抑えられ、送信ボタンが見え始めるのにさほどスクロールを必要としなくなりました。こちらでだいぶ改善されたのではないでしょうか。
任意項目の数が多いフォームではかなりインパクトを与えられる施策ですので、ぜひお試し下さい。
その3：思い切って２カラム構成にする
最後にご紹介するテクニックは、２カラム構成。
サイト上部のオファー画像（メリット表示部分）をフォームの横に配置するという方法です。
フォームはデザイン上、横幅をさほど必要しないため、左右の余白を持て余しているケースは多いのではないでしょうか。
これを逆手に取り、フォームの横側にメリット提示を行うフォームが増えています。
あのフォームではもう取り入れていた！
すでにこのテクニックを取り入れている先進サイトをご紹介します。
▲Googleのアカウント作成画面。左カラムでアカウント開設のメリットを表示しつつ、右側で登録させる無駄のないレイアウトです。
▲またまた、ガリバーさんのフォーム。こちらは右側にメリットを表示しています。赤いフォームのボタンがファーストビューでもはっきりと目に飛び込んできます。
実際にやってみた
オファー画像を縦長に作り直し、フォームの左側に配置しました。
ファーストビューでボタンが見えるようになり、一瞬でフォームの全体像を把握できます。
やみくもに採用するのはNG！まずは検証を
このテクニックは、サイトによっては違和感が生まれ、かえって直帰を生むリスクもありますので、
まずはABテストなどの検証を経てから導入することをおすすめします。
まとめ
今回、最終的なファーストビューのビフォーアフターは次のようになりました。
その差は一目瞭然ですね！
直帰率に悩むフォームをお持ちの方はぜひ、ご紹介したテクニックを採り入れてみてくださいね。
