HubSpot CMS to Next.js Migration

HubSpot CMS が成長チームに対応できない理由

HubSpot CMS は、スタートアップ段階のマーケティングサイトビルダーとして機能します。ドラッグアンドドロップエディタ、組み込み分析、CRM 統合により、小規模なマーケティングチームにとって魅力的です。しかし、プロダクトが成熟し、Web プレゼンスが競争優位性になると、HubSpot CMS は足かせになり始めます。

テンプレートシステムは堅牢性に欠けます。HubL は独自のもので、HubSpot エコシステム外ではドキュメントがほぼありません。パフォーマンスは平凡です。ページは HubSpot インフラストラクチャ経由でサーバーレンダリングされ、制御できるエッジキャッシング戦略がありません。エンジニアリングチームがインタラクティブプロダクトページ、ダッシュボード、ダイナミックコンテンツ体験を構築したいと考えると、プラットフォームと戦うことになります。

私たちは、数十の B2B SaaS 企業、エージェンシー、成長段階のスタートアップを HubSpot CMS から Next.js に移行させてきました。そのプロセスがどのようなものかをご紹介します。

HubSpot CMS の本当の問題点

突破できないパフォーマンスの天井

HubSpot CMS ページは通常、Lighthouse モバイルで 45～65 のスコアを達成します。画像を最適化し、スクリプトを縮小し、できる限り圧縮することはできますが、サーバーインフラ、CDN レイヤー、レンダリングパイプラインは制御できません。HubSpot は独自のトラッキングスクリプト、分析コード、CMS オーバーヘッドをすべてのページロードに注入します。これを望まなくても、その重みに対して支払っています。

HubL による独自ロックイン

HubL は HubSpot 独自のテンプレート言語です。Liquid でも Jinja でもなく、開発者が既に知っているものでもありません。HubL で構築するテンプレート、モジュール、パーシャルはすべて HubSpot にロックされます。チームが HubL の習得に投資した時間は、転用価値がゼロです。開発者を雇いたい場合、非常に限定された市場で探すことになります。

限定されたフロントエンド機能

HubSpot CMS 内で React コンポーネントを構築しようとすると、プラットフォームと戦うことになります。実際のコンポーネントアーキテクチャ、状態管理、サーバーコンポーネントがありません。プロダクトコンフィギュレータ、価格計算機、認証エクスペリエンスなどのインタラクティブ要素には、醜い回避策が必要です。通常は iframe またはサイドに取り付けたスタンドアロンアプリです。

コスト増加

HubSpot CMS Professional は月 $360 から始まります。Enterprise は月 $1,200 です。これはただの CMS で、通常はより大きな HubSpot 契約にバンドルされており、CMS はその一部に過ぎません。実際に得ている Web インフラストラクチャの観点からすれば、Vercel Pro プランが月 $20（チームメンバーあたり）でありながら、劇的に優れたパフォーマンスを提供しているため、高いといえます。

実際の開発者ワークフロー不足

HubSpot CMS のバージョン管理は事後対応です。CLI は存在しますが、使いにくいです。実際の CI/CD パイプライン、プルリクエストごとのプレビューデプロイ、ブランチベースの環境がありません。開発者は、2010 年のようにブラウザで編集するか、完全に機能しないシンクツールと戦っています。

Next.js がもたらすもの

パフォーマンスの完全な制御

Vercel 上の Next.js は、エッジレンダリング、自動画像最適化、増分静的再生成、ストリーミングサーバーコンポーネントを提供します。移行されたサイトで 95～100 Lighthouse スコアを一貫して達成します。TTFB は HubSpot での 1.2～2.5 秒から 300ms 未満、多くの場合エッジで 100ms 未満に低下します。

React コンポーネントアーキテクチャ

サイト全体が構成可能な React アプリケーションになります。価格表コンポーネントを一度構築して、どこでも使用します。ネイティブに感じるインタラクティブなプロダクトデモを作成します。コンポーネントレベルで A/B テストを実装します。フロントエンド開発者は世界で最も人気のある UI フレームワークで機能し、その背後に最大のツールと人材エコシステムがあります。

選択した Headless CMS

HubSpot CMS から分離すると、コンテンツチームのワークフローに適した任意の Headless CMS をプラグインできます。通常は、リアルタイムコラボレーションとカスタマイズ可能な編集エクスペリエンスのために Sanity をお勧めするか、構造化されたコンテンツモデルを求めるチームのために Contentful をお勧めします。マーケティングチームは HubSpot のページビルダーより優れた編集エクスペリエンスを得ます。開発者はクリーンな API を得ます。

