アプリやウェブサイトを多言語対応にする方法

アプリを多言語対応にするには、画面に表示されるすべての文言を言語ごとの翻訳ファイルに移し、i18nライブラリで読み込んで、選択内容を記憶する言語切り替えを追加します。検索で見つけてほしい公開ページは、/fr/ のように言語ごとに別のURLを用意し、hreflangタグで各バージョンを結びつけます。そのうえで、日付、数値、通貨、一部の言語で長くなる文章、右から左に読む文字体系、データベースに保存されたコンテンツなど、見落とされがちな部分にも対応します。

よく出てくる用語

• 国際化（i18n）：どの言語にも対応できるようコードを準備することです。ハードコードされた文字列をなくし、地域に応じた書式を使い、柔軟なレイアウトにします。「18」は、先頭の i と末尾の n の間にある文字数（18文字）に由来します。
• 地域化（l10n）：特定の言語や市場に合わせてアプリを調整することです。主に翻訳を指しますが、通貨、画像、法的文書を調整することもあります。
• ロケール：言語と、必要に応じて地域の組み合わせです。en-GB や pt-BR のように表します。

国際化は一度だけ行えば、新しい言語を追加するときの作業は主に翻訳になります。

方法とトレードオフ

ほとんどのアプリでは、翻訳ファイルを使った標準的なi18nライブラリが適切な土台になります。必要であれば機械翻訳やAI翻訳で下書きを作り、顧客が最もよく目にする部分をネイティブの話者が確認してください。

多言語アプリの構成要素

翻訳ファイル

<h1>おかえりなさい</h1> と直接書く代わりに、コードは t('dashboard.welcome') のように書き、各ロケールのファイルに文言を入れておきます。

{
  "dashboard": {
    "welcome": "Welcome back, {{name}}",
    "items_one": "{{count}} item",
    "items_other": "{{count}} items"
  }
}

変数はプレースホルダーで扱い、文の断片を連結しないでください。語順は言語によって異なるためです。また、ライブラリの複数形ルールを使ってください。英語には単数形と複数形の2つの形がありますが、言語によっては3つ、4つ以上の形があります。

日付、数値、金額の書式

これらは手作業で整形しないでください。ブラウザに組み込まれている Intl APIは、どのロケールでも適切に整形してくれます。例えば 1,234.5 は英語では 1.234,5 とドイツ語では表記され、日付は日→月の順と月→日の順が切り替わり、通貨記号の位置も変わります。日付はUTCで保存し、金額は通貨コードとともに数値として保存して、表示するときだけ整形してください。

伸縮するレイアウト

翻訳後の文章は英語より長くなることがよくあります。特にドイツ語やフィンランド語の単語は長くなりがちです。幅が固定されたボタンや、途中で切れるラベルは避け、最も長い言語でテストしてください。

右から左に読む言語

アラビア語、ヘブライ語、ペルシア語、ウルドゥー語は右から左に読みます。これらのロケールでは、ページに dir="rtl" を設定し、CSSの論理プロパティを使ってください。例えば margin-left の代わりに margin-inline-start を使い、Tailwindでは ml-4 の代わりに ms-4 を使います。そうすると、レイアウトが自動的に左右反転します。矢印など、方向を示すアイコンも反転が必要です。

言語切り替えと言語の検出

言語切り替えはすべてのページに表示し、旗ではなく各言語の母語での名前（「Deutsch」「Français」「العربية」など）でラベルを付けてください。旗は国を表すもので、言語を表すものではないためです。初回訪問時にブラウザの優先言語を検出して、対応するバージョンを提案するのは構いませんが、訪問者が明示的に選んだ言語を優先し、その選択を記憶してください。

URLとSEO

検索結果に出したいページには、言語ごとに別のURLが必要です。2026年9月時点のGoogleのガイダンスによると、多言語サイトについては次のとおりです。

• 言語ごとに別のURL：サブディレクトリ（example.com/fr/）が最も簡単です。サブドメインや国別ドメインも使えます。URLパラメーター（?lang=fr）は推奨されません。
• Cookieやブラウザの設定だけで言語を切り替えない：Googleのクローラーは他のバージョンを見られない可能性があります。
• 言語による自動リダイレクトをしない：代わりにバージョン同士をリンクしてください。
• hreflangを使う：どのページが互いの翻訳かをGoogleに伝えます。各バージョンは自分自身とほかのすべてのバージョンを列挙する必要があります。そうしないと、その指定は無視されるおそれがあります。フォールバック用に x-default を追加してください。
• Googleはページの言語を、lang やhreflangではなく、画面に見えている内容から判断します。メニューだけでなく、ページ全体を翻訳してください。

それでも、各バージョンには <html lang="fr"> を設定してください。スクリーンリーダーはこれを使って正しい発音を選びます。これはアクセシビリティの要件でもあります。

ログイン後のアプリ画面はインデックスされる必要がないため、それらの画面では、言語をユーザーのプロフィールに保存すれば十分です。公開ページをそもそもクロールしてもらう方法については、AIで作ったウェブサイトのSEOを参照してください。

