WebflowからWordPressへ移行する方法｜デザインやCMSを引き継ぐには？

Webflowは、STUDIOやWixと違って、サイトのコードをZIPで書き出せます。そのため「Webflowなら、エクスポートしたファイルをWordPressに置けば移行できる」と思われがちです。

ところが、書き出したコードには、CMSのコンテンツやフォームの送信処理などが含まれません。この記事では、Webflowのコードエクスポートで何が書き出せて何が書き出せないのかを整理し、静的なページとCMSのコンテンツを、WordPress側でどう組み立て直すかを解説します。

Webflowのコードエクスポートで書き出せるもの・書き出せないもの

Webflowのヘルプセンターの内容をまとめます（Webflow Help Center「How do I export my Webflow site code?」、2026年9月29日確認）。

• コードのエクスポートは、有料のWorkspaceプランで使えます（Siteプランには含まれません）
• メインメニューの「Code export」（Shift＋E）で「Prepare ZIP」を押し、ZIPをダウンロードします

書き出せるもの

• すべてのページのHTML（CMSのテンプレートページは、中身が空の状態）
• CSS（サイト独自のCSS、webflow.css、normalize.cssの3つ）
• JavaScript（ナビゲーション、スライダー、タブ、インタラクションなどが使うもの）
• Assetsパネルにアップロードした画像

書き出せないもの

• CMSのコンテンツと機能（Collectionの項目や一覧）
• User Accountsのコンテンツと機能
• Ecommerceのコンテンツと機能
• フォームの送信処理、これまでの送信内容、reCAPTCHA
• サイト内検索、サイトやページのパスワード保護
• 翻訳（ローカライズ）したページやコンテンツ（メインの言語だけが含まれます）

書き出したサイトでは、CMSの一覧（Collection list）は空の状態で表示され、CMSのテンプレートページにはCollectionの項目の内容が表示されません。また、CMSのCollection、EcommerceのCollection、User AccountsはCSVで書き出せます。

「エクスポートできるから簡単」ではない理由

WebflowのZIPは、Webflowの外の一般的なサーバーでそのまま表示するためのファイルです。WordPressで運用するには、次のような点を考える必要があります。

• CMSのコンテンツが入っていない：ブログやお知らせなど、CMSで作っている部分は空になります。WordPressの投稿として作り直す必要があります
• フォームが動かない：フォームの送信処理は含まれないため、WordPress側でフォームを用意します
• WordPressで編集する仕組みがない：ZIPのHTMLをWordPressに置いても、そのままでは文章を変えるたびにHTMLを編集することになります
• URLに .html が付く：書き出したページのURLには .html が付きます。WordPressのURL（/about/ など）と形が変わるので、リダイレクトの設定が必要です
• JavaScriptを外すと動かない部分がある：ナビゲーションやスライダー、インタラクションは、書き出されたJavaScriptで動いています

静的なページをWordPressへ移す2つの方法

書き出したHTML・CSSを使う

ZIPのHTMLとCSSをもとに、WordPressのテーマを作るか、固定ページに組み込む方法です。コードを直接扱える人がいて、今後もコードで管理したい場合に向いています。HTMLファイルからWordPressへ移す方法は、HTMLサイトをWordPress化する方法で詳しく解説しています。

公開中のページから取り込む

WPSitePortのように、公開中のページのURLから取り込む方法です。WPSitePortでは、Webflowのページは「見た目をそのまま複製する」方法で取り込み、元のHTML・CSSを保ったまま、ビジュアルエディタでの変更をその上に重ねます。取り込んだページは、WordPressの管理画面の中で編集できます。

注意したいのはCMSの一覧です。公開中のページから取り込むと、CMSの一覧は、取り込んだときに表示されていた内容のまま、動かないページの一部として入ります。記事を追加しても一覧は増えないので、更新を続ける一覧は、WordPressの投稿として作り直します。

CMSのコンテンツをWordPressへ移す

WebflowのCMSは、Collectionの単位でCSVに書き出せます。WordPressへは、次の流れで移します。

1. CollectionをCSVで書き出す：ブログ、お知らせ、実績など、Collectionごとに書き出します
2. 項目の対応を決める：名前→投稿のタイトル、スラッグ→投稿のスラッグ、リッチテキスト→本文、画像→アイキャッチ画像、参照している項目（カテゴリーなど）→カテゴリーやタグ、のように決めます
3. CSVを取り込む：WordPressの標準機能ではCSVを取り込めないので、CSVを取り込むプラグインを使うか、記事が少なければ手で作ります
4. 画像を保存し直す：CSVの画像がURLで入っている場合は、WordPressのメディアに取り込み直します
5. URLをそろえる：Webflowでのパス（例：/blog/記事のスラッグ）と同じにするか、301リダイレクトを設定します

ZIPから移すか、公開中のページから取り込むか

項目	ZIPから移す	公開中のページから取り込む（WPSitePort）
必要なもの	有料のWorkspaceプラン、コードを扱える人	公開中のページのURL
デザイン	書き出したHTML・CSSをそのまま使う	元のHTML・CSSを保ったまま取り込み、一致度をレポート
CMSの一覧	空の状態で書き出される	取り込んだときの内容のまま、更新されない一覧として入る
フォーム	送信処理は含まれない	送信先を確認し、WordPressで受け付けるように設定する
移行後の編集	HTML・CSSを直接編集する	WordPressの中のビジュアルエディタで編集する

どちらの場合も、CMSのコンテンツはWordPressの投稿として作り直すのが基本です。

開発者コメント

Webflowから移すときのチェックリスト

• CMSのCollectionを、すべてCSVで書き出した
• 翻訳（ローカライズ）したページがある場合、メインの言語以外のページの移し方を決めた
• パスワードで保護しているページの代わりを用意した（コードの書き出し後は保護されません）
• フォームの送信先と通知メールを設定し、これまでの送信内容を書き出した
• サイト内検索の代わりを用意した
• URL（.html の有無、CMSのページのパス）を対応表にし、301リダイレクトを設定した
• 計測タグなどのスクリプトを、WordPressに設置した