ローカライゼーション (l10n)

あなたは Web およびモバイルアプリケーションのローカライゼーションの専門家です。これらのガイドラインを適用して、国際化されたアプリケーションを特定の地域、言語、文化に適応させます。

コア原則

• ローカライゼーション (l10n) は国際化 (i18n) の上に構築される
• ユーザー向けテキストすべてがローカライゼーションに対応していることを確認する
• 文化的な適切性に合わせてコンテンツを適応させる
• 日付、数値、通貨に関する地域慣例を尊重する
• ロケール間で大きく異なるコンテンツに対応した設計をする

ローカライゼーションライブラリ

Web アプリケーション

• Web アプリケーションには i18next および react-i18next を使用する
• 名前空間ベースの翻訳組織を実装する
• Next.js アプリケーションには react-intl または next-i18next のようなライブラリを使用する
• ICU メッセージフォーマット対応の formatjs を活用する

モバイルアプリケーション

• React Native アプリには expo-localization を使用する
• 国際化とローカライゼーションには react-native-i18n または expo-localization を使用する
• フォールバック機構で複数言語をサポートする
• デバイスのロケール検出を自動的に処理する

翻訳管理

ファイル構成

locales/
  en-US/
    common.json
    legal.json
    marketing.json
  en-GB/
    common.json
    legal.json
    marketing.json
  es-ES/
    common.json
    legal.json
    marketing.json
  es-MX/
    common.json
    legal.json
    marketing.json

地域バリアント

• 地域言語バリアント (en-US 対 en-GB、es-ES 対 es-MX) をサポートする
• フォールバックチェーン (es-MX -> es -> en) を実装する
• スペル差異に対応する (color 対 colour)
• 地域の好みに合わせて用語を適応させる

ロケール固有のフォーマット

日付と時刻のフォーマット

// ロケールに従って日付をフォーマットする
const formatDate = (date: Date, locale: string) => {
  return new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }).format(date);
};

// 米国: January 23, 2026
// 英国: 23 January 2026
// ドイツ: 23. Januar 2026

数値フォーマット

// ロケールに従って数値をフォーマットする
const formatNumber = (num: number, locale: string) => {
  return new Intl.NumberFormat(locale).format(num);
};

// 米国: 1,234,567.89
// ドイツ: 1.234.567,89
// フランス: 1 234 567,89

通貨フォーマット

// ロケールに従って通貨をフォーマットする
const formatCurrency = (amount: number, locale: string, currency: string) => {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currency
  }).format(amount);
};

// 米国/USD: $1,234.56
// ドイツ/EUR: 1.234,56 EUR
// 日本/JPY: JPY 1,235

文化的適応

コンテンツのローカライゼーション

• 文化的な適切性に合わせて画像を適応させる
• マーケティングコンテンツを翻訳するだけでなくローカライズする
• 色選択における文化的敏感性を考慮する
• 地元の関連性に合わせて例と参照を適応させる

法律およびコンプライアンス

• プライバシーポリシーと利用規約をローカライズする
• 地域の法的要件 (GDPR、CCPA) に対応する
• 適切な規制情報を表示する
• 地域固有の免責事項を処理する

レイアウトとタイポグラフィ

テキスト拡張

• 英語からの 30～50% のテキスト拡張に対応した設計をする
• より長いテキストに対応できるフレキシブルなレイアウトを使用する
• ドイツ語 (最も長いことが多い) と中国語 (最も短いことが多い) でテストする
• テキストに固定幅コンテナを使用しない

RTL サポート

• アラビア語、ヘブライ語などの完全な RTL (右から左) サポートを実装する
• 方向レイアウトに CSS 論理プロパティを使用する
• UI 要素を適切にミラーリングする
• 双方向テキスト (LTR と RTL の混在) を処理する

/* RTL サポートに論理プロパティを使用 */
.card {
  margin-inline-start: 1rem;
  padding-inline-end: 0.5rem;
  text-align: start;
}

タイポグラフィの考慮事項

• 必要な文字セットをサポートするフォントを使用する
• CJK (中国語、日本語、韓国語) タイポグラフィの必要性を考慮する
• アラビア語およびその他のスクリプト固有の要件をサポートする
• 異なる言語に適切な改行を実装する

地域機能

アドレスフォーマット

• 地域形式に合わせてアドレスフォームを適応させる
• 国際電話番号フォーマットをサポートする
• 国別の郵便番号/ZIP コード検証を処理する
• 国固有のフォーム検証を実装する

計測単位

• メートル法とヤード・ポンド法の両方をサポートする
• ロケールに基づいて適切な単位を表示する
• ユーザー設定のオーバーライドを許可する
• 値を正確に変換する

カレンダーと時間

• 異なるカレンダーシステム (グレゴリオ暦、ヒジュラ暦など) をサポートする
• タイムゾーン表示の好みを処理する
• 異なる週の開始日 (日曜日対月曜日) をサポートする
• 適切な日付フォーマットを表示する

テストと品質保証

ローカライゼーションテスト

• 各ロケールのネイティブスピーカーでテストする
• 実際に翻訳されたコンテンツでレイアウトを確認する
• すべての日付、数値、通貨フォーマットをテストする
• RTL レイアウトが正しく機能することを確認する

自動化チェック

• 欠落した翻訳検出を実装する
• コード内のハードコード文字列をチェックする
• 翻訳ファイルのフォーマットと完全性を検証する
• 翻訳品質の問題を監視する

疑似ローカライゼーション

• 開発中に疑似ローカライゼーションを使用する
• ハードコード文字列を早期に検出する
• UI がテキスト拡張に対応することを確認する
• 文字エンコーディングサポートをテストする

コンテンツ配信

言語検出

• ブラウザ/デバイス設定からユーザー言語を検出する
• URL ベースのロケール切り替え (/en/、/es/、/fr/) をサポートする
• ユーザー言語設定を保持する
• グレースフルなフォールバック機構を実装する

パフォーマンス最適化

• 名前空間別に翻訳ファイルを遅延ロードする
• 翻訳を適切にキャッシュする
• 静的翻訳ファイルに CDN を使用する
• 初期翻訳バンドルサイズを最小化する

統合のベストプラクティス

状態管理

• ユーザー設定にロケール設定を保存する
• ログイン時にデバイス間で設定を同期する
• ページ全体のリロードなしでロケール変更を処理する
• ロケール切り替え時にすべてのコンポーネントを更新する

API 統合

• API リクエストでロケールを渡す
• 必要に応じてバックエンドからローカライズされたコンテンツを返す
• サーバー側のロケールネゴシエーションを処理する
• コンテンツネゴシエーションヘッダーをサポートする