データベースのコンテンツ

UIの文言はファイルに、商品名、ブログ記事、カテゴリーなどのコンテンツはデータベースに保存します。よく使われるパターンは次の2つです。

• 翻訳用テーブル：product_translations (product_id, locale, name, description)。整理しやすく、多くの言語に拡張できます。
• フィールドごとのJSON列：name: {"en": "...", "fr": "..."}。言語が少ない場合はこちらの方が簡単です。

翻訳が存在しない場合の扱いも決めておきましょう。通常は、空白を表示するのではなく、既定の言語にフォールバックします。

メールと通知

ユーザーの言語を保存し、メール、通知、PDFにも使ってください。アプリは翻訳したのに、ウェルカムメールだけが英語のまま届いてしまうことはよくあります。

効果のあるプロンプト

react-i18next を使って国際化を追加してください。ユーザーに見えるすべての文字列を、名前空間付きのキーで locales/en.json に移動し、文字列の連結ではなく補間と複数形ルールを使ってください。日付、数値、価格は、現在のロケールを使って Intl で整形してください。まだ文言は変更しないでください。

フランス語とドイツ語を追加してください。公開のマーケティングページには /fr/ と /de/ のURLプレフィックスを付け、ルートは英語のままにしてください。すべてのページに hreflang のリンクを設定し（自己参照と x-default を含みます）、ページごとに html lang を設定してください。各言語の母語での名前を表示する言語切り替えを追加してください。ログイン後のページでは、言語をユーザーのプロフィールに保存してください。

アラビア語を右から左に読む形式に対応させてください。アラビア語では dir="rtl" を設定し、左右の余白やパディングを論理プロパティに置き換え、方向を示すアイコンを反転させてください。フォームと表が正しく読めるかも確認してください。

ステップごとの進め方

1. 最初に追加する言語を決めます。訪問者や顧客がどこにいるかという、実際の需要に基づいて選びます。
2. コードを国際化します：文字列をファイルに移し、複数形と Intl による書式を追加します。まずは英語のみで出荷し、何も変わっていないことを確認してください。
3. 公開ページのURL構造を決め、hreflangを追加します。
4. 翻訳します：機械翻訳やAI翻訳で下書きを作り、ネイティブの話者がレビューします。翻訳者には文脈を伝えてください。例えば「Book」は、ある画面では名詞、別の画面では動詞になります。
5. データベースのコンテンツを翻訳し、フォールバックを設定します。
6. 残りも地域化します：メール、エラーメッセージ、法的ページ、文字が含まれる画像などです。
7. 各言語を、スマートフォンの幅でテストします。必要に応じて右から左の表示も確認してください。
8. 仕組みを作ります。新機能が、数か月後ではなく、翻訳とともに出荷されるようにするためです。

よくある間違い

• 文を連結する（"You have " + n + " messages"）。これは他の言語で壊れます。
• コンポーネント、エラーメッセージ、入力検証の文字列にハードコードされた文言が残っている。
• 日付や価格を手作業で整形する。
• 言語を表すのに旗を使う、また、間違ったバージョンに利用者を閉じ込める自動リダイレクトを使う。
• インデックスさせたいページで、すべての言語が同じURLを使う。
• hreflangの相互リンクが欠けている。そのためGoogleが指定を無視する。
• UIだけを翻訳し、コンテンツは翻訳しない、またはその逆。
• 料金、法的ページ、決済ページを、レビューしていない機械翻訳のまま公開する。

多言語対応のチェックリスト

• ユーザーに見える文字列がハードコードされておらず、複数形ルールとプレースホルダーを使っている
• 日付、数値、通貨を Intl で整形している
• すべてのページに、各言語の母語での名前を表示する言語切り替えがあり、選択が記憶される
• 公開ページは言語ごとに別のURLを使い、強制的なリダイレクトはしない
• すべてのバージョンに、自分自身と x-default を含む hreflang を設定している
• ページごとに html lang（必要な場合は dir="rtl"）を設定している
• データベースのコンテンツが翻訳され、適切なフォールバックがある
• メールと通知がユーザーの言語で送られる
• 顧客に見える文章を、ネイティブの話者がレビューしている

Mythexでの多言語対応

Mythexでは、言語の追加はチャットで依頼して行います。専用の翻訳パネルはありません。そのため、上記のプロンプトはそのまま使えます。最初に国際化の手順を行い、言語を追加する前にプレビューで確認してください。これは大きなリファクタリングであり、問題が起きたときに戻れるよう、チャットのチェックポイントを残しておくと安心です（チャットとチェックポイント）。AIや翻訳APIでコンテンツを自動翻訳させたい場合は、ご自身のAPIキーを使い、プロジェクトの設定に保存します（環境変数とシークレット）。費用についてはLLM APIの使い方で説明しています。新しい言語の準備ができたら、もう一度公開してください。

よくある質問