構成パターン一覧

分類の考え方

本調査では、59のB2B SaaSサイトのトップページを対象に、各ページを構成するセクション（ヒーロー、機能紹介、導入事例など）の並び順に着目し、統計的な手法でグループ分けを行いました。

各サイトのトップページを上から順にセクション分解し、それぞれに役割タグ（ヒーロー、機能紹介、導入事例など）を付与しています。たとえば、あるサイトの構成が以下のようになっているとします。

ヒーロー → サービス概要 → 機能紹介 → 導入事例 → CTA

この「セクションの並び順」を、文字列のように扱います。2つのサイトのセクション構成がどれだけ似ているかを測るために、正規化レーベンシュタイン距離を使いました。

レーベンシュタイン距離とは、ある文字列を別の文字列に変換するために必要な「挿入・削除・置換」の最小回数です。たとえば「猫」を「犬」にするには1回の置換が必要なので、距離は1です。

これをセクション構成に応用します。サイトAの構成を：

ヒーロー → 機能紹介 → 導入事例 → CTA

サイトBの構成を：

ヒーロー → サービス概要 → 機能紹介 → 料金プラン → 導入事例 → CTA

とすると、Aに「サービス概要」を挿入し「料金プラン」を挿入すればBになります。距離は2です。

この距離を、長い方のセクション数（この例では6）で割って 0.0〜1.0 の範囲に正規化します。値が0に近いほど似ている構成、1に近いほど異なる構成ということになります。

59サイトすべてのペア（1,711通り）について距離を計算し、距離行列を作成します。この行列をもとに、階層的クラスタリング（平均連結法） を実行しました。

階層的クラスタリングとは、最も似ているサイトのペアから順にグループを作っていく手法です。

このプロセスで得られたツリー構造（デンドログラム）を適切な位置で切断することで、まず10のクラスタに分割し、小さすぎるパターン（1〜2サイト）を近いパターンに統合して、最終的に6つの構成パターンに整理しました。

技術的な詳細

同じパターンに分類されたサイトは、「どんな情報を」「どんな順番で」見せているかが似ているということです。

パターン	サイト数	平均セクション数	主な特徴
A: 王道フルスペック型	22	10.2	機能紹介から信頼構築、情報提供まで網羅する教科書的な構成
B: 網羅フルコース型	1	15.0	考えうるほぼ全てのセクションを盛り込んだLP的な構成
C: 実績訴求・多機能型	9	9.4	実績と製品ラインナップの幅広さで信頼を構築
D: 価値提案・CTA直行型	22	8.4	要点を絞り、最短経路でコンバージョンへ誘導
E: 料金・比較検討促進型	4	10.0	料金や活用シーンを早期に提示し、比較検討を後押し
F: コミュニティ・ブランド型	1	6.0	世界観とコミュニティの活気で自然な導入を促す

パターンAとDの二大勢力

パターンAとパターンDがそれぞれ22サイト（37.3%）を占め、合計で全体の約75%に達します。この2つは「情報を網羅して納得させるか」「要点を絞って素早く行動させるか」というトップページ設計の最も根本的な選択を反映しています。

パターンごとのセクション数を比較すると、構成のボリューム感に明確な差が見えてきます。

	コンパクト			標準		充実
パターン	F (6.0)		D (8.4)	C (9.4)	E (10.0) A (10.2)	B (15.0)

コンバージョンへの誘導（CTA）の配置方法も、パターンによって異なります。