こんにちは、ASUE通信編集部です！

今回は「CVを捕りに行く！LPデザイン道場」第四弾として、「フォーム最適化できてる？今日から使えるEFOの極意を一挙公開！」をお届けいたします。

デザキ

これまで業種やターゲット層を問わず、100本以上のLPを制作してきたWebデザイナー。
「見た目の美しさ」以上に「効果を出すためのデザイン」に注力している。
青森の端っこに生まれた宿命か、いつまで経ってもお上りさん思考が抜けない。大きい建築物が好き。

それでは、よろしくお願いします！

フォームは魔界だから心してかかるべし

「LPデザイン道場」のシリーズも第四回です。早くない？
こっそりエゴサしてみると、それなりにご好評頂いているようでありがたい限りです。ホントに感謝しかありません。尊みすら感じる……。
方方に足を向けて眠れないので、スケキヨ・スタイルで地中に埋まるっきゃない気持ちでいっぱいです。
金田一耕助が嗅ぎつけて来る前にサクッと本題に行きましょう！
今回はみんな大好き！「入力フォーム」のお話です。

キービジュアル、CTA、フォームといえば個人的かつ勝手に「三大LP難所」と呼んでいる、LPの中でも一番インパクトが大きい部分です。
正確にはLP以外のWebサイトでもインパクトが大きいのですが、LPは明確な目的がある分ダイレクトな影響が出やすく、また見えやすいです。
第二回で「KVは底なし沼」と申しました。それにならうと第三回で取り上げたCTAは「修羅場」です。
そして今回のテーマであるフォームは「魔界」なんです。

フォームに手を焼いているWeb担当者様も多いんじゃないでしょうか？問い合わせが無いとか離脱が多いとか……。
おおよそのLP制作者にとってフォームはかなりの厄介者です。心してかかる必要があります。

どうすれば「魔界」と上手く付き合えるのか、そしてなぜフォームを「魔界」呼ばわりしているのか―――。
その辺の詳しいお話をしていければと思います。しばしお付き合いいただければ幸いです。
名探偵はこんなトコにいないで現場に向かってください。

「フォーム入力＝ストレス」は基本！項目は最小限に抑えて！

仮に「買うしかないと思わせる商品」「ものすごく魅力的なキービジュアル」「すさまじく惹かれるCTA」の三役が揃ったとしましょう。

CVする気満々のターゲット！スクロールも破竹の勢いだ！CTAボタンを発見！押した！！！
しかしそこには…、10項目以上入力しなければならないフォームが立ちはだかる！！

これではフォームが障害物になってしまっています。
上の実況モドキは誇張でも何でもありません。「フォームまで到達したユーザーの約7割が離脱している」というのが、Web界隈の通説として長らく存在しています。怖っ。
それもその筈、ターゲットにとってフォーム入力は手間で面倒でストレスがかかる行為なんです。何故なら操作が必要だから！
クーポンや無料プレゼント等、何らかの特典があればターゲットも多少はモチベーションも上がるのでしょうが、それでも「あ、やっぱりいいや…」と途中でフォーム入力を諦める＝離脱してしまうケースも決して少なくありません。

じゃあどうすれば良いのか？簡単です。
フォームの入力項目を最小限に絞れば良いんです。
項目数も少なく入力時間も短いならば、CVへのハードルは一気にガクンと下がります。
さらに言えば、ターゲットがLPの訴求を見てテンションが上がり「買いたい！」と熱を持っているうちにCVへ誘導する事ができるんです。

フォーム入力が面倒だと思われ一旦離脱を許してしまうと、この流れにもう一度乗るのは至難の業です。
鉄は熱いうちに叩くに限ります。必要なのは鍛冶屋でもハンマーでもなく、「最小限のフォーム」です。

最小限の入力項目とは、問題なくサービスを受ける為に必要な分だけを指す

「最小限ったって、これは必要な情報なんだよ！」という方もいらっしゃるでしょう。あるいはフォームを改善したいけど絞り込み方が掴めない方もいらっしゃるかもしれませんね。
これは「ターゲットが問題なくサービスを受ける為に必要なもの＝最小限」と考えれば万事解決オールOKです。やったぜ！

「この情報ホントは必要じゃないけど、ウチで欲しいから必須にしよう！」は、オススメしません。
項目が増えるからというのもあるんですが、もう少し根本的な部分について考えてみてください。
ターゲットは考えます。「なんでこのフォームには、こんなに項目が多いんだ？」と…。

例として資料請求がCVポイントだった場合を挙げてみましょう。
業務に関わるノウハウをまとめたPDFをダウンロードしたいと思った時、必要な情報は氏名とメールアドレスくらいのものでしょう。
性別と年齢くらいならアンケート感覚で答えてもいいかもしれません。

しかし、住所や電話番号まで入力するよう求められたら、どう思われるでしょうか？
「住所や電話番号まで必要なのか？」「しつこい営業電話や営業DMが来るんじゃ？」と、ターゲットに不要な猜疑心を与えてしまいます。
実際にはそうではなくとも、そう「思われてしまう」可能性が高いです。
もっと酷いと「これは個人情報を抜きたいだけのダミーサイトなんじゃないか？」と警戒心がハネ上がる可能性も決して否めません。

