--- title: "WebflowからAstroへ移行する方法と注意点" description: "WebflowからAstroへの移行方法。コードエクスポートにはCMS、フォーム、多言語ページが含まれません。何を書き出し、何を作り直し、SEOをどう守るかを解説します。" url: "https://dardo.studio/ja/blog/webflow-to-astro/" language: "ja" translations: {"en":"https://dardo.studio/en/blog/webflow-to-astro/","es":"https://dardo.studio/es/blog/migrar-de-webflow-a-astro/","fr":"https://dardo.studio/fr/blog/migrer-webflow-vers-astro/","de":"https://dardo.studio/de/blog/webflow-zu-astro-migrieren/","it":"https://dardo.studio/it/blog/migrare-da-webflow-ad-astro/","pt":"https://dardo.studio/pt/blog/migrar-de-webflow-para-astro/","nl":"https://dardo.studio/nl/blog/webflow-naar-astro/","sv":"https://dardo.studio/sv/blogg/migrera-webflow-till-astro/","pl":"https://dardo.studio/pl/blog/migracja-z-webflow-do-astro/","uk":"https://dardo.studio/uk/blog/webflow-to-astro/","ru":"https://dardo.studio/ru/blog/webflow-to-astro/","ar":"https://dardo.studio/ar/blog/webflow-to-astro/","hi":"https://dardo.studio/hi/blog/webflow-to-astro/","th":"https://dardo.studio/th/blog/webflow-to-astro/","ko":"https://dardo.studio/ko/blog/webflow-to-astro/","zh-Hans":"https://dardo.studio/zh-Hans/blog/webflow-to-astro/","zh-Hant":"https://dardo.studio/zh-Hant/blog/webflow-to-astro/"} updated: "2026-10-13T02:20:15.465Z" --- [ブログ](https://dardo.studio/ja/blog/) # WebflowからAstroへの移行：コンテンツ、デザイン、検索順位を失わずにWebflowサイトを移す方法 WebflowのコードエクスポートにはCMS、フォーム、検索、多言語ページが含まれません。Astroへの移行で持ち出すもの、作り直すもの、検索順位の守り方を解説します。 執筆者 [Nicolás Cerón](https://dardo.studio/ja/studio/) ·2026年10月12日 ![夜の古い石造りの閘門。木製の門扉が開き、流れの速い運河から穏やかな港へと小さな深紅の船が滑り出ていく。丘の上には明かりの灯る天文台が見える。](https://dardo.studio/_astro/01M4SGD5R7TZ48H2M3RJ9DSK7D_Z2nrI.webp) ## 要点 - Webflowは有料のWorkspaceプランでHTML、CSS、JavaScript、画像をエクスポートできますが、CMSのコンテンツ、フォームの送信処理、サイト内検索、パスワード保護、セカンダリロケールは含まれません。 - 各CMSコレクションはロケールごとにCSVへエクスポートするか、Webflow Data APIで読み込みましょう。エクスポートした画像フィールドはWebflowのホスティングを指したままなので、画像もすべてダウンロードしておきます。 - コードエクスポートは新しいサイトではなく、参考資料として扱いましょう。WebflowのJavaScript、jQuery、空のコレクションリストが含まれています。 - Webflowは末尾のスラッシュなしでURLを配信します。AstroのtrailingSlashとbuild.formatをそれに合わせ、変わるURLには1対1のサーバーサイド301リダイレクトを設定しましょう。 - Webflowのプロジェクトを閉じる前に、画像、PDF、Open Graph画像のどれもwebsite-files.comから配信されていないことを確認しましょう。 ## 結論から Webflowは、HTMLエクスポートの機能がまったくないFramerに比べれば抜け出しやすいプラットフォームですが、それも途中までです。有料のWorkspaceプランなら、サイトのHTML、CSS、JavaScript、画像をエクスポートして、好きな場所でホストできます。一方でWebflowのヘルプセンターは、エクスポートに含まれないものについても同じくらい明確に説明しています。CMSのコンテンツ、フォームの送信処理、サイト内検索、パスワード保護、ローカライズしたページ、コードコンポーネントはエクスポートされず、コレクションリスト（Collection list）は空の状態で表示されます（[Webflow Help](https://help.webflow.com/hc/en-us/articles/33961386739347-How-do-I-export-my-Webflow-site-code)）。 つまり、WebflowからAstroへの移行は、半分がエクスポートで、半分が再構築です。Webflowが書き出せるものはエクスポートし、CMSはCSVかAPIで取り出し、各テンプレートをAstroのコンポーネントとして作り直し、フォームと検索を置き換え、残したいインタラクションを再現し、変わるURLにはすべて恒久リダイレクトを設定します。この順番で進めれば、新しいサイトはデザインもコンテンツも検索順位も保てます。 ## チームがWebflowからAstroへ移行する理由 Webflowは優れたビジュアルビルダーで、そのまま使い続けるべきマーケティングチームも少なくありません。移行する理由は、デザインよりも所有権とコストに関するものがほとんどです。 - **サイトをエンジニアが管理するようになる**。変更の大半を開発者が行うなら、ビジュアルキャンバスよりも自社リポジトリのコードのほうが作業が速く、プロダクト、バックエンド、テストと同じ場所で管理できます。 - **サイトごとのプラン費用**。Webflowの[料金ページ](https://webflow.com/pricing)（2026年10月13日確認）では、Basicのサイトプランが月額15米ドル、Webflow CMSを含むPremiumプランが月額25米ドルで、いずれも年払いです。ローカライズは月額9米ドルからのアドオンです。 - **本格的なバックエンドが必要な機能**。CRMに書き込むフォーム、会員限定のコンテンツ、複数のサイトをまたぐ検索、自社のインフラで動かす必要があるものなどです。 - **エクスポートだけでは抜け出せない**。コードエクスポートにはサイトプランだけでなく有料のWorkspaceプランが必要で、しかもCMSは含まれません。どちらにしても、きれいに移行するには計画が欠かせません。 マーケティングチームが毎週ビジュアルエディタでページを公開していて、サイトが役割を果たしているなら、Webflowに留まるのも妥当な判断です。移行するなら、それによって得る具体的な成果が必要です。 ## Webflowのコードエクスポートに含まれるもの、含まれないもの | サイトの要素 | コードエクスポートに含まれるか | Astroでの対応 | | -------------------------- | -------------------------------------- | ------------------------ | | 静的ページ | 含まれる。.htmlファイルとして、プライマリロケールのみ | Astroのページとコンポーネントとして作り直す | | スタイル | 含まれる。サイトのCSS、webflow.css、normalize.css | 参考資料として使い、必要なCSSだけを残す | | インタラクションとコンポーネント | 含まれる。WebflowのJavaScriptファイル経由 | CSSか小さなスクリプトで再現する | | Assetsパネルの画像 | 含まれる | astro:assetsで最適化する | | CMSコレクションのアイテムとリスト | 含まれない。リストは空の状態で表示される | CSVにエクスポートするか、APIで読み込む | | フォームの送信 | 処理されない | 各フォームを自前の送信先に向ける | | サイト内検索 | 含まれない | 静的な検索インデックスか検索サービスを追加する | | パスワード保護 | 含まれない | ホスティング先かアプリ側でページを保護する | | セカンダリロケール | 含まれない。プライマリロケールのみ | Astroのi18nルーティングで作り直す | | Eコマース、ユーザーアカウント、コードコンポーネント | 含まれない | それぞれを独立したプロジェクトとして計画する | 出典：[サイトコードのエクスポート](https://help.webflow.com/hc/en-us/articles/33961386739347-How-do-I-export-my-Webflow-site-code)に関するWebflowのヘルプ記事。 ## 公開中のWebflowサイトを調べてわかったこと 2026年10月13日、webflow.com自体を含む、Webflowで作られた7つのサイトのトップページをダウンロードし、移行で何を引き継ぐ必要があるかを調べました。 - **7サイトすべてが、jQueryと画像をWebflowのサーバーから読み込んでいる**。画像はcdn.prod.website-files.comから配信されています。Webflowのヘルプセンターも、CSVにエクスポートした画像フィールドやファイルフィールドは元のプロジェクトのホスティングを指すリンクで、そのプロジェクトを削除するとリンク切れになると説明しています（[Webflow Help](https://help.webflow.com/hc/en-us/articles/33961290794771-How-do-I-import-content-into-the-Webflow-CMS)）。すべてのアセットをダウンロードして、ホストし直す必要があります。 - **7サイトすべてが、SNSでシェアされるときの画像もWebflowから配信している**。Open Graph画像は見落としやすく、旧プロジェクトを閉じた時点で、LinkedInやWhatsAppのリンクプレビューから画像が消えてしまいます。 - **7サイトすべてが、CMSのリストを公開中のHTMLに直接レンダリングしている**。トップページ1つあたりのコレクションリストは3〜19個でした。これは良い知らせです。[FramerからAstroへの移行ガイド](https://dardo.studio/ja/blog/framer-to-astro/)で説明したとおり、Framerのサイトは読み込み後にランタイムがページを組み立て直しますが、公開中のWebflowのページは、どのコンテンツがどこに入るかを示す完全な参考資料になります。コードエクスポートではそのリストが空になるとしても、です。 - **7サイトのうち5サイトがWebflow Interactionsを使っている**。目印はdata-w-id属性で、あるトップページでは最大109個の要素に付いていました。その一つひとつが、再現すべき小さな動作か、削除するかどうかの判断の対象になります。 ## WebflowからAstroへの移行手順 1. **すべてのURLを洗い出す**。Webflowは、該当する設定が有効になっていれば/sitemap.xmlを自動で生成します（[Webflow Help](https://help.webflow.com/hc/en-us/articles/33961355371667-Create-a-sitemap-in-Webflow)）。そこにすべてのコレクションページを加え、Google Search Consoleの「ページ」レポートを取得できる最長の期間で書き出し、既存の301リダイレクトをSite settingsの「Publishing」からCSVでエクスポートします（[Webflow Help](https://help.webflow.com/hc/en-us/articles/33961211526291-Import-export-301-redirects)）。 2. **コンテンツをエクスポートする**。CMSパネルから各CMSコレクションをCSVにエクスポートします。Localizeを使っている場合はロケールごとに1回ずつ行い、「Item ID」列は残しておきます。CSVでは構造が平坦になり、参照フィールドはプレーンテキストに、複数参照はカンマ区切りのテキストに、リッチテキストはHTMLになります。参照を含むデータは、アイテムをフィールドとロケールごとに取得できる[Webflow Data API](https://developers.webflow.com/data/reference/cms/collection-items)を使うほうが、複数のCSVをつなぎ直すより、たいていきれいに移せます。 3. **すべてのアセットをダウンロードする**。画像、PDF、セルフホストのライセンスがあるフォント、Open Graph画像、ファビコンです。新しいサイトがwebsite-files.comを参照しなくなるまでは、Webflowのプロジェクトを閉じないでください。 4. **コードは参考資料としてエクスポートする**。有料のWorkspaceプランであれば、HTMLとCSSをエクスポートします。ただし、それを新しいサイトとして公開してはいけません。webflow.js、jQuery、空のCMSリストがそのまま残るからです。正確な余白、ブレークポイント、クラス構造を読み取るために使います。 5. **Astroでコンテンツをモデル化する**。各コレクションをAstroの[コンテンツコレクション](https://docs.astro.build/en/guides/content-collections/)かヘッドレスCMSのモデルに変換し、参照は参照のまま保ちます。そのうえで各テンプレートをAstroのコンポーネントとして作り直し、画像を[astro:assets](https://docs.astro.build/en/guides/images/)に移します。 6. **意味を担うインタラクションを再現する**。Webflow Interactionsの多くは、CSSのトランジション、キーフレーム、または数行のJavaScriptに置き換えられます。より重い動きにはGSAPが使えます。Webflowが2025年4月に無料化して以来、商用利用でも無料です（[Webflow](https://webflow.com/blog/gsap-becomes-free)）。いずれの場合も、prefers-reduced-motionに対応しましょう。 7. **フォーム、検索、保護されたページを置き換える**。各フォームに本物の送信先（Cloudflare Worker、フォームサービス、CRMなど）を用意し、サイトに検索が必要なら[Pagefind](https://pagefind.app/)のような静的な検索インデックスを追加し、パスワード保護はホスティング先かアプリ側に移します。 8. **多言語ページをきちんと作り直す**。コードエクスポートにはプライマリロケールしか含まれないため、[Astroのi18nルーティング](https://docs.astro.build/en/guides/internationalization/)で各言語を構築し、言語ごとに1つのURLを割り当て、ページ同士をhreflangでつなぎます。 9. **URLの形式を合わせる**。Webflowはページを末尾のスラッシュなしで配信し、/pricing/を/pricingにリダイレクトします。新しいサイトが同じアドレスを生成するよう、AstroのtrailingSlashとbuild.formatを設定します（[Astroの設定リファレンス](https://docs.astro.build/en/reference/configuration-reference/)）。形式がずれるたびに、本来は不要だったリダイレクトが1つ増えます。 10. **リダイレクトはサーバーで行い、公開後は見守る**。アダプターなしの静的なAstroビルドでは、設定したリダイレクトがmeta refreshのページに変換されます。そのため、サイトのホスティング先で、たとえばCloudflareの\_redirectsファイルを使って、1対1の301リダイレクトを設定します。DNSを切り替え、新しいサイトの動作を確認できるまでWebflowのプロジェクトは残しておき、その後の数週間はSearch Consoleのインデックス登録レポートを追います。公開日とその後90日間については、[サイト移行SEOチェックリスト](https://dardo.studio/ja/blog/website-migration-seo-checklist/)で解説しています。 ## 移行後に変わること | 項目 | Webflowの場合 | Astroの場合 | | ------ | ------------------------------- | ------------------------------------ | | 編集 | ビジュアルなDesignerとWebflow CMSのエディタ | 選んだ構成に応じて、CMSのフィールドまたはコード | | ホスティング | Webflowのホスティング。サイトごとに課金 | Cloudflareなど、任意の静的ホスティングやエッジプラットフォーム | | CMS | Webflowのコレクション | コンテンツコレクションまたはヘッドレスCMS | | フォーム | Webflowのフォーム処理 | 自前の送信先とデータの保存先 | | 検索 | Webflowのサイト内検索（Premium） | 静的なインデックスまたは検索サービス | | ローカライズ | Webflow Localizeのアドオン | Astroのi18nルーティング。言語ごとに1つのURL | | 動き | Webflow InteractionsとGSAP | 自社で所有し、計測できるCSSとJavaScript | ## SEOを守るには [URL変更を伴うサイト移転](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes)に関するGoogleのガイドが、そのまま当てはまります。旧URLをすべて最も近い新URLに対応付け、サーバーサイドの恒久リダイレクトを使い、少なくとも1年間は維持します。URLがまったく同じであれば（Webflowなら、丁寧に再構築すれば多くの場合そうできます）、タイトル、ディスクリプション、canonicalタグ、構造化データ、Open Graph画像が引き継がれているかを確認するだけで、ほぼ済みます。 Webflow特有の落とし穴は、取り残されたものです。website-files.comから配信されたままのOpen Graph画像やPDF、インデックスに残ったままのwebflow.ioのステージング用アドレス、移行の際にスラッグが変わったCMSページなどです。Webflowのプロジェクトを閉じる前に、この3つをすべて確認してください。 ## DardoのWebflow移行の進め方 Webflowからの移行は、[ウェブサイト移行](https://dardo.studio/ja/services/website-migration/)サービスの一環として行います。URLとコンテンツの洗い出し、CMSのエクスポートを行い、代表的な1ページを先に作り直して合意した幅で確認し、その後に残りのテンプレート、フォーム、リダイレクトへ進みます。構築そのものはAstroによる[Web開発](https://dardo.studio/ja/services/web-development/)で、動きの制作は[クリエイティブ開発](https://dardo.studio/ja/services/creative-development/)です。このサイト、dardo.studioも、Cloudflare Workers上のAstroで動き、コンテンツはヘッドレスCMSで管理しています。このブログも、そのCMSを通じて執筆・公開しています。 移行を検討中なら、[サイトと変えたいことをお知らせください](https://dardo.studio/ja/contact/?service=website-migration)。見積もりを出す前に、Webflowから移行する価値があるかどうかをお伝えします。 ## よくあるご質問 **WebflowのサイトをHTMLでエクスポートできますか？** 有料のWorkspaceプランなら可能です。WebflowはHTML、CSS、JavaScript、画像をエクスポートでき、帰属表示なしで好きな場所にホストできます。サイトプランだけではコードエクスポートは使えず、エクスポートにはCMSのコンテンツ、フォームの送信処理、サイト内検索、パスワード保護、セカンダリロケールが含まれません。 **WebflowのコードエクスポートにCMSのコンテンツは含まれますか？** 含まれません。コレクションリストは空の状態で表示され、コレクションページはフィールドに紐づいたコンテンツを失います。各コレクションをCMSパネルからCSVにエクスポートするか、フィールドとロケールをまとめて扱えるWebflow Data APIで読み込みましょう。 **WebflowからAstroに移行すると、Googleの検索順位は下がりますか？** アクセスを集めているすべてのURLが引き続き機能していれば、下がりません。Webflowの末尾スラッシュなしの形式も含めて同じパスを保ち、変わるものには恒久的な301リダイレクトを設定し、タイトル、ディスクリプション、構造化データを引き継いだうえで、公開後の数週間はSearch Consoleを確認しましょう。 **WebflowのインタラクションはAstroでも動きますか？** そのままでは動きません。WebflowのJavaScript上で動作するため、残したいインタラクションはそれぞれCSSや小さなスクリプトで作り直します。より重い動きには、2025年4月から商用利用も無料になったGSAPが使えます。 **移行後、Webflowのフォームはどうなりますか？** エクスポートしたフォームは、どこにも送信されません。Webflowは送信を自社のホスティング上で処理しているからです。各フォームをCloudflare Worker、フォームサービス、CRMなどの自前の送信先に向け、公開前に送信をテストし、過去の送信データはWebflowから別途エクスポートしましょう。 **Webflowから移行した後も、チームはコードを書かずにサイトを編集できますか？** AstroのサイトでヘッドレスCMSを使えば可能です。編集者はWeb上の管理画面で作業し、サイトはそのコンテンツから再ビルドされます。dardo.studioもこの仕組みで運用しています。 ## 出典・参考資料 このページの出典です。詳細は各発行元の原典をご覧ください。 - [Webflowヘルプ：サイトのコードをエクスポートする方法（英語）](https://help.webflow.com/hc/en-us/articles/33961386739347-How-do-I-export-my-Webflow-site-code) · help.webflow.com - [Webflowヘルプ：CMSコレクションのコンテンツのインポートとエクスポート（英語）](https://help.webflow.com/hc/en-us/articles/33961290794771-How-do-I-import-content-into-the-Webflow-CMS) · help.webflow.com - [Webflowヘルプ：301リダイレクトのインポートとエクスポート（英語）](https://help.webflow.com/hc/en-us/articles/33961211526291-Import-export-301-redirects) · help.webflow.com - [Webflowヘルプ：Webflowでサイトマップを作成する（英語）](https://help.webflow.com/hc/en-us/articles/33961355371667-Create-a-sitemap-in-Webflow) · help.webflow.com - [Webflowの料金プラン（英語）](https://webflow.com/pricing) · webflow.com - [Webflow Data API：コレクションアイテムの一覧取得（英語）](https://developers.webflow.com/data/reference/cms/collection-items) · developers.webflow.com - [Webflow：GSAPが100%無料に（英語）](https://webflow.com/blog/gsap-becomes-free) · webflow.com - [Astroドキュメント：コンテンツコレクション（英語）](https://docs.astro.build/en/guides/content-collections/) · docs.astro.build - [Astroドキュメント：画像（英語）](https://docs.astro.build/en/guides/images/) · docs.astro.build - [Astroドキュメント：国際化（i18n）ルーティング（英語）](https://docs.astro.build/en/guides/internationalization/) · docs.astro.build - [Astroドキュメント：設定リファレンス（英語）](https://docs.astro.build/en/reference/configuration-reference/) · docs.astro.build - [Pagefind：静的サイト向けの検索（英語）](https://pagefind.app/) · pagefind.app - [Google検索セントラル：URL変更を伴うサイト移転](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes) · developers.google.com [Nicolás Cerón](https://dardo.studio/ja/studio/) Nicolás Cerónは、コロンビアのボゴタを拠点に、ブランド、Webデザイン、開発を手がけるスタジオ Dardo の創設者です。 ## 関連記事 - [**FramerからAstroへの移行：デザインも検索順位も失わずにFramerサイトを移す方法**FramerにはHTMLエクスポートがないため、Astroへの移行はサイトの再構築になります。最初に記録すべきもの、壊れやすい部分、デザイン・URL・検索順位を守る方法を解説します。](https://dardo.studio/ja/blog/framer-to-astro/) - [**サイト移行SEOチェックリスト：プラットフォームやドメインを変えても順位を落とさない方法**順位が落ちる原因は、新しいプラットフォームそのものではなく、アクセスを集めていたURLが応答しなくなることです。URLの棚卸しから90日目までのチェックリスト。](https://dardo.studio/ja/blog/website-migration-seo-checklist/) - [**WordPressからAstroへの移行：ヘッドレスでも完全移行でも、検索順位を落とさずに移す方法**WordPressからAstroへ移る2つの方法と、エクスポートするもの、Yoastのタイトルやパーマリンク、アップロードファイルの引き継ぎ方、見落とされがちなWordPressのURLを解説します。](https://dardo.studio/ja/blog/wordpress-to-astro/) - [**WordPressかフルスクラッチか？選び方と、それぞれが割に合うケース**WordPressが正解のケース、フルスクラッチのサイトが割に合うケース、その中間のヘッドレスWordPressを、費用、速度、アップデート、所有権で比較します。](https://dardo.studio/ja/blog/wordpress-vs-custom-website/) ## もっと見る - [サービス · **SEOを落とさないウェブサイト移行**](https://dardo.studio/ja/services/website-migration/) - [あなたのプロジェクト · **まずはご相談ください**](https://dardo.studio/ja/contact/)