デザイナーのたまご（@tamago_78）です。

4月になり、弊社に新卒メンバーが3名増えました。
いずれもビジネスチームへのジョインですが、日々研修で学んだことを日報を通してアウトプットし、いち早く戦力になろうと懸命な姿はとても感化されます。

私が新卒の時は、研修で「うまくいかなかった時はどう解決していきますか？」という問いに対し「酒飲んで忘れます」と答え、怒られていましたね。。。（当たり前）

ということで、私も学びをアウトプットしていこうと思います！

今回は、直近制作したLPを題材にフォームデザインの考察を下記に残していきます。

-----------------------

LPの概要

前Qの後半からメインサービスの派生サービスを作っており、LPを新規で作成する機会が増えてきました。

これまでのLPは、CTAからフォームページへ遷移する仕様だったのですが、今回は画面遷移なしで1ページで完結するLPです。

ターゲットは、若年層/PCを保有していない、もしくは日常的にPCを使用していない方です。
また、自社類似サービスのSPからの流入率が85%だったこともあり、SPメインで作られています。
実はSPからデザインを作るのは今回が初めてでした。
PCのみのWEBサービスのLPでもSPからの流入数が半分、という位にはSPから閲覧する方が多いので、PCのみのサービスでない場合はSPから作成でいいかなと思います。

フォームのデザイン考察①フォームの切り替えとボタン

◼︎ 一問一答式
今回は入力フォーム1項目、選択式の質問を6項目の計7項目用意していました。
一般的に、遷移数 / ボタン数が少ない方がユーザーの手間や負担が少ない＝CVが上がるとされておりますが、
スマホの小さな画面領域でこういったフォームやアンケート等を1ページでスクロール表示となるとユーザーとしては
「あとどのくらい続くのだろう」と、とても長く感じてしまいます。
終わりが見えない / わからない、ということはユーザーにとっては負担になります。
冗長なフォームは離脱につながる為、そういった心理的負担はUIで解決する必要があります。

上記を踏まえ、質問は一問一答式にしています。

一問一答式で画面遷移する仕様だと、環境により読み込みに時間がかかりユーザーのストレスとなってしまいます。
なので、画面遷移なしの仕様で高速な項目切り替えを実現しました。

◼︎ ボタン
該当するボタンをタップで自動で次の質問に切り替わる仕様です。
ラジオボタンで選択→次へボタン、のUIも候補にはありました。
しかし、この質問内容は悩むような質問ではなく誰でも答えが一択しかない為、次々にタップで進んでもらった方がスピーディーな操作性でストレスなく送信ボタンまでたどり着くのでは、という考えの元この仕様にしました。

フォームの考察②進捗確認のUI

項目が全部で何項目あるのか、自分はどこにいるのかがわかる進捗確認のUIは、シンプルに ●/7というtext表記にしました。

初めは下記のようなプログレスバーを検討していました。

1つ目のパーセンテージの方は、
「7項目」が数字的に多いので、はっきり数字を伝えるのではなく進捗率を示した方が心理的負担が減るのでは？という仮説で作りました。
しかし、結局あと何項目あるかわからないという曖昧さがユーザーにとって余計に多く感じるという結論に至り不採用にしました。

2つ目の丸の方は、
- 丸を７つ並べることで、心理的に多く感じるかも知れない（丸のプログレスバーは3step等で使われることが多いので見慣れた物と比較し多く感じる）
- スライダーのUIに似ている為、スワイプできそうに見える（実際はできない）
上記2点の懸念があった為、不採用にしました。

他にも円グラフ風にしてパーセンテージ表示やstep式のUIも検討しました。

ところが、プログレスバーのUIにこだわればこだわるほど、フォームより重要度の高いUIになってしまっていることに気づきました。

ここでやりたいことは進捗確認ではなくフォームを入力することであり
プログレスバーは入力する上での補助でしかないのです。

色々と検討しましたが、上記を踏まえ今回はシンプルにあと何項目有るのか数字で出すUIを採用しました。

余談

最初はフォームの質問項目が今より多かったのですが、
「このLPにおいて本当に必要なものなのか？」をPM / マーケターと話し合い減らしました。
「あった方がいい」ものは乗せ始めるとキリがないので取捨選択が必要です。
こういった話し合いはお互いの意見がぶつかるのですが、そうやっていいモノを作っていくことはサービスを作り上げていく上で必要な衝突だと思います。

今週も1本LP制作があるのでこれまでの知見を活かし良いLPが作れるようがんばります！