ターゲットの信頼を損なってしまえば、もちろん離脱が発生します。
フォームに入力されるのはターゲットの個人情報であり、例え一部でもそれを渡すのであれば最低限の信頼は必要である事も、決して忘れてはいけないポイントです。
ターゲットの手間と時間を浪費させず、信頼を損なわない為にも、フォーム入力は最小限で済むように整えるのが理想的です。

項目を絞ったら今度はフォームを快適にしよう

聞こえますよ。
「項目はもう最小限に絞ってるよ！それでも離脱が多いんだよ！！」という声が…！
そんな悩める子羊には世界の半分…、ではなく「ターゲットがイライラしない入力フォーム」の極意を伝授しましょう。
私もまだまだ修行中の身であるため、レベルアップのために参考になりそうなサイトを日々巡っているんです、が。
ぶっちゃけフォームまでちゃんと最適化されているLPは存外に少ないんですよね…！「アナタもっと輝ける筈よ！！」とか考えちゃいます。

そんな勿体ないケースを減らす為にも、実践を交えつつ「ぼくがかんがえたイライラしないめっちゃ快適なフォーム」をご紹介できたらと思います。

1.あらゆる表示を最適に

フォームの大きさや間隔、必須項目がパッと見てわかりやすいか否か…。
「すぐに理解できてすぐに入力できる」のはとても大切です。まずは表示を整えましょう。

2.入力例を表示

placeholderやマイクロコピーを使って、入力内容の例を提示しましょう。
項目名が表示されていても、真っ白なテキストエリアだけではターゲットは迷ってしまいます。
まずは例を示してスムーズな入力を補助するのも、ターゲットの信頼を得る大事なプロセスです。

3.入力形式はテクニカルに最適化しちゃおう

全角半角の違いやハイフンの有無など、しょーーーーーもない事で再入力を促されたら嫌ですよね。
ある程度は技術的に調整をかけることができるので、type属性などを利用して入力形式に制限をかけてしまいましょう。

4.警告はリアルタイムに表示

必要項目を入力してヨシ！いざ送信！…と、思っても。
確認画面で警告が出てきたら鬱陶しいですよね…。2回引っかかったら確実に「もういいや…」という気分になります。
警告はその場でリアルタイムに表示させて、ムダなストレスを与えないよう設計しましょう。

5.適切な選択方法で快適な操作を

選択項目と言えばプルダウン、チェックボックス、ラジオボタンあたりが代表格ですね。
項目する数や内容に応じて、どれを採用するのか熟考しましょう。
操作がスムーズにできないとフォーム入力のモチベーションは途端にダダ下がります。

6.送信ボタンもリアルタイムに変化する

必須項目や入力ミスがある状態なのに送信ボタンが押せてしまうと、ユーザービリティ的にあまりよろしくありません。
入力に不備がある場合はボタンをグレーアウトして押せない状況にする等、ひと目で「まだ送れない」事を明確にしましょう。
もちろんこの時に修正すべき所を警告しないと、ターゲットはただの不具合だと思って離脱してしまうので注意してください。

ざっと汎用性がある部分を挙げると、こんな感じです。
実際にLPを作る時は、商品の特徴やターゲットが気に入りそうな要素を更に取り入れたり、逆に不必要な要素を排除したりと、調整に調整を重ねて最適化を図ります。
そしてこれは自慢なんですが、ASUEが作るLPのフォームはよっぽどの事が無い限り、上記の項目をクリアしています！
実装部隊が優秀でしてね！彼らには頭が上がりません。やっぱりスケキヨ・スタイルで地中に埋まるっきゃないわ……。

LPに限らずコーポレートサイトやECサイト、SNSなどネットでのコミュニケーションは基本的に一方通行になりがちなものです。
しかし、フォームはターゲットが直接操作して自分で入力項目を埋める必要があります。

つまり！ここで初めて！双方向のコミュニケーション＝情報のやりとりが発生するんです！
なにもフォームに入力して送信される事だけが「情報」ではありません。操作の補助や補完がされておらず、使いにくいフォームを触った感想・感情もターゲットの中には情報として保存されます。

せっかく商品や訴求が魅力的でも「あそこのサイトのフォーム使いにくいから今度はAmazonで買おう」なんて事になったら利率が下がってしまいます。自社サイト経由でしか商品が買えない（サービスが契約できない）となると、売上げアップのチャンスを丸ごと棒に振る事に…。
そんなの勿体ないじゃないですか。「アナタもっと輝ける筈よ！！」とか考えちゃいます。

スマホのフォームは野生の熊以上に注意せよ！

そんな感じでデリケートな扱いが必要なフォームですが、中でも個人的に一番気を使うのはスマートフォンで表示させた時のデザインです。
画面が小さく指での操作が必要なので、パソコン（カーソルで操作する端末）と同じつもりでデザインすると、操作性が残念な事になりかねません。勿体ないオブ勿体ない！
モバイルファーストに注目が集まって久しいですが、ある程度浸透した今だからこそ少し振り返ってみませんか？
特に、スマホのシェア率が高まってきた推移を実際に見てきたソコのあなた。通説だと思っているものが既に更新されてるかもしれませんよ。

