B2Bのホームページは、サイト内で最も幅広いオーディエンスを相手にします。検索から来た初回訪問者、営業との商談後に戻ってきた見込み客、ログインを探す既存顧客、求職者、アナリスト、パートナー。そのどれも成約させることはできないため、ホームページの本当の役割は、それぞれに対して正しい場所にいること、次にどこへ行けばよいかを素早く伝えることです。このギャラリーでは、有名なB2Bソフトウェア企業11社の現行のホームページを取り上げ、それぞれがその役割をどう果たしているかを分析します。
各ホームページは2026年10月に訪問し、その時点でページに掲載されていた内容だけを記述しています。ホームページ、特にヒーローのコピーは頻繁に変わるので、具体的な内容はスナップショットとして、パターンを教訓として捉えてください。各事例には実際のサイトへのリンクを付けています。
各ホームページの見方
各事例について、訪問者が体験する順に5つの点を確認しました。
- ヒーローの見出しとサブ見出し：製品が何で、誰向けなのかを伝えていますか？
- メインCTAとサブCTA:何を求めているか、そして購買担当者の異なる段階に合っているか?
- 実績：ロゴ、顧客数、実名の引用、アナリストからの評価、そしてそれらの配置場所。
- ルーティング:ページが異なる役職、チーム、企業規模の訪問者を、それぞれ適切なコンテンツへどう導くか。
- ファーストビューより下の情報：製品セクション、料金の紹介、リソース。
1つのバージョンを真似るのではなく、これらのパターンをセグメントごとに応用したい場合は、B2Bのホームページパーソナライズのガイドで、どの要素から変えるべきかを解説しています。
1. HubSpot:2種類の購買担当者に向けた2つのCTA
HubSpotのホームページは、プラットフォームとしての主張(「需要を生み、商談に勝ち、顧客を喜ばせる。すべてを1つのプラットフォームで」)と、顧客データを中心にマーケティング、営業、サービスを連携させることについてのサブ見出しで始まります。2つのボタンが横に並んでいます。1つは有料ソフトウェアのデモ用、もう1つは無料ツールから始めるためのものです。このボタンの組み合わせはページの下部でも繰り返されます。ヒーローの直後に顧客数が表示され、その後に製品ハブごとのセクションが続きます。さらに下には、小規模・中規模・大企業向けのタブが付いた導入事例のカルーセルがあり、ナビゲーションではチームの規模別の導線が用意されています。
CTA の組み合わせが HubSpot の2つの獲得モデルとぴったり一致しています。小規模事業者はセルフサービスで、大企業のマーケティングディレクターはデモを予約し、どちらも探し回る必要がありません。
私たちならこうテストします：Hubごとのセクションが長いので、その上に「どのチームに所属していますか」という短い選択欄を置き、該当するHubに移動させるテストをします。
2. Stripe：製品が動いている様子を見せる
Stripeのホームページは、「Financial infrastructure to grow your revenue」と、スタートアップの最初の取引から大企業の10億件目の取引までをカバーするサブ見出しで始まります。ヒーローには「Stripeで動く世界のGDP」のカウンターがあり、ページでは抽象的なイラストではなく、模擬的なチェックアウト画面を含む製品のグラフィックを使っています。CTAは「始める」と「Googleで登録」で、「営業に問い合わせ」はヘッダーとページ下部近くのセクションにあります。
このページの強みは、説明するのではなく見せることです。決済について説明する代わりに、Stripeのチェックアウト画面がどう見えるかを示しています。開発者やプロダクトマネージャーは、機能一覧を読まなくても自社製品に組み込んだ姿をイメージできます。
私たちがテストしたい点:ヒーローにはセルフサーブのボタンが2つあるだけで、営業への導線がありません。大企業と特定された訪問者には、Googleでの登録ボタンを「営業に相談する」のリンクに差し替えるテストを行いたいところです。
3. Slack：「はじめる」の隣にプラン診断
Slack のホームページの見出しは「All your people and AI agents working together」で、2行のサブ見出し「Slack connects your team. Slackbot multiplies what they can do.」が続きます。CTA は「Get started」と「Find your plan」です。その下にはタブ形式の製品例（Slackbot に質問する、ローンチを計画する、プロジェクトを進める、クライアントとチャットする、タスクを自動化する）、「What's new」のフィード、そしてナレッジ、人、プロセス、プラットフォームに分類されたセクションがあります。
これほど知名度の高い製品では、「プランを探す」は巧みなサブCTAです。すでに職場でSlackを使っている訪問者は、どのプランを購入するかだけを決めようとしているかもしれません。このCTAなら、不要な売り込みを経ずにそこへ直接案内できます。
当社ならテストすること：「新着情報」ブロックがページの上部にあります。既存ユーザーには便利ですが、新規の法人訪問者に対しては、その業種の顧客事例に差し替えるテストを行います。
4. Notion：ユースケースをリンクにし、実名のリーダーによる実績を示す
Notionのホームページは「Where teams and agents think together」（動詞は別のスタイルで表示され、切り替わることもあります）という見出しと、「Notionを無料で始める」「デモを依頼」の2つのCTAで始まります。続いて、ナレッジの蓄積、答えの検索、雑務の自動化という3つの短いブロックがあります。その後に具体的なユースケースがリンクとして並びます（「製品フィードバックの仕分け」「Slackでのサポートチケット解決」「週次レポートの自動化」）。実績のセクションでは、Cursor、Faire、Rampなどの企業の実名のリーダーによる引用を役職付きで掲載し、G2のランキングやFortune 100企業での利用など、導入実績の訴求を1列並べています。
良い点：ユースケースへのリンクが、機能ではなく業務として書かれています。サポート責任者が「Slackでサポートチケットを解決する」をクリックするのは、それが自分の1週間を表しているからです。
私たちならテストすること：ユースケースへのリンクがすべての訪問者に共通です。誰が訪問しているかがわかれば、業界や部門別にパーソナライズするのに自然な枠です。
5. Linear：ヒーローは製品そのもの
Linearのホームページの見出しは「The product development system for teams and agents」、サブ見出しは「Purpose-built for planning and building products. Designed for the AI era.」です。ヒーロービジュアルは製品画面を再現したもので、Slackから作成されたイシューがAIによってラベル付けされ、エージェントに引き継がれてIn Progressに移動し、ドラフトのプルリクエストがレビュー待ちになっている様子を示しています。ページはその後、インテークと連携、計画とモニタリング、AIと自動化、構築とレビューという段階に沿ってワークフローを紹介し、変更履歴のプレビュー、顧客の声、締めくくりのサインアップセクションへと続きます。
技術者向けのオーディエンスには、リアルな製品画面がどんな主張よりも説得力を持ちます。ウォークスルーは、受付から出荷まで、バイヤー自身の業務プロセスの順に構成されています。
私たちがテストしたい点:COOや財務責任者など、技術に詳しくない承認者向けの情報がほとんどありません。セキュリティ、管理機能、料金体系についての短いセクションがあれば、購買委員会の2人目の担当者の助けになるでしょう。
6. Gong：成果を表す言葉をローテーション表示し、続いて実名の顧客の成果
Gongのホームページのヒーローは、カテゴリーの主張(「#1 AI OS for Revenue Teams」)と、切り替わる一文を組み合わせています。「Revenue AI built to」に続けて、商談を早く成約する、パイプラインのリスクを予測する、引き継ぎを自動化する、解約を予測する、といった成果が表示されます。CTAは「Book a demo」と「See Gong in action」です。そのすぐ下に顧客数が表示され、生産性の数値とその顧客のイネーブルメント責任者の言葉を添えた、社名入りの顧客事例が続きます。下部のセクションでは、プラットフォーム、社名入りの顧客の声の一覧、レビューサイトでの評価、アナリストからの評価を紹介しています。
切り替わる成果の表示によって、1つのヒーローで営業リーダー、RevOps、カスタマーサクセスに3つの別ページなしで語りかけられます。社名入りの顧客の成果が1スクロール以内に現れるので、訪問者が疑問を持つ前に主張が裏付けられます。
私たちならテストすること：切り替わるテキストは見落とされたり、切り替わりの途中で読まれたりします。代わりに、訪問者の役職や企業タイプに応じて選んだ、セグメントごとの固定の見出しをテストするでしょう。
7. Atlassian：ヒーローに1製品、その下にコレクション
私たちが訪問した時点では、Atlassianのホームページのヒーローは回転式のカルーセルでした。製品のスライドは「チームとそのエージェントの力を解き放つ」というもので、単一の製品に焦点を当て、「Jiraを始める」と「お問い合わせ」のボタンがありました。他のスライドでは「今すぐ視聴」ボタン付きでTeam Europeイベントを告知していました。その下では、チームワーク、戦略、サービス、ソフトウェア、製品という業務ごとにまとめたアプリのコレクションを紹介しています。ナビゲーションには、ユースケース、チーム、企業規模、業種別の導線があります。
多くの製品を持つ企業は、ヒーローですべてを列挙するのではなく入り口を1つに絞るべきで、Atlassian は製品スライドでそれを実践しています。その下のコレクションのセクションが、別の目的で来た訪問者を受け止めます。
当社ならテストすること：ITサービスチームからの訪問者はヒーローにJiraが表示されることを望まないかもしれませんし、初めての訪問者が製品について何も触れていないイベントのスライドに着地することもあり得ます。参照元や業種に応じて製品を選び、Jiraをデフォルトとする固定の製品ヒーローをテストします。
8. Intercom：ヒーローに登録フォーム、ホームページに料金
Intercomのホームページは「A complete system for AI and human customer service」という見出しと、5つ星レビューの数に関する一文で始まり、ヒーローにはメールアドレス入力欄と開始ボタンが直接配置されています。続いてヘルプデスクとFin AIエージェントという2つの製品を説明し、「Works with the tools you already use」のセクションを示し、ホームページ自体に「Transparent pricing」のセクションも設けています。
ホームページに料金セクションを置くことで、多くのB2B訪問者が抱えてくる疑問に答えられ、ベンダーが比較されることを恐れていないというメッセージにもなります。各製品セクションには「デモを見る」リンクもあり、訪問者はメールアドレスを入力する前に製品を確認できます。
私たちならテストすること：ヒーローにメールアドレス入力欄を置くのは小規模チームに適しています。エンタープライズの訪問者に対しては、デモCTAに置き換えるテストを行います。
9. monday.com：ファーストビューに部門タブ
monday.comのホームページの見出しは「People and agents working as one team」で、サブ見出しは「The AI workspace where people and agents drive business results together.」です。そのすぐ下に部門（マーケティング、オペレーション、プロダクト、営業、PMO）の一覧と「Get Started」ボタンが並びます。続いてFortune 500での導入に関する一文があります。その後、同じ部門タブでエージェントのユースケースを紹介しており、訪問者が自分のチームを選ぶとコンテンツが切り替わります。
部門の行で、ヒーロー部分で訪問者に自己申告してもらい、続くセクションがその選択に応じて変わります。これは訪問者セグメンテーションが自動で行うことを手動で行うやり方です。
私たちがテストするなら：既知の訪問者データに基づいて部門タブを事前選択し、マーケティングチームならクリックせずにマーケティングの事例が表示されるようにします。
10. Snowflake：イベントバナーと、ナビゲーションに両方の導線
Snowflakeのホームページは、上部に今後開催予定の無料バーチャルイベントのバナーを掲げています。ナビゲーションには「Contact sales」とセルフサービスの開始ボタンの両方があり、その横に言語選択があります。ヒーローでは新しいAI製品を訴求し、続いて「Why Snowflake」と「View pricing」のリンクがあるプラットフォームのセクション、さらに顧客事例とパートナーエコシステムが続きます。
営業経由とセルフサーブの両方の導線を固定ナビゲーションに置くことで、ヒーローだけでなくページのどの位置でも利用できるようになります。
私たちがテストしたい点:ヒーローでは製品のリリース情報を打ち出しており、既存顧客やアナリストには役立ちます。新規の訪問者には、Snowflakeが何なのかをもっと平易に説明する必要があるかもしれません。新規訪問者とリピーターで分けるテストを行いたいところです。
11. Zendesk：ヒーローに同意文言付きのメール入力欄
Zendesk のホームページの見出しは「AI-powered customer service platform」で、サブ見出しは AI エージェントによる自動化の主張を軸にしています。ヒーローには業務用メールアドレスの入力欄と開始ボタンがあり、そのすぐ下にマーケティング連絡のオプトインの一文とプライバシー通知へのリンクがあります。続いて利用実績の数字が並び、単体の AI エージェント、アナリストレポート、顧客事例付きの「Built for businesses of all sizes」、連携、リソース、料金のセクションがあります。
メール入力欄の横にあるオプトインの一文は、アドレスがどう扱われるかを正直に説明しています。これは、EUのように同意に関するルールが厳しい市場のバイヤーにとって重要です。ページ下部近くの料金セクションは、費用を探してページ全体をスクロールした訪問者を受け止めます。
当社ならテストすること：ヒーローの訴求は「最大」何割を自動化できるという大きな数字です。サポート部門の責任者は自社のチケットの内訳を把握しているため、どの種類の問い合わせを指しているかを示す短い補足を加えるテストを行い、大規模チームからのデモ・登録のクリックが変化するかを確認します。
これらのB2B Webサイト事例に共通するパターン
- 2つの購買方法に対応する2つのCTA。HubSpot、Notion、Atlassianはセルフサービスのアクションと営業へのアクションを組み合わせ、Gongはデモと製品ツアーを組み合わせています。この組み合わせが、ホームページにおけるルーティングに相当します。
- ページ上部での自己選択：monday.comの部門別タブ、Notionのユースケースのリンク、Atlassianのコレクションは、いずれも早い段階で訪問者に「あなたはどれですか」と尋ねています。
- 1スクロール以内の実績。ほとんどの例で、顧客数、実名の成果、ロゴがヒーローの直後に表示されています。
- Stripe と Linear は、製品を説明する代わりに見せており、ページ上部近くにリアルな製品画面を配置しています。
- 料金を隠していません。IntercomとZendeskはホームページに料金のセクションを設け、SlackとSnowflakeはヒーローやナビゲーションから料金ページにリンクしています。
- 全員に同じページ。手動のタブを除けば、これらのホームページはいずれも訪問企業に応じて目に見える形で変化しません。スタートアップにもエンタープライズにも、同じヒーロー、実績、CTAが表示されます。
最後の点こそがチャンスです。これらの企業が訪問者に手動で選ばせている要素（部門、製品、企業規模）は、誰が訪れているかがわかれば事前に選択できる要素そのものです。そもそもどのトラフィックをホームページに着地させるべきかはランディングページとホームページの違いの記事で、こうした選択の背景にあるページ構造は購買委員会のためのB2B Webサイトデザインで解説しています。
B2B Webサイトのホームページチェックリスト
- 見出しがスローガンだけでなく、カテゴリーや解決する業務を明示している。
- サブ見出しで製品の対象者を伝えている。
- メインとサブのCTAが、2つの主な購買経路（セルフサービスと営業、またはデモと資料）に対応している。
- 1スクロール以内に実績が表示され、オーディエンスに合っている（類似企業のロゴ、実名の成果）。
- 役職、チーム、業界、企業規模で自分を選べる目に見える手段がある。
- 製品が抽象的なイラストだけでなく、実際に使われている状態で示されている。
- ヒーローまたはナビゲーションから料金ページにリンクしている。
- 購買委員会の2人目のメンバー向けに、セキュリティ、連携、管理者向けのコンテンツへワンクリックでアクセスできる。
- 既存顧客がスクロールせずにログインとサポートを見つけられる。
- すべてのセクションに初回訪問者にとっての存在理由があること。なければ下に移します。
他のページタイプについては、姉妹編のSaaS料金ページ事例とデモ依頼ページ事例のギャラリー、およびページタイプ別にまとめたB2Bランディングページ事例をご覧ください。訪問企業ごとにホームページが変化する様子を見たい場合は、ユースケースページでMarkettailorでの仕組みを紹介しています。
よくある質問
B2B のホームページには何を載せるべきですか？
カテゴリや役割を明示する見出し、誰向けかを伝えるサブ見出し、購買経路に合った2つのCTA、1スクロール以内の実績、訪問者が役職や企業タイプで自分を識別できる仕組み、リアルな製品画面、そして料金、セキュリティ、連携へのリンクです。上記の事例は、これらそれぞれの実践例を示しています。
B2BのホームページはB2Cのホームページとどう違いますか？
B2Bのホームページは、購買委員会の複数の人や異なる段階にいる購買担当者に語りかけるため、売り込むよりも誘導する役割が大きくなります。通常はセルフサービスと並んで営業経由の導線を用意し、個人ではなく企業に向けた実績を載せ、技術面・財務面の承認者が必要とするコンテンツへのリンクを置きます。
B2BのホームページのCTAは1つにすべきですか、2つにすべきですか？
ほとんどの場合は2つです。1つは自分で行動する準備ができている訪問者向け（登録する、始める、料金を見る）、もう1つは会話が必要な訪問者向け（デモを予約する、営業に問い合わせる）。HubSpot、Notion、Atlassian はいずれもセルフサービスと営業の組み合わせを使っています。CTA が1つで済むのは、購買の進め方が1つしかない場合だけです。
B2B Webサイトの良い事例は？
HubSpot、Stripe、Slack、Notion、Linear、Gong、Atlassian、Intercom、monday.com、Snowflake、Zendeskは、それぞれ特定の課題をうまく解決しているため参考になる事例です。2つの購買導線、製品の見せ方、自己申告による識別、実績の配置、料金の透明性などです。見た目を真似るのではなく、各ページの背後にある意思決定を研究しましょう。
ホームページはどのくらいの頻度で変更すべきですか?
ポジショニングや主要なオーディエンスが変わったらヒーローと証拠を変え、小さな変更は継続的にテストします。仮説のない大規模リデザインでは、何が効いたのかを学ぶのが難しくなります。ホームページはフォーム送信だけでなく、主要な導線（料金、デモ、製品ページ）へのクリックでも測定しましょう。