【LWR × 多言語】世界へ発信！サイトを「多言語対応」にするための手順を徹底解説！【完全ガイド】

Experience CloudのLWR (Lightning Web Runtime) サイトは、高速で洗練されたWebサイトを構築するための基盤です。このLWRサイトには、世界中の訪問者に向けて、最大40言語でコンテンツを提供する機能が標準で備わっています。

この記事では、LWRサイトを多言語化するためのステップと、開発者が特に注意すべきポイントを詳しく解説します。

多言語サイトの基本設定と管理手順

サイトの多言語化に関わる設定は、すべてエクスペリエンスビルダーの [設定] > [言語] パネルで行います。

デフォルト言語の設定 (最重要)

サイトを作成した直後、デフォルト言語が設定されています。メインの言語が別である場合は、サイト構築の初期段階で必ず変更してください。

1. エクスペリエンスビルダーの [設定] (歯車アイコン) > [言語] に移動します。
2. 「デフォルトサイト言語」の項目で、希望の言語を選択し、保存します。

新しい言語を追加する

サイトでサポートしたい言語を追加します。最大40言語まで可能です。

1. [設定] (歯車アイコン) > [言語] に移動します。
2. 「サイト言語」セクションの [言語を編集] ボタンをクリックします。
3. 追加したい言語を選択して保存します。
   • ポイント： 拡張LWRサイトの場合、ここで選択できる言語は、あなたのSalesforce組織で有効化されている言語に限定されます。
4. 「言語の表示ラベル」を書き換えて、その言語を使う訪問者が選びやすい選択肢名を作ります。

言語を削除する

不要になった言語や、対応を止める言語は簡単に削除できます。

1. [設定] (歯車アイコン) > [言語] に移動します。
2. 「サイト言語」リストから、削除したい言語の行にある […] > [サイト言語を削除] をクリックします。

ユーザーインターフェースの設定

訪問者が言語を自由に切り替えられるように、サイトに機能を追加します。

言語セレクターコンポーネントの配置

サイトの訪問者が言語を選択するためのドロップダウンメニューを提供する標準コンポーネントです。

1. エクスペリエンスビルダーの [コンポーネント] パネルから、「言語セレクター」を見つけます。
2. ヘッダーやフッターなど、すべてのページでアクセスしやすい場所にドラッグ＆ドロップして配置します。
3. 訪問者が言語を選択すると、サイトのURLに言語コードが追加され、表示言語が切り替わります（例: https://.../en-US）。

ブラウザ設定に基づく自動言語検出

サイトを公開すると、自動言語検出機能が有効になります。

• サイト訪問者がアクセスした際、ブラウザの設定言語とサイトの翻訳言語が一致すれば、自動的にその言語バージョンのサイトが表示されます。

コンテンツ翻訳の適用（手動 vs. 一括）

言語を追加した後、実際にコンテンツを翻訳内容に置き換える手順です。

エクスペリエンスビルダーでの直接編集 (手動)

翻訳対象のテキストを、ビルダー上で直接入力・上書きしていく方法です。

1. エクスペリエンスビルダー上部のドロップダウンメニューで、翻訳したい言語に切り替えます。
2. サイト上の標準コンポーネント（リッチコンテンツエディタ、テキストブロックなど）や、カスタムLWCの翻訳可能プロパティを開きます。
3. その言語での翻訳テキストを直接入力し、保存します。

翻訳ファイルを使った一括処理 (エクスポート/インポート)

大量のコンテンツを外部の翻訳ベンダーなどに依頼する場合に最適な方法です。

📤 翻訳コンテンツのエクスポート

1. [設定] (歯車アイコン) > [言語] に移動します。
2. 「翻訳用にコンテンツをエクスポート」セクションで、[エクスポート内容] ボタンをクリックします。
3. エクスポートする言語を選んで [エクスポート] ボタンをクリックします。
4. ダウンロードリンクURLを含んだメールが届きます。
5. エクスポートされたファイル（.xlf形式）には、サイト内の翻訳可能なすべてのテキスト（ページプロパティ、コンポーネントプロパティなど）が含まれます。このファイルを翻訳チームに渡します。
   • <source>...</source> 翻訳元となる言語の文字列
   • <target>...</target> 翻訳先となる言語の文字列：ダウンロード時に値があれば翻訳済み、値がなければ翻訳対象

