BtoBのマーケティング活動に従事している場合、自社製品やコンテンツを紹介するためにランディングページを使用したマーケティングキャンペーンを展開した経験のある方も多いのではないでしょうか。
筆者自身、これまで複数のBtoB企業におけるキャンペーンの全体設計やオペレーションを支援してきました。
そのなかで感じてきたのは、各社素晴らしい製品やサービスを持っていたとしても、その魅力や価値をランディングページという媒体によって最大限に伝えきれていないケースも多々あるということです。
BtoBのマーケティング戦略では、ターゲティングした業界やペルソナに対して、いかに製品の価値提案を効果的に行えるかが肝になります。
ランディングページは非常に有用なツールですが、その意義や様式を理解しつつ、キャンペーンのオペレーションに落とし込まなければ、せっかくのコンテンツも正しく価値を伝えられません。
そこで本稿では、BtoBのマーケティングキャンペーンにおいてランディングページを有効に活用するための基本的な着眼点を解説しますので、ぜひお役立てください。
ランディングページでコンバージョン獲得に必要な基本事項
ランディングページとは「特定の目的をもった一枚もののWebページ」であり、検索結果や広告経由で見込み客が最初に訪れるページを指します。
米HubSpotの定義も参考にすると、ランディングページは「情報収集段階にある見込み客を、検討プロセスへコンバージョンさせるもの」であり、そのためにデザインされるページともいえます1。
BtoBのマーケティングキャンペーンでは、データベースのコンタクトに自社の製品を訴求するメール配信・広告などの外部媒体から、ランディングページに遷移させるのが一般的でしょう。
BtoBの場合、「資料請求」「デモ・サンプルリクエスト」などによる問い合わせ導線でランディングページを作成することが主目的となりますが、注意したいのが「前工程からのCX (カスタマーエクスペリエンス)の一貫性の担保」です。
例えば、メールの文面とLPの文面との差別化が薄く、内容が冗長となってしまい「これさっきメールでも読んだけど…」と見込み客に感じさせるなど、中間媒体としての情報粒度を意識できていないケースが散見されます。
そのため、以下のように各媒体によって役割・訴求方法を切り分けて意識することが大切です。
- メール：受信者の興味を喚起しランディングページへ遷移させる。
- ランディングページ：より詳細な情報を提供し製品・サービスの利点や特徴を強調し資料請求や問い合わせというコンバージョンへ繋げる。
コンテンツを作成する際、この意識が分断して自社の書きたいことだけを書いてしまっては本末転倒といえます。
実際に、米Intuit 社のランディングページに関する記事によると、ランディングページのコンバージョン率は約10%とのことです2。
このように、ランディングページのコンバージョン率を最大限高めるためには、興味をもってメールから遷移した見込み客がランディングページを通過し「次のプロセスに進みたい」と思えるような情報の提供、短時間で必要な情報にたどり着けるような動線設計(コミュニケーションコストの削減)などカスタマージャーニー全体を見渡してCXを高める工夫が重要となります。
製品を訴求する「ボディ部分」設計のベストプラクティス
ランディングページは、大きく分けて製品紹介等のコピーで構成される「ボディ部分」と入力フォームを設置する「フォーム部分」に二分されます。
ランディングページは、用途ごとにレイアウトが異なりますが、本稿では一般的なBtoBの製品・サービス訴求に使用される2カラムのデザインをベースに解説します。
図1.マーケットワンの2カラムランディングページの例
ランディングページ閲覧時の「Fパターン」とは
見込み客にランディングページの内容を最大限に伝えるためには、掲載する情報の質も重要ですが、それと同等程度に大切なのがランディングページのレイアウトです。
2006年に実施された、米Nielsen Norman Group社の調査によると、Webページ閲覧時の視線の動きに関する研究によると、調査対象者の目線は、Fパターンレイアウトであることを示しています3。
- ページの上部を左から右に水平にスキャン
- ページの左側を下に移動
- 特定のポイントで再び左から右に内容をスキャン
ランディングページキャンペーンでFパターンレイアウトを適用する上では、左側にサブヘッダーの配置(後述)や箇条書きの形式で情報を提供すると、見込み客の注目を引きやすくなります。
あるいは、特定のキーワードやフレーズを強調表示することで、再び左から右にスキャンする際の見込み客の注意を引けます。
以下は米Salesforce社のランディングページですが、左から右への動線を担保するため、サービス名の強調表示や箇条書きを活用することで、見込み客が短い時間で必要な情報を得られるような構成となっているとわかるでしょう4。
当社のランディングページにおいてもこの法則を適用し、H2で「どういった資料内容であるか」「どのような方向けの資料であるか」を強調しており、その下部に箇条書きを用いることで短時間でコンテンツ内容が把握できるよう工夫しています。
図2.短時間で情報を届けるための工夫の例
ファーストビューの重要性
一般的に、見込み客がランディングページの概要を把握するのにかける時間は、平均7秒程度といわれています5。
つまり、ランディングページのデザインもこの時間内で「何の製品・サービスのどういった部分をアピールしているのか」「そのランディングページを通過することで自分は何を得られるのか」という明確なベネフィットを伝えなければならないということです。
必然的に、ランディングページでは「ファーストビュー」が最も重要な箇所になっていきます。訪問者がスクロールすることなく見られる範囲のことをAbove the fold（折り目の上）といいますが、ここでその後に読み進める価値のあるコンテンツかをアピールできなければ、スクロールすることなくページから離脱してしまうでしょう。今回はファーストビューの要素として、注意すべきポイントを2つ紹介します。
注意点①：ヒーローイメージ
ヒーローイメージとは「ランディングページの上部に配置される大きな背景イメージ画像」を指し、見込み客に強力な第一印象を与える上で欠かせない要素です。
図3.ヒーローイメージの例
ヒーローイメージは、自社の製品やサービス内容を視覚的に表現する画像となるため、十分な解像度を持ったものを選定し、ランディングページとの関連性を明確にイメージできるものにしましょう。
当社の場合、ホワイトペーパーのDLをコンバージョン目的としたランディングページの作成が多いため、提出後に得られるホワイトペーパーを想起させる形で各資料の表紙画像を挿入しています。
なお、ヒーローイメージに文字入れが行われるケースもありますが、その場合は「キャッチコピー(H1)」「その後に続く見出し(H2)」とのメッセージを調整しストーリーを考えた上で作成する必要があります。
注意点②：H1(キャッチコピー) & Sub heading
見込み客がヒーローイメージと同タイミングで注視するのが、ランディングページのキャッチコピーであるH1と、キャッチコピーを補足するSub heading部分になるでしょう。
H1は「このランディングページで我々は何を伝えたいのか」を一言で詰め込んだものです。H1には簡潔さと明瞭さが求められ、見込み客に刺さらなければ、その時点でページを離脱してしまうこともあり得るでしょう。
冗長になりすぎず。かといって製品の魅力をアピールするのに不足はない、魅力的な文言を設定する、まさにマーケターの腕の見せ所といえます。
Sub headingはランディングページにおいて必須の要素ではありませんが、H1のメッセージを補完するために製品やサービスの追加情報を付与する上では役立ちます。あくまで、見込み客の興味・関心を喚起し、エンゲージメントの促進に寄与させるのが目的です。
H1が長くなってしまう場合で重要なキーワードが散在してしまいそうな場合はSub headingで視覚的な区切りを設け、上述したFパターンのように視認性を向上させられるという利点もあるでしょう。
見込み客にとって読みやすいロジカルなライティング
そもそもH1, H2, H3などのhタグ (見出しタグ)は、「情報収集を行なっている見込み客」「検索エンジン」にページの情報構造をわかりやすく伝えるためのものです。
Webライティングにおいて、Hタグを使ってマークダウンしていく利点は大きく2つあります。
- SEO効果
- ユーザーへの文書構造の明示
一般的にランディングページは特定のメール配信キャンペーンや広告に関連して「短期的なコンテンツ」として作成されるものであるため、SEOの文脈で検索上位を狙っていく類のものではありませんが、この考え方は応用できます。
SEO施策を実施する=検索エンジンがコンテンツ構造を理解しやすいものにするということです。機械が理解しやすいということは、「人間にも読みやすいものである」といえるでしょう。
当社マーケットワン・ジャパンはBtoBマーケティングを専門とするコンサルティング企業ですが、筆者は入社後についてロジカルシンキング・ライティングを徹底的に叩き込まれました。
ランディングページはGoogleにインデックスされれば検索エンジンの検索対象となります。
Googleはクローラーと呼ばれるシステムを使って、各ページの構造を分析していますので、より構造を理解しやすい (＝クローリングしやすい)構成にすれば、SEOでよりよい効果が期待できます。
当社では、クライアントへ提案資料を作成する際は以下のような形で論理構成を整理します。
- ある課題に対し、自社の製品・サービス〇〇の××といった機能が課題解決に寄与することができると言ったメインメッセージを作る。
- 上記メインメッセージは「なぜそう言えるのか」という根拠・切り口にもれなく分解する。
- 「その根拠・切り口を裏付けるファクトは何か」を洗い出し、論理を構成する。
ランディングページに置き換えると、H1という大見出しで伝えたいメッセージが「なぜそう言えるのか」を分解したものが中見出しであるH2。そのH2を支えるファクトとして小見出しのH3を位置づけるなど、構造的なライティングを実施することで、見込み客に短時間で情報を理解してもらい、重要ポイントを読んでもらいやすくなるでしょう。
迷った際には、まずはランディングページで伝えたいことを箇条書きで記載するのが有効です。余計な装飾なしのテキストの状態で、縦のレイヤー、横のレイヤーを見比べたときに「論理的に整合性が取れているか」を徹底的に吟味した上でランディングページを作成しましょう。
見込み客が個人情報を入力する「フォーム部分」設計のベストプラクティス
資料請求・問い合わせなどのフォームは、対価と引き換えに見込み客に関する情報取得を目的とするため、回答によって得られるベネフィットが、入力にかかる負荷を上回っていなければなりません。
フォーム入力に際して見込み客がストレスだと感じることを避けるためのポイントには、以下のようなものがあります。
- 入力項目の数を適切なものにする
- フォームバリデーションを設ける
- CTAを効果的な文言・配置・デザインにする
それぞれ、個別に解説します。
入力項目の数を適切なものにする
HubSpotの調査*によると、見込み客がフォームを離脱する理由として大きな要因が「フォームが長い(=入力項目数が多い)」ということです。
米HubSpot社が公開している調査情報 をみると、回答項目が3つの時が最もコンバージョン率が高く、5つまでは約20%を保っていますが、それを超えると大きく低下するとわかります6
。
一方で8〜10個の間ではほとんど変化はありません。前述のとおり、入力することで得られる対価を明確に提示できれば、入力項目が多くても一定のコンバージョンは見込めるといえます。
別のデータをみてみると、テキストエリアフィールド(複数行のテキスト入力が必要な項目)の数とコンバージョン率には負の相関が見受けられます6。
つまり、テキストエリアフィールドの数は最小限に留めつつ、他の入力項目でいかに心理的障壁を感じさせずに入力してもらえるかがカギとなるでしょう。
入力例の表示
フォーム入力項目中に、最初から薄字でテキストが含まれているケースも多々あります。これはPlaceholderといい、その項目内で入力すべき情報を例示してくれる機能となります。
当社のランディングページにも実装されており、見込み客が「フィールドに入力すべき情報の粒度がわからない」というフラストレーションを生まないためのガイドとして機能します。
図4. Placeholderの例
ダイナミック表示フィールドの活用
アンケート項目の設置をしたときに、例えばラジオボタンのフィールドで次のような選択肢があったと仮定しましょう。
――――――――――――――――――――
Q. 本製品の特徴のうち、特にどの部分に魅力を感じられますか？
- 特徴A
- 特徴B
- 特徴C
- 特徴D
- その他
――――――――――――――――――――
上記の場合、【その他】を選んだことをトリガーに、【その他を選択された方はご記入ください】のようなダイナミックなテキストフィールドが出現するような設定も可能です。
図5. ダイナミック表示フィールドの例
この設定により、デフォルトでは詳細を入力するテキストフィールドを隠しておきつつ、見込み客にファーストビュー中で不要な圧迫感を与えずに済みます。
このように、全員が入力するわけではないフィールドについては、できるだけロジックの実装を検討しましょう。
フォーム入力にかかる負担の削減方法
自社のランディングページに一度フォーム提出を行った見込み客が、異なるコンテンツのランディングページにアクセスした際に、同様の項目をまた一から入力しなければならないとしたら、見込み客の離脱率は上昇するでしょう。
しかし、一度フォーム提出を実施した見込み客は、MA（マーケティングオートメーション）のプラットフォームにデータとして登録されています。cookieによって人物を特定することで、データベースが保持している値を該当項目に自動入力させることが可能です。
これにより、見込み客は最小限の入力でフォームを提出できるため、コンバージョン率の向上が期待できます。
図6. フォームにおける自動入力の例
フォーム入力の簡便化という観点においては、プログレッシブプロファイリングという手法も有効です。プログレッシブプロファイリングとは、見込み客のデータを一度に集めるのではなく、段階的に収集していく手法を指します。
例えば、バイヤージャーニー上「認知」の段階にある見込み客が、製品のランディングページを訪れたとして、いきなり電話番号などの詳細情報や多量の情報を入力してまで情報を得たいと思わないでしょう。
こういったケースにおいてプログレッシブプロファイリングは有効な手段となり得ます。
プログレッシブプロファイリングを導入すれば、見込み客が初めてランディングページを訪れた際、先ずは名前とメールアドレスといった簡単な項目のみでコンテンツをダウンロードできます。
次回訪問時は、既に入力した情報ではなく異なるフィールドが表示され、見込み客は追加の個人情報と引き換えに新たなコンテンツをダウンロードすることが可能です。
こうして、カスタマージャーニーのステージごとに必要な情報を段階的に獲得していくことで、見込み客の心理的負担を避けながらプロファイリングしていきましょう。
B2Bのデータ活用におけるリードプロファイリングの重要性についてはこちらの記事で解説しておりますのでご参照ください。
注意すべき点として、必ずそのフォームの設問の妥当性について吟味した上で設定しなければならないということは把握しておきましょう
フォーム提出とは個人情報と引き換えに対価となるコンテンツを得る行為であり、「その情報を提供するに十分な価値がありそうか」と感じてもらえなければコンバージョンには至りません。
カスタマージャーニーのステージごとに必要な情報を設計し、慎重にフィールド追加を行うことが大切です。
フォームバリデーションを設ける
バリデーションとは「ユーザーの入力内容が、自社の求めるデータのインプット要件を満たしているかを確認する」機能を指します。
項目を入力せずにフォーム提出をしようとして「未入力です」のようなエラーメッセージとともに、フォーム提出をストップさせられます。
図7.フォームバリデーションの例
米Webデザイナー Luke Wroblewski氏の検証によると、後述するインラインバリデーションを用いたフォームでは、当初のフォームと比較して目立ったパフォーマンスの向上が確認できたと報告されています7。
- 成功率が22%向上
- エラー率22%減少
- 満足度が31%増加
- 完了時間が42%短縮
- 目の移動回数が47%減
バリデーションを実施する際には、以下のポイントに注目するとより効果的です。
必須フィールドとオプションフィールドの区別
どの項目が必須で、どの項目が任意なのかUI上わかりやすい形で明示しましょう。
図8.必須フィールド表示の例
ラジオボタンやチェックボックスの活用
本当に必要な場合を除きテキストフィールドの利用は最小限としましょう。ラジオボタン・チェックボックスフィールドを利用して、見込み客の情報選択を容易にし、バリデーションリスクを避けましょう。
自動入力設定の適用
バリデーションのリスクを減らすため、記入させる箇所を最小限にする目的で導入を検討しましょう（図6. フォームにおける自動入力の例参照）。
エラーのリアルタイム表示 (インラインバリデーション)
フォームバリデーションには、フォーム提出後バリデーションとインラインバリデーションの2種類がありますが、原則後者のインラインバリデーションを用いてリアルタイムでメッセージを出すようにしましょう8。
特にメールアドレスはMA上見込み客を識別する重要情報のため、形式に沿わないものには即バリデーションメッセージを出すように設定しましょう。
図9.インラインバリデーションの例
CTAを効果的な文言・配置・デザインにする
「CTA = Call to action」は、文字通り、見込み客へアクションを促すためのものです。
CTAボタンの色やデザインは各社のデザインガイドに依拠するため、一概にベストプラクティスとは何かとはいえませんが、その他標準的に対応できるポイントを紹介します。
CTA テキスト
CTAのテキストは、見込み客に「ボタンを押したら何が起きるのか」「フォーム提出したらどんな利点があるのか」具体的かつ行動を誘うようなフレーズがよいでしょう。
例えば、お問い合わせを目的としたCTAであれば、ただ「問い合わせ」とするのではなく、副詞や目的語を伴うことで次のステップをより明示的に訴求できます。
- 「今すぐ問い合わせる」
- 「無料相談を予約する」
- 「サンプル提供を依頼する」
送信処理の明示と二重コンバージョンの防止
こちらはフォーム提出をした瞬間のUIにおけるTipsです。HTML/CSSでコーディングしている場合、当初の状態だとCTAボタンにクリック感がないと、ボタン押下後に「本当にフォーム提出されているのか」と見込み客がダブルクリックをしてしまうケースがたびたびあります。
こういった送信状態がわかりづらいUIの場合、見込み客がフラストレーションを感じる可能性があるのに加え、運用上の問題として、ダブルクリックをしたことによるフォームコンバージョンの二重計上といったトラブルに繋がりかねません。
これを防ぐために、当社では見込み客の送信ボタンの押下をトリガーとし、以下2つの動作を設定しています。
- CTAボタンとしての機能を無効化 (二重送信の防止)
- CTAボタンの色をグレーアウトし、CTAテキストを【送信中】へ変更
図8.二重コンバージョン防止の施策例
些細なことに感じられるかもしれませんが、長期的にリレーションを築いていきたい見込み客で、今後何度もフォーム提出が見込まれる場合には、「資料へのリダイレクト」「問い合わせの確認画面」といったコンバージョンに至るまでのUXに最大限配慮しましょう。
おわりに
ランディングページの構成には細々としたTipsが多くあります。
大切なのは、外観の装飾に注力する前に、原点に立ち返り「見込み客がランディングページという媒体を通過することにより何を得られるのか」「そのために短い時間の中で最大限魅力を伝えるにはどうすれば良いか」を徹底的に考え、論理を構築することです。
ただし、ランディングページの構成に唯一絶対の正解はないため、仮説をもとにA/Bテストを繰り返していくことも求められます。今回解説した内容をもとにA/Bテストを実施する場合は、自社のケースにおいて効果がありそうなポイントの仮説を立てることが重要です。仮説の検証時は変数を一つにして、一つずつ検証していくことで試行回数を重ねていきましょう。
BtoBのランディングページキャンペーンでは長期的な目線を持ち、その後の見込み客との関係性まで踏まえた設計を行いましょう。
- HubSpot「How to Create a Landing Page: The Ultimate Guide」 [↩]
- INTUIT mailchimp「10 Elements of a High Converting Landing Page」 [↩]
- Nielsen Norman Group 「F-Shaped Pattern For Reading Web Content (original study)」 [↩]
- Salesforce [↩]
- Trust 「How to Grab Website Visitors’ Attention in 7 Seconds」 [↩]
- HubSpot「入力フォームの離脱を防ぐEFOとは？7つの施策と事例、おすすめツール」 [↩] [↩]
- A List Apart 「Inline Validation in Web Forms」 [↩]
- CXL 「Form Validation: Why It Matters and How to Get It Right」 [↩]
