FramerからAstroへの移行：デザインも検索順位も失わずにFramerサイトを移す方法

結論から

Framerのヘルプセンター自体が、セルフホスティング用のHTMLエクスポートは提供していないと明記しています（Framer Help）。つまり、FramerからAstroへの移行はエクスポートではなく再構築です。公開中のサイトを参考資料として記録し、各テンプレートをAstroのコンポーネントとして作り直し、CMSのコンテンツをコレクションに移し、本当に必要な動きを再現し、変わるURLにはすべて恒久リダイレクトを設定します。

この順番で進めれば、新しいサイトは見た目を保ったまま、読み込むJavaScriptを減らし、検索順位も維持できます。記録やリダイレクトマップを省くと、誰も頼んでいないリデザインと、検索流入の落ち込みが残ります。

Framerから移行する理由

Framerは、マーケティングサイトを素早くデザインして公開するには優れたツールです。移行する理由は、見た目よりも実務的なものがほとんどです。

• ホスティングと所有権。FramerのサイトはFramerのサーバー上で動きます。コードを自社のリポジトリで管理したい、自社のホスティングで動かしたい、自社のバックエンドと並べて運用したいというチームには、再構築が必要です。
• サイトごとのプラン費用。Framerの料金ページ（2026年10月12日確認）では、Basicプランが月額10米ドル、サイトのリダイレクト機能が加わるProプランが月額30米ドルで、いずれも年払いです。ローカライズは有料のアドオンです。
• リダイレクトの制限。Framerのリダイレクトは、同じドメイン内のパスにしか使えません（Framer Help）。
• 本格的なバックエンドが必要なフォーム、データ、連携。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）。画像とファイルはすべてダウンロードし、フォントはセルフホストする前にそれぞれのライセンスを確認します。
3. 公開中のサイトを参考資料として記録する。各テンプレートをすべてのブレークポイントで記録し、残したいアニメーションのタイミングも控えます。私たちのツールは、幅1440、810、390ピクセルでページを取り込み、さらにサイトのCSSで見つかった各ブレークポイントについて、その1ピクセル手前、ちょうどの幅、1ピクセル先でも取り込みます。
4. テンプレートをAstroのコンポーネントとして作り直す。CMSコレクションはコンテンツコレクションかヘッドレスCMSへ、画像はastro:assetsへ、ローカライズされたページはAstroのi18nルーティングへ移し、言語ごとに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の設定リファレンス）。サイトのホスティング先で、たとえばCloudflareの_redirectsファイルやWorkerを使って、1対1の301リダイレクトを設定します。
9. 公開し、その後を見守る。DNSを切り替え、新しいサイトの動作を確認できるまでFramerのプロジェクトは残しておき、その後の数週間はSearch Consoleのインデックス登録レポートと「ページ」レポートを追います。公開日とその後90日間については、サイト移行SEOチェックリストで解説しています。

移行後に変わること

SEOを守るには

URL変更を伴うサイト移転に関するGoogleのガイドが、そのまま当てはまります。旧URLをすべて最も近い新URLに対応付け、サーバーサイドの恒久リダイレクトを使い、少なくとも1年間は維持します。URLがまったく同じであれば（丁寧に再構築すれば多くの場合そうできます）、新しいページが同じコンテンツとメタデータを持っているかを確認するだけで済みます。

Framer特有の落とし穴は、Framerのアドレスが残ってしまうことです。canonical、サイトマップのエントリ、Open Graphタグのどれも旧FramerのURLを示していないこと、そして新しいサイトの公開後に、Framerのプロジェクトが非公開になっているか、リダイレクトされていることを確認してください。

DardoのFramer移行の進め方

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

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