Design for Arabic · صمّم بالعربي

ハイライト

Apple の設計チームは、UI 方向の反転、アラビア語テキストのタイポグラフィの特性 (合字、フォントの太さ、光学サイズ)、アイコンのミラーリング戦略、西方アラビア数字と東方アラビア数字の選択など、アラビア語ユーザー向けにアプリケーションを最適化する方法論を体系的に説明し、開発者が世界中の約 6 億 6,000 万人のアラビア語を書くユーザーにリーチできるように支援しました。

主要内容

アラビア語に注意を払う必要がある理由

アラビア語は世界で 3 番目に大きな文字体系であり、22 か国以上で約 6 億 6,000 万人が話しています。アプリがこのユーザー グループにリーチしたい場合、言語翻訳を行うだけでは十分ではなく、UI の方向性にも適応する必要があります。

アラビア語は右から左に書かれます (RTL)。この機能はテキストの配置に影響を与えるだけでなく、レイアウト、ナビゲーション ロジック、インタラクション デザイン全体にも影響します。

UI の方向性: ワイヤーフレームから始める

（02:58）

App Store の Today タブを例に挙げます。英語版では、ユーザーは左側の Today タブから入り、ストーリー カードを閲覧し、最後に右側の製品ページに到達します。アラビア語バージョンでは、プロセス全体が逆になります。[今日] タブが右側にあり、ストーリー カードが右から左にスライドし、製品ページが左側にあります。

ユーザーのメンタル モデルも逆転します。アラビア語の本をめくるように、右ページから始めて左ページに進みます。

良いニュースは、SwiftUI などの Apple のネイティブ フレームワークを使用する場合、RTL の適応のほとんどが自動的に行われることです。開発者は、いくつかの特別なコンポーネントに注目するだけで済みます。

どの要素が反転され、どの要素がそのまま残るか

（04:35）

反転する必要がある要素:

• タイトル、ボタン、ナビゲーション バーの順序と位置
• 段落を右揃えにする
• カルーセルとスライド要素のインタラクション方向
• 温度目盛（右が最低温度、左が最高温度）
• ページネーションインジケーターは右から左に配置されます
• カレンダーの日付、月、年の進行方向
• グラフの時間軸 (初期が右側、後期が左側) ・スイッチやセグメントコントローラーなどのコントロール類

変更されない要素:

• 写真、ビデオ、背景コンテンツ。太陽は常に東から昇る、言葉のせいで太陽をひっくり返してはいけない
• 時計の針の方向（物理時計と一致）
• 虫眼鏡アイコンの角度 (右利きの使用を反映し、普遍的に適用可能)

アラビア語の書き方の中核的な特徴

（07:32）

アラビア語には、UI デザインに直接影響する 2 つの大きな特徴があります。

Higature の機能: 単語内の文字の位置 (先頭、中間、末尾、独立) によって、グリフの形状が決まります。同じ文字でも 4 つの異なる形式がある場合があります。このため、アラビア語フォント ファイルはラテン語フォントよりもはるかに大きくなります。

縦方向のスペース要件: アラビア語は一般にラテン語よりもコンパクトですが、特に発声記号を使用する場合は若干背が高くなります。アプリで注音を多用する場合は、クリッピングを避けるために垂直方向の間隔を増やす必要がある場合があります。

SF アラビア語フォント ファミリ

（09:34）

Apple は、アラビア語用に特別に設計された SF アラビア語フォントを提供しています。

• フォントの太さの全範囲: ウルトラライトからブラックまで、SF Latin フォント ファミリと一致
• 光学サイズ: タイトルには大きなフォント サイズが使用され、より現代的な構造になっています。本文テキストには小さなフォント サイズが使用され、読みやすさを向上させるために角度とコントラストが増加します。システムはフォント サイズに基づいて適切なフォームを自動的に選択します。
• SF アラビア語丸め (新): WWDC 2022 で新たに追加され、アプリケーションにより親密で活気のある雰囲気を与えます。

