アラビア語で設計する

Mohamed Samirです Apple Designチームのデザイナーです 本日は アラビア語Appの デザインについて 色々とお話します アラビア語でのセッションも ご覧いただけます 始める前に触れておきたいのが アラブ視聴者が使う Appやゲームの デザインや最適化をする事の 重要性についてです 現在 アラビア文字の使用人口は ６億６千万人で アルファベットと中国文字に次いで 世界第３番目の 文字になっています 22カ国以上の町や地域の人々が 皆さんの構築したものを 目にするかもしれません そのほんの一部の人々を 対象にしたい場合でも 言語のみならず UIの方向性も 最適化したいと 考えるべきでしょう アラビア表記は右から左だという ことも理由になります 分かりやすいように 例を見てみましょう アラビア語で 「アラビアの砂漠」です ご覧のように スクリーンの 右から左へ表記されています それだけではありません このフレーズが レイアウト中にある場合 レイアウト全体が上から下に 右から左へと流れ アラビア語の読み方や方向に 合わせてあります つまりタイトルやパラグラフ コラムや画像もすべて 右から左へと流れるわけです これらは全てレイアウトのみならず UIにも当てはまる事になります

Pages Appのこの例でも ナビゲーションバーは 右から左への表示です アイコンもまた 同じ方向を向いています Appでのナビゲーションを 始めてみると メニューもコントロールも グラフィック要素も 図表さえもアラビア語として 自然な方向に 合わせてあります アラビア語で使えるように Appやゲームを最適化するのは 大変そうに思えるかもしれませんが Swift UIのような Appleのフレームワークを使えば そのほとんどの部分は Appleが 既に対処してあるので 皆さんはAppやゲームに 特有なコンテンツや 他の UI要素の詳細などに 集中できるわけです 本日は このような最適化の際に 目を向けるべき いくつかの点に関して お話していきます まずは UIの方向性と 考慮すべきコンポーネントの 例についてです 次にアラビア語表記の主な特性と アラビア語の為に Appleが提供する タイポグラフィのサポートです そしてアイコングラフィが アラビア語体験を どのように全体的に強化するを 説明します 最後は Appleがアラビア語のために サポートする記数法です では UIの方向性から始めます App Storeからの例ですね Todayタブのストーリーカードで フローが始まり ストーリーページになり Appの製品ページで終わります レイアウトの方向性を 分かりやすく考えために ワイヤーフレームにしましょう アラビア語の場合 これらのスクリーンの UIコンポーネントの位置を 替えることになりますね 右から左向きの要素もあれば 左から右のものもあります タイトルやボタンやナビゲーションバーも 順序と位置が変わります パラグラフの頭は常に 右揃えになります カルーセルやスワイプ要素も 右から左に流れます UIコンポーネントの 位置を変更して コンテンツをローカライズし 画像を維持したら 右から左に流れる レイアウトのできあがりです レイアウトの方向性の変更は 右から左への流れを作る ほんの入口に過ぎません 覚えておきたいのは Appの全フローの構造が 変わるということです そしてユーザーはナビゲーションも 逆の方向に動くと考えます ですから Todayタブは 右側に置かれて始まり それからストーリーカードに ナビゲートされ 左側に製品ページが来て 終わるわけで アラビア語の本を読むように ナビゲートされています 繰り返しますが Appleの ネイティブフレームワークなら この全てが自動で行われます 今度は UIの方向性の変化によって 影響を受ける 部分やコンポーネントの例を いくつかお話していきます 天気Appの例を見てみましょう 左側は英語のレイアウトで 右側がアラビア語のレイアウトです

まず気づくのは 画像やビデオや背景など そのようなコンテンツは 同じままです この例では 太陽は常に東から昇り 場所や言語に左右されません ですからこのコンテンツを 逆にしないようにして 全体的体験への影響を 避けましょう

