Framer の多言語対応：Framer サイトに言語を追加する方法（2026年版）
Framer はデザインからそのまま公開サイトへ移行できる、最も速い方法のひとつです。しかし複数言語の 訪問者にリーチしたい場合、2つの明確な選択肢があります。Framer 標準の Localization 機能を使うか、 スクリプトタグで自動翻訳を追加するかです。このガイドでは両方のアプローチ — その仕組み、それぞれが 適する場面、ガイド付きワークフローでのセットアップ方法を解説します。
Framer 標準のローカリゼーション機能
Framer にはサイト設定内にネイティブの Localization 機能があります。 有効化すると、プロジェクトにロケールバリアントを追加できます — 例えば英語、フランス語、 ドイツ語など — そして Framer はデザイナー内で各ページのロケール別バージョンを作成します。 その後、テキストレイヤーごとに直接入力するか、翻訳済みコンテンツをインポートすることで 翻訳します。
Framer Localization の主な利点は、プラットフォームとの緊密な統合です。翻訳されたページは 標準でロケールプレフィックス付きの URL に公開され (/fr/、 /de/)、Framer がルーティングを 自動的に処理します。Framer CMS コレクションはロケールごとに専用のエントリを持てるため、 言語ごとの完全な編集コントロールが得られます。
ただし、検討すべき重要なトレードオフがあります。
Pro 以上のプランが必要
Framer Localization は無料プランでは利用できません。有効化するには Framer の 有料プランが必要で、小規模プロジェクトや初期段階のプロダクトにとっては追加の コスト要因になります。
すべてのページをロケールごとに維持する必要がある
新しい言語を追加すると、Framer プロジェクト内のすべてのページに翻訳コンテンツが 必要なロケールバリアントが追加されます。サイトが成長するほど — ページが増え、 コンポーネントが増え、CMS 項目が増えるほど — 翻訳対象も比例して増えていきます。 50ページのサイトを5言語に対応させると、250のロケールバリアントを同期し続ける 必要があります。
CMS 項目もロケールごとに複製が必要
Framer CMS コンテンツ — ブログ記事、事例紹介、チームメンバーなど — はロケールごとに 個別のエントリが必要です。英語とフランス語のブログ記事は別個の CMS 項目であり、 プライマリロケールのエントリが自動的に翻訳されるわけではありません。コンテンツ量の 多いサイトにとっては大きな編集負担になります。
スクリプトタグによる自動翻訳
DOM ベースの翻訳ウィジェットは根本的に異なるアプローチを取ります。Framer 内で翻訳を 管理する代わりに、公開済みのサイトを自動的に翻訳します — ブラウザ上でレンダリング されたテキストを観測し、リアルタイムで対象言語に置き換えます。
サイト設定 → 一般 → Custom Code → End of body から、Framer に単一の スクリプトタグを追加します。これだけで、デザイン変更やロケールごとの複製なしに、すべての ページ、CMS コレクション、コンポーネントがカバーされます。
デザインの複製が不要
Framer プロジェクトはそのままの状態を維持できます。新しい言語の追加は翻訳ダッシュボード で数秒で完了します — 追加のデザイン作業も、新しい CMS エントリも、再公開も不要です。
Custom Code アクセスが必要
スクリプトタグ方式を選ぶ前に、現在の Framer プランとワークスペースがサイト全体の Custom Code を許可しているか確認してください。
多言語 SEO には Framer のルーティングを使用
Lingvit の一般的なランタイム翻訳は、リリース時点では hreflang の挿入やインデックス 可能なロケール URL の作成を行いません。ロケール URL、翻訳済みメタデータ、canonical、 相互 hreflang には Framer 独自の公開機能を使用してください。
クライアントサイドでの翻訳
Framer Localization とは異なり、翻訳はロケールごとにサーバーレンダリングされるのでは なく、ブラウザ内で適用されます。これが主なトレードオフです。ソース HTML はすべての 訪問者に対して同一であり、言語切り替えは読み込み時に行われます。ほとんどのマーケティング サイトやポートフォリオにとって、これは大きな欠点にはなりません。
ステップバイステップ：Framer サイトに Lingvit を追加する
- 1
Lingvit プロジェクトを作成
app.lingvit.com でサインアップし、新しいプロジェクトを作成して、Framer サイトのドメインを入力します。 プロジェクト設定からスクリプトタグをコピーします。
- 2
Framer の Custom Code 設定を開く
Framer で サイト設定 → 一般 → Custom Code に進み、End of body フィールドを見つけます。
- 3
スクリプトタグを貼り付ける
Lingvit プロジェクトのスクリプトを End of body フィールドに貼り付けます。以下のような 形式です。
<script src="https://cdn.lingvit.com/widget.bundle.js" data-project-id="YOUR_PROJECT_ID" defer ></script> - 4
Framer サイトを公開する
Framer ツールバーの Publish をクリックします。これでスクリプトが 公開サイト上でライブになります。
- 5
Lingvit ダッシュボードで言語を選択する
Lingvit ダッシュボードに戻り、対象言語を選択します。言語切り替えは公開中の Framer サイトに即座に表示されます。翻訳は最初にリクエストされた時点で生成され、以降は 再利用のために保存されます。生成と配信のタイミングは、ページ、ブラウザ、ネットワーク、 プロバイダーの応答によって異なります。
Framer CMS と翻訳
Framer CMS コンテンツ — ブログ記事、事例紹介、チームメンバー、商品リストなど — は ページ要素に動的に紐づけられます。Framer が CMS コレクションページを描画すると、 そのデータはページ上の他のテキストと同様に DOM の一部になります。
自動翻訳のアプローチは、Framer の内部データモデルを読み取るのではなく、描画された DOM を観測します。これにより、CMS に紐づくテキストも追加設定なしに自動的に取得・翻訳されます。 すべてのブログ記事、すべてのコレクション項目、動的に入力されるすべてのフィールドが 対象になります。
一方 Framer Localization では、CMS 項目はロケールごとに重複したエントリが必要です。 英語とフランス語のブログ記事は2つの CMS 項目を意味し、その両方を書いて維持する必要が あります。頻繁に公開するチームにとって、このロケールごとの複製は大きな編集負担になります。
どちらのアプローチがプロジェクトに合うか？
| 要素 | Framer Localization | 自動翻訳 |
|---|---|---|
| 翻訳方法 | 手動（ロケールごとに入力またはインポート） | 自動 + 編集による上書き |
| セットアップ時間 | 数時間〜数日 | ガイド付きの Custom Code セットアップ |
| 必要な Framer プラン | Pro 以上 | Starter 以上 |
| CMS の扱い | ロケールごとに項目を複製 | DOM 観測により自動化 |
| レンダリング | ロケールごとにサーバーレンダリング | 読み込み時にクライアントサイドで実行 |
| 新しい言語の追加 | ページごとの翻訳作業が必要 | ダッシュボードでワンクリック |
横にスクロールするとすべての列を表示できます。
完全にサーバーレンダリングされた多言語ページが必要で、ロケールごとの画像やロケール固有の CMS エントリを求めており、すでに Framer Pro プランで各ロケールを維持する編集リソースが ある場合は、Framer Localization を選んでください。
デザインの複製やロケールごとの CMS 負担なしに、素早く複数言語で公開したい場合は自動翻訳を選んでください。サーバーレンダリングされたロケールルーティング よりも市場投入までの速さが重要な、マーケティングサイト、ポートフォリオ、SaaS ランディング ページに特に適しています。
よくある質問
- 自動翻訳を使うのに Framer Pro プランは必要ですか？
- いいえ、Custom Code の挿入は Starter 以上のプランで利用できます。Custom Code 経由で翻訳スクリプトを追加するために Framer Pro プランは必要ありません。
- Framer CMS のコレクションページも翻訳されますか？
- はい、CMS に紐づくテキストを含め、描画されたすべての DOM コンテンツが観測・翻訳されます。翻訳ウィジェットは Framer がページを描画した後にページを読み取るため、CMS コレクションの項目も特別な設定なしに自動的に取得されます。
- すでに Framer Localization を有効にしている場合、競合しませんか？
- 両者は独立したシステムであり共存できますが、通常はどちらか一方を使うことになります。両方を同時に稼働させると言語切り替え UI が重複して表示される場合があり、本番サイトでは推奨されません。
- 翻訳されたページの SEO には対応していますか？
- 現時点では、Lingvit の一般的なランタイムルーティングを通じては対応していません。インデックス可能な言語別ページには Framer 独自のロケール URL とメタデータを使用してください。Lingvit はブラウザ上でレンダリングされた体験を翻訳します。