会社情報
採用情報
お問い合わせ
Article

BtoBサイトリニューアルのポイント：問い合わせ倍増のために

高田晃太郎
BtoBサイトリニューアルのポイント：問い合わせ倍増のために

複数の調査では、BtoB購買の多くがオンラインでの自己探索（比較や情報収集）を経てから営業に接触しており[1,2]、Web体験の質がそのままパイプラインの量と質に影響することが示唆されています。さらにGoogleが提示するCore Web Vitals（LCP=最大コンテンツの表示完了、CLS=レイアウトのズレ、INP=操作応答の一貫性）の目安である、LCP2.5秒以下・CLS0.1以下・INP200ms以下[3]を満たすページは離脱率が下がり、フォーム到達率に好影響が出やすいという報告が一般に見られます[3,4]。公開事例や業界ベンチマークを俯瞰すると、CVR（コンバージョン率）1～3%のゾーンから4～6%へ伸ばしたケースの多くは、情報設計、計測基盤、速度最適化の三点を同時に更新していました[4]。

つまり問い合わせを増やす近道は、ページを並べ替えることでも流行のビジュアルを足すことでもなく、買い手の意思決定プロセスに沿った情報構造と、高速で安定した配信、そして商談化まで可視化する計測・連携を同時に満たすことにあります。本稿ではCTO・エンジニアリングリーダーに向け、技術実装の観点から「問い合わせを確実に増やす」ためのリニューアル設計図を、実装の勘所と短いコード例を交えて提示します。倍増は保証ではありませんが、正しい手順で積み上げれば十分に狙えるレンジです。

なぜ問い合わせは増えないのか：買い手行動とKPIの再定義

BtoBの買い手は、課題認識→要件定義→比較検討→リスク低減という段階を往復します。この往復に耐えるのは、単一LPの勢いではなく、情報の信頼性と深度です。コンテンツの厚みがなければナビゲーションで迷子になり、比較軸が見えなければ外部レビューへ離脱し、価格や採用実績が不明瞭だと「今はまだ」と判断されます。さらにKPIがセッション数や直帰率に偏ると、改善が流入最適化に寄り過ぎ、肝心の「意図の強いリード」を取り逃します。

まず指標の定義を入れ替えます。サイト全体のCVRではなく、意図別の指標を持ちます。ナビゲーション直下に置く製品・サービス概要や価格、比較・導入事例、FAQ/セキュリティ情報は高意図トラフィックを受けるべきページ群です。**これらの到達率、回遊順序、フォーム着手率（form start）、提出率（submit）**を別建てで可視化します。次にMQL（Marketing Qualified Lead）の定義を「フォーム送信＝MQL」から、ページ履歴・流入ソース・企業属性を加味したスコアリングへ移行します。すると、フォーム項目の削減やプログレッシブプロファイリング（段階的に情報を収集する設計）に踏み切りやすくなり、提出率を上げつつ商談化率を維持しやすくなります[6]。

最後に、トップタスク（訪問者が最重要視する用事）に合わせて情報密度を再配分します。高意図の訪問者が最初に探すのは「何ができるか」「いくらか」「導入してどう変わるか」「安全か」の四点です。この順に答えが見つかる導線に変えるだけで、同一流入でもフォーム到達は着実に伸びます。

情報設計とコンテンツ設計：売れる導線の骨格を作る

情報設計の起点は、買い手の仕事を言語化することです。要求仕様書が固まる前の不確実な時間に、彼らは比較の枠組みを探しています。そこで製品トップでは価値命題を短い見出しと実証データのセットで提示し、詳細はユースケース別に分岐させます。価格は「問い合わせ」一択にせず、公開できる最小限の目安を出して不安を減らします。導入事例はサクセスストーリーだけでなく、初期制約、移行リスク、運用コストの現実値を示すと、相談の質が上がります。FAQはCS・営業のログから逆引きし、セキュリティ・法務・SLAは独立ページ化して検索流入を受けます。