次は「一日の天気」を表す カルーセルです インタラクションもアニメーションも UIの方向に合わせ 反対向きになっています 天気Appでお話したい ３つ目の点は 温度スケールです アラビア語では 最低温度が右側で 最高温度が左側です ですからスケール勾配や目盛りも これにあわせて逆になります 先ほども言ったように ページをめくる メンタルモデルも 逆になっています 最初のページは一番右側で 次のページはその 左側に来ることになります ですからページネーションの ドットも右から左です ２つ目の例として見るのは カレンダーAppで 日や月や年の進行や流れは アラビア語では右から左になり アラブ世界の通常のカレンダーと 同じになるわけです また Appを文化イベントに 合わせることも重要です カレンダーAppのこの例では 下に赤い線の付いた日が いくつかありますね これはイスラム太陰暦での 毎月の始まりを 表すためのもので アラブやイスラム世界にいる 人々に使っていただけます 最後の例は設定内の バッテリーの状態で トグルやセグメントコントローラや デザインやインタラクションは アラビア語レイアウトでは 反転しています 図表もまた UIの方向性に 影響を受ける場所で 特に日や週や月や年などの 時間コンポーネントを含む 図表は影響を受けます バッテリー使用量グラフでは 曜日は英語の UIでは 左から右へと進みますが 一方 アラビア語では 日を右から左に進めることで 先ほどのカレンダーの習慣に 合わせるのが好まれます つまり早い時間は右で 後の時間が左です その他の図表やグラフは 通常 国によりますので 図表の方向を決める前に 再確認することをお勧めします UIの方向性のお話でした 次はタイポグラフィです Appをデザインする際に 考慮したい書体や 活字体の調整について お話する前に アラビア文字および その主な特徴について 簡単にお話していきます この４つのアラビア文字で 「アラビア語」を表しますが これらの文字に意味はなく 意味を成すには 繋げる必要があります

分かりやすくするため iOSキーボードを使って アラビア語の文中に この単語を書いてみます

ご覧のように 繋げられているというのは 単語中の全ての文字が 連結しているわけではありません この単語は２つの部分で成り立ち 各部分には２文字ずつあります これがアラビア語表記の 主要な特徴の１つで 連結という事です 当然 各文字や各ペアでの 可能なグリフは 数多くあるという事です この例での最初の文字は 「アイン」ですが 単語のどの位置かによって その形が変わります 単独なのか… 単語の頭にあるのか… 真ん中か… 末尾なのかですね ですからアラビア文字の フォントライブラリは アルファベットより はるかに大きいのです

アラビア文字のもう１つの特徴は ほとんどの場合 アルファベットより 簡潔だと言う点で 連結される特性から 単語やフレーズを成して 複雑になるわけです 高さも少し高めで ドットや発音記号や, 識別記号を付けると 特に高くなります 発音記号は特定の文字を強調したり 書き文字のみでは全く同じでも 異なる音の単語を 区別するために使われるものです 発音記号の使用頻度が高い Appを作成する場合は UIでの縦のスペースを多めにとって クリッピングを避けましょう アラビア文字とアルファベットの 主な違いを見てきました Appleのシステム API使用者に 提供される書体について話しましょう Appleは読みやすさと機能を 考えてデザインされた 独自のアラビア文字書体を 提供しています アルファベットのＳＦファミリー スタイルとも合うデザインなので バイリンガルコンテキストの場合も 自然に感じられます アルファベットのように ＳＦアラビア文字も Appに使えるあらゆる 太さが用意されていて ウルトラライトから ブラックまであります AppleのネイティブAppの色んな所で 異なる太さが使われています その良い例が 時計ppです タイトルには太文字… 異なる市名にはレギュラー… そして時計の数字にライトが 使われています AppleエコシステムのAppを もっとご覧になれば 実に様々な太さが 使われている事が分かります

ヘルスケアAppでは太字や ミディアムやレギュラーが タイトルや本文に使われています 天気Appでは数字や本文に 様々な太さが使われています SFアラビア文字は スケーラビリティも備えています つまりポイントサイズに応じて わずかに形が変化するということです いわゆるオプティカルサイズです 最大サイズと最小サイズの 文字の構造の違いが お分かりになりますね 大きな文字は通常 タイトルやヘッダに使われます SFファミリーの他の文字同様 現代的なデザインになっています 反対に 小さいポイントサイズは パラグラフや本文に使われますが 読みやすさや機能性を スタイルよりも優先しています 末端に角度を加え 全体のフォント構造に 幅とコントラストを加えて それを実現しています システムがこれをしてくれると 覚えておきましょう ポイントサイズに応じて 適切な形を自動で選びます ここでの例は App Storeの エディトリアルシートで タイトルではディスプレイを使い パラグラフではテキストを使っています どちらにおいても アラビア語と英語の書体が ２カ国語併用の文章で 自然に繋がっていますね

SF Arabic Scalable書体は エコシステム中で使われますが 皆さんのAppやゲームでも 使っていただけます そして今年は SFファミリーに SF Arabic 丸文字を導入し ウルトラライトからブラックまで あらゆる太さが提供されています

例に挙げるリマインダーAppでは SF Arabic 丸文字がタイトルと 本文テキストで使われています 丸文字はご覧のように 状況に応じてイメージを 実用的 活動的 あるいは柔らかく 変えることができます

SF Arabicの丸文字書体の使用や 様々な文字の太さ そしてスケーラビリティは 全てのネイティブAppで見られ 皆さんにもお使いいただいて アラビア語ユーザーに最高の体験を 提供してもらえたらと思います SF Arabic丸文字を含む 今年発表の全ての 新フォントについての詳細は 画面左下に出ている 今年のセッションを 是非 ご覧ください では アラビア語の書体を使う際の タイポグラフィの注意点について いくつかお話します アラビア語は大文字と小文字を 区別しない言語です デジタルのアラビア語フォントは アルファベット小文字の大きさです 大文字を使ったアルファベットは かなりボリュームが増え それに比べるとアラビア文字が 小さく見えます UI上のオプティカルサイズの差を 調整するために アラビア語のフォントを 10％増やすということもできます このわずかな操作で 読みやすさが向上し 特に小さなポイントサイズで 大文字が使われる時は有効です 注意すべきもう一点は 文字の間隔です アラビア文字は連結するので アラビア文字の書体によっては 完全に最適化されず 適切な間隔が開きません その結果 連結箇所が 間違っていたり 文字が切られたり 不要な間隔が開いたりします 書体の最適化が不完全で 間隔が正しくない場合は 必ず０トラッキングを使うか 当社のシステムフォントなら 正しい文字連結が加えられます アラビア語でのこの連結線は “カシーダ”と言い システムは異なる長さの カシーダを加えて アラビア語として自然な 間隔を開けてくれます 注意すべき最後の点は透明度です 文字間の結合部が 見えることがあります これはフォントかシステムが アラビア語に対して 完全に最適化されて いない結果なのです 当社のシステムフォントなら この心配はありません 単語かフレーズ全体に 不透明度が適用され あらゆる歪みを防ぎます これまでアラビア文字の 主な特徴について お話してきた内容は 当社のエコシステムで使われる アラビア語の書体や アラビア語の取り扱いにおける 注意点についてでした 今度はアイコングラフィについてです アイコングラフィは UI要素の中でも 忘れられがちなものですが 通常 ユーザーフローへの 入り口であったり 特定のアクションへのトリガーで 正しいアイコングラフィを持たなければ シームレス体験は 不可能になります 我々はアラビア語での ユーザーの皆さんにとって 最も関連性のあるシンボルを 選択している自負があります App Storeのタブバーのアイコンを 例にしてみましょう アラビア語の UIのシンボルは 変更有りと無しとが混在しています その判断の理由を理解するために いくつか見てみましょう

