BtoBのウェブサイトのトップページは、あらゆるデジタルマーケティング施策の核となるページです。プロダクト／サービス名で検索して最初に訪れるページがトップページだからです。
従って、わかりやすいUI、UXなどを考慮し徹底的に作り込むべきです。
今回はBtoBサイトのトップページについて、求められる役割を整理しつつ、理想的なワイヤーフレームを紹介します。
BtoBサイトの役割
BtoBサイトの役割を整理するには、BtoBとBtoCの違いに着目するとよくわかります。
BtoBとBtoCの違い
下記の図はBtoBとBtoCのおもな違いを表にしたものです。BtoBはさらに「スペシャリティ」と「マス」にわけています。
それでは、この表中の赤字の4箇所を掘り下げていきます
| 項目 | BtoBスペシャリティ分野特有の特性 | 営業活動のポイント |
| 検討期間 | 長期間 | ユーザーの検討段階に合わせて継続的に興味・関心を持ってもらう |
| 導入の目的 | 課題解決 | 課題を引き出し、解決策を示す |
| 導入に関与する者 購買の際に重視される点 |
複数＆多部門 機能や実績など |
複数の意思決定者に対して複雑な商品機能・導入メリットを納得してもらう 全員が納得する客観的な事実を示す |
| 態度変容 | 信頼してみよう | ユーザーに信頼してもらう |
BtoBのスペシャリティ分野のプロダクト／サービスは上記4つの特性があり、ハイパフォーマーの営業は顧客に導入いただくために普段からポイントを抑えて営業活動をしています。従って、BtoBサイトにおいても、ハイパフォーマーの営業と同じレベルのコンテンツを公開することが重要です。
それでは上図を踏まえ、BtoBサイトに求められるコンテンツを整理しましょう。
BtoBサイトに求められるコンテンツは15個
下図はBtoBサイトにあると良いコンテンツは15個。ポイントは、顧客の購買プロセスの各段階にそれぞれコンテンツを網羅することです。言い換えれば、サイトに来たユーザーが知りたい情報を網羅していることで信頼され、「相談してみよう」に繋がります。
| ページ | 内容 | 検討段階（購買プロセス） | おもなユーザー心理 |
| サイトTOP | 目的のページへの導線。商品全体をざっと知る。 | 全般 | 目的地に行きたい、ざっと知りたい |
| 商品サービス一覧 | 商品ラインアップの確認。絞り込み、比較。 | 比較 | ラインアップを知りたい
自分に合う商品を知りたい |
| 商品サービス紹介 | 特長など | 比較 | 特長の詳細を知りたい |
| 選び方 | その商品カテゴリの選び方のポイント。 | 比較 | 選び方の基準を知りたい |
| 価格・料金プラン | オープンプライスやASKであってもページは公開。 | 比較〜評価 | 価格感を知りたい |
| 資料ダウンロード | 商品サービスに関連する資料のダウンロード。 | 比較〜評価 | 検討するため参考にしたい |
| よくあるご質問 | 導入検討時のよくある問い合わせの回答。 | 比較〜評価 | 疑問を払拭したい |
| 導入事例 | どう活用し、どんな成果がでているのか。 | 評価 | 他社の課題解決を参考にしたい |
| お問い合わせ | – | 評価 | 具体的な話を聞きたい |
| 導入シミュレーション | 導入効果があるか、現状比較でシミュレーション | 評価 | 導入効果をシミュレーションしたい |
| 課題解決 | 誰のどのような課題を解決するのか。 | 課題〜比較 | 課題の解決方法を知りたい |
| ランディングページ | 少し興味がある人に行動に移させる内容。 | 課題〜比較 | どのような商品サービだろう |
| イベント・セミナー | イベントセミナー情報。 | 課題〜比較 | 情報が欲しい、話を聞いてみたい |
| ブログ・TIPS | 業界トレンド、商品サービスのTIPSノウハウなど。 | 課題 | ちょっと気になるから読んでみよう |
| サポート | 導入後のトラブルや問い合わせのサポート。 | 導入後 | トラブルを解決したい |
この中で、核となるのはトップページです。最もアクセス数が多くなり、各コンテンツのハブ的な存在になるためです。
トップページの3つの役割
1. 「目的に早く辿り着きたい」を実現する
トップページは、さまざまユーザーがきます。既に何度か来訪し調査済ですぐに問い合わせたい方、資料が欲しい方、消耗品が欲しい方、商品を選びたい方、どんなサービスか知りたい方、修理トラブル・・・。
従って、トップページのメニューは、顧客の購買プロセスに沿ったコンテンツにすぐにアクセスできることが重要です。
2. 「信頼してみようかな」を引き出す
トップページでは、サイト訪問者の「ちょっと気になる」から「声をかけたい」へ心理状態を変えてもらうことを目指します。そのために必要なことは、メリット・実証・安心感を伝えながら徐々に信頼の下地をつくること。最終的に「信頼してみようかな」を引き出すこと。
テレビ番組「ナイナイのお見合い大作戦！」はこの流れに近くイメージしやすいのではないでしょうか。ただ恋愛にもあるように、流れを無視する「一目惚れ」といった心理状態の変化もあります。だから、一目惚れに対応するためにファーストビューに問い合わせや資料請求ボタンを配置しましょう。
3. 一般カテゴリ名称ワードで検索結果で上位表示させる
トップページは、認知、情報収集、比較検討段階のユーザーが来ます。（購入決定、導入後はプロダクト／サービス名で検索）従って、知ってもらう／来てもらうためには、勤怠管理システムなどといった「一般カテゴリ名称ワード」で検索上位に表示されていることが重要です。
ただ残念ながら、基本的に流し読みでじっくりとは読んでくれません。
以上を踏まえると、トップページの役割は3つあります。
２．「信頼してみようかな」を引き出す
３．一般名称ワードで検索上位表示させる
BtoB事業会社のトップページの調査結果
私自身が気になっているプロダクト／サービスのトップページを改めて調査しました。おもに気にした視点は、トップページのワイヤーフレームの流れです。どこも秀逸でページ制作のヒントが満載でした。（順不同で紹介します）
EPSON – スマートチャージ-
- 視覚的にわかりやすい
全体的に文字量が少なく、図表で説明している。 - 1ページで主要な説明を完結している
紹介→導入メリット→ラインナップ→価格→事例→CTA→ショールーム→関連情報→新着情報→フッター（商品サイトマップ）→フッター（サイト自体のサイトマップ）の流れが秀逸。検討ユーザーの不安を払拭するように設計されている。
セーフィー
- 信頼を得るための工夫がすばらしい
セーフィーを知らない、聞いたことがない方を対象としているからか、わかりやすいキャッチで紹介しつつ、実績と選ばれる理由を前面に持ってきている。特長は動画でわかりやすく説明し、事例で安心感を与えつつ、その他の課題解決例もさりげなく訴求。ここまできてようやくラインナップを紹介し、資格で信頼感を醸成しつつCTAで締める流れ。
FORCAS
- シンプルで洗練されている
FARCASという名称からはサービス内容がわからないため、紹介を前面に持ってきている。実績は数値とロゴでシンプルに訴求。特徴的なのはVISIONを語っている点。この会社で働く人の志が伝わってくるページ。
FUJITSU
- シェアNo.1の実績を表現する以外は、目的地へ早く辿り着くためのガイドマップに徹している
推測だが、このトップページは導入済みユーザーのサポートや協力会社からのリピート流入が多いのではないか。つまり、シェアNo.1の実績や強みをシンプルに表現する以外は多くを語らず、サポート情報のボタンをわかりやすくするなどしてガイドマップ的なページに徹しているように見受けられる。
トップページのワイヤーフレーム
WEBマーケティング、さらにはBtoBマーケティングの核となる自社サービスサイトのトップページ。トップページの役割や調査した会社のサイトを参考に、トップページのワイヤーフレームをまとめました。各項目には着眼点を記載しています。
ファーストビュー
- 企業やサービスを端的に表現したコピーが最初に目に入るようにする
- 英文や抽象的・専門的な用語を使わない
- メインビジュアルは競合他社に似せず、特徴的なものにする
紹介
- 初見のユーザー向けに、どんなサービスなのかを端的に説明する
- 上記の「よくある課題」に対応した内容にする
- 複数商材の場合は商材の一覧を設置する
- 本体・消耗品・ソフト等のカテゴリ
メリット
- 機能紹介だけ羅列しない。企業、プロダクトの強み・メリット（どんな課題を解決するのか）を訴求
- 流し読みでもわかるように文章は簡潔にまとめ、適度に図を配置する
- 3-5個程度とし、残りは詳細ページへ飛ばす
- マス向け商品の場合は、選び方の基準をまとめた詳細ページへ飛ばす
CTA
- コンテンツの途中に、文脈に沿ったCTAを設置
- CTAは、ページの最上部・中・最下部の3箇所までとする
実証
- メリットを提供できる論理的な理由を示すこと。検討顧客に納得していただけるように
- 技術的な特徴、原産地、代替商品サービスとの比較
信頼・安心
- リードは、さまざまな用途/業界で使われていること、実績などを紹介する。
- 事例タイトルは一見して改善内容がわかるようにする
- 業種/業界・従業員規模・用途など、顧客の検討軸を提示する
- ロゴが出せればベスト
- レイアウトが整っているPDFは印刷するとチラシとして使えるため、展示会や特に代理店の営業が営業する際に活用しやすい
安心
- 提案時によく聞かれる質問を記載する。３件程度。残りはページへ飛ばす
- クリックすると開く形式にする
サポート
- 導入後のユーザー向けの情報を並べる
お知らせ
- ホームにおいて、更新情報は多くのユーザーが必要としない情報なので最下部に配置する
CTA
- 最下部のCTAは、さまざまな状況に対応できるように複数ボタンを配置する
利便性
- 「商品一覧」「導入前」「導入後」にわけて掲載する
- ヘッダーに入り切らないメニューが埋もれるため
BtoBサイトを考える際のおすすめ本
沈黙のWebマーケティング −Webマーケッター ボーンの逆襲−
いちばんやさしいコンテンツマーケティングの教本 人気講師が教える宣伝せずに売れる仕組み作り
シリーズ関連記事
この記事は、「BtoBのWEBマーケティング戦略を加速する」シリーズの1コンテンツです。
自社サイトをWEBマーケティングに活用するためのヒントをまとめています。
ぜひ、他の記事もお読みいただけると嬉しいです！
＜戦略編＞
＜サイト構築編＞
- BtoBのWEB戦略を加速する。商談を増やすコンテンツマーケティング虎の巻
- 【事例付】BtoBサイトのコンテンツマーケティング手法31選
- BtoBサイト トップページの作り方（本記事）
- BtoBサイト 展示会出展レポートページの作り方
- BtoBサイト 導入事例ページの作り方
- BtoBサイト 課題解決ページの作り方
＜テクニック編＞