過去3年間で、Webflowから Next.js へ約15個のサイトを移行してきました。スムーズに進んだものもあれば、辛い経験もありました。Webflow の CMS コレクションページに埋もれていたリダイレクトルールのバッチを見落とし、クライアントが6週間で有機トラフィックの40%を失った本当の災難もありました。その経験から、ドキュメントからは学べないような、移行中の SEO 保全についての知識を得ました。

ここに、これを正しく行うために知っていることをすべて記載します。技術的なステップ、誰も警告しない落とし穴、そして Social Animal が検索ランキングが移行を乗り越えることを確認するために使用する正確なプロセスです。

目次

Webflowから Next.js に移行する理由

はっきり言いますが、Webflow はその役割を果たすのに本当に優れています。クリーンなセマンティック HTML を生成し、メタタグをネイティブに処理し、XML サイトマップを自動生成し、設定ファイルに触れることなく robots.txt を管理します。多くのカスタムロジックが必要のないマーケティングサイトとしては、優れています。

しかし、あなたがこの記事を読んでいるということは、おそらく限界に達しているはずです。次のようなことが Next.js へのチームの移行を促すのが一般的です：

パフォーマンスの上限。 インタラクションが多い、CMS アイテムが多い、またはアニメーションが複雑な Webflow サイトは、Core Web Vitals のひびが入り始めます。Largest Contentful Paint（LCP）の時間が 4 秒以上のモバイルで Webflow サイトを見たことがあります。これは Google の 2.5 秒のしきい値をはるかに超えています。サーバーサイドレンダリングと next/image 最適化を備えた適切に構築された Next.js サイトは、通常、その半分に削減されます。

カスタマイズの制限。 Sanity や Contentful などのヘッドレス CMS を統合する必要がありますか？カスタムチェックアウトフローを構築したいですか？エッジでの A/B テストのためのミドルウェアが必要ですか？Webflow のオールインワンアプローチは非常に限定的に感じられ始めます。

規模でのコスト。 Webflow の CMS プランは単一サイトで月額 $29 ですが、エンタープライズ機能は月額 $49 以上に押し上げます。複数のサイトまたはローカライズのニーズを考慮すると、Vercel の Pro プランで月額 $20 で Next.js アプリをホストすることが賢く見え始めます。特に、エッジ機能、分析、プレビュー展開が含まれているためです。

パフォーマンスデータがこれをサポートしています。 Webflow 自身のエンジニアリングチームは、ダッシュボードを SSR で Next.js に移行したときに読み込み時間が 20% 改善されたことを記録しました。2025 年のベンチマークでは、App Router を使用する Next.js 15 サイトは、複雑なインタラクションを備えた同等の Webflow ビルドよりも Lighthouse で一貫して 15 ～ 25% 高いスコアを獲得しています。

最新の Next.js スタックで何が可能かについて興味がある場合は、Next.js development capabilities ページで私たちのアプローチを詳しく説明しています。

移行の実際のコスト

コードについて話す前に、お金について話しましょう。完全な投資を理解せずに移行を開始したチームが多すぎます。

コンポーネント 推定コスト 注記
Webflow エクスポート＆コンテンツ監査 $1,000 – $3,000 手動作業; Webflow エクスポートは CMS データを逃します
Next.js 開発（10～20ページ） $8,000 – $25,000 複雑性、インタラクション、統合に依存
Next.js 開発（20～50ページ） $20,000 – $60,000 CMS、認証、カスタムロジックを備えたエンタープライズサイト
ヘッドレス CMS セットアップ $2,000 – $8,000 Sanity、Contentful、または Payload CMS 構成
SEO リダイレクトマッピング＆ QA $1,500 – $4,000 このリストで最も重要な項目です
Vercel/Netlify ホスティング（月次） $20 – $150/月 Webflow の $29～$49/月 ホスティングを置き換えます
移行後の監視 $500 – $2,000 4～8週間の Search Console 監視

30ページのブログを備えた典型的な中規模マーケティングサイトの場合、合計で $15,000～$40,000 をご覧ください。安くはありませんね。しかし、Webflow サイトが意味のある有機トラフィックを生成している場合、移行の失敗のコストははるかに高くなります。

このようなプロジェクトの透明な価格を /pricing で公開しています。あなたの特定の状況に対するリアルな範囲を知りたい場合は、確認する価値があります。

移行前の SEO 監査

