ドキュメント

あらゆる市場向けのデザイン

各市場がテキスト、数字、日付、通貨、並べ替え、氏名、住所、単位、入力形式、レイアウトに求める要件、それらを正しく扱うためのコードの書き方、そして誤った記述方法を指摘するグローバリゼーション検査の判定結果。

機能があらゆる言語で正しく動作し、読者の慣習に沿って表示される場合、その機能は世界向けに準備完了です。このページはMicrosoftのガイドラインに従っています。国際化チェックリスト:各セクションでは市場ごとの違い、正しいコードの書き方、およびグローバリゼーション検査誤った記述方法を指摘するコード。

ほとんどの場合、ルールは一つだけです:読者のロケールに従わせること。ブラウザのIntlAPI、フレームワークのフォーマッター、および背後にあるデータが文化各市場の慣習を把握しており、特定の市場の設定をハードコーディングしたコードは適切ではありません。

テキストと文

ユーザーが読むすべてのテキストはソースカタログ内のキーの下に格納され、プロジェクトの翻訳機能を通じて表示されます。これにはラベル、見出し、ボタン、メッセージ、エラーメッセージ、プレースホルダー、altテキストおよびARIAラベルが含まれます。コード:hardcoded_text。

一文は一つのメッセージです。言語によって単語の順序が異なるため、断片を組み合わせて作成した文は翻訳できません。値はプレースホルダーとして渡し、数は複数形として指定します。コード:concatenated_text。

// Not world-ready: English word order and English plurals
'You have ' + count + ' new ' + (count === 1 ? 'message' : 'messages');

// World-ready: one ICU message
t('inbox.new', { count });
// "inbox.new": "{count, plural, one {You have # new message} other {You have # new messages}}"

言語によって複数形のパターンが異なります:英語は2種類、アラビア語は6種類、日本語は1種類です。ソースメッセージにはICU複数形を使用し、エンジンが各言語に必要な形を追加します。

数字

市場によって同じ数字の表記が異なります:アメリカでは1,234.5、ドイツでは1.234,5、スウェーデンやフランスでは1 234,5、一部のアラビア語圏では別の桁区切り記号が使われます。読者のロケールに合わせてフォーマットしてください。コード:locale_number。

new Intl.NumberFormat(locale).format(1234.5);
new Intl.NumberFormat(locale, { style: 'percent' }).format(0.25);

ユーザーが入力した数字は同じロケールで読み取り、または数字入力欄を使用し、その値はブラウザが正規化します。parseFloat('1,5')1と表記され、「1と半分」とはなりません。コード:locale_parsing。

日付、時刻、タイムゾーン

日付の順序、区切り記号、月の名称、12時間制または24時間制、カレンダーの種類は市場ごとに異なります。読者のロケールに合わせてフォーマットし、MM/dd/yyyyのような固定パターンを使ってはいけません。コード:locale_date。

new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'short', timeZone }).format(when);
  • インスタント値はUTCで保存しますオフセット付きのISO 8601形式で保存し、読者のタイムゾーンでフォーマットします。「今日」や日付の境界もサーバーのタイムゾーンではなく、そのタイムゾーンで計算します。
  • 週の始まりの曜日は市場ごとに異なります:アメリカでは日曜日、ヨーロッパの大部分では月曜日、中東の一部地域では土曜日です。週末も市場ごとに異なります。これらはロケールから取得してください(new Intl.Locale(locale).getWeekInfo()利用可能な場合)または日付ライブラリのロケールデータを使用し、定数で指定してはいけません。コード:calendar_names。
  • 曜日と月の名称はロケールから取得します(Intl.DateTimeFormat(locale, { weekday: 'long' }))、コード内に固定のリストを記載してはいけません。コード:calendar_names。
  • カレンダーサウジアラビア、イスラエル、日本ではグレゴリオ暦に加えてウンム・アル=クラ暦、ヘブライ暦、和暦が使われ、タイとイランでは仏教暦とペルシャ暦がデフォルトです。どの暦を使用するかは文化によって決まります。

通貨

金額は通貨と読者のロケールに合わせてフォーマットし、数字の隣に記号を付けてはいけません。同じ金額でも読者によって$1,234.50、1.234,50 $またはUS$1,234.50と表示されます。多くの市場で同じ記号が使われることもあります。コード:hardcoded_currency。

new Intl.NumberFormat(locale, { style: 'currency', currency }).format(1234.5);

通貨はフォーマットの問題ではなくビジネス上の判断です:読者のロケールを変更しても価格が変換されてはいけません。各市場で使用される通貨は文化情報として記録します。

並べ替え、比較、大文字小文字

言語ごとに並べ替えのルールが異なります:スウェーデン語ではå、ä、öがzの後に来る、ドイツ語ではäがaと同じ扱いになる、中国語ではピンインまたは筆画数で並べ替えられるなどです。ユーザーが読むテキストは読者のロケールに合わせて並べ替えます。コード:ordinal_sort。

names.sort(new Intl.Collator(locale).compare);

大文字小文字のマッピングも言語によって異なります:トルコ語ではiの大文字はİです。ユーザーが読むテキストにはtoLocaleUpperCase(locale)を使用してください。コード:case_mapping。

