サイトリニューアル事例｜Next.js×Vercelで表示速度3倍・問い合わせ2倍

はじめに

本記事では、BtoB製造業A社（従業員200名）のコーポレートサイトリニューアルのケーススタディを解説します。2018年に制作されたWordPressベースのサイトを、Next.js×Vercel×ヘッドレスCMSで全面リニューアルした結果、表示速度が3倍改善（LCP 5.2秒→1.6秒）、問い合わせ数が2倍（月20件→月40件）を達成した事例です。

本事例で採用した設計の考え方・技術選定の背景・成果の詳細を整理することで、自社のリニューアルに活用できる知見を提供します。

本記事の前提となる、サイトリニューアルの目的設定や全体の進め方については「サイトリニューアルの基本（目的設定から全体の流れ）」で詳しく解説しています。

企業・プロジェクトの概要

企業概要

• 業種：産業機械の製造・販売（BtoB）

• 従業員数：200名

• 主要顧客：製造業・食品業・物流業

• 旧サイトの制作時期：2018年（WordPressで構築）

プロジェクト開始の背景

Web担当の山田氏（マーケティング部）から「検索流入が2年で30%減少しており、問い合わせも月20件程度で推移しています。競合のB社がリニューアル後に問い合わせを大幅に増やしたと聞き、危機感を持っている」という相談から始まった。

PageSpeed InsightsでのスコアはモバイルでLCP 5.2秒（評価：要改善）、デスクトップで2.8秒。SEOの観点から重大なハンデを抱えた状態でしました。

現状分析と課題の定量化

プロジェクト開始時に実施した現状分析の結果を以下に示す。

GA4・Search Consoleの分析結果

競合比較分析

Ahrefsを使った競合分析の結果、競合B社は同じ期間でオーガニック流入を2.3倍に増加させており、主要キーワードでのA社の順位は15〜30位に対しB社は3〜7位を確保していました。B社のサイトはNext.js製で、LCP 1.4秒という高パフォーマンスを実現していました。

課題の整理と優先順位

分析結果から、以下の3つの課題が優先順位として整理されました。

課題1（最優先）：表示速度の改善

LCP 5.2秒は、検索ランキングにおけるペナルティであり、ユーザー体験の観点からも致命的です。モバイルの直帰率72%の主因の一つと判断しました。

課題2（優先）：コンテンツの貧弱さ

競合B社のサイトと比較して、製品の導入事例・技術情報・FAQ等のコンテンツが著しく不足していました。SEO上の評価を高めるためのコンテンツ拡充が必要でしました。

課題3（優先）：CVポイントの不足

問い合わせフォームのみがCVポイントとして設置されており、検討初期の訪問者が情報を得る場所（資料DL・FAQ・製品比較ページ）が存在しなかった。

技術スタックの選定

課題1（表示速度）を根本的に解決するために、CMSのアーキテクチャから見直すことを選択しました。

選定した技術スタック

• フロントエンド：Next.js 15（App Router）

• ホスティング：Vercel（エッジ配信）

• CMS：Orizm（ヘッドレスCMS）

• フォーム・MA連携：HubSpot

• 画像最適化：next/image・WebP

• 検索機能：Algolia

WordPressからの移行を決断した理由

WordPressの高速化施策（WP Rocket・Cloudflare・画像最適化等）の組み合わせで改善を試みたが、LCP 2.5秒以下の達成が構造的に困難だと判断しました。Next.js＋Vercelの静的生成とエッジ配信であれば、LCP 1.5秒以下を安定して実現できるという技術的見通しから、移行を決断しました。

設計の重点ポイント

情報設計の刷新

旧サイトは「会社の都合で整理されたページ構成」だったが、新サイトでは「購買フェーズに応じた訪問者の行動設計」を起点に情報設計を行った。

新サイトマップの主要な変更点

• 「製品一覧」から「課題別ソリューション」への構成変更（訪問者が「製品名」ではなく「自社の課題」で検索するという行動特性に対応）