ここが大多数のステップをスキップする場所であり、ほとんどの移行が失敗する場所です。単一の Next.js コード行を書く前に、現在の SEO フットプリントの完全な全体像が必要です。

すべてをクロール

Screaming Frog（または Sitebulb、または Ahrefs Site Audit）をライブ Webflow サイトに対して実行します。すべての URL をエクスポートします。つまり、すべての URL です。ページ、CMS コレクションアイテム、ページング付きアーカイブページ、ユーティリティページなど、すべてです。

以下が必要です：

  • 完全な URL インベントリ ― 200 ステータスを返すすべてのページ
  • タイトルタグとメタディスクリプション 各ページ用
  • 正規 URL ― Webflow はコレクションページで時々これを奇妙に設定しています
  • 内部リンク構造 ― どのページがどのページにリンクしているか
  • 構造化データ ― Webflow が生成しているスキーママークアップ
  • Core Web Vitals ベースライン ― トップ 20 ページで PageSpeed Insights を実行してください

トップパフォーマー記録

Google Search Console を開きます。パフォーマンスに移動します。過去12ヶ月間のクリック数でソートします。このデータをエクスポートします。これらは絶対に壊せないページです。

通常、次のような列を含むスプレッドシートを作成します：

URL | 月次クリック数 | トップクエリ | 平均掲載順位 | 優先度
/blog/seo-guide | 2,400 | "seo guide 2025" | 3.2 | CRITICAL
/pricing | 890 | "agency pricing" | 5.1 | HIGH
/about | 340 | "social animal dev" | 1.0 | MEDIUM

CRITICAL および HIGH カテゴリのすべてのページは、移行中に手動で注意を払います。自動化されたバルクリダイレクトはありません。仮定はありません。

バックリンクプロファイルを保存

Ahrefs または SEMrush バックリンクレポートを実行します。外部サイトが特定の Webflow URL（特にブログ投稿またはリソースページ）にリンクしている場合、それらの URL は移行後に正しく解決する必要があります。同じパスで、またはいずれかで301リダイレクト経由です。

Webflow サイトのエクスポート

Webflow のエクスポート機能は...限定的です。実際に取得できるもの、取得できないものは次のとおりです。

エクスポート含有物

CMS または Business プランでは、Project Settings で Export Code をクリックします：

  • 各ページの静的 HTML ファイル
  • CSS（Webflow のユーティリティクラスを含む）
  • JavaScript（Webflow のランタイム＋カスタムコード）
  • 画像およびその他のアップロードされたアセット

エクスポート除外物

これが重要な部分です：Webflow の CMS データはエクスポートに付属していません。 ブログ投稿、チームメンバー、ケーススタディ ― CMS Collections に保存されたコンテンツは、有用な方法では個々の HTML ファイルとして表示されません。エクスポートされた HTML に静的コンテンツとして焼き込まれますが、構造化データは失います。

CMS コンテンツを適切に取得するには：

  1. Webflow の CMS API を使用 JSON として collection アイテムをプル
  2. コレクションを CSV としてエクスポート Webflow Designer から（Collection Settings → Export）
  3. Whalesync または Make.com のようなツールを使用 CMS データを新しいヘッドレス CMS にパイプするには

Webflow CMS アイテムを彼らの API 経由でプルするための簡単なスクリプトは次のとおりです：

// fetch-webflow-cms.js
const WEBFLOW_API_TOKEN = process.env.WEBFLOW_TOKEN;
const COLLECTION_ID = 'your-collection-id';

async function fetchCollectionItems() {
  const response = await fetch(
    `https://api.webflow.com/v2/collections/${COLLECTION_ID}/items`,
    {
      headers: {
        'Authorization': `Bearer ${WEBFLOW_API_TOKEN}`,
        'accept': 'application/json'
      }
    }
  );
  const data = await response.json();
  
  // ヘッドレス CMS へのインポート用に JSON ファイルに書き込み
  const fs = require('fs');
  fs.writeFileSync(
    'cms-export.json',
    JSON.stringify(data.items, null, 2)
  );
  console.log(`Exported ${data.items.length} items`);
}

fetchCollectionItems();

HTML エクスポートのみに依存しないでください。静的 HTML からコンテンツを抽出する必要がある場合は、Cheerio のようなもので、エクスポートされたファイルを解析しますが、API ルートはより整理されています。

Next.js 代替品の構築

今、実際の構築です。Next.js 14 または 15 を App Router で使用していると仮定しています。2025 年に新しく始める場合、Pages Router を使用する理由はありません。