Todayのタブのシンボルは 文の流れる方向を表し 右側が揃っている方が アラビア語ユーザーにとって 普段の読み方向と合っているので 自然になります 一方 虫眼鏡の方向は 右利きの人の利用を表し 世界の大半のユーザーに 当てはまる現象であり 場所に関係ないため アラビア語の UIでも そのままにしたわけです

こちらは他のAppからの例で 方向性がアラビア語の UIに 与える影響を 表しているもので ペンの角度は変わらず 右から左に書くとか UIでのスピーカーの方向を 自然な方向に変えつつ スラッシュの角度は同じままで Appleエコシステムを通して 一貫しています 月の進み具合を表す カレンダーの点の方向は 変えてある一方 時計の針はそのままで システムでの物理的時計と 合致しています 方向性に加えて 各地域に関連するシンボルは これまで時間をかけて尽力してきた もう１つのレイヤーで 当社が国際市場で優秀さを 持続できている要因の１つです SFシンボルライブラリにある アラビア語特有の シンボルの例ですが 特別に書かれた アラビア語の署名記号や 他のテキスト書式シンボルです この全てと さらに300個の 右から左へのアラビア語シンボルが SF Symbols Appで見つかります Appでは簡単に シンボルを選んで 情報パネルでローカライゼーション セクションをチェックすると アラビア語のローカルバージョンや 他の文字が見られます 当社のシステム API使用なら Appに自動的に 右から左用のシンボルが 表示されます 正しいシンボルを使えば Appの体験自体が変わり ユーザーへの関連性が高まります アルファベット以外の文字を使う 国や地域には特に 注意を払う事が大事であり 言語や文化のニュアンスの差を 忘れないようにすべきです 皆さんがアラビア語のユーザーにとって 関連性の高いアイコンを 作成してくれることを期待します それではアラビア数字に移りましょう 我々が皆 馴染んでいる数字は 世界中の大半の国で使われており アラビア数字と呼ばれます それはアラブ世界で発明されて 当時のローマ数字に 置き換わったからです

今になって気づくかもしれませんが 数学的計算はすべて 右から左へと行われ アラビア語の読み方と 合致しているのです この例のように 足し算は１の桁から始まり それから10の桁 そして100の桁です 現代ではこの種の数字は 西アラビア数字と呼ばれ その反対側にある アラビア数字の種類が 東アラビア数字です どちらもアラブ世界で発明され 現在は異なるアラブの国々で 使われています 西アラビア数字は 西側のアラブ諸国で使われていて モロッコやアルジェリアや チュニジアなどですが 東アラビア数字はレバントや 湾岸諸国で使われています エジプトやサウジアラビアなどは 両方とも使います

どちらを使うかは ユーザーの国に従って 自動で選択されますが ユーザーの選択によっても 決める事ができます この選択は当社のエコシステム内の 数字を使う全てのAppで 反映されています 計算機Appや… カレンダーAppや… 文字盤タイポグラフィは 両方の数字で 美しくデザインされています 他の多くの文字盤についても 文字盤ギャラリーでご覧いただけます 開発中のAppが数字を含む場合 両方の数字を適用したり どの国をターゲットにするかによって どちらが適切なのかを 確認しましょう 右から左へ読み書きする言語の デザインガイダンスの詳細は Human Interface Guidelines中の Right to Left guidelinesを ご覧ください 本日のお話は アラビア語での デザイニングについてで 言語が UIの方向性に与える 影響についても見てきました 書体のセクションでは アラビア文字やその書体を紹介し アラビア語 UIでの注意点を いくつか挙げました アイコングラフィについても話し App体験に与えるその影響や アラビア数字の２つの種類 そして Right to Left Guidelinesを紹介しました

これらの全てを デベロッパとして 詳しく知りたい場合は 画面下に出ている セッションをご覧ください 皆さんが本日の内容を参考にして 適切なツールを見つけ アラブ世界で使われるAppの デザインや最適化に繋がれば幸いです 皆さんの素晴らしいアラビア語Appを 使える日を心待ちにしています