【Polaris和訳】Foundations/Interantionalization
この記事について
この記事は、Polaris/Foundations/Interantionalizationの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
国際化
どこでも使えるインターフェイスを構築することで、すべての人にとってより良い商取引を実現します。これらのガイドラインは、世界のあらゆる場所で使用できる製品を設計、作成、構築するのに役立ちます。
私たちは、世界中のどこにいても、マーチャントの皆様に適切で意味のある方法で Shopify を体験していただきたいと考えています。
私たちは、すべての市場のすべてのマーチャントに対応する 1 つのエクスペリエンスを構築することを目指しています。しかし、ある体験が特定の市場に合わない場合は、それを調整する必要があります。
定義
国際化
異なるロケールでも使用できるように製品やインターフェースを構築すること。これには、テキストの拡張や語順の変更を可能にする柔軟なインターフェースの作成が含まれます。
ローカライゼーション
製品やインターフェースを異なる地域で使用できるように調整し、文化的に適合するようにすること。これには、機能の変更、ビジュアルの変更、テキストの翻訳などが含まれます。
翻訳
ある言語のテキストを別の言語に変換すること。ローカライゼーションと混同されないように、翻訳は製品のローカリゼーションの一部に過ぎない。
ロケール
言語と国の両方によって定義される言語的な地域。例。フランス語-フランス（fr-FR）、フランス語-カナダ（fr-CA）、ポルトガル語-ブラジル（pt-BR）など。ただし、言語と国は必ずしも 1 対 1 に対応しているわけではありません。
テキスト拡張の計画
インターフェイスをローカライズすると、コンテンツの長さが伸びることがよくあります。ほとんどの言語では、テキストは英語に比べて平均で 50％ほど長くなります。日本語のような非ラテン系の言語では、縦方向のスペースが大きくなります。文字ベースの言語では、テキストの折り返しや改行は、単語を区切るスペースに依存するとは限りません。インターフェイスは、使用目的を変えずに、言語固有のフォーマットやテキストの拡張に対応できる柔軟性が必要です。
Do
テキストの拡大が情報階層の妨げにならないように、要素をレイアウトします。
Don't
レスポンシブスタッキングだけに頼らない。レイアウトの情報の階層が変わってしまうことがよくあります。このケースでは、テキスト拡張によって改行の位置が間違っており、このカードの見出しとコンテンツの真ん中にボタンが配置されています。
Do
シングルカラムを使用して要素を柔軟に積み重ね、テキストの拡大に対応します。
Don't
小さなコンポーネントでは、細いカラムの使用を避けます。きれいなインターフェイスを実現するために、適切な量のパディングを確保してください。
ヒント
- テキストの長さは常に最悪のケースを想定してください。特にモバイルや、テーブルやカラムなどのレイアウトでは注意が必要です。狭いカラムの使用は避けましょう。
- 数語しかないコンテンツ要素には特に注意してください。英語では、ラベルやボタンには「a」や「the」などの単語が含まれていませんが、他の多くの言語では含める必要があります。これらの小さなテキストは、全体として最大 300%まで拡大することができます。
- 当社のコンポーネントは拡張可能なように設計されていますが、デザインやビルドでテストしてみてください。画面サイズを小さくしたときにテキストがはみ出さないように、CSS のレイアウトを確認する。
- 中国語や日本語のような文字ベースの言語では、言語の専門家と協力して、改行やワードラップを見直し、文章が途切れないようにする。
語順の変更に備える
翻訳では、語順が大きく変わることがあります。インターフェイスのレイアウトや機能が特定の語順に依存している場合、ローカライズされたときに壊れてしまう可能性があります。
Do
コンテンツ要素がページ上の特定の位置に留まる必要がある場合、それらを文の外にある独立したラベルとして実装します。
Don't
文章の中に位置が決まっている要素を配置してはいけません。この文の順序は、しばしば翻訳時に変更する必要がありますが、この方法でインターフェイスを構築する場合、それは不可能です。
Do
本文にリンクを貼る場合は、1 つの説明的な用語か、フレーズの一部のみをリンクとして使用してください。リンクについて詳しくはこちらをご覧ください。
Don't
フレーズ全体をリンクとして使用しないでください。語順が変わると、翻訳されたときにリンクが複数の部分に分かれてしまう可能性があります。
ヒント
- 翻訳されたときに、インターフェイス内のすべての文の語順が変わることを想定してください。
- 文章を作るのに UI コンポーネントを使わないようにしてください。
- 1 つの文を複数の文字列に分割することは避けてください（連結文字列）。連結された文字列を使用すると、翻訳者は語順を変更することができず、翻訳が意味をなさなくなります。
- 文字列の中に変数を使わないようにしましょう（翻訳が変わってしまいます）。
文化の違いを考慮する
各地域のマーチャントは、それぞれ異なる文化的感覚を持っています。世界各地のマーチャントにとって便利で意味のあるビジュアル、コンテンツ、インターフェース形式を使用してください。
可能な限り、一般的に知られているアイコンを使用してください。国別のアイコンを使用する場合は、どこに表示されるかに注意してください。アイコンについて詳しくはこちら
色で意味を表現することに注意してください。色は、文化によって異なる意味合いを持つことがあります。例えば、北米では成功を表す緑、失敗を表す赤が使われますが、中国では赤が繁栄と幸運を象徴します。
ヒント
- 写真、イラスト、アイコン、絵文字を使用する際には、使用するビジュアルが不快感を与えたり、文化的に不適切なものでないことを確認してください。使用しているビジュアルについて不明な点がある場合は、調べたり、現地に詳しい人に聞いたりしましょう。
- 機能に名前を付ける際には、異文化での意味合いを考慮し、特に連想させる名前や頭字語に注意してください。名前の付け方についてはこちらをご覧ください。
- 口語的な言葉やイディオム、大衆文化への言及は避けましょう。これらを意味のある形で翻訳するのは困難です。
- ある文化では、人の与えられた名前が最初に来ますが、他の文化では、家族の名前が最初に来ます。マーチャントには、特にテキストフィールドやリストでの名前の入力、読み取り、並べ替えの方法を選択してもらいます。
- 住所、日付、数字、通貨などの多くの情報は、ロケールによって異なる形式で表示されます。例えば、通貨記号が数字の前に表示されるロケールと、数字の後に表示されるロケールがあります。これらが適切に翻訳できることを確認してください。ローカライズされた通貨のフォーマットについての詳細はこちらをご覧ください。
- 文化によっては、長いフォームや重要なフォームに記入する際に、より多くのガイドラインや指示を求める場合があります。そのような場合には、フォームの必須項目にアスタリスクを使用することを検討してください。
- 可能であれば、現地の知識を持つ人と協力してください。
Polaris コンポーネントの国際化
- Polaris コンポーネントを使ってデザインするときは、ローカライズされたバージョンをテストして、残りのインターフェイスと一緒に動作することを確認してください。特定のコンポーネントを適応させる必要があるが、Polaris でまだ国際化されていない場合、GitHub で機能リクエストを出すことができます。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion