🍎HIGざっくりまとめ Foundations編 vol. 9 Right to left

はらぐち | COMPASS

2022年12月15日 23:14

Right to left（右から左）

アラビア語やヘブライ語などの右から左へ読む言語をサポートするため、必要に応じてインターフェースを反転させ、関連する言語の読み方を一致させることができます。

システム提供のUIフレームワークはデフォルトで右から左（RTL）をサポートしており、システム提供のUIコンポーネントはRTLコンテキストで自動的に反転することが可能です。
システム提供の要素と標準的なレイアウトを使用する場合、アプリの自動反転インターフェースに変更を加える必要がない場合があります。
RTL言語を使用する国のさまざまなロケールで発生し得る異なる通貨、数字、数学記号に適応するために、レイアウトの微調整や特定のローカライゼーションを強化するためのガイドラインです。

テキストアライメント

インターフェイスの方向に合わせてテキストの配置を調整する
たとえば、左から右（LTR）コンテキストのコンテンツでテキストを左揃えにしている場合、RTLコンテキストでのコンテンツのミラーリング位置に合わせてテキストを右揃えにしてください。
段落は、現在の文脈ではなく、その言語に基づいて整列させます
段落（3行以上のテキストを指す）の配置が言語と一致しないと、読みにくくなることがあります。
リスト内のすべてのテキストアイテムに一貫したアライメントを使用します
異なる言語で表示される項目も含め、リスト内のすべての項目のアライメントを逆にします。混在させない。
素早く、正確なアニメーションを
軽快で邪魔にならない、効果的に情報を伝えることができるように。
一般に、頻繁に発生するインタラクションには動きをつけないようにしましょう
標準的なインターフェイス要素とのインタラクションでは、システムはすでに微妙なアニメーションを提供しています。何かとインタラクションするたびに、不必要な動きを見るために余分な時間を費やさせることは避けましょう。

数字・文字

RTL言語では、異なる数字体系を使用することができます。
数学的な概念や数字を中心としたトピックに焦点を当てたアプリの場合、サポートする各ロケールの数字に合わせるのは良いアイディアです。一方、数に関連するトピックを重視しないアプリは、一般にシステムが提供する数表示に頼ることができます。

特定の番号の数字の順序を逆にしないこと
現在の言語や周囲のコンテンツに関係なく、電話番号、クレジットカード番号など、特定の数字の桁は常に同じ順序で表示されます。（RTL言語の中でも、これらの数字の部分だけはLTRのままでOK）
進捗状況やカウントの方向を示す数字の順番を逆にし、決して数字そのものを反転させないでください
プログレスバー、スライダー、レーティングコントロールなどには、その意味を明確にするために数字が含まれていることがよくあります。このような場合は、反転したコントロールの方向と一致するように、数字の順序を反転させるようにしてください。
また、特定の順序を伝えるために数字を使用する場合も、数字の並びを逆にしてください。

コントロール

人は読む言語と同じ方向に進むと考える傾向があるため、RTLコンテキストではスライダーやプログレスインジケータなどのコントロールを反転させることは理にかなっています。この場合、コントロールの開始値と終了値を示すグリフや画像の位置も反転させるようにしてください。

一定の順序で項目を移動したりアクセスしたりするのに役立つフリップコントロール
たとえば、RTL環境では、戻るボタンが右を向いている必要があり、画面の流れがRTL言語の読み順と同じになります。同様に、順序付きリストの項目にアクセスするための「次へ」「前へ」ボタンも、RTLコンテキストでは読み順と一致するように反転させる必要があります。
実際の方向を参照するコントロールや、画面上の領域を指し示すコントロールの方向を保持する
例えば、"右 "を意味するコントロールを提供する場合、現在のコンテキストに関係なく、常に右を指していなければならない。
必要であれば、隣接するラテン語とRTLスクリプトのバランスを視覚的に調整する
アラビア語やヘブライ語には大文字がないため、大文字の欧文テキストと隣り合わせると、小さく見えすぎることがあります（ボタン、ラベル、タイトルなど）。
アラビア語やヘブライ語のテキストと、すべて大文字で書かれたラテン語のテキストとの視覚的なバランスをとるには、RTLのフォントサイズを2ポイントほど大きくするとうまくいくことが多いようです。

画像

写真やイラスト、一般的なアートワークなどの画像を反転させることは避けてください
画像を反転させると、画像の意味が変わってしまうことが多く、著作権のある画像を反転させると違反となる可能性があります。
画像の順序に意味がある場合は、画像の位置を逆にする
例えば、複数の画像を年代順、アルファベット順、お気に入り順などの特定の順序で表示する場合、RTLコンテキストでの順序の意味を保つためにそれらの位置を逆にします。

インターフェースアイコン

SF Symbolsを使ってアプリのインターフェースアイコンを提供すると、RTL コンテキスト用のバリエーションや、アラビア語やヘブライ語などのローカライズされたシンボルを入手することができます。

テキストや読書方向を表すインターフェースアイコンを反転させる
例えば、インターフェイスアイコンがテキストを表現するために左揃えのバーを使用している場合、RTL コンテキストではバーを右揃えにします。
テキストを表示するインターフェイスアイコンのローカライズバージョンを作成することを検討します
（例えば文字を表すために「あ」「A」などが用いられてるアイコン）
前方または後方の動きを示すインターフェースアイコンを反転させること
前方または後方に移動するオブジェクトを描いたインターフェースアイコンは、その動きの意味を保持するために、RTLコンテキストで反転させる必要があります。
例えば、スピーカーのアイコンはLTRでは音波は左から来てます。RTLコンテキストでは、アイコンを反転して、右から来る音波を表示する必要があります。
ロゴやユニバーサルサイン、マークは反転させないでください
ロゴは、たとえテキストが含まれていても、常に元の形で表示するようにしてください。チェックマークのような普遍的な記号やマークは一貫した外観を持つことを期待されているので、反転させることは避けましょう。
一般に、現実世界の物体が描かれたインターフェースのアイコンを反転させることは避けてください
例えば、時計はどこでも同じように動くので、言語の方向に関係なく同じように見える必要があります。他にもペンのマークのように、右利き用に傾斜した、道具を示すアイコンを反転させる必要はなく、混乱を招く可能性があります。
複雑なカスタムインターフェースのアイコンを単に反転させる前に、その個々のコンポーネントと全体のビジュアルバランスを考慮する必要があります。
場合によっては、バッジ、スラッシュ、虫眼鏡などのコンポーネントは、ローカライゼーションに関係なく、ビジュアルデザイン言語を遵守する必要があります。
また、ローカライズ版のアイコンが意味を持つように、コンポーネント（またはその位置）を反転させる必要がある場合もあります。UIが反転するとバッジも反転する必要があります。変更された意味とアイコンの全体的な視覚的バランスの両方が保たれるかどうかを検討します。

感想

人が読む方向と同じ方向に何かが動く場合、人は通常その方向を前方と解釈し、反対方向に何かが動く場合、人はその方向を後方と解釈する傾向があります。

単純に文字が左右逆からになるということでなく、視線の動きや意味合いとしての順序も左右逆転するというのがナルホドでしたー。
よくレイアウトする時にZ型を意識！とかいうけどあれも反転するってことですね。

クレジットカード番号や電話番号などは逆にならないけど、stepやランキング、レーティングなどは逆にすべしというのは言われて見たら確かに。意味に注目して判断していかなければならない。

「次へ」「前へ」ボタンも左右逆にというのも確かに！だけどデザイン難しそうだな・・・ローカライズオソロシヤ

この記事が気に入ったらサポートをしてみませんか？