WebflowからWordPressへの移行完全ガイド【2026年版】

ルカム・ジョスラン

ルカム・ジョスラン

代表取締役、Utsubo株式会社

2026年5月7日 · 41分で読めます
WebflowからWordPressへの移行完全ガイド【2026年版】

WebflowからWordPressへの移行を検討するきっかけは、Webflowそのものに不満があるからではないことが多いです。チームが拡大するにつれてワークスペースのシート単位の課金が積み上がる。クライアントが段落の編集以上のことをすると、レイアウトが崩れてしまう。CMSアイテム1万件の上限が、よりによって本気で運用したいプロジェクトで顔を出す。Webflowは美しいデザインツールです。同時に、使い続けるほど摩擦が複利で積み上がるプラットフォームでもあります。

WixやSquarespaceと違い、Webflowはエクスポートに対応しています。HTML、CSS、JavaScript、画像アセットからなる静的アーカイブとしてサイトをダウンロードできます。CMSコレクションはCSV出力。ただしフォーム、Eコマース、メンバーシップ、カスタムインタラクションは「動作する状態」ではエクスポートできません。Webflowが宣伝するエクスポートと、移行に必要な実用的なエクスポート — このギャップに、ほとんどの「Webflow WordPress 移行」記事は触れていません。本記事は正面から扱います。

このガイドでは、Webflowが実際にエクスポートできるもの、2026年時点での3つの現実的な移行パス、ステップごとの作業手順、検索順位を守るためのリダイレクト設計、そして24ヶ月の総保有コスト比較までをすべて解説します。

対象読者: シート単位課金、CMSアイテム上限、Webflow Designerの学習コスト、クライアント納品後の編集摩擦に直面している制作会社・フリーランス・Webflowサイトオーナーの方。WordPressプラグインエコシステムを必要としているマーケティング部門の方も含みます。


この記事の要点

  • Webflowは静的HTML/CSS/JSをきれいにエクスポートできますが、動的機能(フォーム、Eコマース、メンバーシップ、サイト内検索)はエクスポートしても動作しません。CMSコレクションはCSV出力 — 構造は再構築、エントリーは取り込み。
  • WebflowからWordPressへの2026年の現実的な移行パスは3つ:静的エクスポートからの手動再構築、ハイブリッド方式(エクスポート→WPテーマ化)、稼働中URLを読み込むAI自動変換。
  • Webflow Site Planは月額$14〜$39(約2,100〜5,800円)、Workspaceはシートあたり月額$19〜$49(約2,800〜7,300円)の追加。WordPressはマネージドホスティングで月額約3,750円が標準で、チームに対する「人数税」はゼロ。
  • WebflowのCMSコレクションはWordPressのカスタム投稿タイプ(CPT)+ Advanced Custom Fields(ACF)にきれいにマッピングできます。設計の前倒し作業が必要ですが、対応関係は明確。
  • WebflowのURL構造は予測可能(コレクションスラッグ、ページスラッグ、プラットフォーム由来の不要なプレフィックスなし)。WixやSquarespaceと比べてリダイレクト設計が楽。
  • 2〜3つのCMSコレクションを持つ20〜60ページの一般的なWebflowサイトであれば、キックオフから公開まで1〜3週間が目安。

1. なぜ制作会社はWebflowからWordPressに移行するのか

