JADE のデザイナー masay です。
先日、弊社取締役伊東と話をしておりました。
い：「まさわい（注：筆者の社内呼称）元気？blog 書いてよ。そろそろ、まさわいのコンテンツが読みたいなー。」
ま：「え、いいですけど。なに書きましょう。」
い：「…フォームとかどう？B to B 企業担当者の方向けに資料請求フォーム改善の話。」
ま：「フォーム改善か…面白そうですね。ただ、 前回書いたやつは専門的すぎて、非デザイナーの方々に刺さらなかった感があったのが反省なんですよね。」
い：「専門的な視点でもいいんだけど、B to B の企業の担当者の方が、なるほど試してみようかな、となるような内容だったら良いんじゃない。向き合い方みたいな。」
ま：「なるほど、向き合い方… 何かないか考えてみます。」
い：「お、いいね、じゃ頼むよ。」
......というわけで、この記事ではデザイナーのヒューリスティックな発想を起点に資料請求フォームと向き合ってみたいと思います。
すべての企業サイトでは常に改善のアイデアが求められていますが、分析などに充てる予算や期間が潤沢にないことも多いと思います。この記事がそんな方々のお役に立てば幸いです。
実際のユーザーと自身の考える良し悪しにはギャップがある
UX デザインは顧客の視点が云々… と書いてしまうのは前回の反省が生きないんだった。『○○デザインとは』のようなことは置いておいて、大切なのは、自身（企業のサイト運営者）と実際の利用者には知っていることや知識、気分、要求面などにギャップがあるということです！
念の為… 既にユーザビリティテストを実施しそのレポートを改善に役立てていたり、自身でペルソナを定義し、各種ダイアグラムやフレームワークを用いて問題発見や課題化ができている方にはあまり足しになることはないかと思いますので、以降読み進んで頂いてもあまり得られるものはないかもしれません。
そんなあなた様には弊社謹製 SEO ツール Amethyst の紹介ページ をぜひご覧いただければと思います。
…さて、今回は B to B 企業の資料請求フォームを例にしますが、業務で資料請求フォームの新規作成や改善をする際、現代の分業化された業務の性質上、ある程度の訓練を経ないと、表題で示した”ギャップ”が埋まることは基本的にはないと考えています。そのギャップを如何に埋めるか、そんな話を「資料請求フォームの改善」を通じてお話しできればと思います。
問題のあるフォームの例
さて、今回のお題の為に、世の中の B to B 資料請求フォームを複数しらべてみました。それらから代表的な「問題」要素を抽出して以下のような架空のフォームを作成してみました。
今回はこのフォームを元に、見た目や雰囲気の良い悪いは全く問わず、フォームを入力する際の良し悪しに関してのみ、デザイナーの向き合い方をお伝えします。
まずはご覧ください。
これを見て即座に問題点を複数発見する方もいれば、そうでない方もいることでしょう。
一般に、いわゆる「中の人」であればあるほど発見できる問題は限定的になりがちです。顧客視点を持つことは難しいものです。
冒頭に 『資料請求』の見出しがあり『株式会社 JADE が提供する天然石掘削事業の資料請求フォームです。』 と記載がありますが、なかなかに未知の事業ですね。この記事をご覧頂いている方で今まさに天然石掘削を外部委託しようとしている方はおそらくいないでしょう。
業界のことを詳しくは知らなくとも、資料請求フォームを「入力してくれる相手とのコミュニケーション」の一形態と捉えれば、フォームの良し悪しの評価は実は可能です。
さっそく、問題のフォームを眺めながら思考を巡らせていきましょう。
- （JADE の社名が弊社ファウンダーの氏名由来であるなどから、思いつきで書いてしまいましたが）天然石掘削を外部委託する人って日本にどれくらいいるんでしょう？
- なんとなく IT とは程遠い感がありますが、IT リテラシーはあまり高くないような想像もできます。
- 天然掘削事業者の競合はどれくらいいるのでしょうか？
- 株式会社 JADE の天然石掘削事業の業界認知度やシェア率はどれくらいあるのでしょう？
- ”天然石掘削事業” で検索して出た来た企業に片っ端から資料請求をしているのでしょうか？それともほぼ独占状態で選択肢は限られているのでしょうか？
……などなど、思考が巡りめぐります。
以下に、問題と思われる点を記載していきます。
- 何の情報を入力すべきか不明瞭
- 2つ目の見出しには、『お客様の情報をご入力ください。』 とあります。今資料を請求せんとフォームのページに来ているわけですが、この見出しでは自身の属性を問われているのか、資料の請求先を問われているのかがわかりません。これはギャップ云々ではないフォームとしての明らかな問題です。
- 一方的な必須入力
- 最初の入力項目は『会社名・部署』 欄で必須です。営業電話が嫌だから記載したくない、そもそも会社じゃない、という場合はここで離脱する人もいそうです。業界が飽和状態に近く依頼先が多く存在する場合は、「なんか嫌だからここの資料請求はやめておくか」となるケースも考えられます。この項目が必須になったのは「企業名は絶対把握できたほうが良いから必須でいいでしょ」という社内話がそのまま反映された結果でもありそうです。
- 漢字だけに限定された氏名、男女のみの性別選択
- お名前欄には『お名前（漢字）』と記載がありますが、漢字以外の氏名の方は若干入力がはばかられそうです。性別欄の選択肢はどうでしょうか。昨今のジェンダーに関する考え方を踏まえると「選択しない、という選択肢」があったほうが良いかもしれません。
- デフォルトで “希望” のメールマガジン
- 『当社からのメールマガジン送信』欄まで来ました。デフォルトで『希望する』がチェックされていますね。不要なら『希望しない』をチェックすれば良いですが、資料請求をしに来たのに少し嫌な感じを受ける人もいるかもしれません。
- 資料請求に関係ない情報が選択必須
- 『掘削事業の外部委託に関して』欄も、資料請求したいだけなのに何か嫌な感じがしますね。必須表記がないので任意入力だと思いますが、デフォルトで『委託することが決まっている』が選択されており、特に言いたくない場合は『委託するかどうは決まっていない』を選択するしかありませんが釈然としません。株式会社 JADE の天然石掘削事業が独占・寡占状態で依頼者を選ぶポジションの場合は良いのかもしれません。
- 資料送付形態が不明
- 住所は入力したから郵送されてくると想像する方が多そうですが、どこにも郵送するとは記載がなく、メールアドレスを入力したのでPDFがダウンロードできるようになると期待する方もいるかもしれません。これは、資料を送る方法を当然の事として知っている中の人の視点だけを持っているとなかなか発見しづらい問題です。競合他社ではPDFの即時ダウンロードが当たり前だったりすると大きな問題です。
ギャップを埋める
フォームをざっと見ていきましたが、天然石掘削事業の競合の有無、企業の業界認知度やシェア、フォーム閲覧者の IT リテラシーの低さなどは、あくまで “仮” の前提で見ていきましたので、前提によって列挙できる問題の精度は変ります。
実際にデザイナーが資料請求フォームを評価する際には、既存顧客のデータからロジカルに「今」獲得できている顧客像を明示化します。あるいは、社会の変化や企業の弱みや強みの変化に応じた「今後」獲得していきたい顧客像を明示化します。このようにして明示化された顧客を念頭に置いた上で、資料請求フォームの良し悪しを定性的に評価することで、“仮” の割合が減り、より信頼性の高い成果が得られます。
現実的には、冒頭に記載した通り予算や期間が潤沢ではないことも多く、必ずしも 100% の振る舞いをする必要もなく、マーケティング担当者自身の中で顧客の解像度を高めていくことによるサイト改善は可能です。
実際のユーザーと自身の視点のギャップを埋める、顧客像を明示する為のデータは、意外とすでに社内に存在していることが多く（取得した属性、アンケート、各種調査資料など）、それらをあるべき視点で向き合えていないケースが存在しているように思います。 前セクション最終項目のように “資料送付方法を知ってしまっている中の人視点” をサイト改善に持ち込んでしまっているようなケースも、あるべき視点で向き合えていないという点では同様です。
もし、顧客像も把握できておりフォーム改善もしているが何かピンと来ない・成果が出ないという場合は、是非、“ユーザー視点を持ってサイト改善やってるから問題ない” という自己認識を改めて問い直してみてください。把握できるはずのユーザー像を可能な限り今よりも解像度を高めた上で改めてページに向き合っていくことがサイト改善に大きく寄与できるとのではと思います。
改善版のフォーム2パターン
最後に、改善版のフォームを、なぜそうしたかの背景を伴わせて置いておきます。
100% これが良いというわけではないかもしれませんが、こちらもフォーム改善の糸口となれば幸いです。
- 冒頭に、郵送なのか PDFダウンロードできるのかわからないので明記。
- 冒頭の 『※ 英数字は半角でご入力ください。』は、半角入力を許容する形の実装にし、文面を削除。
- 入力欄を、資料請求に必要な情報とそれ以外をアンケートとして分割。
- 『お名前（漢字）』は、英語名等も考慮し、『お名前』に。
- 姓、名、セイ、メイの placeholder テキストは、入力をはじめてしまうと項目名が見えなくなってしまうため、入力欄左にテキストとして記載。
- 性別選択は非選択も含め現代に沿ったものに。
- 郵便番号欄が領域幅 100% だったが、桁数に応じた幅に縮小。
- 手入力した郵便番号から自動で市区町村を入力する機能は、使いやすさの観点もそうだが、マジョリティであるという点から追加。
- 電話番号欄の placeholder テキストが具体的すぎる。ケースとしては少ないと思うが、入力済みと感じ送信ボタン押下後にエラーが発生し意欲が減退、などが考えられる為に削除（自社の番号などを placeholder として記載するケースが見受けられる）。
- 電話番号は、ハイフンありでも無しでも入力を受け付けるようにし、その旨をテキストで記載。
- 『TEL』は『電話番号』に変更（読み上げブラウザ等の支援ブラウザでは ティーイーエルと読み上げられる点も考慮）。
- 『E-Mail』は『メールアドレス』に変更。
- 『掘削事業の外部委託に関して』欄、及び『業種』欄は、任意でありながらデフォルトで選択されており、また回答したくない場合の選択肢がない為、デフォルト未選択としたプルダウンに変更。
- 『弊社担当者からのご連絡』ご連絡欄は、メール・電話どちらでも構わない場合の選択肢が無い為、追加。
更に、パッと見では、入力項目がかなり多く見えます。 もともと PDF ダウンロードの選択肢はありませんでしたが、実際には PDF ダウンロード可能な企業が多いように思います。
要素の出し分けが可能であれば、以下のように請求資料タイプを選択させ、選択肢に応じて必要な入力項目を出すことで、入力項目が削減できるでしょう。
おもしろいと思っていただけた方、私が以前に執筆したこちらの記事もよろしければどうぞ！
