このドキュメントは、Framer を学ぶ日本のユーザーが日本語資料の不足によって直面している困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加したものです。Framer を使用する皆様のお役に立てれば幸いです。

この記事では、マルチドメインまたは単一ドメインを介して Framer を既存のウェブサイトと統合する方法について説明します。

マルチドメイン

Framer を既存サイトに統合する最も簡単な方法は、複数のサブドメインを使用することです。以下に例を示します。
メインサイト: example.com
Framer サイト: subdomain.example.com

設定方法

1. Framer プロジェクトでサブドメインを設定します。

2. DNS サーバーを更新して、そのサブドメインが Framer サイトを指すようにします。

Note: カスタムドメイン設定方法でさらに詳しく知ることができます。

単一ドメイン（高度な設定）

複雑なウェブサイトの場合、「マイクロフロントエンド」と呼ばれる高度な設定を通じて、1つのドメインの下にさまざまな独立したサイトをホスティングすることができます。例を以下に示します。
メインサイト: example.com
Framer セクション: example.com/framer-page

マイクロフロントエンドとは？ 大きなウェブサイトを複数の小さな独立したアプリケーションに分けて管理する方式です。各部分は独立して開発・デプロイが可能なため、柔軟性が高く、Framer サイトを既存ドメインの特定のパスに統合する際に役立ちます。

要件: 単一ドメイン設定の際は、Enterprise プランと Rewrite ルールをサポートするプロキシホスティングプロバイダ（例: Vercel、Netlify、Cloudflare）を使用する必要があります。

設定方法

リバースプロキシ機能を提供するホスティングプロバイダを選び、パス（/framer-page）を該当のOrigin（Framerサイト）にマッピングする Rewrite ルールを定義します。

Rewrite ルール例

[
  {
    "source": "/framer-page",
    "destination": "<https://your-framer-site.com>"
  }
]

各ホスティングプロバイダには Rewrite ルールに関する具体的な説明方法があるため、このルールを実装するための詳細は該当のプロバイダのドキュメントを参考にしてください。
リバースプロキシを使ったセルフホスティングについてさらに知りたい場合は、こちらの記事を参考にし、何か問題が発生したり追加のサポートが必要な場合は連絡先ページから Framer サポートチームにお問い合わせください。

この記事は、Framer 公式ブログの『現在のサイトとの統合方法』から翻訳・アレンジしたコンテンツです。