• 「導入事例」の新設（業種・課題・規模でフィルタリング可能）

• 「技術情報・ナレッジ」の新設（SEO記事として月4本のペースで拡充）

• 「製品比較」ページの新設（ソフトCVポイントとして資料DLを設置）

CVポイントの拡充

旧サイトの問い合わせフォームのみから、以下のCVポイントを追加しました。

• 製品別カタログのPDF無料ダウンロード（メール・会社名のみで取得可能）

• 製品比較表のダウンロード

• 無料相談フォーム（「まずはお気軽に」という低ハードルのCTA）

• 問い合わせフォーム（詳細な相談向け）

SEO移行設計

旧サイトから新サイトへのURL変更は最小限に抑え、変更が必要なURLには301リダイレクトを設定しました。Search Console上の被リンクを精査し、被リンクが多い上位20URLのリダイレクトを優先的に設計しました。

実装と公開

プロジェクト期間：4.5ヶ月（要件定義から公開まで）

制作期間の内訳

• 要件定義・情報設計：3週間

• デザイン：4週間

• 実装・CMS構築：8週間

• コンテンツ移行・制作：8週間（デザイン・実装と並行）

• テスト・修正：2週間

• 公開・移行：1週間

コンテンツの準備

コンテンツ準備がプロジェクトのクリティカルパスになることを事前に認識し、製品説明・事例インタビュー・技術資料の収集をキックオフ直後から開始しました。A社の各事業部担当者へのインタビューを制作会社が代行し、コンテンツの収集工数を大幅に削減しました。

リニューアル後の成果

公開から6ヶ月後の成果を以下に示す。

パフォーマンス指標

成果の要因分析

要因1：表示速度の改善によるSEOランキング向上

リニューアル後3ヶ月で、主要キーワードでの検索順位が平均で12位上昇しました。LCPの改善がCore Web Vitalsの評価を向上させ、ランキング改善につながったと分析しています。

要因2：コンテンツの拡充による新規流入の獲得

「課題名 解決方法」「製品名 比較」といった情報収集系キーワードでのランディングページが新たに流入を獲得し始めた。ナレッジ記事（月4本）からの流入は、6ヶ月で全体の28%を占めるまでに成長しました。

要因3：CVポイントの拡充によるCVR改善

カタログDLと製品比較表のDLが月合計120件を超え、検討初期の見込み客をリストとして獲得できるようになりました。HubSpotとの連携によりこれらのリードへのナーチャリングメールを配信し、問い合わせへの転換も確認されています。

本プロジェクトから得られた教訓

教訓1：CMSのアーキテクチャ選定が表示速度の天井を決める

WordPress上での高速化施策には構造的な限界があり、根本的な解決のためにはアーキテクチャの見直しが必要でしました。リニューアルのタイミングでモダンスタックへの移行を決断したことが、最大の成果要因でしました。

教訓2：コンテンツの準備がプロジェクトのクリティカルパス

コンテンツ収集の開始をキックオフと同時にスタートしたことで、実装フェーズでの遅延を防げた。「デザインが決まってからコンテンツを用意する」というアプローチは、スケジュール遅延の最大原因になることを再確認しました。

教訓3：CVポイントの多様化が成果を加速します

問い合わせフォームのみのCVポイントから、カタログDL・比較表DL・無料相談フォームを追加したことで、フェーズの異なる訪問者全員にアクションの機会を提供できた。これがCVR改善の最も効果的な施策でしました。

まとめ

本ケーススタディは、BtoB製造業のコーポレートサイトリニューアルにおいて、「モダンスタックへの移行×コンテンツ拡充×CVポイントの多様化」という3つの施策の組み合わせが、表示速度3倍・問い合わせ2倍という成果につながった事例です。

本シリーズ「サイトリニューアルの基本」の全14記事を通じて、リニューアルの目的定義から制作会社選定・SEO移行・技術選定・成果測定まで、体系的に学ぶことができます。各記事の知見を自社のリニューアルプロジェクトに組み合わせて活用してほしい。