使い方ガイドへスキップ
Localization Design作者 Owl-Listener

Localization Design スキル。

翻訳された文字列だけでなく、言語による違いにも対応できるインターフェースを準備します。

  • デザインシステム
  • ローカライズ
ソースレビュー · Localization DesignSKILL.md
タスク デザインシステム 成果物 • 拡張、切り詰め、柔軟なサイズ調整に関するコンポーネント監査。 • ミラーリングする要素と維持する要素を区別したRTL仕様。 • ロケール形式と文字体系テストのチェックリスト。 開始前に 対象ロケールのテキスト、フォント、適切な言語・文化レビューが必要です。自動ローカライズプラットフォームは付属しません。
編集者による要約 · ソース確認日 2026-10-07 · 生成された例ではありません

01 機能概要

1つの言語にとどまらないインターフェースを設計する

柔軟なテキストレイアウト、文字方向、非ラテン文字、ロケールの慣習を扱う、ローカライズを意識したUIガイドです。

ソースに基づくワークフロー実行ベンチマークではありません

作業の進め方

Localization Designは、レイアウトが元の言語を離れたときに崩れる点を扱います。ラベルが長くなる、書字方向が異なる、文字体系ごとのタイポグラフィがある、日付・数値・通貨・住所の形式が地域で異なる、といった点です。柔軟なコンテナ、論理的なCSSプロパティ、長いテキストとRTLロケールの両方でのテストを推奨しています。

また、翻訳と文化面のレビューを区別しています。技術的にミラーリングされたレイアウトでも、不適切なシンボルや前提が使われている場合があります。ソースには例示的な文化的一般化や拡張率の範囲が含まれますが、これらは現地でのレビューを促すためのものであり、ある国のすべてのユーザーに当てはまる普遍的なルールではありません。

想定される成果物

  • 拡張、切り詰め、柔軟なサイズ調整に関するコンポーネント監査。
  • ミラーリングする要素と維持する要素を区別したRTL仕様。
  • ロケール形式と文字体系テストのチェックリスト。
サンプルブリーフを見る

ブリーフからレビューまで

  1. 01
    テキスト拡張をテストする

    最終的な翻訳がそろう前に、拡張文字列や疑似ローカライズ文字列を使って、固定幅や切れたナビゲーションラベルを見つけます。

  2. 02
    方向に関する挙動を整理する

    物理的なleft/rightを前提にした指定を、start/endのセマンティクスに置き換えます。ミラーリングするアイコンと、マーク、数字、メディアのように変更しないものを決めます。

  3. 03
    ロケールでの意味を確認する

    フォント、形式、住所構造、文化的に配慮が必要な画像を、適切な言語・市場の専門知識を持つ人と確認します。

02 利用場面

使う場面

対象ロケールのテキスト、フォント、適切な言語・文化レビューが必要です。自動ローカライズプラットフォームは付属しません。

向いているケース

  • 多言語ローンチの前コンポーネントをまだ一貫して変更できる段階で、レイアウトの問題を見つけるのに役立ちます。
  • デザインシステムの準備翻訳済みの各画面を個別に修正するのではなく、コンポーネントのガイダンスにローカライズ要件を加えます。

確認すべき制限

  • 翻訳サービスではありません最終的なローカライズ文言を作成したり、保証したりするものではありません。
  • 文化面の認証ではありません広範な例は、特定の市場や対象ユーザーに詳しい人によるレビューの代わりにはなりません。

用意する入力

  • 対象ロケール必要な文字体系、書字方向、書式の慣習を一覧にします。
  • コンポーネントのサンプルナビゲーション、フォーム、カード、ボタン、高密度なデータビューを用意します。
  • フォントとコンテンツ実際の文字列または疑似ローカライズ文字列と、承認済みのフォントフォールバックを含めます。

03 重要な判断

重要な判断

  1. 選択的にミラーリングする

    方向を示す矢印やレイアウトの流れは反転する場合がありますが、ブランドマークや数式表記を無条件に反転すべきではありません。

  2. システム全体をローカライズする

    セマンティックなトークン名と柔軟なコンポーネントサイズにより、後続のロケールで個別の上書きに頼る度合いを減らせます。

04 依頼例

絞り込んだブリーフを試す

以下のサンプルブリーフはテストされていません。使用前にスキルのセットアップを確認してください。

セットアップを確認する

リポジトリに記載されているインストール方法を使用し、参照されている関連ファイルを保持してください。この項目は実行可能なアプリケーションではなく、焦点を絞ったデザイン手法を説明するものです。

アップストリームのソースファイル
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/localization-design/SKILL.md

対象ロケールのテキスト、フォント、適切な言語・文化レビューが必要です。自動ローカライズプラットフォームは付属しません。

まず1つの成果物から始める

スキルを実行する前に、このブリーフの範囲、素材、制約を調整してください。

サンプルブリーフ
localization-designを使って、アカウント設定のドイツ語版とアラビア語版を監査してください。ラベルの拡張、論理的な余白、方向性のあるアイコン、混在方向のアカウント番号、日付形式を確認します。コンポーネント単位の変更点とテストマトリクスを作成してください。文化的な前提は、国のステレオタイプをルールとして扱わず、人によるレビュー対象として指摘してください。

結果を確認する

実際の出力を、以下の観察可能な基準で確認します。

  • 長いラベルが固定幅で切れることなく読める。
  • RTLでの挙動が、方向性のあるコントロールと方向性のないアセットを区別している。
  • 日付と数値が、文字列の並べ替えではなくロケールに対応した書式で表示される。

OpenDesignは、コーディングエージェント向けのローカルなデザインワークスペースを提供します。この掲載は、スキルが同梱されていること、または外部ツール、認証情報、ソフトウェア依存関係が含まれていることを意味しません。

05 ソースとライセンス

ソースとライセンス

このページは、下記にリンクされた固定済みのソースリビジョンを説明しています。アップストリームの挙動や要件は変更される可能性があります。

ソースの所有者
Owl-Listener
ライセンス
MIT
確認したスナップショット
2026-10-07 · 9a6930cf84a8
編集者によるソース要約
柔軟なテキストレイアウト、文字方向、非ラテン文字、ロケールの慣習を扱う、ローカライズを意識したUIガイドです。

リンク先のソースに基づく、OpenDesignによる独自の要約です。リポジトリのスター数は日付付きの人気の指標であり、スキルの利用状況や品質スコアではありません。

06 開始前の質問

開始前の質問

RTLはすべての画像を反転するという意味ですか?

いいえ。ソースでは、ロゴ、数字、多くの画像などを例外として挙げています。ミラーリングする前に意味を確認してください。

疑似ローカライズは翻訳QAの代わりになりますか?

いいえ。実際の翻訳が届く前にレイアウトや文字処理の弱点を見つけることはできますが、自然さや文化的な適合性は評価できません。

拡張率は正確な値として扱うべきですか?

いいえ。大まかなストレステスト用の目安です。実際のテキストとレイアウトでのテストのほうが信頼できます。

OpenDesign

次のデザイン反復のための余地をつくる。

ブリーフ、ソース素材、デザイン作業をローカルのワークスペースにまとめて管理できます。ワークフローに追加する前に、スキル自体のセットアップを確認してください。

アップストリームのソースファイル
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/localization-design/SKILL.md