📥 翻訳コンテンツのインポート

翻訳チームから翻訳済みの .xlf ファイルを受け取った後、以下の手順でサイトに適用します。

1. [設定] (歯車アイコン) > [言語] に移動します。
2. 「翻訳済みコンテンツのインポート」セクションで、[ファイルをアップロード] ボタンをクリックします。
3. 翻訳済みの .xlf ファイルを選択してアップロードします。
4. インポートが完了すると、該当する言語のサイトに翻訳内容が反映されます。

開発者向け：カスタムLWCの多言語対応

自作のLightning Web Component (LWC) のプロパティを翻訳対象に含めるには、設定ファイルに属性を追加する必要があります。

js-meta.xml の設定

LWCのメタデータファイル js-meta.xml の中で、翻訳を許可したいプロパティに translatable="true" 属性を追加します。

<targetConfigs>
    <targetConfig targets="lightningCommunity__Default">
        <property type="String" name="greetingText" label="挨拶文" translatable="true"/>
        
        <property type="String" name="recordId" default="{!Route.recordId}"/> 
    </targetConfig>
</targetConfigs>

翻訳対象の制限

以下のプロパティは translatable="true" に設定できません。

• データソース属性（datasource）を持つプロパティ
• 動的な値（{!Route.recordId} など）を含むプロパティ

サイト運営上の重要な注意点：URL競合の回避

多言語化を有効にすると、翻訳版サイトのURLは言語コード（例：/en-US、/de）が付与されます。

例：https://[サイトドメイン]/de （ドイツ語サイトのトップ）

この言語コードが、サイト内の既存のページURLや他のサイトのURLパスと重複すると、訪問者が意図しないページに誘導されてしまう「URL競合」が発生します。

シナリオ	発生するURL競合	競合時の優先順位	必須の対策
サイト内ページ	サイト内に /de という名前のページがある場合。	翻訳版サイトのURLが優先。ページは表示されない。	ページの名前を言語コードと重複しないように変更する。
他のサイトパス	同じドメインで /de のパスを持つ別のサイトがある場合。	他のサイトのURLが優先。翻訳サイトは表示されない。	他のサイトのパスを言語コードと重複しないように変更する。

推奨事項： サイトのページURLや、ドメイン下の他のサイトパスを設定する際は、ISO 639-1で定義されている言語コード（en-US, ja, de など） と重複しない名前を選ぶように徹底してください。

まとめ：グローバルなサイト構築への第一歩を踏み出しましょう

本記事では、Experience CloudのLWRサイトにおける多言語化設定について、基本手順から開発者向けのカスタム実装、そして運用上の重要な注意点までを解説しました。

LWRサイトの多言語対応は、単に「言葉を置き換える」だけの機能ではありません。訪問者の母国語に合わせて最適なユーザー体験を提供し、ビジネスの対象を世界へと広げるための強力な基盤です。

Salesforceの標準機能を活用すれば、コーディングなしで多くの設定が可能ですが、記事内でも強調した「URL設計」や「デフォルト言語の選定」といった初期設計は、サイトの安定稼働を左右する非常に重要なポイントです。特にURLの競合は後からの修正が難しいため、設計段階での十分な検討が推奨されます。

また、開発者の方にとっては、カスタムLWCの translatable 属性を活用することで、標準コンポーネントだけでは実現できない、柔軟で細やかな多言語UIを構築できる点が大きな魅力です。標準機能とカスタム開発を適切に組み合わせることで、メンテナンス性が高く、拡張性のあるサイトを構築できるでしょう。

最初は設定項目が多く感じるかもしれませんが、一つひとつの手順は論理的でシンプルです。まずはSandboxなどのテスト環境で言語を追加し、実際に翻訳ファイルをエクスポートしてみることから始めてみてはいかがでしょうか。

この記事が、皆さまのSalesforceサイト構築の一助となり、世界中のユーザーに素晴らしい体験を届けるきっかけとなれば幸いです。

参考URL

Create a Multilingual LWR Site