BtoBサイト トップページのベストプラクティス

BtoBサイトのトップページのベストプラクティス

BtoBのウェブサイトのトップページは、あらゆるデジタルマーケティング施策の核となるページです。プロダクト/サービス名で検索して最初に訪れるページがトップページだからです。

従って、わかりやすいUI、UXなどを考慮し徹底的に作り込むべきです。

今回はBtoBサイトのトップページについて、求められる役割を整理しつつ、理想的なワイヤーフレームを紹介します。

 

BtoBサイトの役割

BtoBサイトの役割を整理するには、BtoBとBtoCの違いに着目するとよくわかります。

BtoBとBtoCの違い

下記の図はBtoBとBtoCのおもな違いを表にしたものです。BtoBはさらに「スペシャリティ」と「マス」にわけています。

それでは、この表中の赤字の4箇所を掘り下げていきます

BtoBとBtoCの違い

項目BtoBスペシャリティ分野特有の特性営業活動のポイント
検討期間長期間ユーザーの検討段階に合わせて継続的に興味・関心を持ってもらう
導入の目的課題解決課題を引き出し、解決策を示す
導入に関与する者
購買の際に重視される点
複数&多部門
機能や実績など
複数の意思決定者に対して複雑な商品機能・導入メリットを納得してもらう
全員が納得する客観的な事実を示す
態度変容信頼してみよう ユーザーに信頼してもらう

BtoBのスペシャリティ分野のプロダクト/サービスは上記4つの特性があり、ハイパフォーマーの営業は顧客に導入いただくために普段からポイントを抑えて営業活動をしています。従って、BtoBサイトにおいても、ハイパフォーマーの営業と同じレベルのコンテンツを公開することが重要です。

それでは上図を踏まえ、BtoBサイトに求められるコンテンツを整理しましょう。

 

BtoBサイトに求められるコンテンツは15個

下図はBtoBサイトにあると良いコンテンツは15個。ポイントは、顧客の購買プロセスの各段階にそれぞれコンテンツを網羅することです。言い換えれば、サイトに来たユーザーが知りたい情報を網羅していることで信頼され、「相談してみよう」に繋がります。

ページ内容検討段階(購買プロセス)おもなユーザー心理
サイトTOP目的のページへの導線。商品全体をざっと知る。全般目的地に行きたい、ざっと知りたい
商品サービス一覧商品ラインアップの確認。絞り込み、比較。比較ラインアップを知りたい

自分に合う商品を知りたい

商品サービス紹介特長など比較特長の詳細を知りたい
選び方その商品カテゴリの選び方のポイント。比較選び方の基準を知りたい
価格・料金プランオープンプライスやASKであってもページは公開。比較〜評価価格感を知りたい
資料ダウンロード商品サービスに関連する資料のダウンロード。比較〜評価検討するため参考にしたい
よくあるご質問導入検討時のよくある問い合わせの回答。比較〜評価疑問を払拭したい
導入事例どう活用し、どんな成果がでているのか。評価他社の課題解決を参考にしたい
お問い合わせ評価具体的な話を聞きたい
導入シミュレーション導入効果があるか、現状比較でシミュレーション評価導入効果をシミュレーションしたい
課題解決誰のどのような課題を解決するのか。課題〜比較課題の解決方法を知りたい
ランディングページ少し興味がある人に行動に移させる内容。課題〜比較どのような商品サービだろう
イベント・セミナーイベントセミナー情報。課題〜比較情報が欲しい、話を聞いてみたい
ブログ・TIPS業界トレンド、商品サービスのTIPSノウハウなど。課題ちょっと気になるから読んでみよう
サポート導入後のトラブルや問い合わせのサポート。導入後トラブルを解決したい

この中で、核となるのはトップページです。最もアクセス数が多くなり、各コンテンツのハブ的な存在になるためです。

それでは、トップページの役割を整理しましょう。

トップページの3つの役割

1. 「目的に早く辿り着きたい」を実現する

イメージ:BtoBサイトのトップページの役割1_目的に早く辿り着きたいを実現

トップページは、さまざまユーザーがきます。既に何度か来訪し調査済ですぐに問い合わせたい方、資料が欲しい方、消耗品が欲しい方、商品を選びたい方、どんなサービスか知りたい方、修理トラブル・・・。
従って、トップページのメニューは、顧客の購買プロセスに沿ったコンテンツにすぐにアクセスできることが重要です。