リスト

「Anna, Ben and Chen」という表記は言語ごとに異なります。リストの結合はロケールに合わせて行ってください。コード:joined_list。

new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' }).format(names);

氏名、住所、郵便番号、電話番号

  • 氏名多くの市場では姓を先に記載し、一人の人が一つの名前しか持たない、または二つ以上の名前を持つこともあります。市場で各部分が必要とされない限り、氏名は一つのフィールドに入力してください。すべての文字体系を受け入れてください:Åsa、José、王、Марияなどすべてが氏名です。コード:latin_only_input。
  • 住所フィールドの種類、順序、呼称は市場ごとに異なります:アメリカでは州とZIPコード、日本では都道府県、一部の市場では郵便番号が存在しないなどです。各市場の住所の書式は文化情報として記録されています。市場で使用されないフィールドを必須と指定してはいけません。
  • 郵便番号テキストとして保持し、国ごとにバリデーションを行うか、あるいは全くバリデーションを行わないでください。5桁のパターンでは世界のほとんどの地域に対応できません。コード: postal_code_format。
  • 電話番号E.164形式で保存します(+46 8 123 456 78)、各国の番号計画を知るライブラリ(例:libphonenumber)を使ってフォーマットおよびバリデーションを行ってください。(555) 555-1234北米以外の数字はすべて拒否します。コード:phone_number_format。

単位と用紙

世界のほとんどの地域ではキロメートル、キログラム、摂氏度が使われ、アメリカ合衆国ではマイル、ポンド、華氏度が使用されます。イギリスでは両方が混在しています。読者の地域に合った単位を選び、ロケールに合わせてフォーマットしてください。コード:fixed_unit。

new Intl.NumberFormat(locale, { style: 'unit', unit: 'kilometer' }).format(12);

印刷物やPDF出力では、市場で一般的な用紙が使用されます。北米ではレター判、それ以外の地域ではほぼすべてA4判です。コード:paper_size。

入力方式とフォント

中国語、日本語、韓国語は入力方式エディタを通じて入力されます。単語を選択する際にはEnterキーを押しますが、送信には使用されません。単語が入力中の場合にEnterキーで送信するハンドラーはそれを無視する必要があります。コード:ime_composition。

onKeyDown={event => {
  if (event.key === 'Enter' && !event.nativeEvent.isComposing) submit();
}}

配信するすべてのスクリプトをカバーするフォントを選ぶか、システムフォントにフォールバックさせてください。アラビア語、中国語、ヘブライ語、日本語、韓国語、タイ語にはそれぞれ専用のフォントが必要です。縦書きの文字記号に対応できるよう行高に余裕を持たせ、斜体は使用しないでください(中国語と日本語には斜体がありません)。また、翻訳できない画像内にテキストを入れないでください。

右から左へ

アラビア語とヘブライ語は右から左へ書かれ、レイアウト全体もそれに合わせて反転します。ナビゲーション、配置、方向を示すアイコン、列の順序などが含まれます。

  • 「dir="rtl"」をルート要素に設定し、langすべての言語に対して「
  • 論理プロパティを使用してください:margin-inline-start「margin-left、 padding-inline-end、inset-inline-start、text-align: start、 float: inline-start」の代わりに、CSSフレームワークの論理ユーティリティクラス(ms-4、pe-2、text-start)を使用します。コード:physical_direction、 unmirrored_layout。
  • 矢印やチェヴロンなど方向を示すアイコンは反転させますが、時計や再生ボタンなどはそのままにします。
  • 数値、コード、URL、ラテン文字の名前は、右から左へ書かれるテキスト内でも左から右へ表示されます。人やデータからのテキストを「<bdi>」で囲んで周囲の要素の順序が変わらないようにしてください。

余裕を持たせる

翻訳後のテキストは英語より長くなることが多く、特に短いラベルは顕著です。ドイツ語の「OK」は完全な単語になることもあり、10文字のラベルが倍の長さになることもあります。テキストには余裕を持たせてください。折り返しを許可し、ボタンやタブをラベルの長さに合わせて拡大させ、テキストには固定の幅や高さを設定しないでください。操作に必要なラベルを切り捨ててはいけません。コード:clipped_text。

「疑似翻訳により各文字列がこれらの分だけ長くなり、翻訳者が作業する前に問題を確認できます:

ソースの長さ追加済み
最大10文字まで100%
11~20文字80%
21~30文字60%
31~50文字40%
51~70文字31%
70文字を超える30%

中国語、日本語、韓国語は通常は文字数が少ないが、行高が高くなる傾向がある。

各変更点のためのチェックリスト

  • 人が読むテキストはカタログから取得され、各文が1つのメッセージとなる。
  • 数字、日付、時刻、通貨、単位、リストはすべて読者のロケールに従って処理される。
  • 並び替えや大文字小文字のマッピングも読者のロケールに基づいて行われる。
  • 名前、住所、郵便番号、電話番号はあらゆる市場に対応する。
  • 単語が入力中の場合、Enterキーを押しても送信されない。
  • レイアウトは論理的プロパティを利用し、長いテキストにも対応できる余裕を確保している。