目次
Webflowローカライゼーション：多言語ウェブサイト構築ガイド
Webflowはネイティブのローカライゼーションサポートを導入し、デザイナーやマーケターがWebflow Designer内で直接多言語ウェブサイトを構築できるようになりました。この機能により、サードパーティの翻訳プラグインや、言語ごとにプロジェクト全体を複製する必要がなくなります。
このガイドでは、Webflowローカライゼーションの仕組み、機能と制限、SEO対応、そしてより広いローカライゼーションワークフローへの組み込み方について解説します。
Webflowローカライゼーションの仕組み
Webflowのローカライゼーション機能は、ロケールベースのシステムを採用しており、プライマリロケール（ソース言語）を定義し、追加言語ごとにセカンダリロケールを追加します。
主要な概念
- プライマリロケール — デフォルト言語。すべてのコンテンツは最初にプライマリロケールで作成されます。
- セカンダリロケール — 追加言語。各セカンダリロケールは、プライマリロケールのテキスト、画像、要素の表示状態を上書きできます。
- ロケールサブフォルダ — Webflowはロケールプレフィックス付きのURLを生成します：
example.com/fr/about、example.com/de/about。 - ロケールスイッチャー — 訪問者が言語を切り替えられる組み込みコンポーネント。
ロケールの設定
- Webflowプロジェクトの設定を開く
- Localesタブに移動する
- 言語と地域を選択してセカンダリロケールを追加する
- 各ロケールの表示名とURLプレフィックスを設定する
WebflowはBCP 47標準に従った幅広い言語・地域の組み合わせをサポートしています（例：en-US、fr-FR、pt-BR）。
コンテンツの翻訳
静的コンテンツ
静的なページコンテンツ（見出し、段落、ボタン）については、Webflowがインコンテキスト編集体験を提供します：
- Designer内のロケールスイッチャーを使ってセカンダリロケールに切り替える
- テキスト要素をクリックすると、プライマリロケールのテキストが参照として表示される
- Designer内に直接翻訳テキストを入力する
- ビジュアルフォーマットとスタイリングはロケール間で一貫して保たれる
このインライン編集アプローチにより、デザイナーや翻訳者は翻訳テキストが最終レイアウトでどのように表示されるかを正確に確認でき、オーバーフローやレイアウトの問題を即座に発見できます。
CMSコンテンツ
Webflow CMSコレクションはロケールごとのコンテンツをサポートしています：
- 各CMSフィールドにロケール固有の値を設定できる
- コレクションページはロケールプレフィックス付きのURLを自動生成する
- リッチテキストフィールド、画像、その他のフィールドタイプもすべてローカライズ可能
- リファレンスおよびマルチリファレンスフィールドをローカライズして、ロケールに適した関連コンテンツを参照できる
例えば、ブログ投稿コレクションでは、同じスラグ構造を共有しながら、ロケールごとに異なるタイトル、本文コンテンツ、アイキャッチ画像を設定できます。
ローカライズ可能な要素
- テキストコンテンツ — あらゆるテキスト要素（見出し、段落、リンク、ボタン）
- 画像とaltテキスト — ロケールごとに画像を差し替え（ローカライズされたUIのスクリーンショットに便利）
- 要素の表示状態 — ロケールごとに特定の要素を表示・非表示にする
- リンクURL — ロケールごとにリンク先を変更（例：ロケール固有のドキュメント）
- フォームフィールド — プレースホルダーテキストとラベルのローカライズ
- CMSコンテンツ — すべてのCMSフィールドタイプがロケールごとの値をサポート
共有される要素
- レイアウトと構造 — ページレイアウトはすべてのロケールで共有される
- スタイルとクラス — CSSスタイリングはグローバル
- インタラクションとアニメーション — トリガーとアニメーションはすべてのロケールに適用される
- カスタムコード — 埋め込みスクリプトは共有される（言語検出は自分で実装する必要がある）
SEOと多言語対応
Webflowのローカライゼーション機能は、いくつかのSEO要件を自動的に処理します。
hreflangタグ
Webflowは各ページの<head>にhreflangタグを自動生成します：
<link rel="alternate" hreflang="en" href="https://example.com/about" /> <link rel="alternate" hreflang="fr" href="https://example.com/fr/about" /> <link rel="alternate" hreflang="de" href="https://example.com/de/about" /> <link rel="alternate" hreflang="x-default" href="https://example.com/about" />
これらのタグは、検索エンジンに対して異なる地域のユーザーにどの言語バージョンを表示するかを伝えます。
サイトマップ
生成されたsitemap.xmlには各ページのすべてのロケールバリアントが含まれており、検索エンジンがすべての言語バージョンを発見してインデックスするのを支援します。
ロケールごとのメタタグ
以下のロケール固有の値を設定できます：
- ページタイトル（
<title>） - メタディスクリプション
- Open Graphタイトルとディスクリプション
- Open Graph画像
これにより、各ロケールが検索エンジンとソーシャルシェアリングに適切に最適化されたメタデータを持つことが保証されます。
制限事項
機械翻訳なし
Webflowには組み込みの機械翻訳機能がありません。すべての翻訳は、Designer上での手動入力またはWebflow APIを通じたインポートが必要です。これはクオリティを優先した意図的な設計上の選択ですが、初期の翻訳作業はすべてユーザーが担うことになります。
レイアウトの制約
すべてのロケールが同じレイアウトを共有するため、特定の言語でテキストが大幅に長くなったり短くなったりするとレイアウトの問題が生じる可能性があります。ドイツ語のテキストは英語より30〜40%長くなることが多く、中国語や日本語はよりコンパクトになる場合があります。最も長いターゲット言語でレイアウトをテストし、コンテナがオーバーフローを適切に処理できることを確認してください。
複数形や変数のサポートなし
WebflowのローカライゼーションはICU MessageFormat、複数形ルール、変数補間をサポートしていません。すべてのテキストバリアントは個別の完全な文字列である必要があります。数量やユーザーデータに依存する動的コンテンツには、カスタムJavaScriptが必要になります。
一括操作はAPIのみ
Webflow Designerには翻訳の一括インポート・エクスポート機能が組み込まれていません。何百ものページを持つ大規模サイトでは、ビジュアルエディタを通じた手動翻訳は時間がかかります。Webflow APIはプログラムによるコンテンツ管理をサポートしており、外部翻訳ツールとの統合が可能です。
外部TMSとの統合
大規模な翻訳を管理するチームにとって、WebflowをAPIを通じて翻訳管理システム（TMS）と統合することで以下が実現できます：
- エクスポート — CMS APIを通じてWebflowからソース言語コンテンツを取り出す
- 翻訳 — プロの翻訳者がTMS内で翻訳メモリ、用語集、コンテキストを活用して作業する
- インポート — APIを通じて完成した翻訳をWebflowに戻す
このワークフローは特に以下の場合に価値があります：
- 50ページ以上またはCMSアイテムを持つサイト
- プロの翻訳者や代理店と協力するチーム
- 一貫性を維持するために翻訳メモリが必要な組織
- WebflowとGUI他のプラットフォームにまたがる用語管理が必要なプロジェクト
ベストプラクティス
最も長い言語を基準にデザインする
レイアウトを作成する際は、テキストの膨張を考慮してください。英語で「Sign Up」が収まるコンテナは、ドイツ語の「Registrieren」やフランス語の「Inscription」も収容できる必要があります。固定サイズではなく、柔軟なコンテナ（flexbox、auto-height）を使用してください。
繰り返しコンテンツにはCMSを使用する
同じ翻訳テキストが複数のページに登場する場合（お客様の声、機能説明、FAQアイテムなど）、CMSコレクションに保存してください。これにより、同じテキストを各ページで翻訳するのではなく、一度翻訳すれば全箇所に反映されます。
ロケール構造を早期に計画する
既存のWebflowサイトにローカライゼーションを追加することは可能ですが、最初から計画しておく方が簡単です。構築を始める前に、URL構造、ロケールスイッチャーの配置、フォールバックの動作を検討してください。
テキストを含む画像はローカライズする
画像にテキストが含まれている場合（ヒーローバナー、インフォグラフィック、ソーシャルプルーフ）、ロケール固有のバージョンを作成してください。Webflowのロケールごとの画像差し替え機能により、これを簡単に実現できます。
よくある質問
Webflowローカライゼーションの費用は？
Webflowローカライゼーションは特定のWorkspaceプランで利用できます。含まれるロケールの数はプランのティアによって異なります。最新の詳細については、Webflowの現在の料金ページをご確認ください。
サブフォルダの代わりにサブドメインを使用できますか？
WebflowのネイティブローカライゼーションはサブフォルダベースのURL（/fr/、/de/）を使用します。サブドメインベースのローカライゼーション（fr.example.com）は、別個のWebflowプロジェクトやカスタムホスティングを使用した異なるセットアップが必要です。
WebflowローカライゼーションはWebflow Ecommerceで動作しますか？
2025年時点では、WebflowのローカライゼーションはEcommerceのサポートが限定的です。商品コンテンツはローカライズできますが、価格、チェックアウト、トランザクションメールには制約があります。Ecommerceローカライゼーションの現状については、Webflowのドキュメントをご確認ください。
右から左（RTL）言語はどのように処理しますか？
Webflowはロケール設定を通じてRTLテキストの方向をサポートしています。ユーザーがRTLロケールを閲覧する際、テキストの配置と読み方向が調整されます。ただし、完全なレイアウトのミラーリング（flexboxの方向、マージン位置）にはカスタムCSSのオーバーライドが必要になる場合があります。
