WebflowからAstroへの移行：コンテンツ、デザイン、検索順位を失わずにWebflowサイトを移す方法

結論から

Webflowは、HTMLエクスポートの機能がまったくないFramerに比べれば抜け出しやすいプラットフォームですが、それも途中までです。有料のWorkspaceプランなら、サイトのHTML、CSS、JavaScript、画像をエクスポートして、好きな場所でホストできます。一方でWebflowのヘルプセンターは、エクスポートに含まれないものについても同じくらい明確に説明しています。CMSのコンテンツ、フォームの送信処理、サイト内検索、パスワード保護、ローカライズしたページ、コードコンポーネントはエクスポートされず、コレクションリスト（Collection list）は空の状態で表示されます（Webflow Help）。

つまり、WebflowからAstroへの移行は、半分がエクスポートで、半分が再構築です。Webflowが書き出せるものはエクスポートし、CMSはCSVかAPIで取り出し、各テンプレートをAstroのコンポーネントとして作り直し、フォームと検索を置き換え、残したいインタラクションを再現し、変わるURLにはすべて恒久リダイレクトを設定します。この順番で進めれば、新しいサイトはデザインもコンテンツも検索順位も保てます。

チームがWebflowからAstroへ移行する理由

Webflowは優れたビジュアルビルダーで、そのまま使い続けるべきマーケティングチームも少なくありません。移行する理由は、デザインよりも所有権とコストに関するものがほとんどです。

• サイトをエンジニアが管理するようになる。変更の大半を開発者が行うなら、ビジュアルキャンバスよりも自社リポジトリのコードのほうが作業が速く、プロダクト、バックエンド、テストと同じ場所で管理できます。
• サイトごとのプラン費用。Webflowの料金ページ（2026年10月13日確認）では、Basicのサイトプランが月額15米ドル、Webflow CMSを含むPremiumプランが月額25米ドルで、いずれも年払いです。ローカライズは月額9米ドルからのアドオンです。
• 本格的なバックエンドが必要な機能。CRMに書き込むフォーム、会員限定のコンテンツ、複数のサイトをまたぐ検索、自社のインフラで動かす必要があるものなどです。
• エクスポートだけでは抜け出せない。コードエクスポートにはサイトプランだけでなく有料のWorkspaceプランが必要で、しかもCMSは含まれません。どちらにしても、きれいに移行するには計画が欠かせません。

マーケティングチームが毎週ビジュアルエディタでページを公開していて、サイトが役割を果たしているなら、Webflowに留まるのも妥当な判断です。移行するなら、それによって得る具体的な成果が必要です。

Webflowのコードエクスポートに含まれるもの、含まれないもの

出典：サイトコードのエクスポートに関するWebflowのヘルプ記事。

公開中のWebflowサイトを調べてわかったこと

2026年10月13日、webflow.com自体を含む、Webflowで作られた7つのサイトのトップページをダウンロードし、移行で何を引き継ぐ必要があるかを調べました。

• 7サイトすべてが、jQueryと画像をWebflowのサーバーから読み込んでいる。画像はcdn.prod.website-files.comから配信されています。Webflowのヘルプセンターも、CSVにエクスポートした画像フィールドやファイルフィールドは元のプロジェクトのホスティングを指すリンクで、そのプロジェクトを削除するとリンク切れになると説明しています（Webflow Help）。すべてのアセットをダウンロードして、ホストし直す必要があります。
• 7サイトすべてが、SNSでシェアされるときの画像もWebflowから配信している。Open Graph画像は見落としやすく、旧プロジェクトを閉じた時点で、LinkedInやWhatsAppのリンクプレビューから画像が消えてしまいます。
• 7サイトすべてが、CMSのリストを公開中のHTMLに直接レンダリングしている。トップページ1つあたりのコレクションリストは3〜19個でした。これは良い知らせです。FramerからAstroへの移行ガイドで説明したとおり、Framerのサイトは読み込み後にランタイムがページを組み立て直しますが、公開中のWebflowのページは、どのコンテンツがどこに入るかを示す完全な参考資料になります。コードエクスポートではそのリストが空になるとしても、です。
• 7サイトのうち5サイトがWebflow Interactionsを使っている。目印はdata-w-id属性で、あるトップページでは最大109個の要素に付いていました。その一つひとつが、再現すべき小さな動作か、削除するかどうかの判断の対象になります。

WebflowからAstroへの移行手順