検索とスニペット露出を高めるため、構造化データ（検索エンジンに伝わる意味情報）を粘り強く整備します。FAQや製品情報はJSON-LD（構造化データの埋め込み形式）で実装し、サイト内検索の満足度向上には回答の冒頭を「結論→根拠→詳細」に揃えます。以下はFAQスキーマの最小実装例です[5]。

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "価格の目安はありますか？",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "ユーザー数とモジュール構成により異なります。小規模構成で月額◯◯円から、年契約での割引もご用意しています。"
    }
  }]
}

フォームは「営業都合の項目」を削り、必要な企業属性は後段でエンリッチ（外部データで補完）します。メール、会社名、想定利用規模だけを最初に受け、以降はMA/CRM側で業種、従業員規模、テクノグラフィック（利用技術属性）を補完します。着手率を上げるため、フォームは上折り返し直下に配置し、フィールドは3～5に留め、入力補助と即時バリデーションを実装します。サンクスページでは「次の行動」を具体的に提示し、カレンダー予約や資料の差し替えDLを置くと、MQLの温度を保ったまま営業に引き継げます。

技術基盤とパフォーマンス：Core Web Vitalsで確実に勝つ

技術選定は、運用速度と配信速度の両立が軸です。設計の基本線として、ヘッドレスCMSでスキーマ化されたコンテンツを持ち、Next.jsやRemixでレンダリングし、生成方式はトラフィック特性に応じてSSG（静的生成）/ISR（増分静的再生成）/SSR（サーバー側レンダリング）を併用します。配信はエッジキャッシュ優先、画像はAVIF/WEBP、フォントは遅延読み込み、第三者スクリプトは必要最小限に絞ります。INP（操作応答）はJSの長いタスクとスタイル再計算に敏感です。Hydration分割、インタラクション発火点の最適化、CLS対策として画像のサイズ指定とスケルトンを徹底します。

キャッシュと圧縮の初期設定は、アプリケーション側とエッジ側の双方で行います。Next.jsでキャッシュヘッダーを付与する最小例は次の通りです。

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)\\.(js|css|png|jpg|woff2)$",
        headers: [
          { key: "Cache-Control", value: "public, max-age=31536000, immutable" }
        ]
      },
      {
        source: "/(.*)",
        headers: [
          { key: "Cache-Control", value: "public, max-age=60, s-maxage=600, stale-while-revalidate=300" }
        ]
      }
    ];
  }
};

オリジン前段のNginxやCDNでBrotliとHTTP/2を有効化し、テキスト資産を確実に圧縮します。

http {
  brotli on;
  brotli_comp_level 5;
  brotli_types text/plain text/css application/javascript application/json image/svg+xml;
  gzip on;
  gzip_types text/plain text/css application/javascript application/json image/svg+xml;
  server {
    add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;
  }
}

画像はCDNトランスフォームを併用し、LCP候補のファーストビュー画像のみ事前読み込みを指示します。フォントは可変フォントを1ファイルにまとめ、display: swapを指定し、初回描画までのブロッキングを避けます。第三者タグはサーバーサイドTMS（サーバー側のタグ管理）に寄せ、クッキー同意に連動させて遅延実行します。これらの基本を守るだけで、LCPは3秒台から2秒前後へ、INPは300ms台から200ms以下へと改善しやすい傾向があります[4]。

計測・実験・連携：GA4とCRMで商談化まで閉じる

問い合わせを増やしつつ商談化率を維持するには、イベントスキーマの設計とオフライン連携が鍵です。GA4（Google Analytics 4）では、フォーム開始、エラー、送信、ファイルDL、カレンダー予約などのイベントに、ページ種別やプラン関心といったパラメータを持たせて送ります。以下はフォーム送信計測の簡潔な例です。

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXX');
function trackLead(formId, plan){
  gtag('event', 'generate_lead', {
    form_id: formId,
    plan_interest: plan,
    engagement_time_msec: 1
  });
}
</script>

CRMにはエンリッチ済みの最小データで送り、以降を営業プロセスで増強します。SalesforceのWeb-to-Leadに投げる最小構成の例を示します。

<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
  <input type="hidden" name="oid" value="YOUR_ORG_ID" />
  <input type="text" name="company" placeholder="会社名" required />
  <input type="email" name="email" placeholder="メール" required />
  <input type="text" name="last_name" placeholder="お名前" required />
  <input type="hidden" name="lead_source" value="Website" />
  <button type="submit">相談する</button>