1.ボタンサイズもテキストエリアも、最低50pxは要る

Webデザイン界隈では「タップするパーツは最低40px × 40px」という話がよく出るんですが、個人的な所感だと50pxくらいがストレスなくタップできる大きさです。
よく言われるのがボタンサイズですが、テキストエリアもフォーカスするにはまずタップが必要です。
ここのサイズ調整を忘れているサイトがとにかく多い！
確かに40pxでもタップ自体は可能なんですが、子供や女性ならいざしらず、男性や指先が丸っこい人だとどうしても一回で上手く操作できない場合があります。
余裕を持ったサイズで操作性を確保しましょう！
チェックボックスやラジオボタンも、スマホ専用でタップしやすいデザインを作ってあると「おお！」と感心しちゃいます。

2.フォントサイズも、ちょっと大きめに

通常の段落テキストよりも、フォーム部分は少し大きいフォントサイズを採用する事が多いです。大体1.1倍～1.2倍くらいが目安と思っていただければ幸いです。
何故ならフォームの内容は入力した時に、ターゲットが確認するから！
入力項目にもよりますが、視認性を確保するのも入力ストレスを軽減するのに有効な手段です。

3.レイアウトは余裕を持たせて誤タップ防止

「思ってた所とは違う所をタップしちゃった！」は、誰しもが経験している事だと思うんですが、これが連続するとすっごいストレスたまります。もうすっごいストレスフル。
余白を上手く使って誤タップ防止に努めましょう！
「空けすぎかな？」と思ったら、間に罫線を挟んで視覚的に整えるのも、小技テクニックとして使えますよ。

4.最強の確認方法は「実機確認」！

見逃しそうなポイントは上記の通りなんですが、それでもやっぱり「えぇ…」と思うようなデザインを見逃しちゃう時があると思うんですよ。人間だもの。
そこで最強なのが「実機確認」！やっぱりこれに尽きます。
ブラウザのシュミレーターを使うのもアリっちゃアリなんですが、実機で確認してみると「案外ボタン小さいぞ？」とか「指を置いたら注意書きが隠れた…」という発見があるので、デベロッパーの皆々様にはぜひ初期段階での実機確認をオススメしたいです。

特にデザイナーさん方！デザインラフを書き出した画像でもXDのURLでも何でも良いので、自分で作ったものを予め実機確認しておくと後で細かい調整しなくても済むので結果的に効率アップできますよ。超オススメ！

フォームこそ「ユーザーファースト」が現れる場所

Web界隈にもトレンドがあるので、有名な方やブログで取り上げられた事は、つい「そうなのか！今度から実践しよう！」と思ってしまいがちなんですが、一旦立ち止まって考える事も大事です。
「これって本当にユーザーの為になる？」「実際に使ってみた時にどう？」「ここの部分、ホントは要らないんじゃないかな？」「先にやるべき事があるんじゃないかな？」etc...

もちろん、そのトレンドが作りたいLPにピッタリだったり、元々あった課題を解決できる手段としての最適解ならば、なぁーーーんにも躊躇する必要はありません。ヤッチマイナー！
ただトレンドに振り回されて、実際のターゲットやユーザーを置いてけぼりにしては本末転倒になってしまいます。

具体例を出すと、スクロールするとコンテンツがフッと出てくるようなアニメーションがついてるサイトって結構多いですよね。
個人的な体験談で恐縮なんですが、アレちょっと苦手なんですよね…。何故なら読み込みが遅いから！
ちょっとお店の住所が知りたいとか、ちょっと商品情報が知りたい時とか、そんなちょっとした事でも数秒待たされてしまうと「もっと簡素で良いから早く表示させて！」なんて思ってしまいます。
見た目が華やかなのでブランディングサイトには適しているでしょう。しかしECサイトやコーポレートサイトでやられると「もう！！」とイライラする事も……。

このように、見せる技法ひとつであってもサイトへの印象に大きく影響します。ちょっとした事で印象を悪くしてしまったり、逆に好感度を爆上げしたり…。
ターゲットはサイトを見に来ているのではなく、サイトに掲載されている情報を見に来ています。「ドリルを買う人が欲しいのは『穴』である」という金言は有名ですね。

フォームも同じで、ターゲットはフォームを使いに来ているのではなく、フォームに入力する事によって得られるもの（資料請求だったり購買だったり、申込みだったりお問い合わせだったり）を目的にしています。
フォームはあくまで「目的の為の手段」なんです。

手段で躓いてしまったら、目的に対する気持ちも冷めてしまいます。ターゲットも人間ですから、気持ちの浮き沈みがある事を忘れてはいけません。
ターゲットの熱がある内にCVをゲットする為にも、フォームをはじめ「ユーザーファースト」は大事にして行きましょう。

「ユーザーの為」は回り巡るでもなく、「自分たちの為」に直結しているのです。