2. 「信頼してみようかな」を引き出す

イメージ:BtoBサイトのトップページの役割2_信頼してみようかなを引き出す

トップページでは、サイト訪問者の「ちょっと気になる」から「声をかけたい」へ心理状態を変えてもらうことを目指します。そのために必要なことは、メリット・実証・安心感を伝えながら徐々に信頼の下地をつくること。最終的に「信頼してみようかな」を引き出すこと。

テレビ番組「ナイナイのお見合い大作戦!」はこの流れに近くイメージしやすいのではないでしょうか。ただ恋愛にもあるように、流れを無視する「一目惚れ」といった心理状態の変化もあります。だから、一目惚れに対応するためにファーストビューに問い合わせや資料請求ボタンを配置しましょう。

3. 一般カテゴリ名称ワードで検索結果で上位表示させる

イメージ:BtoBサイトのトップページの役割3_一般名称ワードで検索上位表示

トップページは、認知、情報収集、比較検討段階のユーザーが来ます。(購入決定、導入後はプロダクト/サービス名で検索)従って、知ってもらう/来てもらうためには、勤怠管理システムなどといった「一般カテゴリ名称ワード」で検索上位に表示されていることが重要です。

 

 

 

ただ残念ながら、基本的に流し読みでじっくりとは読んでくれません。

以上を踏まえると、トップページの役割は3つあります。

1.「目的に早く辿り着きたい」を実現する
2.「信頼してみようかな」を引き出す
3.一般名称ワードで検索上位表示させる

 

 

BtoB事業会社のトップページの調査結果

私自身が気になっているプロダクト/サービスのトップページを改めて調査しました。おもに気にした視点は、トップページのワイヤーフレームの流れです。どこも秀逸でページ制作のヒントが満載でした。(順不同で紹介します)

EPSON – スマートチャージ-

BtoBサイトのTOPページ例-epson-1
EPSON スマートチャージのトップページ 1/2
BtoBサイトのTOPページ例-epson-2
EPSON スマートチャージのトップページ 2/2
  • 視覚的にわかりやすい
    全体的に文字量が少なく、図表で説明している。
  • 1ページで主要な説明を完結している
    紹介→導入メリット→ラインナップ→価格→事例→CTA→ショールーム→関連情報→新着情報→フッター(商品サイトマップ)→フッター(サイト自体のサイトマップ)の流れが秀逸。検討ユーザーの不安を払拭するように設計されている。

 

セーフィー

BtoBサイトのTOPページ例-safie-1
セーフィーのトップページ 1/2
BtoBサイトのTOPページ例-safie-2
セーフィーのトップページ 2/2
  • 信頼を得るための工夫がすばらしい
    セーフィーを知らない、聞いたことがない方を対象としているからか、わかりやすいキャッチで紹介しつつ、実績と選ばれる理由を前面に持ってきている。特長は動画でわかりやすく説明し、事例で安心感を与えつつ、その他の課題解決例もさりげなく訴求。ここまできてようやくラインナップを紹介し、資格で信頼感を醸成しつつCTAで締める流れ。

 

FORCAS

BtoBサイトのTOPページ例-forcas
FORCASのトップページ
  • シンプルで洗練されている
    FARCASという名称からはサービス内容がわからないため、紹介を前面に持ってきている。実績は数値とロゴでシンプルに訴求。特徴的なのはVISIONを語っている点。この会社で働く人の志が伝わってくるページ。

FUJITSU

BtoBサイトのTOPページ例-富士通
FUJITSUのスキャナーのトップページ
  • シェアNo.1の実績を表現する以外は、目的地へ早く辿り着くためのガイドマップに徹している
    推測だが、このトップページは導入済みユーザーのサポートや協力会社からのリピート流入が多いのではないか。つまり、シェアNo.1の実績や強みをシンプルに表現する以外は多くを語らず、サポート情報のボタンをわかりやすくするなどしてガイドマップ的なページに徹しているように見受けられる。

 

トップページのワイヤーフレーム