Webflowの強みは本物です。コードを書かずに視覚的にデザインを制御でき、ホスティングも一体化、プラグイン保守の心配もありません。新規ブランドサイトや小規模なマーケティングページであれば十分機能します。それでも移行を選ぶ理由はいくつかのパターンに収束し、いずれもスケール、ハンドオフ、コストに関わるものです。

  • シート単位のWorkspace課金。 Webflow WorkspaceはCoreプランで$19/ユーザー/月(約2,800円)、Growthプランで$49/ユーザー/月(約7,300円、いずれも年契約ベース)。チームや制作会社が拡大すると、コストもリニアに増えていきます。WordPressは編集者・デザイナー・開発者の人数で課金されません。5名規模の制作会社がWebflow Growthプランを使うと、クライアント案件の売上が立つ前にシート代だけで月額$245(約3万6,000円)が発生します。同じ人数でWordPress運用なら追加コストは0円です。
  • CMSアイテムの上限。 Webflow Site Planには明確な天井があります:BasicプランはCMS非対応、CMSプランは2,000アイテム、Businessプランは10,000アイテム、Enterpriseはそれ以上。コンテンツが増え続けるサイト(ブログ、ポートフォリオ、事例集、不動産掲載、商品カタログ、ナレッジベース)はいずれかの壁にぶつかります。その時の移行は受け身、高コスト、納期に追われがち。WordPressにこの上限はなく、データベース性能が唯一の制約で、これは水平スケール可能です。
  • Webflow Designerの学習コスト。 Webflow DesignerはCMSというよりFigmaに近いツールです。制作会社で新しく入ったメンバーが監督なしでページを作れるようになるまで、通常2〜4週間のオンボーディング期間が必要。クラスベースのスタイリング、ブレイクポイントの継承、CMS Designerの仕組みは、いずれも腰を据えて学ぶ必要があります。クライアントが読み取り専用のEditor以上に踏み込むことはまずありません。WordPressにページビルダー(Bricks、Breakdance、Elementor)を組み合わせれば、新メンバーも数日で実戦投入できます。基本概念が「ドキュメントとコンポーネント」に近く、「コードとしてのデザインシステム」より直感的だからです。
  • クライアントによる編集の摩擦。 WebflowのEditorは強力ですが、Designerはあくまでプロ向けツール。クライアントはテキスト編集や画像差し替えはできても、新しいセクションタイプの追加、ブレイクポイントの変更、壊れたインタラクションの修正のような構造的変更はすべて制作会社に戻ってきます。継続契約で月額保守を取っているならこれで構いません。納品後はクライアント側でセルフサービス、という前提のビジネスモデルだと問題になります。WordPressにページビルダー+権限制限(Members、User Role Editor)を組み合わせれば、クライアントが「壊さずに編集できる」範囲を意味のある粒度で設計できます。
  • プラグインエコシステム。 WordPressには7万以上の無料プラグインがあります。Webflowのマーケットプレイスは規模が小さく、有用なものは大半が有料。多言語サイト(Polylang、WPML)、本格的なメンバーシップ(MemberPress、Paid Memberships Pro)、LMS(LearnDash、LifterLMS)、高機能Eコマース(WooCommerce + WooSubscriptions)、予約管理(Amelia、Bookly)、ディレクトリサイト(GeoDirectory)といったカテゴリは、WordPressが桁違いに有利です。これらの多くはWebflowのマーケットプレイスにそもそも存在しません。
  • デザインのロックイン。 Webflowサイトは静的HTMLとしてエクスポートできますが、CMSやフォーム、Eコマースを使った瞬間、稼働サイトの可搬性が失われます。エクスポートはあくまでスナップショットで、動作する状態ではありません。WordPressサイトは午後半日でホスト間を移動できます — wp-contentとDBダンプがあれば完全に可搬です。
  • SEOの深さ。 WebflowのSEOは改善されてきましたが、WordPress + Yoast / Rank Math / SEO SIMPLE PACK の方が依然として制御範囲が広い。ページ単位のスキーマ、内部リンク設計、robots.txt、リダイレクトロジック、コンテンツタイプ別のメタテンプレート、自動パンくずスキーマ、FAQ/HowTo構造化データのエコシステムなど、いずれも勝負になりません。
  • ホスティングの自由度。 Webflowはホスティング込み — CMSや動的機能を保ったまま別ホストへ移すことは不可能です。WordPressはLAMP/LEMPスタック上で動作し、専用マネージドホスト(Kinsta、WP Engine、Pressable)、国内サーバー(Xserver、ConoHa WING、エックスサーバー、Mixhost)、VPS(さくらのVPS、ConoHa VPS、DigitalOcean)、フルマネージド(Cloudways、RunCloud)など選択肢が豊富です。

引き換えに受け入れるトレードオフ:WordPressには軽い保守作業が継続的に発生します(プラグイン更新、バックアップ、セキュリティパッチ)。マネージドホストを使えば大半は自動化されます。Webflowからクライアントサイトを移行する制作会社は、ホスティングに加えて月額3,000〜2万円程度の保守プランを提供することが多く、これが保守工数のコストをカバーすると同時に、Webflow時代には存在しなかった月額サブスク収益を生みます。

2. Webflowが実際にエクスポートできるもの・できないもの

「Webflow WordPress 移行」を扱う記事は、ここから始める必要があります。最初に何が持ち出せるか、はっきりさせておきます。

Webflowがネイティブにエクスポートできるもの(有料Site Plan限定):

  • 静的HTML、CSS、JavaScript — Designer → Export Code(Site Settings → Export Code)から取得。レンダリング済みの全ページ、コンパイル済みCSSバンドル、アニメーション/インタラクションJS、画像参照を含むZIPで出力。
  • 画像アセット — エクスポートZIP内に含まれる。
  • CMSコレクション — CMSパネルから各コレクションごとにCSV書き出し。各行がコレクションアイテム、列がCMSフィールド。
  • サイト設定 — 静的な参照情報として(他プラットフォームへ可搬性はなし)。

Webflowがエクスポートできない、もしくはスナップショットとしてしかエクスポートできないもの:

  • フォーム — フォームのHTMLは出力されますが、送信先がありません。Webflowのフォームハンドラーはプラットフォーム依存。
  • Webflow Eコマース — 商品、注文、顧客データ:WordPressへのネイティブエクスポートなし。商品はCSVである程度取得可能。
  • メンバーシップ(User Accounts) — メンバーとアクセスレベルはエクスポート不可。
  • Webflow Logic — 自動化ワークフローはWebflow上に残ります。
  • 動的CMS機能 — 静的エクスポートはエクスポート時点のCMS状態のスナップショット。以降の編集は再構築・再エクスポートが必要。
  • サイト内検索 — Webflowのサイト検索は可搬性なし。
  • 過去のフォーム送信データ。
  • カスタムコード埋め込み — インラインコードとしてエクスポートされるが、外部スクリプトは再設定が必要なことがある。