URL 構造マッピング

これは譲れません：新しい URL 構造は可能な限りどこでも古い構造と一致する必要があります。 すべての URL 変更はリスクです。Webflow ブログが /blog/post-slug にある場合、Next.js ブログは /blog/post-slug にある必要があります。

app/
├── page.tsx                    # ホームページ
├── about/
│   └── page.tsx               # /about
├── blog/
│   ├── page.tsx               # /blog（リスティング）
│   └── [slug]/
│       └── page.tsx           # /blog/post-slug
├── services/
│   └── [slug]/
│       └── page.tsx           # /services/web-development
└── contact/
    └── page.tsx               # /contact

メタデータ実装

Next.js 15 のメタデータ API は、Webflow が提供するものよりも本当に優れています。完全なプログラム制御を得ることができ、すべてがサーバーサイドでレンダリングされます。つまり、Googlebot は最初のペイントで表示されます。

// app/blog/[slug]/page.tsx
import { Metadata } from 'next';
import { getPostBySlug } from '@/lib/cms';
import { notFound } from 'next/navigation';

type Props = {
  params: Promise<{ slug: string }>;
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPostBySlug(slug);
  
  if (!post) return {};
  
  return {
    title: post.seoTitle || post.title,
    description: post.seoDescription || post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.featuredImage, width: 1200, height: 630 }],
      type: 'article',
      publishedTime: post.publishedAt,
    },
    alternates: {
      canonical: `https://yoursite.com/blog/${slug}`,
    },
  };
}

export default async function BlogPost({ params }: Props) {
  const { slug } = await params;
  const post = await getPostBySlug(slug);
  
  if (!post) notFound();

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
    author: {
      '@type': 'Person',
      name: post.author.name,
    },
    image: post.featuredImage,
    description: post.excerpt,
  };

  return (
    <article>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <h1>{post.title}</h1>
      {/* ポストコンテンツをレンダリング */}
    </article>
  );
}

正規 URL は明示的に設定されていることに注意してください。これを偶然に任せないでください。Webflow は正規 URL を自動的に処理します。Next.js では、意図的である必要があります。

パフォーマンス最適化

Webflow と比較して最大の違いを生み出す2つのこと：

next/image を使用した画像最適化：

import Image from 'next/image';

<Image
  src={post.featuredImage}
  alt={post.imageAlt}
  width={1200}
  height={630}
  priority={true} // ファーストビュー画像用
  sizes="(max-width: 768px) 100vw, 800px"
/>

next/font を使用したフォント最適化：

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
});

これら 2 つの最適化だけで、Webflow のデフォルトのフォントと画像処理と比較して、通常 LCP から 1～2 秒削除されます。

ヘッドレス CMS 側の考慮をしているチームの場合、headless CMS development ページでその統合作業を取り扱っています。

実際に機能する301リダイレクト戦略

これはあなたのランキングを救うセクションです。ここで、リダイレクト実装について人一倍徹底的になるつもりです。多くの移行がリダイレクト実装で失敗するのを見てきたからです。

完全なリダイレクトマップを構築

監査フェーズからあなたの Screaming Frog クロール取ります。Webflow サイトに存在するすべての URL について、これらの結果のうち正確に1つが必要です：

  1. Next.js 上で同じ URL ― リダイレクト不要だが、機能することを確認
  2. Next.js 上で異なる URL ― 古いから新しいへの 301 リダイレクト
  3. ページ削除 ― 最も関連性の高い既存ページへの 301 リダイレクト

以前にトラフィックまたはバックリンクがあったページのために、404 を返さないでください。決して。

next.config.js で実装

// next.config.js
const redirects = require('./redirects.json');

/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return redirects.map(({ source, destination }) => ({
      source,
      destination,
      permanent: true, // 301 ステータスコード
    }));
  },
};

module.exports = nextConfig;

そしてあなたの redirects.json：

[
  { "source": "/old-blog-post", "destination": "/blog/old-blog-post" },
  { "source": "/services/old-service", "destination": "/services/new-service" },
  { "source": "/team/:member", "destination": "/about" }
]

URL 構造が体系的に変更されたバルクリダイレクトには、パスマッチングパターンを使用します。しかし、常にこれらを個別にテストしてください。パターンマッチングは、注意しないとリダイレクトループを引き起こす可能性があります。

Webflow 固有の落とし穴

Webflow は URL に末尾のスラッシュを追加します。Next.js はデフォルトではそうしません。これは yoursite.com/about/（Webflow）と yoursite.com/about（Next.js）が技術的に異なる URL であることを意味します。