WEBマーケティング、さらにはBtoBマーケティングの核となる自社サービスサイトのトップページ。トップページの役割や調査した会社のサイトを参考に、トップページのワイヤーフレームをまとめました。各項目には着眼点を記載しています。

BtoBサイトのTOPページのワイヤーフレームvol1

BtoBサイトのTOPページのワイヤーフレームvol2

BtoBサイトのTOPページのワイヤーフレームvol3

ファーストビュー

  • 企業やサービスを端的に表現したコピーが最初に目に入るようにする
  • 英文や抽象的・専門的な用語を使わない
  • メインビジュアルは競合他社に似せず、特徴的なものにする

紹介

  • 初見のユーザー向けに、どんなサービスなのかを端的に説明する
  • 上記の「よくある課題」に対応した内容にする
  • 複数商材の場合は商材の一覧を設置する
  • 本体・消耗品・ソフト等のカテゴリ

メリット

  • 機能紹介だけ羅列しない。企業、プロダクトの強み・メリット(どんな課題を解決するのか)を訴求
  • 流し読みでもわかるように文章は簡潔にまとめ、適度に図を配置する
  • 3-5個程度とし、残りは詳細ページへ飛ばす
  • マス向け商品の場合は、選び方の基準をまとめた詳細ページへ飛ばす

CTA

  • コンテンツの途中に、文脈に沿ったCTAを設置
  • CTAは、ページの最上部・中・最下部の3箇所までとする

実証

  • メリットを提供できる論理的な理由を示すこと。検討顧客に納得していただけるように
  • 技術的な特徴、原産地、代替商品サービスとの比較

信頼・安心

  • リードは、さまざまな用途/業界で使われていること、実績などを紹介する。
  • 事例タイトルは一見して改善内容がわかるようにする
  • 業種/業界・従業員規模・用途など、顧客の検討軸を提示する
  • ロゴが出せればベスト
  • レイアウトが整っているPDFは印刷するとチラシとして使えるため、展示会や特に代理店の営業が営業する際に活用しやすい

安心

  • 提案時によく聞かれる質問を記載する。3件程度。残りはページへ飛ばす
  • クリックすると開く形式にする

サポート

  • 導入後のユーザー向けの情報を並べる

お知らせ

  • ホームにおいて、更新情報は多くのユーザーが必要としない情報なので最下部に配置する

CTA

  • 最下部のCTAは、さまざまな状況に対応できるように複数ボタンを配置する

利便性

  • 「商品一覧」「導入前」「導入後」にわけて掲載する
  • ヘッダーに入り切らないメニューが埋もれるため

 

 

BtoBサイトを考える際のおすすめ本

沈黙のWebマーケティング −Webマーケッター ボーンの逆襲−

【所感】
ウェブライダー代表「松尾 茂起」氏の著書。マンガ構成とストーリー形式で一気に最後まで読めます。めちゃくちゃわかりやすい。ちなみに、松尾さんのセミナーがあったらぜひ聞いてください。惹き込まれます。もう感動モノです。

いちばんやさしいコンテンツマーケティングの教本 人気講師が教える宣伝せずに売れる仕組み作り

【所感】
コンテンツマーケティングの第一人者であるイノーバ社の宗像 淳さんの著書。実践のノウハウが中心になっています。これからのWEBマーケティング、いやマーケティング戦略全体をどうするか考えている方には非常に刺さる内容です。手元に置いて時々見返している本の一つです。
以上、BtoBサイトの核となるトップページの作り方について、役割とワイヤーフレームを紹介しました。BtoBマーケターやウェブ担当者の参考になれば嬉しいです。

シリーズ関連記事

この記事は、「BtoBのWEBマーケティング戦略を加速する」シリーズの1コンテンツです。

自社サイトをWEBマーケティングに活用するためのヒントをまとめています。

ぜひ、他の記事もお読みいただけると嬉しいです!

<戦略編>

<サイト構築編>

<テクニック編>

BtoBサイトのトップページのベストプラクティス

BtoBサイトのトップページのベストプラクティス資料

【資料の内容】
1. BtoBサイトの役割、トップページの役割
2. 参考サイトを解説
3. ワイヤーフレーム

資料ダウンロード
(全21ページ)

当サイトのプライバシーポリシー

BtoBサイトのトップページのベストプラクティス
応援いただけると嬉しいです!