要するに:Webflowはきれいな静的アーカイブとCSVを提供しますが、動作するCMS、動的フォーム、決済機能はくれません。移行の実体は 動的レイヤーの再構築+コンテンツの取り込み であり、静的エクスポートは強力な「デザイン参照」として活用します。次のセクションのパス選定は、その「再構築」をどう扱うかの違いです。

移行前の点検項目については、WordPress移行の事前監査ガイドを参照してください。

3. WebflowからWordPressへ移行する3つの方法

3-1. 手動再構築

Webflowエクスポートをデザイン参照として使い、WordPress上でテーマ+ページビルダーで一から作り直します。CMSコレクションはカスタム投稿タイプにマッピングし、コンテンツはCSVで取り込み。

  • やり方: マネージドWordPressホストを契約。WordPress+ページビルダー(Bricks、Breakdance、Elementor、GeneratePress)をインストール。Webflowエクスポートを参照しながら各ページを再構築。各WebflowコレクションごとにCPTを設定(ACFまたはCPT UI使用)。コレクションCSVをWP All Importなどで取り込み。
  • 向いているケース: リデザイン予定だった案件、コレクション構造がシンプルなサイト、相応の時間を割けるDIYユーザー。
  • コスト: 自分・チームの時間+月額3,750〜6,700円のマネージドホスティング。プレミアムテーマ/ビルダーライセンスで7,500〜30,000円(買い切りまたは年額)。
  • 納期: 2つのCMSコレクションを持つ30ページサイトで2〜6週間。

3-2. ハイブリッド:Webflowエクスポート → WordPressテーマ化

Webflow静的サイトをエクスポートし、HTML/CSS/JSをカスタムWordPressテーマに変換します。コンテンツはWebflowデザインに忠実なまま、動的レイヤー(CMS、フォーム)はWordPressで再構築。

  • やり方: Webflowを静的HTMLとしてエクスポート。開発者(自身か外注)がテンプレートをWordPressのPHPで包む — header.phpfooter.phppage.phpsingle-{cpt}.php。コレクション用にACFまたはCPT UIを設定。WP All ImportでCMSアイテムを取り込み。
  • 向いているケース: 開発リソースを持つ制作会社で、ゼロから書かずにカスタムテーマを欲しい場合。Webflowデザインの完全な再現が優先のサイト。
  • コスト: 開発者の時間(30ページサイトで通常30〜80時間)。フリーランス/制作会社へ委託する場合は45〜120万円程度。
  • 納期: 2〜4週間。

3-3. AIによる自動変換

WP Pro Converter のような専用サービスは、稼働中のWebflowサイトURLを読み込み(あるいはエクスポートを処理し)、デザインを再現したWordPressテーマを生成、インストーラープラグインを納品します。CMSコレクションは自動検出され、対応するカスタム投稿タイプにマッピングされます。コンテンツも一緒に移行します。

  • 向いているケース: 納期が逼迫している制作会社、Webflowデザインの完全再現が必須のサイト、開発リソースが薄いインハウスチーム。
  • コスト: フリーランス/制作会社の数分の一(最新料金はトップページを参照)。複数コレクションを持つ大型サイトはページ数による見積もり。
  • 納期: 数時間〜数日。
  • 得られるもの: Webflowサイトの見た目を再現したWordPressテーマ、各コレクションに対応したカスタム投稿タイプ、編集可能領域、開発者の検証パス込み。

選択早見表:

パス コスト 納期 適したケース
手動再構築 チームの時間 2〜6週間 リデザイン予定、シンプルなコレクション
ハイブリッド(エクスポート+テーマ化) 45〜120万円 2〜4週間 ゼロから書かないカスタムテーマ
AI変換 トップページ参照 数時間〜数日 Webflowデザインの忠実再現、納期重視

WordPress変換ツールの全体像については、WordPress変換ツール選定ガイドを参照してください。

4. ステップ・バイ・ステップ:WebflowからWordPressへの移行

4-1. Webflowサイトの棚卸し

何より先に、

  • Webflowサイトの全URLを記録(Screaming Frogなどのサイトマップクローラーを利用。小規模なら無料版の500URL上限で足ります)
  • 各CMSコレクションを一覧化 — 名前、アイテム数、フィールド、スラッグパターン、参照フィールド、複数参照フィールド、条件表示ロジック
  • 全フォーム、フォーム送信先、連携先(Mailchimp、HubSpot、Slack、Zapier、Salesforce)を一覧化
  • 全Webflow Logicワークフロー、メンバーシップ設定、Eコマース設定を文書化
  • カスタムコード埋め込みを記録(Site Settings → Custom Code、ページ単位のCustom Code、Designer内のEmbed要素)
  • 主要ページテンプレートのスクリーンショット取得(レイアウトごとに1点、モバイルブレイクポイント、タブレット個別指定があればそれも)
  • 現在のWebflowプラン(Site Plan+Workspaceシート数、請求サイクル)を記録
  • ドメイン登録元とDNS設定、利用中のサブドメインを確認
  • 現状の性能指標を取得(Lighthouse、Search ConsoleからCore Web Vitals) — 移行後の比較基準として
  • Search Console データの抽出:直近90日の上位50URL、上位100キーワード、合計クリック・インプレッション。これらが「順位低下を絶対に許さないリスト」になります。

