localization-design

ローカライズ設計

言語、文字体系、文化を問わず、ロケールごとに再設計することなく機能する UI の設計を専門としています。

提供する内容

ローカライズを考慮した設計原則を適用し、コンポーネント、レイアウト、コンテンツが、崩れることなくあらゆる対象ロケールに適応できるようにします。また、色、図像、慣習に関する文化的な違いも考慮します。

テキストの拡張

ローカライズで最もよくある失敗です。英語は簡潔ですが、ほとんどの対象言語ではより長くなります。

言語	英語に対する一般的な長さの増加率
ドイツ語	+20–35%
フランス語	+15–25%
フィンランド語	+30–40%
アラビア語（翻訳後）	−20–30%（ただし、RTL で文字体系も異なります）
日本語／中国語	短くなることが多いものの、組版規則は大きく異なります
テキストの拡張を想定した設計：

• 英語の文面に合わせてコンテナのサイズを固定しないでください。高さと幅には柔軟性を持たせてください
• 他のロケールが利用可能になる前に、最悪ケースの代替としてドイツ語またはフィンランド語の翻訳を使ってレイアウトをテストしてください
• 省略記号による切り捨ては最終手段として許容できますが、ツールチップや展開機能で全文を確認できるようにしてください
• ボタン：幅を固定せず最小幅を指定してください。狭い領域で極端な場合には折り返しを許可してください
• ナビゲーションラベル：すべてのナビゲーション項目をまとめて長さ 130% の状態でテストし、メニューが崩れないことを確認してください

RTL（右から左）への対応

アラビア語、ヘブライ語、ペルシア語、ウルドゥー語は右から左に読みます。レイアウト全体を反転します。

• コンテンツの流れ：テキスト、リスト、読み進める順序を反転します
• レイアウトの反転：サイドバー、ナビゲーション、コンテンツ領域を反転し、左マージンを右マージンにします
• アイコンの反転：方向を示すアイコン（矢印、シェブロン、戻るボタン）は反転します。方向を示さないアイコン（カメラ、設定）は反転しません
• CSS 論理プロパティ：margin-left の代わりに margin-inline-start を、padding-bottom の代わりに padding-block-end を使います。これらは dir="rtl" に応じて自動的に反転します
• テキスト配置：text-align: left ではなく text-align: start を使います
• 数字：ほとんどの場合、RTL テキスト内でも数字は LTR のままです。数字の表示を反転しないでください RTL で反転しないもの：
• ロゴとブランドマーク
• 時計と時刻表示
• 数学表記
• 画像とイラスト（通常は反転しませんが、状況によります）
• 動画プレーヤーのコントロール（意見が分かれます。再生／一時停止ではなく、方向を示す要素を反転します）

非ラテン文字体系のタイポグラフィ

• アラビア語とヘブライ語：文字がつながる規則を持つ筆記体です。読みやすさを保つため、より大きな最小フォントサイズ（16px 以上）が必要です
• CJK（中国語、日本語、韓国語）：正方形の文字です。最適な行の高さや文字間隔はラテン文字と異なり、行長の基準も異なります
• デーヴァナーガリー文字（ヒンディー語）などのインド系文字体系：複雑な合字があります。適切なフォールバックを含むフォントスタックでテストしてください
• 非ラテン文字体系のスクリプトに、擬似的な太字や斜体を適用しないでください。フォントファミリーに含まれる本来のウェイトを使ってください

文化的な考慮事項

色

色の意味は文化によって大きく異なります。

色	西洋での連想	代替的な連想の例
赤	危険、エラー	幸運／繁栄（中国）、喪（南アフリカ）
白	清潔、ミニマル	喪（東アジアの多くの文化）
緑	成功、進め	不誠実（中国）、危険（中東の一部）

• 意味を伝える際に色だけに頼らないでください（これはアクセシビリティ要件でもあります）
• 重要度の高い製品やグローバル製品では、文化的なコンサルタントと色の選択をテストしてください

図像

• 手のジェスチャー（親指を立てる、OK サイン）は文化によっては侮辱的な意味を持つため、避けてください
• 郵便や公共サービスのアイコン（郵便受け、家、電話）は地域によって異なるため、抽象的な形、または広く認識される形を使ってください
• 宗教や食べ物に関する象徴は文化的な意味を強く帯びるため、必要であり、十分にテストされている場合を除いて避けてください

日付、時刻、数値の形式

• 日付形式はさまざまです：MM/DD/YYYY（米国）、DD/MM/YYYY（英国／EU）、YYYY-MM-DD（ISO）
• Intl.DateTimeFormat／同等の機能を使って、ロケールに応じた形式を適用してください
• 通貨：記号の位置、小数点記号、桁区切り記号はすべて異なります
• 住所：項目の順序、必須項目、形式は大きく異なるため、ロケールに対応した住所フォームライブラリを使ってください

デザインシステムへの影響

• すべての余白、サイズ、レイアウトには論理 CSS プロパティを使用する必要があります
• テキストコンテナーは高さと幅を柔軟に変更できる必要があります
• デザイントークン名は方向を示すものではなく、意味に基づくものにします（「left」ではなく「start」）
• コンポーネントをシステムに追加する前に、少なくとも 1 つの RTL ロケールと、テキストが大幅に長くなる 1 つのロケールでテストする必要があります
• コンポーネントのドキュメントにローカライズに関するガイダンスを記載します：「このコンポーネントはアラビア語（RTL）とドイツ語（テキストの拡張）でテスト済みです」

ベストプラクティス

• 最初からローカライズを考慮して設計します。左寄せを前提としたレイアウトに後から RTL 対応を追加するには、多大なコストがかかります
• 翻訳がまだない段階で、文字を見た目の似た拡張文字に置き換える疑似ローカライズ用テスト文字列を作成し、テキストの拡張や特殊文字の処理をテストします
• 翻訳者だけでなく、対象市場のユーザーや文化コンサルタントと連携します。翻訳が扱うのは言葉ですが、ローカライズが扱うのは意味です
• 国際化の前に、アイコンやイラストのライブラリを監査し、文化的に中立であることを確認します