next.config.js で追加：

const nextConfig = {
  trailingSlash: false, // または true ― 一貫性があるだけです
  // ...
};

次に、最も高いトラフィックのページの末尾スラッシュバリアントの明示的なリダイレクトを追加します。Google は最終的に canonicals を通じてそれを理解しますが、明示的な 301 はプロセスを大幅に加速します。

Webflow CMS コンテンツの処理

200 の投稿を備えた Webflow CMS ブログがあった場合、そのコンテンツがどこかに存在する必要があります。2025 年には、いくつかの堅実なオプションがあります：

CMS 2025年価格 最適な場合 移行作業
Sanity 無料ティア → $99/月（Growth） 複雑なコンテンツモデル、リアルタイム共同編集 中程度
Contentful 無料ティア → $300/月（Team） エンタープライズチーム、多言語 中程度から高い
Payload CMS 自己ホスト（無料）またはクラウド $30/月以上 完全な制御、TypeScript ネイティブ 高い初期、低い継続
MDX ファイル（リポジトリ内） 無料 小さいブログ（<100投稿） 低い

ほとんどの Webflow から Next.js への移行では、Sanity をお勧めします。そのスキーマの柔軟性は Webflow のコレクション構造に適切にマップされ、Webflow データをインポートするためのコミュニティツールがあります。Payload CMS はすべてを TypeScript にしたいチームで人気が高まっています。カスタムスタックを構築している場合、評価する価値があります。

重要なこと：どの CMS を選択しても、ブログ投稿スラッグが正確に一致することを確認します。Webflow の /blog/my-great-post は、新しい CMS からプルする Next.js の /blog/my-great-post である必要があります。

移行後の SEO モニタリング

打ち上げ日は終わりではありません。4～8週間の監視期間の始まりです。

第1週：即座の対応

  1. 新しいサイトマップを Google Search Console に送信 （https://yoursite.com/sitemap.xml）
  2. URL Inspection を使用してトップ 20 ページのインデックスを要求
  3. カバレッジレポートを監視 ― 404 エラーの急増を監視
  4. リダイレクトチェーンをチェック ― Screaming Frog を使用してライブサイトをクロールし、すべてのリダイレクトが 1 ホップで解決されることを確認

第 2～4 週：ランキング回復

一時的な低下を期待してください。完璧なリダイレクトでさえ、最初の2週間でランキングが5～15位低下するのを見たことがあります。パニックにならないでください。Google は再度クロール、再度処理、および再度ランキング信号を割り当てる必要があります。

監視対象：

  • Search Console でインデックスされたページ数 ― 2週間以内に安定する必要があります
  • クリック率 ― CTR が大幅に低下する場合、メタディスクリプションに調整が必要な可能性があります
  • Core Web Vitals ― Next.js サイトはより高いスコアを取得する必要があります。Search Console の CWV レポートで検証

第 4～8 週：確認

4週間までに、ランキングが回復し始める必要があります。8週間までに、移行前のベースラインと一致するか、それを超える必要があります。6週間までに回復していない場合、何かが間違っています。見逃されたリダイレクト、正規 URL の問題、またはレンダリングの問題を確認してください。

ランキングを台無しにする一般的なミス

Webflow の自動生成ページを忘れます。 Webflow は考えていないかもしれないページを作成します ― /blog（コレクションリスティング）、/blog?page=2 のようなページング付きページ、タグ/カテゴリフィルターページ。それらをすべてマップします。

見出しの階層を一致させません。 Webflow サイトに Googleが特集スニペットに使用していた <h1> タグがブログ投稿にあった場合、Next.js サイトは同じ階層を必要とします。レイアウトコンポーネントがすでにどこかに <h1> を持っているという理由だけで、誤ってタイトルを <h2> に包まないでください。

重要なコンテンツのクライアント側レンダリング。 これが大きなものです。Next.js ページが空のシェルをロードしてから、クライアント側のコンテンツをフェッチする場合、Googlebot がコンテンツを確実に見られない可能性があります。サーバーコンポーネント（App Router のデフォルト）または generateStaticParams を静的生成に使用してください。SSR は Next.js に移行した理由です ― それを使用してください。

Open Graph とソーシャルプレビューを無視します。 Webflow は OG タグを自動生成します。共有ブログ投稿が LinkedIn や Twitter で壊れたプレビューを表示しなくなった場合、SEO に間接的に影響する社会的トラフィックを失うことになります。

