Design for Arabic

ハイライト

Apple は、アラビア語インターフェースはテキスト翻訳だけでは不十分だと説明します。開発者は右から左のレイアウトフロー、アラビア語タイポグラフィ、方向性のあるアイコン、地域によって異なるアラビア数字体系も扱う必要があります。

主要内容

App がアラビア語市場に入るとき、最も簡単なのは文字列の翻訳です。それだけでは足りません。

アラビア語は右から左に書きます。Mohamed Samir は冒頭で規模を示します。今日、約6億6000万人が22以上の国と地域でアラビア文字を使っています。テキストだけ翻訳すると、より大きな問題が残ります。インターフェースが英語の読み順のままになることです。

これはユーザーがページに入る方法と、コントロールの理解方法に影響します。タイトル、段落、カラム、ナビゲーションバー、アイコン、テーブル、カルーセル、ページインジケーター、チャートはすべて並べ替えが必要かもしれません。Apple のネイティブフレームワークは多くの基礎的な方向性動作を処理します。デザイナーと開発者は、コンテンツ、グラフィック、フォント、記号、数字といった見落としやすい詳細を確認する必要があります。

本 Session の価値は、「アラビア語対応」を4つの検査可能な問いに分解することです。インターフェース方向、タイポグラフィ、アイコン方向、数字体系です。

詳細

1. まずページを右から左のワイヤーフレームとして扱う

（02:55）Samir は App Store の Today ストーリーカード、ストーリーページ、プロダクトページで方向性を説明します。最善の方法は、まずページを wireframe に還元し、アラビア語環境で各要素をどちら側へ移すか判断することです。

タイトル、ボタン、ナビゲーションバーの順序は変わります。段落は右揃えです。カルーセルとスワイプ可能要素は右から左へ流れます。画像自体は通常元の向きを保ちます。ローカライズするのはインターフェースの流れであり、すべての視覚コンテンツをミラーするわけではありません。

このページを確認するとき、要素を5類に分けられます。

ナビゲーションバー: 順序は右から左の読み方向に従います。Pages と App Store の例はこの扱いです。
タイトル: アラビア語インターフェースでは右側へ移動します。
段落: テキストは常に右揃えです。
カルーセルとスワイプコンポーネント: 操作方向とアニメーション方向の両方を反転します。
画像、動画、背景: Weather の例では、日の出方向のようなコンテンツは反転すべきではありません。

（04:35）Weather App は誤りやすい境界を示します。背景、画像、動画は反転しません。「一日の天気」カルーセルは反転します。温度スケールは低温を右、高温を左に置きます。ページインジケーターも右から左へ進みます。

2. 時間とチャートはローカルな心智モデルに合わせる

（05:47）Calendar の例では、アラビア語環境では日付、月、年が右から左へ進み、アラビア世界の実物カレンダーの使い方と一致します。Apple はカレンダーでイスラム暦月の開始日を赤線で示します。

（06:22）Settings のバッテリー状態ページは別の詳細を示します。Toggle、Segmented Control、デザイン、操作はすべてアラビア語レイアウトでミラーされます。時間軸のあるチャートも確認が必要です。バッテリー使用量チャートでは、早い時間が右、遅い時間が左に表示されます。

時間軸チャートは3つの問いで確認できます。

起点はどこか: タイムラインは右から始め、アラビア語カレンダー動作に合わせます。
方向はどう進むか: 早い時間を右、遅い時間を左に置きます。
国の習慣の影響はあるか: Samir は他のチャート方向は国と文脈に依存すると特に注意し、設計前に確認するよう述べます。

3. アラビア語タイポグラフィは個別に確認する

（07:16）アラビア文字の核心は接続です。文字は位置によって字形が変わります。独立形、語頭、語中、語尾はそれぞれ異なる場合があります。そのためアラビア語フォントライブラリは通常ラテンより大きくなります。

アラビア語の語は通常よりコンパクトですが、点、母音記号、付加記号を使うためやや高くなります。App で vocalization marks（母音記号）を多用する場合、インターフェースに縦方向の余白が必要で、なければ文字が切れる可能性があります。

（09:28）Apple は SF Arabic を提供します。ラテン SF ファミリーとスタイルが一致し、バイリンガル環境に適し、Ultralight から Black までのウェイトがあります。システムはポイントサイズに応じて optical size（視覚サイズ）を自動選択します。大きいサイズは見出し寄り、小さいサイズは本文可読性を優先します。

タイポグラフィ確認は次の具体項目に落とせます。

チェック項目	扱い方
フォント選択	システム App とサードパーティ App とも、Apple 提供の SF Arabic を優先します。
縦方向スペース	母音記号が多いと文字高さが増えるため、切り取りを避けます。
視覚サイズ	システムがサイズに応じた字形を選び、大は見出し、小は本文可読性向けです。
字間	アラビア語の接続は Kashida（延長接続）に依存するため、未最適化フォントでは誤った字間を避けます。
透明度	透明度は単語や句全体に適用し、文字接続部の継ぎ目を避けます。

（11:44）同年 Apple は SF Arabic Rounded も導入し、Ultralight から Black まで複数ウェイトを提供します。Reminders の例はタイトルと本文での使用を示します。フォントファミリー拡張については「Meet the expanded San Francisco font family」を参照してください。

4. 大文字ラテン文字はバイリンガル排版のバランスを変える

