--- title: "FramerからAstroへの移行方法：SEOを守る手順" description: "FramerからAstroへの移行は再構築です。HTMLエクスポートがないFramerサイトで記録すべきもの、CMS・アニメーション・フォームの作り直し方、URLとSEOの守り方を解説。" url: "https://dardo.studio/ja/blog/framer-to-astro/" language: "ja" translations: {"en":"https://dardo.studio/en/blog/framer-to-astro/","es":"https://dardo.studio/es/blog/migrar-de-framer-a-astro/","fr":"https://dardo.studio/fr/blog/migrer-framer-vers-astro/","de":"https://dardo.studio/de/blog/framer-zu-astro-migrieren/","it":"https://dardo.studio/it/blog/migrare-da-framer-ad-astro/","pt":"https://dardo.studio/pt/blog/migrar-de-framer-para-astro/","nl":"https://dardo.studio/nl/blog/framer-naar-astro/","sv":"https://dardo.studio/sv/blogg/migrera-framer-till-astro/","pl":"https://dardo.studio/pl/blog/migracja-z-framera-do-astro/","uk":"https://dardo.studio/uk/blog/framer-to-astro/","ru":"https://dardo.studio/ru/blog/framer-to-astro/","ar":"https://dardo.studio/ar/blog/framer-to-astro/","hi":"https://dardo.studio/hi/blog/framer-to-astro/","th":"https://dardo.studio/th/blog/framer-to-astro/","ko":"https://dardo.studio/ko/blog/framer-to-astro/","zh-Hans":"https://dardo.studio/zh-Hans/blog/framer-to-astro/","zh-Hant":"https://dardo.studio/zh-Hant/blog/framer-to-astro/"} updated: "2026-10-13T00:55:59.624Z" --- [ブログ](https://dardo.studio/ja/blog/) # FramerからAstroへの移行：デザインも検索順位も失わずにFramerサイトを移す方法 FramerにはHTMLエクスポートがないため、Astroへの移行はサイトの再構築になります。最初に記録すべきもの、壊れやすい部分、デザイン・URL・検索順位を守る方法を解説します。 執筆者 [Nicolás Cerón](https://dardo.studio/ja/studio/) ·2026年10月12日 ![夜の画家のアトリエで、イーゼルに置かれた空の金色の額縁。額縁から伸びる深紅の糸が開いた窓を抜け、丘の小道を上って、星空の下で明かりの灯る天文台へと続いている。](https://dardo.studio/_astro/01M4S57PW4TH7D1E7E3RQM4Z4E_Z3SVDC.webp) ## 要点 - Framerにはセルフホスティング用のHTMLエクスポートがないため、Astroへの移行は、公開中のFramerページを参考にしたサイトの再構築になります。 - Framerはコンテンツ、画像、コードを独自のCDNとランタイムから読み込みます。再構築の前に、すべてのURL、CMSコレクション、ブレークポイント、アニメーションを記録しておきましょう。 - FramerのフォームとCMSファイルはFramerのランタイムに依存しています。各フォームには自前の送信先を用意し、CMSのコンテンツはAstroのコレクションかヘッドレスCMSに移しましょう。 - ホスティング先で、1対1のサーバーサイド301リダイレクトを設定してください。アダプターなしの静的なAstroビルドでは、meta refreshによるリダイレクトしか生成されません。 - 公開後、canonical、サイトマップのエントリ、Open Graphタグのどれもが旧Framerのアドレスを指していないことを確認しましょう。 ## 結論から Framerのヘルプセンター自体が、セルフホスティング用のHTMLエクスポートは提供していないと明記しています（[Framer Help](https://www.framer.com/help/articles/can-i-export-my-website-to-html-and-self-host-it/)）。つまり、FramerからAstroへの移行はエクスポートではなく再構築です。公開中のサイトを参考資料として記録し、各テンプレートをAstroのコンポーネントとして作り直し、CMSのコンテンツをコレクションに移し、本当に必要な動きを再現し、変わるURLにはすべて恒久リダイレクトを設定します。 この順番で進めれば、新しいサイトは見た目を保ったまま、読み込むJavaScriptを減らし、検索順位も維持できます。記録やリダイレクトマップを省くと、誰も頼んでいないリデザインと、検索流入の落ち込みが残ります。 ## Framerから移行する理由 Framerは、マーケティングサイトを素早くデザインして公開するには優れたツールです。移行する理由は、見た目よりも実務的なものがほとんどです。 - **ホスティングと所有権**。FramerのサイトはFramerのサーバー上で動きます。コードを自社のリポジトリで管理したい、自社のホスティングで動かしたい、自社のバックエンドと並べて運用したいというチームには、再構築が必要です。 - **サイトごとのプラン費用**。Framerの[料金ページ](https://www.framer.com/pricing/)（2026年10月12日確認）では、Basicプランが月額10米ドル、サイトのリダイレクト機能が加わるProプランが月額30米ドルで、いずれも年払いです。ローカライズは有料のアドオンです。 - **リダイレクトの制限**。Framerのリダイレクトは、同じドメイン内のパスにしか使えません（[Framer Help](https://www.framer.com/help/articles/how-to-setup-redirects-to-maintain-seo-ranking/)）。 - **本格的なバックエンドが必要なフォーム、データ、連携**。CRM、予約システム、会員限定コンテンツなど、自社のインフラで動かす必要があるものです。 マーケティングチームが毎週ビジュアルエディタでページを作って編集しており、サイトが役割を果たしているなら、Framerに留まるのが正しい判断の場合もあります。移行にはデザインと開発の時間がかかるため、それに見合う具体的な目的が必要です。 ## Framerのキャプチャツールを作ってわかったこと Dardoは、自社で所有するサイトを対象に、公開中のFramerページを取り込み、単体で開ける参考ファイルと、作り直すべき項目を1行ずつ並べたAstro移行トラッカーに変換する社内ツールを作りました。その開発を通じて、Framerのサイトがどこに複雑さを隠しているかがわかりました。 - **アセットはFramerのCDNにある**。画像、フォント、コードはframerusercontent.comなどのドメインから読み込まれます。レスポンシブ画像は同じファイルを複数の幅（?width=512、?width=1024）でリクエストするため、ツールは画像ごとに最大のものを1つだけローカルに保存します。 - **JavaScriptは何層にも分かれて届く**。Framerは本体のバンドルを再エクスポートするだけの小さなモジュールを読み込むため、1回の走査ではコードを取りこぼします。ツールは新しいモジュールが見つからなくなるまで走査を繰り返します。 - **CMSのコンテンツは別のファイル形式**。FramerのCMSコレクションは.framercmsファイルとして配信され、ページはそれをCDNからバイト範囲を指定して取得します。一般的な静的ホスティングでは、こうしたリクエストにファイル全体が返され、そのURLを組み立てるモジュールもFramerを指したままです。 - **ランタイムが読み込み後にページを書き換える**。FramerのReactランタイムはHTMLをハイドレーションし、削除した要素を再び挿入することがあります。たとえば「Made in Framer」バッジは、専用のコンテナにハイドレーションされます。 - **フォームはFramerに依存している**。取り込んだフォームにはHTMLのaction属性がなく、送信はFramerのクライアントランタイム経由でしか機能しません。 - **SEOタグはFramerを指している**。書き換えない限り、canonicalとOpen GraphのURLは元のFramerのアドレスを示し続けます。 - **動きはデータである**。表示時のエフェクトはページ内のJSONデータとして保存されているため、ツールはそれに加えて、実行中のすべてのアニメーションのキーフレームとタイミングも記録します。 そこから得た結論は、エクスポートは成果物ではなく証拠だということです。取り込んだHTMLやFramerのランタイムを納品することはありません。それらは、何を作り直すべきかを正確に教えてくれる資料です。 ## FramerからAstroへの移行手順 1. **すべてのURLを洗い出す**。サイトのsitemap.xmlを起点に、CMSの全ページを加え、Google Search Consoleの「ページ」レポートを取得できる最長の期間で書き出します。FramerのSite Settingsの「Hosting」で設定済みのリダイレクトも控えておきます。 2. **Framerが認めている範囲でエクスポートする**。Framerによると、CMSのコンテンツはプラグインを使ってCSVやJSONなどの形式でエクスポートできます（[Framer Help](https://www.framer.com/help/articles/porting-your-data-from-framer/)）。画像とファイルはすべてダウンロードし、フォントはセルフホストする前にそれぞれのライセンスを確認します。 3. **公開中のサイトを参考資料として記録する**。各テンプレートをすべてのブレークポイントで記録し、残したいアニメーションのタイミングも控えます。私たちのツールは、幅1440、810、390ピクセルでページを取り込み、さらにサイトのCSSで見つかった各ブレークポイントについて、その1ピクセル手前、ちょうどの幅、1ピクセル先でも取り込みます。 4. **テンプレートをAstroのコンポーネントとして作り直す**。CMSコレクションは[コンテンツコレクション](https://docs.astro.build/en/guides/content-collections/)かヘッドレスCMSへ、画像は[astro:assets](https://docs.astro.build/en/guides/images/)へ、ローカライズされたページは[Astroのi18nルーティング](https://docs.astro.build/en/guides/internationalization/)へ移し、言語ごとに1つのURLを割り当てます。 5. **意味を担う動きを再現する**。Framerのエフェクトの多くは、CSSのトランジション、キーフレーム、または小さなスクリプトに置き換えられます。prefers-reduced-motionにも対応しましょう。クライアント案件ではない18ルートのサイトをFramerからAstroへ作り直した自社の事例では、スクロールとインタラクションの状態219件のうち217件が、ピクセル差1%以内で元のサイトと一致しました。 6. **すべてのフォームに本物の送信先を用意する**。各フォームを自前のハンドラー（Cloudflare Worker、フォームサービス、CRMなど）に向け、ステージング環境で送信をテストします。 7. **検索用のメタデータを引き継ぐ**。すべてのページにタイトル、ディスクリプション、Open Graphタグ、構造化データ、自己参照のcanonicalを設定し、新しいXMLサイトマップも用意します。 8. **リダイレクトはHTMLではなくサーバーで行う**。アダプターなしの静的なAstroビルドでは、設定したリダイレクトが、HTTPステータスコードを持たないmeta refreshのページに変換されます（[Astroの設定リファレンス](https://docs.astro.build/en/reference/configuration-reference/)）。サイトのホスティング先で、たとえばCloudflareの\_redirectsファイルやWorkerを使って、1対1の301リダイレクトを設定します。 9. **公開し、その後を見守る**。DNSを切り替え、新しいサイトの動作を確認できるまでFramerのプロジェクトは残しておき、その後の数週間はSearch Consoleのインデックス登録レポートと「ページ」レポートを追います。公開日とその後90日間については、[サイト移行SEOチェックリスト](https://dardo.studio/ja/blog/website-migration-seo-checklist/)で解説しています。 ## 移行後に変わること | 項目 | Framerの場合 | Astroの場合 | | ------ | --------------------- | ------------------------------------ | | 編集 | Framerのビジュアルキャンバス | 選んだ構成に応じて、CMSのフィールドまたはコード | | ホスティング | Framerのサーバー | Cloudflareなど、任意の静的ホスティングやエッジプラットフォーム | | リダイレクト | Proプラン。同じドメイン内のサブパスのみ | ホスティング先でのサーバーサイド301。ドメインの制限なし | | 動き | 組み込みのエフェクトとインタラクション | 自社で所有し、計測できるCSSとJavaScript | | CMS | FramerのCMSコレクション | コンテンツコレクションまたはヘッドレスCMS | | フォーム | Framerのフォーム処理 | 自前の送信先とデータの保存先 | ## SEOを守るには [URL変更を伴うサイト移転](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes)に関するGoogleのガイドが、そのまま当てはまります。旧URLをすべて最も近い新URLに対応付け、サーバーサイドの恒久リダイレクトを使い、少なくとも1年間は維持します。URLがまったく同じであれば（丁寧に再構築すれば多くの場合そうできます）、新しいページが同じコンテンツとメタデータを持っているかを確認するだけで済みます。 Framer特有の落とし穴は、Framerのアドレスが残ってしまうことです。canonical、サイトマップのエントリ、Open Graphタグのどれも旧FramerのURLを示していないこと、そして新しいサイトの公開後に、Framerのプロジェクトが非公開になっているか、リダイレクトされていることを確認してください。 ## DardoのFramer移行の進め方 Framerからの移行は、[ウェブサイト移行](https://dardo.studio/ja/services/website-migration/)サービスの一環として行います。洗い出しと記録を行い、代表的な1ページを先に作り直して合意した幅で確認し、その後に残りのテンプレート、フォーム、リダイレクトへ進みます。構築そのものはAstroによる[Web開発](https://dardo.studio/ja/services/web-development/)で、動きの制作は[クリエイティブ開発](https://dardo.studio/ja/services/creative-development/)です。このサイト、dardo.studioも、Cloudflare Workers上のAstroで動き、コンテンツはヘッドレスCMSで管理しています。私たちが最もよく使う構成です。 移行を検討中なら、[サイトと変えたいことをお知らせください](https://dardo.studio/ja/contact/?service=website-migration)。見積もりを出す前に、再構築する価値があるかどうかをお伝えします。 ## よくあるご質問 **FramerのサイトをHTMLでエクスポートできますか？** 公式にはできません。Framerのヘルプセンターでは、セルフホスティング用のHTMLエクスポートは提供していないと説明されています。公開中のページを取り込めるツールはありますが、その結果もFramerのランタイムとCDNに依存したままです。そのまま公開するものではなく、再構築のための参考資料として扱ってください。 **FramerからAstroに移行すると、Googleの検索順位は下がりますか？** アクセスを集めているすべてのURLが引き続き機能していれば、下がりません。できる限りパスを同じに保ち、変わるものには恒久的な301リダイレクトを設定し、タイトル、ディスクリプション、構造化データを引き継いだうえで、公開後の数週間はSearch Consoleを確認しましょう。 **FramerのCMSコンテンツはエクスポートできますか？** Framerによると、CMSのコンテンツはプラグインを使ってCSVやJSONなどの形式でエクスポートできます。コレクションのフィールドはFramerのCDNを参照していることが多いため、画像やファイルもすべてダウンロードしておきましょう。 **Astroに移行した後も、チームはコードを書かずにサイトを編集できますか？** 新しいサイトでヘッドレスCMSを使えば可能です。編集者はWeb上の管理画面で作業し、Astroのサイトはそのコンテンツから再ビルドされます。dardo.studioもこの仕組みで運用しています。 **FramerのアニメーションはAstroでも動きますか？** そのままでは動きません。Framerのエフェクトは独自のランタイム上で動作するため、残したいアニメーションはそれぞれCSSや小さなスクリプトで作り直します。できれば、動きを減らす設定（reduced motion）向けのバージョンも用意しましょう。 ## 出典・参考資料 このページの出典です。詳細は各発行元の原典をご覧ください。 - [Framerヘルプ：サイトをHTMLでエクスポートしてセルフホストできますか？（英語）](https://www.framer.com/help/articles/can-i-export-my-website-to-html-and-self-host-it/) · framer.com - [Framerヘルプ：Framerからのデータの移行（英語）](https://www.framer.com/help/articles/porting-your-data-from-framer/) · framer.com - [Framerヘルプ：リダイレクトの設定方法（英語）](https://www.framer.com/help/articles/how-to-setup-redirects-to-maintain-seo-ranking/) · framer.com - [Framerの料金プラン（英語）](https://www.framer.com/pricing/) · framer.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 - [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 の創設者です。 ## 関連記事 - [**サイト移行SEOチェックリスト：プラットフォームやドメインを変えても順位を落とさない方法**順位が落ちる原因は、新しいプラットフォームそのものではなく、アクセスを集めていたURLが応答しなくなることです。URLの棚卸しから90日目までのチェックリスト。](https://dardo.studio/ja/blog/website-migration-seo-checklist/) - [**WordPressかフルスクラッチか？選び方と、それぞれが割に合うケース**WordPressが正解のケース、フルスクラッチのサイトが割に合うケース、その中間のヘッドレスWordPressを、費用、速度、アップデート、所有権で比較します。](https://dardo.studio/ja/blog/wordpress-vs-custom-website/) - [**WebflowからAstroへの移行：コンテンツ、デザイン、検索順位を失わずにWebflowサイトを移す方法**WebflowのコードエクスポートにはCMS、フォーム、検索、多言語ページが含まれません。Astroへの移行で持ち出すもの、作り直すもの、検索順位の守り方を解説します。](https://dardo.studio/ja/blog/webflow-to-astro/) - [**3Dウェブサイトは導入すべきか：価値が出る場面と、速さを保つ方法**3Dウェブサイトが価値を発揮する場面、動画や画像のほうが向いている場面、Janus Observatoryの10の3Dワールドを速く、アクセシブルで使いやすく保った方法を紹介します。](https://dardo.studio/ja/blog/3d-websites/) ## もっと見る - [サービス · **SEOを落とさないウェブサイト移行**](https://dardo.studio/ja/services/website-migration/) - [あなたのプロジェクト · **まずはご相談ください**](https://dardo.studio/ja/contact/)