1. すべてのURLを洗い出す。Webflowは、該当する設定が有効になっていれば/sitemap.xmlを自動で生成します（Webflow Help）。そこにすべてのコレクションページを加え、Google Search Consoleの「ページ」レポートを取得できる最長の期間で書き出し、既存の301リダイレクトをSite settingsの「Publishing」からCSVでエクスポートします（Webflow Help）。
2. コンテンツをエクスポートする。CMSパネルから各CMSコレクションをCSVにエクスポートします。Localizeを使っている場合はロケールごとに1回ずつ行い、「Item ID」列は残しておきます。CSVでは構造が平坦になり、参照フィールドはプレーンテキストに、複数参照はカンマ区切りのテキストに、リッチテキストはHTMLになります。参照を含むデータは、アイテムをフィールドとロケールごとに取得できるWebflow Data APIを使うほうが、複数のCSVをつなぎ直すより、たいていきれいに移せます。
3. すべてのアセットをダウンロードする。画像、PDF、セルフホストのライセンスがあるフォント、Open Graph画像、ファビコンです。新しいサイトがwebsite-files.comを参照しなくなるまでは、Webflowのプロジェクトを閉じないでください。
4. コードは参考資料としてエクスポートする。有料のWorkspaceプランであれば、HTMLとCSSをエクスポートします。ただし、それを新しいサイトとして公開してはいけません。webflow.js、jQuery、空のCMSリストがそのまま残るからです。正確な余白、ブレークポイント、クラス構造を読み取るために使います。
5. Astroでコンテンツをモデル化する。各コレクションをAstroのコンテンツコレクションかヘッドレスCMSのモデルに変換し、参照は参照のまま保ちます。そのうえで各テンプレートをAstroのコンポーネントとして作り直し、画像をastro:assetsに移します。
6. 意味を担うインタラクションを再現する。Webflow Interactionsの多くは、CSSのトランジション、キーフレーム、または数行のJavaScriptに置き換えられます。より重い動きにはGSAPが使えます。Webflowが2025年4月に無料化して以来、商用利用でも無料です（Webflow）。いずれの場合も、prefers-reduced-motionに対応しましょう。
7. フォーム、検索、保護されたページを置き換える。各フォームに本物の送信先（Cloudflare Worker、フォームサービス、CRMなど）を用意し、サイトに検索が必要ならPagefindのような静的な検索インデックスを追加し、パスワード保護はホスティング先かアプリ側に移します。
8. 多言語ページをきちんと作り直す。コードエクスポートにはプライマリロケールしか含まれないため、Astroのi18nルーティングで各言語を構築し、言語ごとに1つのURLを割り当て、ページ同士をhreflangでつなぎます。
9. URLの形式を合わせる。Webflowはページを末尾のスラッシュなしで配信し、/pricing/を/pricingにリダイレクトします。新しいサイトが同じアドレスを生成するよう、AstroのtrailingSlashとbuild.formatを設定します（Astroの設定リファレンス）。形式がずれるたびに、本来は不要だったリダイレクトが1つ増えます。
10. リダイレクトはサーバーで行い、公開後は見守る。アダプターなしの静的なAstroビルドでは、設定したリダイレクトがmeta refreshのページに変換されます。そのため、サイトのホスティング先で、たとえばCloudflareの_redirectsファイルを使って、1対1の301リダイレクトを設定します。DNSを切り替え、新しいサイトの動作を確認できるまでWebflowのプロジェクトは残しておき、その後の数週間はSearch Consoleのインデックス登録レポートを追います。公開日とその後90日間については、サイト移行SEOチェックリストで解説しています。

移行後に変わること

SEOを守るには

URL変更を伴うサイト移転に関するGoogleのガイドが、そのまま当てはまります。旧URLをすべて最も近い新URLに対応付け、サーバーサイドの恒久リダイレクトを使い、少なくとも1年間は維持します。URLがまったく同じであれば（Webflowなら、丁寧に再構築すれば多くの場合そうできます）、タイトル、ディスクリプション、canonicalタグ、構造化データ、Open Graph画像が引き継がれているかを確認するだけで、ほぼ済みます。

Webflow特有の落とし穴は、取り残されたものです。website-files.comから配信されたままのOpen Graph画像やPDF、インデックスに残ったままのwebflow.ioのステージング用アドレス、移行の際にスラッグが変わったCMSページなどです。Webflowのプロジェクトを閉じる前に、この3つをすべて確認してください。

DardoのWebflow移行の進め方

Webflowからの移行は、ウェブサイト移行サービスの一環として行います。URLとコンテンツの洗い出し、CMSのエクスポートを行い、代表的な1ページを先に作り直して合意した幅で確認し、その後に残りのテンプレート、フォーム、リダイレクトへ進みます。構築そのものはAstroによるWeb開発で、動きの制作はクリエイティブ開発です。このサイト、dardo.studioも、Cloudflare Workers上のAstroで動き、コンテンツはヘッドレスCMSで管理しています。このブログも、そのCMSを通じて執筆・公開しています。

移行を検討中なら、サイトと変えたいことをお知らせください。見積もりを出す前に、Webflowから移行する価値があるかどうかをお伝えします。