（12:34）アラビア語に大小文字はありません。数字フォント内のアラビア字形は通常、小文字ラテンの視覚ボリュームに合わせて設計されます。インターフェースで全大文字ラテンを使うと、ラテン文字は大きく、アラビア文字は小さく見えます。

Samir の対処は具体的です。このシナリオではアラビア語フォントサイズを10%増やします。特に小さいサイズの可読性が改善します。

判断は単純です。同じ画面に全大文字ラテンがあるなら、現在のラテンサイズを基準にアラビア文字が小さく見えないか確認します。補正が必要ならアラビアサイズを10%増やします。全大文字ラテンがない場合は機械的に拡大しません。

5. アイコンは「方向の意味」と「物理的意味」を区別する

（14:22）Iconography（アイコン）はユーザーがフローに入ったり操作を起こしたりする入口であることが多いです。アラビア語インターフェースでは、アイコンを単純にすべて反転できません。

App Store の Today タブアイコンは文字方向を表すため、アラビア語では線が右揃えになります。虫眼鏡アイコンは原方向を保ちます。右手使用の角度を示すもので、言語方向に依存しないからです。

Apple はさらに例を示します。書字方向は右から左にできてもペンの角度は自然に保てます。スピーカー方向は変えられますが、斜線方向は Apple エコシステム内で一貫させます。カレンダーの点の方向は変えられますが、時計の針は物理的な時計表現を保ちます。

アイコンは言語で一律反転するのではなく、意味で判断します。

アイコン種別	アラビア語インターフェースでの扱い
文字方向を表す記号	RTL に適応。例: Today アイコンの線を右揃え。
虫眼鏡	右手使用習慣から原方向を保持。
カレンダー進行点	アラビア語カレンダー方向に従う。
時計の針	物理的な時計表現を保持。
スピーカー形状	レイアウト上自然になるよう方向変更可。
斜線	Apple エコシステム内の一貫性を保持。

（16:14）SF Symbols は300以上のアラビア語と RTL 記号を提供します。デザイナーは SF Symbols app の情報パネルで localization（ローカライズ）領域を確認し、アラビア語変体や他の非ラテン変体を確認できます。システム API を使うと、これらの RTL とローカライズ記号が App に自動表示されます。

6. アラビア数字には西部と東部の2つの一般的形式がある

（17:13）私たちが日常的に使う 0-9 は Western Arabic numerals（西部アラビア数字）と呼ばれます。もう一つは Eastern Arabic numerals（東部アラビア数字）です。どちらもアラビア世界起源で、今日は異なるアラビア諸国で使われます。

西部形式はモロッコ、アルジェリア、チュニジアなど西アフリカのアラビア諸国で一般的です。東部形式はレバントや湾岸の一部で使われます。エジプト、サウジアラビアなどは両形式を併用します。

（18:24）システムはユーザーの国に応じて数字形式を自動選択するか、ユーザー選択で切り替えます。Calculator、Calendar、Apple Watch の Typograph 文字盤がこの選択を反映します。

実装時は3点を確認します。システムが国またはユーザー選択で数字形式を決めること。App が西部と東部アラビア数字の両方を収容できること。明確な対象国があるなら、現地に適した形式を確認すること。

重要ポイント

1. RTL インターフェースチェックリストを作る

何をするか: 主要 App 画面向けに Arabic layout audit を作り、ナビゲーションバー、段落、カルーセル、ページインジケーター、チャート、トグルを項目ごとに確認します。
なぜ価値があるか: Session はネイティブフレームワークが多くの基礎を処理する一方、コンテンツとコンポーネント級の詳細は人の判断が必要だと明言しています。
始め方: ホーム、詳細、設定から代表ページを1つずつ選び、「読み方向に従って移動すべきか」「原画像を保つべきか」の2列で記録します。

2. 天気、健康、金融系チャートに方向性テストを追加する

何をするか: アラビア語インターフェースで時間軸チャートが右から左へ進むか確認します。
なぜ価値があるか: Weather、バッテリー使用量、Calendar は、時間の心智モデルがアラビア語と現地カレンダー行動で変わることを示します。
始め方: 日、週、月、年で表示するデータビューを洗い出し、早い時間が右、遅い時間が左か確認します。

3. アイコンローカライズ判断表を作る

何をするか: App 内アイコンを3類に分類します。文字方向、物理オブジェクト、エコシステム一貫性。
なぜ価値があるか: Today アイコン、虫眼鏡、スピーカー、カレンダー点、時計針の扱いは異なり、一律ミラーできません。
始め方: SF Symbols app の localization 情報パネルを使い、アラビア語または RTL 変体がある記号を優先置換します。

4. バイリンガル画面でフォント比率の回帰テストを行う

何をするか: 大文字ラテンとアラビア語を混在するラベル、ボタン、カードタイトルを確認します。
なぜ価値があるか: Session は、大文字ラテンでアラビア文字が小さく見える場合に10%増やす具体提案をしています。
始め方: ボタン、タブタイトル、短いラベルからスクリーンショット比較。小さいサイズと全大文字英語略語に重点を置きます。

5. 対象国ごとに数字形式を検証する

何をするか: 価格、日付、統計、電卓、文字盤画面で西部・東部アラビア数字表示を確認します。
なぜ価値があるか: アラビア世界内部でも使用習慣が異なり、システムは国またはユーザー設定で数字形式を選びます。
始め方: 数字が多い画面を一覧化し、対象国の地域設定でレイアウト幅、揃え、可読性を確認します。