coastdigitalgroup/coastai-skills

国際化デザインシステム

目的

国際化（i18n）デザインシステムスキルは、グローバルな視聴者に向けたインターフェースを設計するための方法論を提供します。単なる翻訳を超えて、異なる言語や文化がもたらす空間的、タイポグラフィ的、視覚的な影響に対応します。このシステムは、レイアウトがさまざまなテキスト長に柔軟に対応でき、双方向（右から左）レイアウトが正しくミラーリングされ、視覚的な手がかりが文化的に適切であることを保証します。

ユースケース

• 複数地域向けのグローバルSaaSプラットフォームやEコマースサイトの設計。
• 既存の英語のみのインターフェースをRTL言語（アラビア語、ヘブライ語、ペルシア語）に対応させる。
• 非ラテン文字（CJK、キリル文字、デーバナーガリー）のタイポグラフィ標準を確立する。
• UIコンポーネントの「拡張対応性」（ドイツ語やフィンランド語でのテキスト伸長への対応）を監査する。
• 文化的に特化したバイアスや方向性バイアスを避けたアイコンセットを作成する。

使用すべきでない場合

• 単一地域/単一言語のサイト： 将来の拡張計画がなく、ローカルな慣習が厳密にわかっている場合。
• 純粋にビジュアルなストーリーテリングサイト： 固定された、リフローしない空間的関係に依存する芸術的表現である場合。
• コンテンツのみの翻訳： UIやレイアウトの動作を変更せずに、単にコピーを翻訳するだけの場合。

入力

1. 対象言語リスト： サポートが必要な言語と文字はどれか？
2. 読み取り方向： 言語はLTR（左から右）かRTL（右から左）か？
3. タイポグラフィアセット： ブランドのトーンを様々な文字体系で維持するローカライズされたフォントスタック。
4. 文化的コンテキスト： 色、記号、データ形式（日付、通貨）に関する地域固有の慣習。
5. レイアウトブレークポイント： responsive-grid-systemから。

出力

1. 双方向（RTL）ミラーリング仕様： どの要素が反転し、どの要素が固定されたままか（例：プログレスバー vs メディアコントロール）のマップ。
2. タイポグラフィスケールマトリックス： 異なる文字ファミリーに合わせて調整されたフォントサイズと行間。
3. 拡張ブループリント： +/- 40%のテキスト長変動に対応するように設計されたUIパターン。
4. アイコン表現ロジック： ミラーリングされるアイコンとされないアイコンのガイドライン。
5. ローカライズデザイントークン： デザイン仕様で定義された論理プロパティ（例：padding-inline-start）。

ワークフロー

1. テキスト拡張に対応した設計

ラベルが常に短いままであると想定しないでください。ドイツ語やイタリア語のような言語は、英語より30-50%長くなることがあります。

• フレキシブルコンテナ： 固定幅のボタンやカードを避け、min-width や fit-content を使用します。
• テキストの折り返し： UI要素（タブやメニュー項目など）が適切に折り返されるか、または「オーバーフロー」メニューに移行できるようにします。
• 動的センタリング： テキストが拡張された場合、隣接する要素と重ならないようにします。

2. RTLミラーリングロジックの実装

右から左の言語では、ページの「メンタルモデル」が反転します：

• レイアウトミラーリング： サイドバーは左から右に移動します。ロゴは左上から右上に移動します。
• 論理プロパティ： 「左」と「右」ではなく、「先頭」と「末尾」を使用してデザインに注釈を付けます。
• ナビゲーションフロー： LTRの「戻る」ボタン（左を指す）は、RTLでは「前の状態に戻る」ことを示すために右を指す必要があります。

3. タイポグラフィと垂直リズムのローカライズ

非ラテン文字には、異なる高さ、密度、可読性の要件があります：

• CJK（中国語、日本語、韓国語）： 文字の複雑さのため、少し大きめのベースサイズとより広い行間（リーディング）が必要です。
• アラビア語： 高いアセンダーと深いディセンダーが特徴です。行間の「衝突」を防ぐために、垂直方向のスペーシングを増やします。
• フォールバックスタック： プライマリブランドフォントのウェイトとxハイトにできるだけ近いシステムフォントのフォールバックを定義します。

4. アイコンの方向性の監査

RTLですべてが反転するわけではありません：

• ミラーリング： 方向性のあるアイコン（矢印、飛行機、自転車）、プログレスバー、「前/次」の動きを表すアイコン。
• ミラーリングしない： 時計回り/反時計回りのアイコン（時計、リロード）、メディア再生コントロール（再生、一時停止、シーク）、および「チェックマーク」（普遍的なもの）。
• 数字： ほとんどのRTL地域では西洋アラビア数字（1、2、3）を使用しており、これらはRTLテキスト内でもLTRで読み取られます。

5. データフォーマット標準の確立

• 日付と時刻： DD/MM/YYYY と MM/DD/YYYY を明確に定義して混乱を避けます。
• 通貨： 記号が金額の前か後かを定義します（例：$10 vs 10 €）。
• カレンダー： 一部の地域では週の開始日が異なります（月曜日 vs 日曜日）。

決定ルール

• ミラーリングルール： UI要素が「方向」や「時間」（前方に移動する）を表す場合、RTLでミラーリングする必要があります。物理的なオブジェクト（カメラや時計など）を表す場合、通常は固定されたままです。
• 「35%バッファ」ルール： 英語のデザインフェーズでは、拡張に対応するためにボタンやラベルに常に35%の空きスペースを残します。
• 文字固有のサイジング： 文字が非常に複雑な場合（例：デーバナーガリー）、可読性のためにラテン文字相当よりもフォントサイズを10-15%大きくします。
• 文化的配慮： 西洋中心のアイコン（例えば、多くの文化で不適切な貯蓄のための貯金箱）を避けます。

制約

• アクセシビリティ： テキスト拡張によってインタラクティブ要素が隠れたり、水平オーバーフローが発生したりしてはいけません。すべてのローカライズバージョンでコントラスト比を維持する必要があります。
• レスポンシブ性： 方向を切り替えてもレイアウトが安定している必要があります。仕様では padding-inline と margin-inline を使用します。
• 階層： 読み取り方向に関係なく、プライマリCTAが最も目立つ要素であり続ける必要があります。

よくある失敗パターン

• 「拡張破綻」： ハードコードされた幅により、翻訳されたテキストが切り取られたり重なったりする。
• 「怠惰なミラーリング」： ミラーリングすべきでないアイコン（「再生」ボタンや時計など）をミラーリングし、ユーザーを混乱させる。
• 「英語優先」の罠： 英語でタイトでミニマルなUIを設計した結果、長い単語が多い言語では完全に使用できなくなる。
• フォールバックの欠如： 非ラテン文字のフォントを指定しないことで、「豆腐」（文字化けボックス）が発生する。
• 不整合な配置： ミラーリングされたレイアウトとミラーリングされていないテキスト配置を混在させ、ギザギザで洗練されていない印象を与える。

検証基準

• RTLビューポートでレイアウトが正常にミラーリングされている（サイドバー/ロゴの入れ替え）。
• UIコンポーネントが40%のテキスト拡張を破綻や重なりなく処理できる。
• タイポグラフィスケールが文字の複雑さに応じて調整されている（例：アラビア語/CJKで行間が増加している）。
• アイコン表現が「ミラーリング vs 固定」のロジックに従っている。
• デザインが絶対的な（左/右）ではなく、論理プロパティ（先頭/末尾）を使用している。
• 日付、通貨、数値の形式が正しくローカライズされている。
• すべての対象文字に対してフォールバックフォントスタックが定義されている。