モダンな開発者エクスペリエンス

Git ベースのワークフロー、TypeScript、すべての PR でのプレビューデプロイ、インスタント ロールバック、エッジ関数、ミドルウェア。これが最新の Web チームが配信する方法です。開発者はより幸せで、より速く配信でき、HubL スペシャリストを探す代わりに巨大な Next.js タレントプールから採用できます。

私たちの移行プロセス

フェーズ 1：監査とアーキテクチャ（1～2 週目）

既存の HubSpot CMS サイトの完全な監査から始めます。すべてのページ、テンプレート、モジュール、フォーム、CTA、統合をカタログ化します。URL 構造をマップし、最も高いトラフィックを持つページを特定し、実際に使用している HubSpot 固有の機能とただそこに存在しているものをドキュメント化します。

次に、Next.js アーキテクチャを設計します。ページルーティング、コンポーネント階層、データフェッチング戦略、CMS コンテンツモデルです。驚きのない詳細な移行計画が得られます。

フェーズ 2：デザインシステムとコンポーネント構築（2～4 週目）

デザインシステムを Next.js の React コンポーネントとして再構築します。これは HubSpot モジュールの 1:1 ポートではありません。デザイン負債をクリーンアップし、アクセシビリティを改善し、スケーラブルなコンポーネントライブラリを作成する機会です。すべてのコンポーネントは TypeScript で型付けされ、ドキュメント化されています。

フェーズ 3：CMS セットアップとコンテンツ移行（3～5 週目）

選択した Headless CMS をチームの編集ワークフローに一致する構造化コンテンツモデルで構成します。HubSpot からコンテンツを移行するスクリプトを作成します。ブログ投稿、ランディングページ、メタデータ、画像を新しい CMS に移動させます。手動コピー＆ペーストはありません。

フェーズ 4：統合レイヤー（4～6 週目）

HubSpot CRM は残ります。フォーム、連絡先追跡、ディール パイプラインはすべて機能し続けます。HubSpot の API を Next.js アプリケーションに直接統合して、フォーム送信、連絡先作成、イベント追跡を実現します。CRM の側からは何も失われません。

フェーズ 5：QA、SEO 検証、起動（5～7 週目）

すべての URL がテストされます。すべてのリダイレクトが検証されます。すべてのメタタグ、正規 URL、構造化データ要素が、元のサイトに対して検証されます。完全な Lighthouse 監査を実行し、Core Web Vitals をチェックし、カットオーバー前に Search Console インデックスを確認します。

SEO 保持戦略

SEO は、すべての移行における主要な懸念事項です。そして、それは正当です。ランキングを保護する方法を正確に説明します:

• 完全な URL マッピング: 既存のすべての URL は 301 リダイレクトを取得するか、正確に保持されます。孤立したページはありません。
• メタタグパリティ: タイトルタグ、メタディスクリプション、OG タグ、構造化データはすべて損失なく移行されます。
• XML サイトマップ生成: Next.js は適切な lastmod 日付と優先度値を使用してサイトマップを自動生成します。
• 正規 URL 管理: 移行中および移行後の重複コンテンツの問題を防ぐため、適切な正規タグを実装します。
• パフォーマンス向上: ページが速いほど Core Web Vitals が向上し、直接ランキングに影響します。ほとんどのクライアントは、移行後 4～8 週間でランキングの改善を見ます。
• Search Console 監視: 起動後 60 日間、インデックス、クロールエラー、ランキング変更を監視します。

タイムラインと価格

20～50 ページ、ブログ、HubSpot CRM 統合を備えたマーケティングサイトの典型的な HubSpot CMS から Next.js への移行には、5～7 週間かかります。カスタムモジュール、ゲートされたコンテンツ、多言語要件が複雑なより大きなサイトには、8～12 週間かかります。

標準マーケティングサイトの価格は $15,000 から始まり、複雑性に基づいてスケーリングします。すべてのプロジェクトは、正確な作業をスコープし、固定価格見積もりを提供する無料移行監査で始まります。驚きなし、螺旋状に進む時間単価請求なしです。

HubSpot を強力な場所に保つ

この移行は、HubSpot を完全に放棄することではありません。HubSpot の CRM、マーケティングオートメーション、メールシーケンス、営業ツールは本当に優れています。削除しているのは CMS レイヤーです。HubSpot スタックの最も弱い部分です。それを目的で構築された Web インフラストラクチャに置き換えます。マーケティングチームと営業チームはワークフローを保持します。Web エクスペリエンスは劇的に改善されます。