4-2. Webflowからエクスポートする

2つのエクスポートを並行で実施します。

静的HTML/CSS/JSエクスポート: Site Settings → Export Code。有料Site Planが必要。レンダリング済みの全ページ、CSSバンドル、JS、アセットを含むZIPで出力。

CMSコレクションのエクスポート: 各コレクションでCMSパネル → ⋯メニュー → Export CSV。各コレクションを {collection-slug}.csv として保存。

画像アセット: ほとんどの画像は静的エクスポートに含まれます。CMSアイテム内のみに格納されている画像(参照フィールド経由のもの)は、Asset パネルから個別ダウンロード、またはCSV内の画像URLからスクレイピング取得が必要なことがあります。

4-3. WordPressをセットアップする

マネージドWordPressホスティングを契約。クライアント案件の移行であれば、XserverConoHa WINGMixhostさくらのレンタルサーバ(国内)、KinstaWP EnginePressable(海外マネージド)あたりが安定。本番ドメインを切り替える前に、ステージングURL/サブドメイン(例:staging.clientsite.com)でWordPressを動かします。

子テーマまたはカスタムテーマのディレクトリを用意。選定したページビルダー(Bricks、Breakdance、Elementor、GeneratePress)をインストール。CMSスキーマ作業のためACF(Advanced Custom Fields)の無料版またはPro版を導入。

4-4. 移行パスを選ぶ

セクション3を基準に決定。判断軸は主に (a) デザイン再現の優先度、(b) 開発リソース、(c) 納期。

4-5. デザインを再構築または導入

  • 手動: Webflow静的エクスポートをビジュアルリファレンスに使い、ページビルダーで各ページを再構築。
  • ハイブリッド: 静的エクスポートをPHPテンプレートに変換。レイアウトをWordPressテンプレートタグ(get_header()the_content()wp_head()wp_footer())で包み、メニュー位置を登録、コンパイル済みCSSをエンキュー、カスタム投稿タイプを登録。
  • AI変換: WebflowサイトURLをWP Pro Converterに送信、変換結果を確認、生成プラグインをWordPressにインストール。

4-6. コレクション用にカスタム投稿タイプを設定(セクション7参照)

各WebflowコレクションがWordPressのカスタム投稿タイプになります。詳細はセクション7。

4-7. Webflowコンテンツを取り込む

ページ:WordPress標準エディターまたはページビルダー。コンテンツはWebflow Designerまたは静的エクスポートから直接コピー。

コレクション:WP All Import(無料/Pro)を使用。CSV列とWordPressフィールド(ACFカスタムフィールド含む)をマッピング。コレクションごとに設定:

  • WebflowコレクションCSVを、対応するWordPressカスタム投稿タイプにマップ
  • 各CSV列を対応するACFフィールドにマップ
  • URL列からの画像取り込みを設定(WP All Importは自動ダウンロードに対応)
  • 投稿スラッグをWebflowコレクションアイテムのスラッグに揃える(URL保持に必須)
  • 公開ステータス、執筆者、日付をCSV列から設定

最初は5〜10アイテムでテストインポートを実行。フロントエンドの表示を確認してから全件インポート。

4-8. フォームを移行する

Webflowのフォームは移行できません。WordPressフォームプラグインを選定:

  • Contact Form 7 — 無料、軽量、スタイリングはHTML/CSSの手作業が必要
  • WPForms Lite — 無料+有料アップグレード、ドラッグ&ドロップビルダー
  • Fluent Forms — 無料+Pro機能、高速・モダン
  • Gravity Forms — 有料、複雑なフォームの定番

各Webflowフォームを選定したプラグインで作り直し。連携先(Mailchimp、HubSpot、Zapier)はプラグインのネイティブコネクタかZapier Webhookで再接続。

4-9. Webflow Eコマースの移行(該当する場合)

Eコマースサイトの場合:

  • WooCommerce をインストール
  • WebflowからCSVで商品エクスポート(Webflow Ecommerce → Products → Export)
  • WooCommerceのProduct CSVインポーター(ツール → インポート → WooCommerce 商品)を使用
  • CSV列をWooCommerce商品フィールド(名前、SKU、価格、在庫、カテゴリー)にマップ
  • 配送ゾーン、税率、決済ゲートウェイ(Stripe、PayPal、KOMOJU、Pay.JP)を再設定
  • 公開前に実カードでチェックアウト全フローを検証

顧客アカウントと注文履歴はクリーンには移行できません。新プラットフォームでゼロから始めるか、既存顧客に再登録を依頼する設計にします。

4-10. SEOプラグインをセットアップ

Yoast SEORank MathSEO SIMPLE PACK のいずれかを導入。ページごと(およびコレクションアイテムごと)に既存Webflowのタイトルタグ・メタディスクリプションを引き継ぎ。動的なコレクションアイテムについては、投稿タイプのカスタムフィールドを参照するタイトル・ディスクリプションのテンプレートを設定(例:%post_title% | 事例 | Acme社)。

4-11. SEOリダイレクト(セクション6参照)

