「送信」を英語にすると「Submit」、ドイツ語にすると「Absenden」——日本語で設計したボタンに合わせた幅では、他言語で文字が溢れます。日付の「2026/02/17」はアメリカでは「02/17/2026」、ヨーロッパでは「17.02.2026」——同じ数字でも、フォーマットが違えば意味が変わります。
よくある失敗パターンは「i18n（国際化）を後から対応する」ことです。日本語専用で設計されたUIに翻訳を後付けすると、テキストの長さ・文字の方向（RTL：アラビア語・ヘブライ語）・日付/通貨フォーマット・文化的なアイコンの意味——あらゆる場所で問題が噴出します。「後で対応する」は「作り直す」と同義です。
i18n対応が不十分なUIは、海外展開のたびに大規模な改修を要し、開発コストを何倍にも膨らませます。さらに、文化的に不適切なアイコン・表現・色使いは、ターゲット市場でのブランドイメージを損なうリスクがあります。
1. 原則の定義
多言語/i18n 前提のUI（Internationalization UI）とは、テキストの長さ変動・文字方向（RTL/LTR）・日付/通貨/数値フォーマット・文化的な文脈の違いを最初から設計に組み込み、後から多言語・多文化対応を追加しても壊れないUIを設計する原則。
本質は「i18nは後付けできない」ということです。国際化対応は翻訳の問題ではなく、設計の問題です。テキストが2倍の長さになっても崩れないレイアウト、RTLでも機能するナビゲーション、文化によって意味が変わるアイコンの回避——これらはすべて、設計段階から考慮しなければ後から修正できません。
2. いつ使うか（適用場面）
特に重要になるケース
- ボタン・ラベルのテキスト: 日本語は短く、ドイツ語・フィンランド語は長い傾向がある。固定幅ボタンではなく、テキストに合わせて伸縮するボタンを設計する。
- 日付・時刻・通貨の表示:
2026/02/17（日本）、02/17/2026（米国）、17.02.2026（ドイツ）——ハードコードせず、ロケール対応のフォーマット関数（Intl.DateTimeFormatなど）を使う。 - アイコンの文化的意味: 「親指を立てる👍」はアメリカでは肯定だが、中東の一部では侮辱。「フクロウ🦉」は西洋では知恵の象徴だが、インドの一部では不吉。文化横断的に安全なアイコンを選ぶ。
- RTL（右から左）言語: アラビア語・ヘブライ語はテキストが右から左に流れる。ナビゲーション・アイコンの向き・レイアウト全体がミラーリングされる必要がある。
トレードオフが起きる場面
- デザインの複雑化: テキスト長の変動に対応するため、レイアウトが複雑になる。固定幅デザインより、フレキシブルなレイアウトを優先する。
- 文化的な最適化: 完全にローカライズされたUIは、各市場で別々のデザインが必要になる場合がある。「グローバルに統一」か「ローカルに最適化」かのバランスを判断する。
3. なぜ重要か（設計判断の核）
i18nは「翻訳の問題」ではなく、「設計の問題」だ。後から対応しようとすると、必ず作り直しになる。
設計判断の基準
- 「このUIは、テキストが2倍の長さになっても崩れないか？」→ 崩れるなら、固定幅をやめてフレキシブルなレイアウトに変更する。
- 「このUIは、RTL言語（アラビア語）でも機能するか？」→ 機能しないなら、CSS論理プロパティ（
margin-inline-startなど）を使う。優先順位の考え方
- 1. テキスト長の変動対応（最優先）: ボタン・ラベル・見出しが、翻訳後に2〜3倍の長さになっても崩れないレイアウトを設計する。
- 2. 日付/通貨フォーマットのロケール対応: ハードコードされたフォーマットをロケール対応関数に置き換える。
- 3. 文化的に中立なアイコン・色の選択: 特定の文化でのみ通じるアイコン・色を避け、文化横断的に安全な表現を選ぶ。
例外条件
- 明確に単一言語・単一市場向けのプロダクト（例：日本国内専用の行政サービス）では、i18n対応の優先度を下げることができる。ただし、将来の展開可能性を考慮して、テキストのハードコードは避ける。
4. 具体の設計ルール（チェックリスト）
最低ライン（Must - これ守らないと危険）
これがないと、多言語展開のたびに大規模な改修が必要になります。
理想ライン（Better - できると強い/プロの品質）
「翻訳できる」を超えて「どの言語でも自然に使える」状態です。
5. UI例
同じ「ボタン」でも、i18n対応の有無でテキスト長の変動への耐性は大きく変わります。
改善プロセス
- 固定幅をやめる: ボタンの
width: 80pxを削除し、paddingのみで余白を確保する。テキストの長さに合わせてボタンが自動的に伸縮する。 - CSS論理プロパティを使う:
margin-left→margin-inline-start、padding-right→padding-inline-endに変更する。RTL言語で自動的にミラーリングされる。 dir属性を設定する: RTL言語のロケールでは、<html dir="rtl">または対象要素にdir="rtl"を設定する。
6. 関連リンク
- 関連リファレンス（理論）: メンタルモデル (Mental Model), 認知負荷 (Cognitive Load), 制約 (Constraints)
- 用語集（定義）: インクルーシブデザイン, アクセシビリティ
- 関連するUI原則（横）: わかる言葉で書く (Plain Language), 認知特性への配慮 (Cognitive Accessibility), マイクロコピー (Microcopy)
7. まとめ
今日から直せる一手
担当しているサービスのボタンテキストを英語に置き換えてみてください。ボタンが崩れたり、テキストが切れたりするなら、固定幅の設計になっています。今日中にwidthを削除してpaddingのみにしてください。
チームに共有するなら一言 「i18nは翻訳の問題ではなく、設計の問題だ。後から対応しようとすると、必ず作り直しになる。」