</form>

広告やオーガニックの評価はアトリビューション（どの流入が貢献したか）の誤差を前提に、セッション単位のCVRではなく、アカウント単位（企業単位）の進捗を見るのが重要です。GA4のBigQueryエクスポートとCRMのリードを匿名Cookieやメールハッシュで突合すれば、リニューアル前後のページ到達と商談化の関係が見えます。簡略化した結合の例を示します。

-- pseudo schema
SELECT a.account_domain, COUNTIF(event_name='generate_lead') AS leads,
       COUNTIF(oppty.stage='Qualified') AS qualified
FROM `ga4.events` e
JOIN `crm.leads` l ON e.user_pseudo_id = l.analytics_user_id
JOIN `crm.opportunities` oppty ON l.account_id = oppty.account_id
GROUP BY account_domain;

実験は、ページ速度を犠牲にしない設計で行います。UIのA/Bテストはサーバー配信やエッジでのバリアント出し分けを優先し、クライアントでのフリッカーを避けます。計測の焦点は、CTA位置、価格情報の提示方法、事例の構造、FAQの分量など、買い手の不安に直結する要素に絞ります。勝ちパターンが得られたらテンプレートへ昇格し、全カテゴリへ水平展開します。

失敗しない進め方：90日で効果を出す実行計画

短期成果には、全面刷新ではなく、影響範囲の大きい面から順に差し替える戦略が有効です。まず現状の流入・回遊・提出率をページ群別に棚卸しし、売上への寄与が高い経路を可視化します。ここで高意図の導線に絞ってMVPを定義します。製品トップ、価格、比較、導入事例、FAQ/セキュリティ、問い合わせフォームをテンプレート化し、CMSのスキーマを先に固めます。デザインは最小限のアトミックコンポーネントで実装し、パフォーマンスバジェットを設定してビルド時に自動検査します。

公開後の30日間は、Core Web Vitalsの安定化とイベント計測の健全性に集中します。Lighthouseのラボ値に加え、CrUX（Chrome UX Report）のようなフィールドデータでCLSのスパイクを監視します。同時に、フォームの着手・離脱のヒートマップを読み、エラーフィールドの文言やプレースホルダー、入力補助を磨きます。事例とFAQは週次で追加し、価格ページは「よくある費用感」セクションを強化します。60日を超える頃には、MQLの質と量の両立が検証でき、営業からのフィードバックを反映してセグメント別ナビゲーションを再調整します。

最後に、中長期の基盤を固めます。サーバーサイドタグ、同意モード（Consent Mode）、オフラインコンバージョンの取り込みを定着させ、役員レポートはアカウント単位の進捗指標へ移行します。検索面では構造化データのカバレッジを広げ、事例のスキーマやレビュー引用にも踏み込みます。技術負債はリリースごとに返済し、パフォーマンス劣化の兆候をCIで自動検知できる体制を整えます。これらを90日で回し切ると、同じ流入量でも問い合わせ数が大きく伸びる可能性は十分にあります。

参考：E2Eの導入チェックと軽量なUIテレメトリ

運用に入ると、破壊的変更を検知する自動テストと、体験品質のテレメトリが効いてきます。軽量なUI計測の例を最後に添えます。

// INP近似のインタラクション計測（簡易）
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 200) {
      fetch('/telemetry', {
        method: 'POST',
        keepalive: true,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ type: 'long-interaction', dur: entry.duration, name: entry.name })
      });
    }
  }
}).observe({ type: 'event', buffered: true, durationThreshold: 40 });

まとめ：技術で「買える理由」を増やす

問い合わせは、流入の多寡よりも「買うための確信」をどこまで提供できたかに比例します。買い手の行動に合わせた情報設計で迷子をなくし、Core Web Vitalsで速度の不安を断ち、GA4とCRMで商談化まで見通せる計測と連携を固める。これらを小さく速く回せば、問い合わせの増加は十分に現実的です。いま自社サイトで最も高意図な訪問が集まるページはどこでしょうか。そこに、価格のヒント、実証データ、そして迷いなく押せるCTAはありますか。次のスプリントで扱う最小の変更を一つ決め、90日後の計測結果を想像してみてください。技術は、買える理由を増やすためにあります。