組版上の注意

（12:39）

大文字と小文字の補償: アラビア語のテキストには大文字と小文字がありません。ラテン語は、大文字で表記すると、アラビア語よりも視覚的に「重く」なります。アラビア語のテキスト サイズを 10% 増やして補正します。

文字間隔 (トラッキング): アラビア語のハイフネーションの特徴により、文字間隔が複雑になります。使用するフォントが文字間隔に対して最適化されていない場合は、0 トラッキングに設定することをお勧めします。 Apple システム フォントは、Kashida (合字ストレッチ) メカニズムを通じて自然な間隔を自動的に処理します。

透明度の処理: 最適化されていないフォントでは、透明度を適用すると文字間に継ぎ目が見える場合があります。システム フォントは、単語全体に透明度を適用することでこの問題を回避します。

アイコンミラーリング戦略

（14:25）

SF シンボルには 300 を超えるアラビア語および RTL 固有のバリアントがあります。システム API は、正しいローカライズされたバージョンを自動的に表示します。

ミラーリングする必要があるアイコン:

• テキストの方向を意味するアイコン (リストの行の配置方向など)
• 筆記方向に関するアイコン（ペンの角度など）
• スピーカーの方向 (RTL の自然な方向に調整)
• カレンダードット進行方向

変わらないアイコン:

• 拡大鏡 (世界中で右利き用の角度)
• 時計の針 (物理時計と一致)
• スラッシュ方向 (Apple の生態学的一貫性を維持)

SF Symbols アプリでは、記号を選択した後、情報パネルのローカリゼーション セクションを見ると、アラビア語のバリアントとその他の非ラテン文字のバリアントを確認できます。

アラビア数字体系

（17:16）

私たちが日常的に使っている0～9の数字は、実はアラブ圏で生まれた数字なので「西洋アラビア数字」と呼ばれています。

アラブ世界では、別の「東洋アラビア数字」も使用されています: ٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩

ディストリビューションの使用:

• 西側アラビア数字: モロッコ、アルジェリア、チュニジア、その他の西アフリカのアラブ諸国
• 東部アラビア数字: レバントおよび湾岸諸国の一部
• 両方の混合使用: エジプト、サウジアラビアなど。

システムはユーザーの居住国に応じて自動的に選択しますが、ユーザーが手動で切り替えることもできます。アプリ内の数値は両方の形式をサポートするか、ターゲット市場に基づいてどちらを使用するかを検証する必要があります。

詳細

SwiftUI を使用して RTL を自動的に適応させる

（02:18）

SwiftUI の RTL 適応はほとんど自動的に行われます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Section("Settings") {
                    Toggle("Notifications", isOn: .constant(true))
                    NavigationLink("Account") { AccountView() }
                }
            }
            .navigationTitle("Today")
        }
    }
}

キーポイント:

• NavigationViewアラビア語環境では、ナビゲーション バーのボタンとタイトルが自動的に右揃えになります。
• ListそしてFormセルのレイアウトは自動的にミラーリングされます
• Toggleスイッチの方向は自動的に調整されます
• テキストの方向は、コンテンツの言語に基づいてシステムによって自動的に決定されます。
• 開発者は RTL を処理するための条件付きコードを作成する必要がありません

混合テキスト方向の処理

インターフェイスにアラビア語とラテン語の両方のコンテンツが含まれている場合、システムは各テキスト フラグメントの言語に基づいて向きを自動的に決定します。

Text("Welcome to التطبيق")  // 系统会根据内容自动处理方向

キーポイント:

• Unicode 双方向アルゴリズム (Bidi アルゴリズム) は、向きが混在したテキストを自動的に処理します。
• アラビア語のラテン語は LTR 方向を維持します
• 数字は通常、アラビア語テキストの LTR 方向を維持します。
• Unicode 方向制御文字を使用します (例:\u{202B}RTL 埋め込み) は複雑なシーンを手動で制御できます

