Webflow多言語化：Webflowサイトを翻訳する方法（2026年版）
Webflowには今、Designerに組み込まれたネイティブのローカライゼーション機能があります。 また、スクリプトタグを1つ追加するだけで、あらゆるWebflowサイトに自動的な多言語対応を 加えることも可能です — 作り直し不要、ロケールごとの課金なし、どのWebflowプランでも 動作します。どちらのアプローチを選ぶべきか、知っておくべきことをすべて解説します。
Webflow組み込みのローカライゼーション
Webflowは2023年にネイティブのLocalization機能を発表しました。 サードパーティツールやカスタムコードなしで、Webflow Designer内から直接翻訳版の サイトを管理できます。
Webflow Localizationを使うと以下が可能です。
- →Designer内からロケールごとにテキストコンテンツ、リッチテキスト、メタデータを翻訳する
- →ロケールごとに画像や動画を差し替える（例：現地化された商品写真やヒーロー画像）
- →ロケール固有のURLスラッグを設定する（例：
/fr/aboutではなく/fr/a-propos） - →翻訳会社のワークフロー向けに、コンテンツをXLIFFファイルへエクスポートする
Webflow Localizationは、基本のWebflowプランに加えて、ロケールごとの継続課金プランを 必要とします。最新のロケール数の上限、パッケージ内容、料金はWebflow公式サイトで ご確認ください。
Webflow Localizationの制約
すべての翻訳が手動
Webflow Localizationには機械翻訳が含まれていません。すべての翻訳文字列を Designer内で自分で入力するか、貼り付けるか、あるいは外部の翻訳ツールを使って XLIFFファイルをインポートする必要があります。数百ページ、数十言語のサイトでは かなりの時間的投資になります。
ロケールごとの課金がすぐに膨らむ
ロケールベースの継続課金プランは、複数言語や複数の顧客サイトにまたがると 積み上がっていきます。管理するロケール数とサイト数に対して、最新のベンダー価格を 試算してみてください。
翻訳の変更には再公開が必要
翻訳を更新すると、その変更を反映するためにWebflowサイトを再公開する必要があります。 つまり翻訳の更新はWebflowの公開ワークフローと結びついており、サイト全体の 再公開なしに翻訳の修正だけをプッシュすることはできません。
有料のWebflowプランが必要
Webflow Localizationは無料のStarterプランでは利用できません。ローカライゼーションを 有効にするには少なくとも有料のサイトプランが必要で、小規模プロジェクトにとっては 追加のコスト要因になります。
スクリプトタグという代替手段
Lingvitのようなドメインベースの翻訳ウィジェットは、まったく異なるアプローチを 取ります。CMS内で翻訳を管理するのではなく、公開済みのWebflowサイトを 訪問者のブラウザ内で自動的に翻訳します。
Site Settings → Custom Codeから、Webflowにスクリプトタグを1つ 追加します。言語検出、翻訳、言語スイッチャー、URLルーティング、hreflangタグなど、 残りはすべてウィジェットが処理します。
このアプローチはWebflowプラットフォーム内部ではなく公開済みのHTML上で動作するため、Basicを含むどのWebflowプランでも機能します。
ステップバイステップ：WebflowにLingvitを追加する
- 1
Lingvitプロジェクトを作成し、スクリプトタグをコピー
app.lingvit.comで サインアップし、新しいプロジェクトを作成して、Webflowサイトのドメインを 入力します。プロジェクト設定からスクリプトタグをコピーします。
- 2
Webflow Custom Codeにスクリプトを追加
Webflow内で Site Settings → Custom Code → Footer Code（“Before </body> tag”と表示されているセクション）に移動します。 Lingvitのスクリプトタグをそこに貼り付けます。保存してサイトを公開します。
- 3
Lingvitダッシュボードで言語を選択
Lingvitダッシュボードに戻り、対象言語を選択します。設定されたスクリプトが 読み込まれると言語スイッチャーウィジェットが表示されます。翻訳は最初に リクエストされた時点で生成され、再利用のために保存されます。広く公開する前に 結果を確認してください。
何が翻訳されるか
| コンテンツの種類 | 翻訳対象？ |
|---|---|
| 見出し、段落、本文テキスト | はい |
| ボタンラベルとリンクテキスト | はい |
| ナビゲーションリンク | はい |
| フォームのプレースホルダーとラベル | はい |
| Webflow CMSのコレクション項目 | はい（ページにレンダリングされている場合） |
| 画像と動画 | 翻訳されません（alt属性は翻訳されます） |
| サードパーティの埋め込み（Calendly、Typeformなど） | いいえ（iframe内で読み込まれます） |
横にスクロールしてすべての列を表示できます。
多言語WebflowにおけるSEO
多言語SEOでは、各言語版が検索エンジンから発見可能である必要があります。公開時点では Webflow Localizationや他のサーバーレンダリング型ルーティング層をその検索要件に 使ってください。Lingvitのランタイム翻訳単体では、インデックス可能なロケールURLは 作成されません。
プラットフォームが管理するhreflangタグ
各クロール可能なロケールURLを所有するプラットフォーム内で hreflangを設定します。 それらのタグは相互参照的で、言語スイッチャーと整合させておきます。
クロール可能なロケールURL
Webflow Localizationや他の公開層を使って、 /fr/や /de/のようなURLを 作成してください。ロケールごとのインデックスを期待する前に、実際に レンダリングされたページを検証してください。
翻訳されたメタタイトルと説明文
各ロケールURLをレンダリングする公開層で、ページの <title>と meta descriptionを 翻訳してください。
Webflow Localization vs Lingvit：どちらを選ぶべきか
| 項目 | Webflow Localization | Lingvit |
|---|---|---|
| 翻訳方法 | 手動（貼り付けまたはインポート） | 自動 + 上書き編集 |
| セットアップ時間 | 数時間〜数日 | ガイド付きのカスタムコード設定 |
| 料金モデル | 継続課金のロケールプラン。最新価格は要確認 | 月額プランの文字数枠 |
| Webflowプラン要件 | 有料プラン必須 | Basicを含むどのプランでも |
| 画像のローカライズ | あり（ロケールごとの画像） | なし |
| 翻訳更新の速さ | 再公開が必要 | ダッシュボードから公開、タイミングは状況により変動 |
横にスクロールしてすべての列を表示できます。
Webflow Localizationを選ぶべきなのは、公開前にすべての文字列を 完全に編集管理できる、Webflow内でロケールごとのCMSエントリと画像を管理したい場合です。
Lingvitを選ぶべきなのは、自動翻訳、より多くの言語、シンプルな 月額料金、そしてガイド付きのカスタムコードセットアップを求める場合です。
よくある質問
- LingvitはWebflow CMSで動作しますか？
- はい。Webflow CMSのコンテンツ（ブログ記事、商品一覧、チームメンバーなど）は、公開ページ上でHTMLとしてレンダリングされます。Lingvitは、CMSでレンダリングされたコンテンツを含め、DOM内にあるものすべてを翻訳するため、コレクションページも特別な設定なしで自動的に翻訳されます。
- Webflowサイトの速度は低下しますか？
- 保存済みの翻訳は、別途プロバイダーへリクエストすることなく再利用できます。訪問者の体験はページ、ブラウザ、ネットワーク、ウィジェットの配信状況にも左右されるため、公開前に代表的なページでテストしてください。
- Webflow Ecommerceはどうですか？
- Lingvitは、DOMにレンダリングされるすべてのテキストを翻訳します。これにはWebflow Ecommerceの商品名、説明、カテゴリー名、カート・決済のUI文字列が含まれます。Stripe Checkoutのような決済プロバイダーのページは、Webflowではなく決済プロバイダーがホストしているため翻訳対象外です。