参考文献

  1. McKinsey調査の紹介（B2B購買におけるセルフサービス志向）. fc.bnext.com.tw. https://fc.bnext.com.tw/articles/view/3186?sn_f=1&sn_u=104a3edabddb43391fe0362f095f5fed#:~:text=%E9%BA%A5%E8%82%AF%E9%8C%AB%E7%9A%84%E5%A0%B1%E5%91%8A%E6%8C%87%E5%87%BA%EF%BC%8C%E5%8F%AA%E6%9C%89%E7%B4%84%2020,%E7%9A%84%E6%B1%BA%E7%AD%96%E8%80%85%E8%A1%A8%E7%A4%BA%EF%BC%8C%E4%BB%96%E5%80%91%E9%9D%9E%E5%B8%B8%E6%A8%82%E6%84%8F%E4%BD%BF%E7%94%A8%E8%87%AA%E5%8A%A9%E6%9C%8D%E5%8B%99%E5%B7%A5%E5%85%B7%E4%B8%8B%E5%96%AE%EF%BC%8C%E5%AE%8C%E5%85%A8%E4%B8%8D%E9%9C%80%E8%A6%81%E4%BA%BA%E9%9A%9B%E4%BA%92%E5%8B%95%E3%80%82
  2. B2B購買に関する国内調査サマリー（明日香マーケティング）. tomorrow-marketing.co.jp. https://tomorrow-marketing.co.jp/news/pr003/#:~:text=Q2
  3. Core Web Vitalsの基準値と影響（Google情報の要約）. webma.xscore.co.jp. https://webma.xscore.co.jp/study/core-web-vitals/#:~:text=match%20at%20L18%20Google%E3%81%AB%E3%82%88%E3%82%8B%E3%81%A8%E3%80%81%E3%82%B3%E3%82%A2%E3%82%A6%E3%82%A7%E3%83%96%E3%83%90%E3%82%A4%E3%82%BF%E3%83%AB%E3%81%AE%E5%9F%BA%EF%BC%89%E3%82%92%E6%BA%80%E3%81%9F%E3%81%97%E3%81%9F%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%A7%E3%81%AF%E3%80%81%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E3%82%92%E3%82%84%E3%82%81%E3%82%8B%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%8C24
  4. Core Web Vitalsとコンバージョンの関係（事例・調査のまとめ）. pagetest.ai. https://pagetest.ai/blog/core-web-vitals-and-mobile-conversion-rates#:~:text=The%20impact%20of%20these%20slowdowns,Walmart%20found%20that%20improving%20page
  5. FAQスキーマとリッチリザルトの活用. wnauts.com. https://wnauts.com/cases/schema-markup-faq-question-answer/#:~:text=match%20at%20L68%20These%20question,markup%20literally%20on
  6. Progressive Profilingの解説（フォーム最適化手法）. conversionsciences.com. https://conversionsciences.com/page/2/?__hsfp=416462629&__hssc=259582869.1.1583971200157&__hstc=259582869.c4a577029c49e44b73bd3bee6fa38565.1583971200154.1583971200155.1583971200156.1&_preview=true&benderPackage=InpageEditorUI&cacheBust=1594720451930&cssPath=bundles%2Fapp.css&hubs_post=blog.hubspot.com%2Fblog%2Ftabid%2F6307%2Fbid%2F29354%2F10-Fundamental-Tips-for-Social-Media-Community-Managers.aspx&hubs_post-cta=Free+Landing+Page+Builder&hubs_signup-cta=null&hubs_signup-url=preview.hs-sites.com%2F_hcms%2Fpreview%2Fcontent%2F5241498400&inpageEditorUI=true&limit=45&offset=-480&p=t&portalId=53&preview_key=pSOAWoAu&scriptPath=bundles%2Fapp.js&staticVersion=static-1.22392&utm_expid=.jpJHoDpHSwSIhhtNmKkczw.1&wtime=%7Bseek_to_second_number%7D