アイコンの方向性判定

（15:01）

アイコンをミラーリングする必要があるかどうかを判断するには、次の 2 つの質問を自問してください。

1. このアイコンの方向は読み取り/書き込み方向を示唆していますか?

• はい → ミラーリングが必要です (リスト行、テキスト レイアウト アイコンなど)
• いいえ → そのままにしておきます (例: 虫眼鏡、時計)

2. このアイコンの向きは物理世界の向きを反映していますか? ・はい → そのまま（日の出の方向、時計の針）

• いいえ → UI の向きに依存します

SF シンボルのローカライズされたアイコンには、正しいバージョンが自動的に表示されます。カスタム アイコンでは、RTL バリアントを手動で提供する必要があります。

デジタル表示のローカリゼーション

（18:38）

使用NumberFormatterデジタル ローカリゼーションを自動的に処理します。

let formatter = NumberFormatter()
formatter.locale = Locale.current  // システムがユーザー設定に基づいて数字形式を自動選択します
formatter.numberStyle = .decimal

let formatted = formatter.string(from: 1234)  // "١٢٣٤" または "1234" が出力される場合があります

キーポイント:

• Locale.currentユーザーの地域およびデジタルの好みを自動的に反映します
• 電卓、カレンダー、時計などのシステム アプリケーションはすべてこのルールに従います。
• 数値文字列のハードコーディングはローカリゼーションをバイパスするため、避けるべきです
• 特定の市場では、数値形式を検証するようにロケールを明示的に設定できます。

重要ポイント

• 世界中の視聴者向けに設計: アラビア語のユーザーは 6 億 6,000 万人に達しており、RTL の適応は単なる翻訳以上のものです。 SwiftUI ネイティブ フレームワークを使用すると、適応コストが大幅に削減され、初日からアプリケーションをグローバル化できるようになります。エントリ: Xcode プロジェクト設定 → ローカリゼーション → アラビア語の追加。

• 文化的な詳細が体験を向上: カレンダー アプリにはイスラムの太陰月の開始マークが表示され、天気アプリには地元のユーザーに馴染みのある温度スケールの方向が使用されます。これらの詳細により、ユーザーは尊重されていると感じることができます。入り口: UI デザインにおけるターゲット市場の文化的習慣を調査し、Apple のネイティブ アプリケーションのアラビア語バージョンを参照します。

• バイリンガル インターフェイスの最適化: 中東市場では、アラビア語と英語が混在して使用されることが一般的です。 SF アラビア語は SF Latin フォント ファミリと同じスタイルを持ち、バイリンガル インターフェイスは自然で調和のとれたものです。大文字のラテン語テキストに比べて、アラビア語テキストのサイズが 10% 増加していることに注意してください。エントリ: システムフォントを使用するFont.system()、自動的にSFアラビア語を取得します。

• SF Symbols ローカライゼーション チェック: SF Symbols アプリでアプリで使用されているすべてのアイコンを参照し、ローカライゼーション パネルでアラビア語のバリエーションを確認します。バリアントなしでアイコンを評価するには、RTL バージョンを手動で作成する必要があります。入り口: SF Symbols アプリ → アイコンを選択 → 情報パネル → ローカリゼーション。

• 数値形式の自動適応: 金融またはデータ アプリケーションでは、すべての数値が確実に表示されます。NumberFormatter数値文字列をハードコーディングしないでください。このようにして、システムはユーザーの地域に基づいて西洋または東洋のアラビア数字を自動的に選択します。入口：全てText("\(value)")Formatterを使用したバージョンに置き換えました。

関連セッション

• 右へ（左へ） — 開発の観点から見た RTL 適応の技術的詳細
• グローバル アプリの構築: 例によるローカリゼーション — 例を通じてアプリケーションのローカリゼーションを学習します
• 拡張された San Francisco フォント ファミリの紹介 — SF アラビア語および SF アラビア語 Rounded フォントの紹介