Design for Arabic（WWDC22）のメモ

WWDC22のDesign for Arabicを見たメモです。

なぜアラビア語対応が重要なのか

数多くの人々が利用しているため。

• アラビア文字の使用人口は6億6千万人
  • アルファベットと中国文字に次いで世界で3番目に多く書かれている言語
  • 22カ国以上の町や地域の人々が使う

UIの方向

※Apple標準のUIパーツなら以下の対応は全て自動で行われる。

ナビゲーションバー、アイコン、レイアウトなどが右から左になる。

パラグラフの先頭は右揃え。ナビゲーションバーアイコンの配置など全体の構造が変わっている。

英語のApp Store

アラビア語のApp Store

画面遷移アニメーションも右から左になる。

インジケータも右から左。カルーセルが動く方向も逆。
※ただし背景の太陽の位置は言語に左右されるものではないのでそのまま

月日の流れはアラビア語では右から左なので、カレンダーだって右から左。

トグル、スイッチコントロールも右から左。図表も右から左。

タイポグラフィ

アラビア語は文字1つ1つ自体には意味がなく、意味を為すにはつなげる必要がある。つなげる時に、ある文字がどこの位置にあるか等で形が変わるため、アラビア文字のフォントライブラリは圧倒的に数が多い。

アラビア文字はドットや発音記号、識別記号をつけると、アルファベットに比べて高くなる。発音記号の使用頻度が高いアプリを作る場合は、縦のスペースを多めに取って、カットされないように気を付ける。

AppleではSF Arabicという書体が提供されている。ウェイトのバリエーションが豊富。SFファミリースタイルとも合うデザインなので、複数言語が混じっても自然に見える。

SF Arabicはスケーラビリティを持っていて、ポイントサイズが異なると形状が少し変化する。

SF Arabicの丸文字を含む、WWDC22で発表された新しいフォントについての詳細はMeet the expanded San Francisco font familyにて。

アラビア語は大文字と小文字を区別しない言語。アラビア語のフォントは英語の小文字程度の大きさ。UI上の大きさの差を調整するためにアラビア語のフォントを10%大きくすると読みやすさの向上につながる。

文字の間隔について。アラビア語は連結するので、フォントによっては適切な間隔にならず、場合によっては連結箇所が間違っていたり、文字が切られてしまったり、不要な間隔が空いてしまったりすることもある。間隔を0にするか、Appleが出しているアラビアフォントを使うようにする。

最後に透明度について。文字の結合部が見えることがある。

それはフォントかシステムが、アラビア語に対して完全に最適化されていない結果。Appleが出しているアラビアフォントならこの心配はいらない。

アイコン

• App StoreアプリのTodayタブのシンボルは文の流れる方向を表しているので、アラビア語環境の場合は右から左に流れるのが自然
• 虫眼鏡アイコンは右利きの人にとって自然な向きで表現しているので、アラビア語環境でもそのまま
• 書いてるアイコンは、ペンの角度は変えず、筆記の向きを変えている
• ミュートアイコンはスピーカーの向きは変えつつも、スラッシュの角度は同じままになる
• カレンダーアイコンは、月の進む方向は変えつつ、時計の針はそのまま

SFシンボルにはアラビア語特有のシンボルがある。

これらのシンボルはSF Synmols Appで見ることができる。

数字

数字には西アラビア数字（123...）と東アラビア数字がある。どちらを使うかはユーザの国に従って自動で選択される。この選択は数字を使うすべてのアプリで反映される。

開発中のアプリが数字を含む場合、両方の数字を起用したり、どの国をターゲットにするかによって、どちらが適切なのかを確認すること。

Right to Left言語のデザインガイダンスはHuman Interface GuildelinesのRight to Leftに書かれている。

開発者向けの動画はWWDC 22のGet It Right (to Left)。