最重要ステップ。詳細はセクション6。

4-12. テストして公開

DNSを切り替える前に、

  • 全ページがPC・モバイルで正しく表示されるか確認(実機推奨、エミュレーターのみは不十分)
  • 全フォーム、全リンク、全CTA、全チェックアウトステップを検証
  • ステージングURLでSSLが有効か確認
  • Lighthouse/PageSpeed Insightsで監査 — Webflow時のベースラインを超えること
  • DBバックアップを取得
  • wp-config.phpWP_HOMEWP_SITEURL が正しいか確認
  • ステージングで curl -I またはリダイレクトチェッカーを使い、301リダイレクトをテスト

その後、ドメインを新WordPressサイトに切り替え。新しいサイトマップをGoogle Search ConsoleとBing Webmaster Toolsに送信。公開後30日間はSearch Consoleで毎日404を監視。

このフェーズで起きやすい失敗については、HTMLからWordPressへの変換でよくあるミスを参照。

5. WebflowデザインをWordPressで再現する

Webflowで時間をかけてチューニングしたデザイン — アニメーション、ホバー状態、スクロール連動インタラクション、緻密なタイポグラフィ — の再現は、移行で最も難しいステップです。Webflowのデザイン出力は3つの要素が連携することで成立しています:コンパイル済みCSSバンドル(webflow.css +サイト固有のCSSファイル)、インタラクションとレスポンシブフレームワークを動かすJavaScriptバンドル(webflow.js)、両者を結ぶレンダリング済みHTMLのクラス名。このいずれかを落とす移行は、デザインを壊します。

忠実度順に3つのアプローチ:

  1. 似たWordPressテーマを購入。 Bricks、Breakdance、GeneratePress、Astraのテーマライブラリから一番近いものを選び、色・フォント・余白を手動調整。現実的な再現度70〜80%。アニメーションやWebflow Interactionsは、追加のJS実装なしには再現困難です(テーマビルダー側はGSAPベースかCSSのみのアニメーション機構を持っており、WebflowのIX2フォーマットを解釈しません)。
  2. ハイブリッドテーマ化(セクション3-2)。 Webflow静的エクスポートをPHPテーマ化。レンダリング済みHTMLをWordPressテンプレートタグで包み、コンパイル済みCSS/JSバンドルをそのまま配信、動的コンテンツはCPTで紐付け。アニメーションとインタラクションはWebflowが書き出したJSがそのまま動きます。再現度90〜98%。開発工数と、動的レンダリングされたCMSコンテンツに対する webflow.js の初期化制御を要します。
  3. AIによる自動変換。 サービスが稼働中WebflowURLまたは静的エクスポートを読み込み、カスタムWordPressテーマを生成。再現度95〜99%、開発者レビュー済み。Webflow InteractionsとCSSはWordPressテーマ内でそのまま再現され、動的なコンテンツブロックは標準のWordPress編集APIから編集可能になります。

ブランドの中核がデザインにあるサイト(制作会社、デザインスタジオ、プレミアム製品ブランド)の場合、選択肢2か3以外はどうしても妥協が伴います。

6. SEO:WebflowのURLからのリダイレクト設定

WebflowのURLパターンはWixやSquarespaceより予測可能なため、リダイレクト設計はクリーンに進められます。とはいえ、すべてのURLについて手当が必要です。

Webflowでよくあるパターン:

  • 固定ページ:/about/services/contact — フラット、プレフィックスなし
  • CMSコレクションアイテム:/{collection-slug}/{item-slug} — 例:/case-studies/acme-rebrand/blog/why-we-migrated
  • サブコレクション(複数参照):同じく /{collection-slug}/{item-slug}
  • Webflow Eコマース:/product/{product-slug} および /category/{category-slug}

WordPressのデフォルト(パーマリンク設定後):

  • 固定ページ:/about//services/
  • 投稿:/{post-slug}/ または /blog/{post-slug}/(パーマリンク設定による)
  • カスタム投稿タイプ:/{cpt-slug}/{post-slug}/(CPT登録時に設定可)

リダイレクト戦略:

  1. WebflowコレクションスラッグとWordPress CPTスラッグを揃える。 Webflowコレクションスラッグが case-studies なら、WordPress CPT登録時に 'rewrite' => array('slug' => 'case-studies') を指定。コレクション全体のURLパターンが個別リダイレクトなしで一致します。
  2. アイテムスラッグを揃える。 WP All Importでインポートする際、投稿スラッグをWebflow CMSアイテムのスラッグに設定。URLが自動的に揃います。
  3. パーマリンクを設定。 WordPress 設定 → パーマリンク。投稿は「投稿名」を選択。CPTには明示的にスラッグの書き換えを設定。
  4. 残るURL変更を個別マップ。 移動・改名されたページには明示的な301が必要。Redirection プラグイン(無料)を利用。

