典型的なページ構成の流れ
B2Bトップページのセクションは、どのような順序で並べるのが一般的なのでしょうか。62サイトの調査データから、各セクションのページ内出現位置(0.0=ページ先頭、1.0=ページ末尾)の中央値を算出し、典型的な配置順序を明らかにしました。
ページ全体を4つのフェーズに分けると、B2Bトップページの「設計思想」が浮かび上がります。
Phase 1: 認知・理解(ページ上部 0% - 20%)
訪問者が「何のサービスか」を理解するフェーズです。ここで離脱を防ぐことが最優先となります。
| セクション | 中央値 | 採用率 | 役割 |
|---|---|---|---|
| ファーストビュー | 0.00 | 100.0% | サービスの第一印象を決定づけるメインビジュアル |
| サービス概要 | 0.17 | 45.2% | 「○○とは」でサービスの全体像を簡潔に説明 |
| 価値提案 | 0.18 | 30.6% | 核心的な価値を端的に訴求 |
設計のポイント
ファーストビューは全サイトが例外なくページ最上部に配置しています。その直後には、サービス概要か価値提案のいずれか(または両方)を置くのが定番です。約53%のサイトがファーストビュー直後にこれらを配置しています。
ページの上から20%までに配置すべきもの: サービスが何であるか、どんな価値を提供するかを伝えるコンテンツです。訪問者がスクロールを続けるかどうかは、ここで決まります。
Phase 2: 説得・比較検討(ページ中盤 20% - 50%)
訪問者が「なぜこのサービスか」を検討するフェーズです。機能と実績で信頼を積み上げます。
| セクション | 中央値 | 採用率 | 役割 |
|---|---|---|---|
| 課題解決 | 0.22 | 19.4% | 「こんなお悩みありませんか?」で課題を提起し、解決策を提示 |
| 製品ラインナップ | 0.29 | 27.4% | 複数プロダクトや機能カテゴリの一覧 |
| 導入企業ロゴ | 0.33 | 11.3% | 著名企業のロゴを並べて信頼感を醸成 |
| 選ばれる理由 | 0.37 | 37.1% | 競合との差別化ポイントを明示 |
| 導入実績・数値 | 0.38 | 50.0% | 「導入社数○○社」「継続率○○%」など数値で実績を訴求 |
| 機能紹介 | 0.42 | 67.7% | 主要機能の詳細な紹介(ページの中核) |
| 料金プラン | 0.44 | 35.5% | 価格体系を提示して意思決定を促進 |
設計のポイント
このフェーズの中核は機能紹介(採用率67.7%)と導入実績・数値(50.0%)です。この2つがページ中盤の「2大要素」として安定した配置を見せています。
機能紹介はページ全体の42%付近に集中しており(標準偏差0.15と安定的)、多くのサイトが同じような位置に配置しています。一方、導入実績・数値は分散が大きく(標準偏差0.26)、ファーストビュー直下に置くサイトから中盤に置くサイトまで幅広いバリエーションがあります。
ページの20% - 50%に配置すべきもの: 機能の強み、導入実績、選ばれる理由など、「このサービスを選ぶ合理的な根拠」を提示するコンテンツです。
Phase 3: 具体化・安心感(ページ後半 50% - 80%)
訪問者が「本当に導入して大丈夫か」を確認するフェーズです。具体的な事例とサポート体制で不安を払拭します。
| セクション | 中央値 | 採用率 | 役割 |
|---|---|---|---|
| 活用シーン | 0.50 | 14.5% | 業種別・課題別の具体的な使い方を紹介 |
| 導入の流れ | 0.59 | 14.5% | 導入ステップを図解で説明 |
| 導入事例 | 0.64 | 56.5% | 顧客企業のインタビューや成功事例 |
| サポート体制 | 0.71 | 33.9% | カスタマーサクセス、サポート窓口の紹介 |
| お役立ち資料 | 0.79 | 40.3% | ホワイトペーパーや導入ガイドのダウンロード導線 |
設計のポイント
このフェーズの中核は導入事例(採用率56.5%)です。機能や数値で説得した後に、実際の顧客の声やストーリーで「自分ごと化」を促します。導入事例はページの64%付近に安定して配置されており(標準偏差0.17)、各サイトで配置位置のコンセンサスが形成されています。
信頼構築の手法として、「数値(導入実績)は前半で、ストーリー(導入事例)は後半で」という使い分けが見られる点は興味深い発見です。
ページの50% - 80%に配置すべきもの: 導入事例、サポート体制、お役立ち資料など、「導入後の具体的なイメージ」を提供するコンテンツです。
Phase 4: 行動喚起(ページ末尾 80% - 100%)
訪問者の最終的なアクションを促すフェーズです。残る疑問を解消し、コンバージョンへ導きます。
| セクション | 中央値 | 採用率 | 役割 |
|---|---|---|---|
| よくある質問 | 0.82 | 29.0% | 購入前の疑問を解消し、心理的障壁を除去 |
| セミナー・ウェビナー | 0.82 | 19.4% | 即時コンバージョンしない見込み客の受け皿 |
| お知らせ | 0.90 | 50.0% | プレスリリースやアップデート情報でサービスの活発さを示す |
| CTA | 1.00 | 67.7% | 問い合わせ・資料請求・無料トライアルへの最終導線 |
設計のポイント
CTAはページ最末尾(中央値1.00)に配置するのが圧倒的な主流です。ただし、多くのサイトはページ末尾だけでなく中盤にもCTAを挟んでおり、1サイトあたり平均1.3回のCTAセクションを配置しています。
日本のB2Bサイト特有の傾向として、お知らせ(50.0%)がページ末尾の定番要素となっています。グローバルサービスではあまり見られないセクションですが、国産SaaSではニュースやプレスリリースを掲載し、サービスの活発さをアピールする文化が根付いています。
ページの80% - 100%に配置すべきもの: よくある質問で最終的な疑問を解消し、お知らせでサービスの活発さを示した上で、CTAで具体的なアクションに誘導するコンテンツです。
まとめ: ページ全体の設計フロー
認知 説得 具体化 行動
(0-20%) (20-50%) (50-80%) (80-100%)
─────────── ─────────────── ─────────────── ───────────
hero 課題解決 活用シーン FAQ
サービス概要 製品ラインナップ 導入の流れ セミナー
価値提案 導入企業ロゴ 導入事例 お知らせ
選ばれる理由 サポート体制 CTA
導入実績・数値 お役立ち資料
機能紹介
料金プランこのフローは「あるべき正解」ではなく、62サイトの実態から導かれた「多くのサイトが選択している配置」です。自社のサービス特性やターゲットユーザーの検討段階に応じて、セクションの取捨選択やフェーズ間の比重調整を行うことが重要です。