移行中にドメインを変更します。 可能であれば、プラットフォームの変更と同時にドメインを変更しないでください。各変更は独立したリスク要因です。プラットフォームをまず移行し、ランキングを落ち着かせた後、ドメイン変更を別個のプロジェクトとして検討します。

これがひどく感じるのであれば、それは正常です。移行プロジェクトは経験が最も重要な場所です。これらを十分に実施して、確実なプロセスを持ってきました。あなたの特定の状況について話したい場合は、contact page 経由で連絡してください。

FAQ

Webflow から Next.js への移行にはどのくらい時間がかかりますか？

典型的なマーケティングサイトで 20～40 ページのブログを含む場合、監査から打ち上げまで 6～12 週間を見込んでください。開発作業自体は 4～8 週間かかるかもしれませんが、前もって SEO 監査と後で監視の時間が必要です。移行を急ぐことは、ランキングを失う方法です。

Webflow から Next.js に移行する際、SEO ランキングを失いますか？

正しく実行すれば、そうではありません。適切な 301 リダイレクト、一致する URL 構造、および同等のページ上 SEO 要素を使用して、ランキングは 4～8 週間以内に回復する必要があります。一部のサイトは、Next.js がより優れた Core Web Vitals スコアを提供するため、実際に改善を見ています。重要なのは、トラフィックまたはバックリンクがあった以前のインデックス付きページを 404 を返さないようにすることです。

Webflow サイトコードをエクスポートして、Next.js で使用できますか？

技術的には、そうです。Webflow はクリーンな HTML、CSS、JavaScript をエクスポートします。しかし、実際には、そうしたくないでしょう。Webflow のエクスポートされたコードは独自のクラス命名規則と Webflow のランタイムスクリプトを使用して、React コンポーネントにきれいにマップされません。Webflow エクスポートを視覚的なリファレンスとして使用して、React/Next.js で UI を再構築してから、コンテンツを別々に移行する方が良いです。

Webflow の CMS を置き換えるために、どのヘッドレス CMS を使用する必要がありますか？

Sanity と Payload CMS は、2025 年の Next.js プロジェクトで最も人気のある選択肢です。Sanity は寛大な無料ティアと優れたリアルタイム編集を提供します。Payload CMS は TypeScript ネイティブで、自己ホストできます。より単純なブログの場合、Git リポジトリに保存された MDX ファイルでも機能します。正しい選択は、チームサイズとコンテンツの複雑さによって異なります。

Webflow から移行した後、Webflow フォームをどのように処理しますか？

Webflow のフォーム処理は転送されません。Next.js では、Server Actions（Next.js 14 に組み込まれている）を使用してフォーム送信を処理するか、Formspree、Resend、独自の API ルートなどのサービスと統合できます。連絡フォーム用に、Server Actions と Resend 経由のメール配信は私のお気に入りです。すべてをコードベースに保つのは簡単です。

Next.js は本当に Webflow より SEO に適していますか？

サイトによります。カスタムロジックが不要な 10 ページのマーケティングサイトの場合、Webflow の組み込み SEO ツールは実際には十分です。しかし、コンテンツが豊富なサイト、ユーザーコンテキストに基づいて動的メタタグが必要なサイト、または Core Web Vitals パフォーマンスが重要なサイト（常に重要）の場合、Next.js はより多くの制御を提供します。サーバーサイドレンダリングにより、Googlebot は常に完全にレンダリングされた HTML を見ることができ、すべての SEO 要素を対してプログラムで制御できます。

Webflow から Next.js への移行にはいくらかかりますか？

SEO 保全を含む専門的な移行の現実的な範囲は、中規模サイトの場合 $15,000～$40,000 です。フリーランサーレート（$5,000～$15,000）は低くなるかもしれませんが、移行経験がない場合はより多くのリスクを持ちます。最大のコスト変数は、ヘッドレス CMS 統合が必要かどうか、および再構築が必要なカスタムインタラクションの数です。

移行された Next.js サイトに SSR または SSG を使用する必要がありますか？

ほとんどの Webflow から Next.js への移行では、Static Site Generation（SSG）が正しいデフォルトです。より速く、より安く提供できます。API から実時間データを必要とするページに SSR を選択的に使用してください（価格ページなど）。Next.js 15 の App Router により、サーバーコンポーネントと generateStaticParams を使用して同じプロジェクト内の両方のアプローチを混ぜるのは簡単です。