各リダイレクトの設定:

  • ソース:旧Webflow URL(例:/old-page-name
  • ターゲット:新WordPress URL(例:/services/web-design/
  • ステータスコード:301(恒久)

各リダイレクトを curl -I https://yourdomain.com/old-url で検証し、301ステータスとLocationヘッダーが正しい新URLを返すことを確認。

50ページのWebflowサイトに2つのアクティブなコレクション(合計約300URL)がある場合、明示的なリダイレクトは30〜80本程度(残りはCPTスラッグとアイテムスラッグの一致で吸収)。

その他のSEO必須項目:

  • 新しいXMLサイトマップをGoogle Search Consoleに送信(YoastとRank Mathはいずれも自動生成)
  • 新ドメインをSearch Consoleで認証(ドメイン同一の場合はURLプレフィックスを更新)
  • robots.txt でクロール許可を確認
  • 新サイト内の内部リンクをすべて新URLに書き換え(リダイレクトに頼らない)
  • 公開後30日間は404・クロールエラーをSearch Consoleで毎日監視

SEO移行のより詳細な対応は、ウェブサイトをWordPressに変換する完全ガイドを参照してください。

7. WebflowコレクションをWordPress CPT+ACFにマッピングする

移行の中で最も技術的なセクションです。ここを正しく設計すれば、コンテンツは編集可能なフィールド付きできれいに取り込まれます。設計を誤ると、200件の投稿を手作業で修正することになります。

頭の中のモデル:

  • WebflowのCMSコレクション → WordPressのカスタム投稿タイプ(CPT)
  • WebflowのCMSフィールド(プレーンテキスト、リッチテキスト、画像、参照、等) → WordPressのACFフィールド
  • WebflowのCMSアイテム → そのCPTに属するWordPress投稿
  • Webflowの参照フィールド → ACFのRelationshipまたはPost Objectフィールド
  • Webflowの複数参照フィールド → ACFのRelationshipフィールド(複数選択可)

フィールドタイプのマッピング:

Webflowフィールド ACFフィールドタイプ 備考
プレーンテキスト Text 1行
リッチテキスト WYSIWYG Editor WebflowのリッチテキストはCSV内でHTML形式
画像 Image WP All ImportがCSVのURLから自動ダウンロード
複数画像 Gallery CSV列を画像ごとに分けるか、WP All Importの配列処理
動画 oEmbedまたはURL YouTube/Vimeoの場合はoEmbedにマップ
リンク URL
メール Email
電話 Text ACFにネイティブの電話フィールドはなし
数値 Number
日時 Date Picker / Date Time Picker
スイッチ(真偽値) True / False
カラー Color Picker
オプション(単一選択) Select ACFフィールドグループで選択肢を定義
参照 Post Object 単一の関連投稿
複数参照 Relationship 複数の関連投稿

手順:

  1. CPTを登録する。 CPT UI プラグインまたはテーマの functions.phpregister_post_type() を直接記述。rewrite slug をWebflowコレクションスラッグに揃える。
  2. ACFフィールドグループを登録する。 CPTごとに1つのフィールドグループ。各WebflowフィールドをACFの対応型にマップ。フィールド名はWebflow CSVの列名と完全一致させる(インポート時のリマップ手間を削減)。
  3. WP All Importを設定する。 コレクションCSVごとに1つのインポートを作成。CSV列をACFフィールドにマップ。画像フィールドはURL列からのダウンロードを設定。
  4. 5アイテムでテスト。 テストインポートを実行。フロントエンドの表示がWebflowと一致するか確認。
  5. コレクション全体をインポート。 CSV全体をインポート実行。
  6. 参照フィールドを再リンク。 Webflowの参照はCSV内ではコレクションアイテムスラッグとして書き出されます。WP All Importのカスタム関数で、スラッグから関連投稿を検索しACFのRelationship/Post ObjectフィールドにIDを格納します。

複数参照フィールドの場合: Webflow CSVは複数参照を1列にカンマ区切りスラッグで書き出します。WP All Importの「Existing Items」→「Use a Custom Field」機能で、PHPスニペットによりスプリット→各スラッグからルックアップ→投稿IDの配列として格納します:

function map_webflow_refs($slugs_string, $cpt_slug) {
    $slugs = array_map('trim', explode(',', $slugs_string));
    $ids = array();
    foreach ($slugs as $slug) {
        $post = get_page_by_path($slug, OBJECT, $cpt_slug);
        if ($post) {
            $ids[] = $post->ID;
        }
    }
    return $ids;
}

よくあるハマりどころ:

  • リッチテキストフィールド。 WebflowはリッチテキストをCSV内のrawHTMLで書き出します。WordPressのWYSIWYGはHTMLを受け付けますが、Gutenbergは初回保存時にブロックに変換することがあります。代表サンプルで一度テストしてから一括取り込みを。
  • CDN URL付き画像フィールド。 WebflowのCSV画像列はWebflowのCDNを参照しています。WP All Importは自動でWordPressメディアライブラリへダウンロードできますが、URLが公開アクセス可能か事前確認を(一部のWebflowアセットはエクスポート後に認証越しになることあり)。
  • スラッグの衝突。 2つのコレクションでアイテムスラッグが重複している場合、WordPressは2つ目に -2 を付与します。インポート前にWebflowコレクション全体でスラッグ衝突を監査しましょう。
  • 日付フォーマット。 WebflowはISO 8601形式(2026-03-14T09:00:00Z)で書き出します。WordPress/ACFは受け取れますが、表示時のデフォルトフォーマットが違うことがあります。ACFの日付フィールドの表示フォーマットは明示的に設定。
  • 未取り込みコレクションを参照する参照フィールド。 必ず参照されるコレクションを先にインポートし、参照する側を後から。逆だと参照解決が空になります。

このステップは1コレクションあたり、スキーマ作業で4〜12時間、インポート設定で1〜2時間が目安。3コレクションを持つ一般的な制作会社案件では、集中した開発工数で2〜3日を見込みます。

WebflowサイトをWordPressに移行中で、WebflowコレクションをACFフィールド付きのWordPressカスタム投稿タイプにマッピングする必要があります。

各Webflowコレクションの詳細:

コレクション1:[コレクション名]

  • スラッグ:[コレクションスラッグ]
  • アイテム数:[件数]
  • フィールド:[各フィールドをWebflow型と共に列挙 — プレーンテキスト、リッチテキスト、画像、参照など]

コレクション2:[コレクション名] [上記を繰り返し]

以下を支援してください:

  1. 各コレクションに対するWordPress CPTのスラッグとラベルを推奨
  2. 各WebflowフィールドをACFフィールドタイプにマッピング
  3. CPT間のリレーションシップ設定が必要な参照フィールドを特定
  4. クリーンにマップできないフィールドを指摘し、回避策を提示
  5. 各CSVに対するWP All Import の設定方針を推奨

8. WebflowとWordPressの24ヶ月総保有コスト比較

一般的な小規模事業者・制作会社運用サイト(約30ページ、CMSコレクション2つ、お問い合わせフォーム、Eコマースなし)の24ヶ月総保有コスト:

項目 Webflow(Site Plan+Workspace) WordPress(マネージドホスティング)
Site Plan(CMSティア) 約3,400円/月 × 24 = 約8万円
Workspaceシート(Core、2席) 約2,800円/シート/月 × 2 × 24 = 約13万4,000円
マネージドWordPressホスティング 約3,750円/月 × 24 = 約9万円
ドメイン 約2,500円/年 × 2 = 5,000円 約2,500円/年 × 2 = 5,000円
SSL 込み マネージドホスト込み
メール Google Workspace 約900円/ユーザー/月 Google Workspace 約900円/ユーザー/月
有料プラグイン/テーマ 7,500〜45,000円買い切り+月平均0〜4,500円
24ヶ月合計(メール除く) 約22万円 約10万〜21万円

5名以上のWorkspaceを運用する制作会社の場合、Webflow側はリニアにスケールします。5席のCore Workspaceなら24ヶ月で追加 約34万円 が、同人数でWordPressを編集する場合との差として発生します。

Eコマース案件では: Webflow Eコマースが Site Planに加えて月額$29〜$235(約4,300〜35,000円)追加。WooCommerceは無料で、決済手数料(Stripe、PayPal、KOMOJU)はどちらでも発生する点で同条件。

差は2年目以降に複利で広がり、特にチームが拡大すると顕著です。10サイト以上のクライアント案件を抱える制作会社の場合、累積するWorkspaceシート費用が単独で最大の移行理由になることがよくあります。

コストの全体像については、HTMLからWordPressへの変換コストガイドを参照。

9. 始めるための具体的な3ステップ

  1. セクション4-1の棚卸しを実行。 全URL、全コレクション、全フォーム。どの移行パスでも必要な成果物。
  2. パスを決める。 リデザインも兼ねて時間を割けるなら手動再構築。開発リソースがあるならハイブリッド(エクスポート+テーマ化)。納期重視またはデザインの完全再現が必須ならAI自動変換。
  3. ツールを選ぶ。 Webflowデザインの忠実な再現が優先なら、WP Pro Converterを試す。WebflowのURLを送信するだけで、確定前に変換後のWordPress版を確認できます。

10. WP Pro Converterについて

WP Pro Converterは、ウェブサイトを完全に機能するWordPressテーマに変換するAI搭載サービスです。元のデザインをピクセルパーフェクトに保持します。日本・大阪を拠点とするクリエイティブスタジオUtsuboによって構築されました。最新のプラン・料金はトップページを参照してください。

11. WebflowからWordPressへ移行を始めましょう

シート単位の課金から解放されましょう。CMSアイテム上限と戦う必要もありません。WebflowサイトをWordPress版として、編集可能なコンテンツ、コレクション用のカスタム投稿タイプ、デザインを忠実に再現したテーマ込みで、数日で納品します。

WP Pro Converterを試す

メール: contact@utsubo.co


WebflowからWordPressへの移行チェックリスト

  • Webflowサイトをクロールして全URLを記録
  • 全CMSコレクションを一覧化(名前、スラッグ、アイテム数、フィールド)
  • 全フォームと連携先(Mailchimp、HubSpot、Zapier)を一覧化
  • メンバーシップ、Logicワークフロー、Eコマース設定を文書化
  • カスタムコード埋め込みを記録
  • 全ページテンプレートのスクリーンショット取得(モバイル+デスクトップ)
  • Site Settings → Export Code から静的HTML/CSS/JSをエクスポート
  • 各CMSコレクションをCSVエクスポート
  • Webflow Eコマース商品をCSVエクスポート(該当する場合)
  • マネージドWordPressホストを契約
  • ステージングURLでWordPressをインストール
  • 移行パスを決定(手動/ハイブリッド/AI変換)
  • ACFとCPT UI(または同等)をインストール
  • WebflowコレクションにマッチするCPTを登録
  • WebflowのCMSフィールドにマッチするACFフィールドグループを定義
  • デザインを再構築または導入(テーマ+ページビルダー、またはAI変換)
  • WP All Importを使ってCMSコレクションをインポート
  • 参照・複数参照フィールドを再リンク
  • WordPressフォームプラグインで全フォームを再作成
  • WooCommerceを設定し商品を移行(該当する場合)
  • Yoast SEO / Rank Math / SEO SIMPLE PACK を導入
  • 全ページとコレクションアイテムのタイトルタグ・メタディスクリプションを引き継ぎ
  • URL変更がある箇所に301リダイレクトを設定
  • 新しいXMLサイトマップを生成
  • 実機モバイルでテスト
  • Lighthouse監査を実行し、性能が同等以上であることを確認
  • DBバックアップを取得
  • DNSを新WordPressサイトに切り替え
  • サイトマップをGoogle Search ConsoleとBing Webmaster Toolsに送信
  • 公開後30日間はSearch Consoleを毎日監視

よくあるご質問

Webflowサイトをエクスポートできますか?

はい。WebflowはDesigner → Export Codeから静的HTML、CSS、JavaScript、画像アセットの完全エクスポートに対応しています(有料Site Plan限定)。CMSコレクションはCMSパネルから個別にCSVエクスポート。フォーム、Eコマース、メンバーシップ、Webflow Logicは「動作する機能」としてはエクスポートできず、静的なスナップショットとしてのみ書き出されます。

WebflowからWordPressに移行するとSEOが落ちますか?

リダイレクトを省略した場合のみ落ちます。WebflowコレクションスラッグとWordPress CPTスラッグを揃え、CSVインポート時にアイテムスラッグを保持し、URL変更がある箇所には301リダイレクトを設定。正しく行えば、ほとんどのサイトは30〜60日以内に順位を回復または改善します。

WebflowデザインをWordPressで再現できますか?

可能です。ハイブリッドパス(セクション3-2)はWebflow静的エクスポートをPHPテーマ化し、アニメーション、インタラクション、CSSをそのまま移植します。WP Pro ConverterのようなAI自動変換サービスは、デザインをカスタムWordPressテーマとしてピクセルパーフェクトに再現します。BricksやBreakdanceでの手動再構築は再現度85〜95%が目安ですが、Webflow Interactionsの再現には追加のJavaScript作業を要することがほとんどです。

WebflowからWordPressへの移行にはどれくらいかかりますか?

パスとサイト規模により数時間〜数週間。AI変換は数時間〜数日、ハイブリッドのテーマ化は2〜4週間、2つのCMSコレクションを持つ30ページの手動再構築は通常2〜6週間。SEO設定、リダイレクト、QAでどのパスでも追加で1〜2週間を見込みます。

WebflowからWordPressへの移行コストはいくらですか?

DIYはチームの時間+月額3,750〜6,700円のマネージドホスティング。ハイブリッドのテーマ化は外注で45〜120万円程度。AI自動変換サービスはフリーランス/制作会社の数分の一(最新料金はトップページを参照)。一般的な制作会社品質のサイトをフリーランスにフルマニュアル再構築依頼すると45〜150万円。

SEOではWordPressがWebflowより優れていますか?

WordPressはSEOの制御範囲が広く、robots.txtフルアクセス、詳細なスキーマ、内部リンク設計、プラグインエコシステム(Yoast、Rank Math、SEO SIMPLE PACK)の深さ、コンテンツタイプ別メタテンプレート、いずれも優位。WebflowのSEO機能は改善されたものの、依然として粒度が粗い箇所が残ります。コンテンツ重視サイト、複数のCMSコレクションを持つサイト、競合キーワード狙いのサイトでは通常WordPressが有利です。

Webflowで使っているドメインはWordPressに移せますか?

可能です。Webflowはドメイン登録代行を直接提供していないため、多くのユーザーは別レジストラ(お名前.com、ムームードメイン、Cloudflare、Namecheap)で登録してDNS経由で接続しています。WordPressへの移行はAレコードまたはネームサーバーを新WordPressホストに向けるだけ。ドメインそのものは可搬です。

Webflow Eコマースはどうなりますか?

Webflow Eコマースの商品はCSVエクスポートし、WooCommerceのProduct CSVインポーターで取り込みできます。注文履歴と顧客アカウントはクリーンに移行できないため、WooCommerceでゼロから始めるか、既存顧客に再登録を依頼する設計にします。配送ゾーン、税率、決済ゲートウェイ(Stripe、PayPal、KOMOJU、Pay.JP)は再設定が必要。公開前に必ず実カードでチェックアウト全フローを検証してください。

プラットフォーム間で迷っている場合は、WixからWordPressへの移行ガイドSquarespaceからWordPressへの移行ガイドも参照してください。