アラビア語でのデザインصمّم بالعربي

As-salamu alaykum. 私はAppleのDesign部門の ohamed Samirです 今日はデジタルプロダクト デザインとアラビア語の ユーザーインターフェース についてお話します 携帯電話や スマートウォッチなどの 電子機器のインターフェイス も含まれます この講演は アラビア語で行われます また私たちが知る言語と その向きを理解する原理に ついてより詳細な英語版も 用意しています その前になぜアラビア語での デザインが重要かを説明します アラビア文字を使う人は 6億6千万人以上存在します この数字にはアラビア語以外 の言語も含まれています フランス語やドイツ語 イタ リア語が英字で書かれる様に アラビア文字は ペルシャ語やウルドゥー語 パシュトゥー語など他の言語 の文字にも使われています その他にもアジアやアフリカ 諸国の言語にも使われます アラビア語のデザインはユーザ数 だけでなくデザインテンプレートで アラビア語コンテンツを 対応させることが大きな理由です それがアラビア語の特徴や 構成要素にフィットしたのです デジタル製品の多くはアラビ ア語を話さない国で作られます その為言語コンテンツに適し たユーザエクスペリエンスが 得られないことがあります 右から左へ書かれるからです 英語のように左から右へ書きません このことを理解するため 次の例を見てみましょう

右から左へ書く 読むという考え方は 文字や言葉だけでなく その言語を含むテンプレート にまで広がっています これは目の動きやコンテンツ ページの読み方さらには 文字だけでなく写真や 絵の読み方にも影響します ユーザインターフェイスにも 当てはまります そしてエレメント テンプレート 使用するシンボル アイコン

操作ボタンメニューや グラフィックの方向性

テーブルなどのデザイン要素 に至るまで

すべてのパーツが 含まれているのです これらは言語は右から左に 書かれるという考え方のもと 開発者がコンテンツや 使用するApp特有の要素に 集中できるようAppleで 検討されたものです 今日は4つのテーマについて 詳しくお話しします アラビア語のデジタル製品を デザインする際 アラビア語の 方向性がデザインに与える 影響を考慮しましょう その後アラビア語のフォントについて デジタルインターフェイスに 使用するための優れたフォントの 特徴について説明します

続いてアラビア語のシンボルや アイコンについて話し アラビア数字とそのインター フェイスへの影響についてです

ユーザインターフェイスから 始めましょう

この例は App Storeのものです

このデザインがどのように アラビア語に翻訳されるかを把握するために デザインに使われる基本的な 要素を簡略化した図面を見ましょう 冒頭で説明したように 言葉の向きはタイトルや ボタン ページ上のアイコンの配置 文章や段落を書く方向など

デザインを構成する全ての 要素の読む方向に影響します そして最終的に横に並ぶ テンプレートの順番と方向を決め

アラビア語の翻訳コンテンツ に適した形でデザイン要素を配置します 2つ目の例は天気Appです ここで強調したいのは 方向やデザイン要素の所在を 変えることです デザイン 特に写真やビデオ ビジュアルコンテンツの すべてのパーツを反転する という意味ではありません

例えば天気Appの背景画像を アニメーションしたものです 太陽が東から昇り西に沈む 様子を再現しています 最終的なユーザエクスペリエンス に影響を与えないよう 使用する画像とインターフェイス要素の 向きを分けてデザインする必要があります 使用画像を分離する必要が あります 日中の気温など 残りの項目です その中でアラビア語インター フェイスと

温度目盛りの時間順を逆に しますが 始まりと終わりの方向が違う だけではありません 黄色からオレンジへの色の グラデーションなどの細部は その方向を逆にします

本のページのような発想です ページの順番を示す点は 右から左になるはずです 3つ目の例はカレンダーです 数字に関係なく 詳細は 別のパートでお話しします ご存知の通り アラビア暦の数字の順番は 右から左 上から下となります 私たちは

アラブ・イスラム文化や文明に ふさわしいAppの 内容やアイデアを作るよう 常に心がけています これはカレンダーApp内の 例です ヒジュリ暦を使用し 各月に 赤い印をつけています

ここで最後の例は設定にある バッテリーからです アラビア語グラフの向きは 左から右またはその逆もあります

しかし横軸に時間や日数など 時間を表すものが入っている 場合は 右から左への表記が 好まれます 先ほどの例のカレンダーの 向きに合わせて

一般的なグラフの向きも 国によって異なります なのでAppがある国で 一般的に使われているものを 確認しそれに従って作業する ことが望ましいです これはユーザインターフェイスに対する言語の 方向性の影響に関する単純化された発想でした アラビア文字のフォントに ついて説明します

ご存知のように アラビア文字は草書体です 英語など世界のほとんどの 言語にはない特徴です これもアラビアフォントの 豊かさのひとつです ‎例えば「ع」の文字ように 各文字の中の描線は

単語の中の位置によって 変化します

アラビア文字のデザインには 各文字が文頭文中文末に 孤立しているかどうか

その位置によって 4つの形式があります

アラビア語圏以外の国で 使われているアラビア文字を

すべて追加するとアラビア語 デジタルフォントのデザイン 時間がかかりワンフォント ライブラリのサイズや 文字・形状の数にも 影響を及ぼします

比較しないとわからないかも しれないですが アラビアフォントの特徴として 単語や文章が英語などの単語 より小さいことが多いです これは文字のcursivityで 描線がより圧縮されるためです アラビア語はレトリックに特徴 があり意味を伝えるのに 最も少ない単語で済むため アラビア語コンテンツは 英語よりも小さなスペースで 表示されることが多いですが これは文字の長さには及ばず 特にドットやハムザ

発音シンボルを追加した場合は そうなります このためアラビア語フォント は英語よりも長く見えます アラビア語フォントが取る スペースは水平でも垂直でも 配置される間隔やテンプレートに 影響を与える可能性があります 英語のAppを翻訳する場合は 縦方向の行間を広げるといいでしょう テンプレートが小さいと 単語の先端が切れたり 途切れたりすることがある ためです アラビア文字は草書体である と理解した上で その間隔は他言語と異なる ことがあると認識しました 先頃デザインされたAppleの アラビア語フォントについて説明します 個性的で読みやすく使いやす いフォントにこだわりました SF Arabicフォントは Appleの英字フォントに 合わせて2言語が適切に表示 されるよう設計されています 太さの異なる9つのウェイト で構成されており 時計Appなどの デジタル機器のあらゆる Appで ウェイトが使われていること がわかります

タイトルに太字を

都市によって 普通の太さを使い 時間軸の数字には 一番細いフォントを使います またSehaty Appのように 太字 中字 細字のフォントを

使い分けるAppも 多く見受けられます

天気Appでは異なる ウェイトを使用しています

SF Arabicフォントは異な る画面サイズに対応するように 精巧に作られており フォントサイズを変更すると フォントの文字の形が 自動的に変更されます 見出しと本文のフォントの 違いを見ると 見出しのフォントはスタイライズ されたフォントで その縁が四角に近い形状に なっていることがわかります これは見出しで区別し英字 フォントと一致させる為です

しかし同じフォントでも 小さくなるとその文字の書き方が 変わるので文章や段落が 読みやすくなるのです 私たちが見慣れたアラビア 書道のペン画に近づける為に

側面に角度をつけたり 文字との間隔を広くしたり 全体的に文字の太さを 変化させているのです

これら全てはデジタル機器の 中で自動的に行われます これはApp Storeの あるページです

見出しには最も角ばった フォントを使用しています より角度があるフォントが 本文に使われています

アラビア語と英字フォントが どの様に並んでいるかわかります 要因について大まかなイメージが つかめたでしょうか デジタルフォントをデザイン する際に考慮するべきこと その基準はフォントの用途に よって常に異なります インターフェイスに使用される デジタルフォントの規格です 印刷物で使うもの例えば グラフィックや壁などの デザインテンプレートとは 異なります そして今年 新しいフォントとして 円形のエッジを持つフォント 丸いフォントと呼んでいる フォントを紹介します これはAppleデバイスで アラビア語フォントを使う際 更に多様性を持たせる為に 異なるウェイトで設計されています

リマインダーAppで円形 フォントを使用した例です エッジが鈍いフォントは一般のフォントよりも 滑らかで明るい印象を与えます

丸みを帯びたフォントと さまざまな太さのフォント 文字サイズの違いによる文字 の書き方の多様性 これら全て Appleデバイスの様々な Appで確認できます 今年発表されたフォントに ついてもっと知りたい方は 現在英語版しかないですが 2回目の講義の 「拡張されたSan Francisco フォントファミリの紹介」 をご確認ください

今後各地のアラビア語フォント デザイナーから時代のニーズ に合ったアラビア語フォントが 生まれることを期待しています ではデジタル製品で アラビア文字を使う場合の 注意点について説明します まず文字間隔の考え方です アラビア語フォントは 縦にも横にも簡単に伸びる 自由自在なフォントです 残念ながら アラビア語フォントの中には 文字間に間隔が増えるという 考え方に沿って デザインされていないものが あります デジタルアラビア語フォント の多くは元々ラテン文字の ブロック体に合わせて 構築されているためです

そのため リンクの位置がずれたり 文字やスペースが 不適切な場所に表示されて

リンクが切れたりすることが あります　もし使用する

アラビア語フォントが距離感 を考慮しないものならば 文字間の間隔を常にゼロにす るようにするとよいでしょう アラビア語フォントを開発する 為のフォントやソフトウェアが 美的要素である距離感に配慮 すべきです これは現在私たちが使用する フォントで開発しようとしており

フォントの世界では「カシダ」と呼ばれる スペースを追加しているのです

このスペースは柔軟性があり 自然に見え言葉の中で繰り返されません

文字間に間隔を設ける という発想に近いもので 目に見えません 透明度を上げると文字間の リンクが見えてしまい フォントの美しさや小さな デバイスでの読み取りに 影響が出ることがあります これもリンクが表示されずに 単語や文章全体に 透明感が出るように対処した からです 特に元が英語のAppを 翻訳する場合に 最後に考慮するのは 大文字と小文字です これは2通りの書き方がある 英字フォントでのメリットです 同じインターフェイス内の 表現を識別する為に使われることもあります 大文字を使用すると 英字フォントは元の字より 大きく見えます アラビア語では特に App Storeの例のように フォントサイズが小さい場合 その差を埋めるために フォントサイズを

10%程度大きくすることが

望ましいとされています

アラビア文字の特徴について 簡単にお話しました 電子機器インターフェイスに アラビア語フォントが登場した ことを受けてデジタル製品における Appleのフォントについて考察しました

さて次はシンボルの話です シンボルとアイコンは小さいゆえ 多くのAppやゲームで 軽視されがちです なぜなら アイコンはAppでの 新しい体験への入口として 使われることが多いからです そこに注意を払うことで あらゆるAppの

品質と効率を向上させること ができます App Storeで使われているアイコンで 英語とアラビア語のデザインを比べます

最初に使われたアイコンは 書く向きを示す表現が あることがわかります アラビア語デザインでは言語 の向きに合わせてフォントの 向きを変えます 逆に虫眼鏡の傾きは 多くの人が右手を使うことを イメージしています これは言語の向きとは 関係ありません 他のAppの例も ご紹介します

このシンボルのように書く向きを 示す表現があります システムアイコンに固定され ている線の傾きを持ちながら

右手を使ったりスピーカーの 向きを変えたりして インターフェイスのダイナミックパラメーターに 合わせたペンの傾きにしています 最後に日にちの向きを示す 表現があるカレンダーアイコン 前のトピックで右から左へと 説明したものです 使用言語に関係なく 一定の時計回りを保ちながら

5つの例はインターフェース デザインにおける言語の向きの シンボル体系と関連していますが 特にデータやテキスト入力に 使用されるアイコンについて より深いレベルがあります

これらは ラテン文字の代わりに ‎"ض"や"ع"を使ったり アラビア文字の向きや形に 合わせたサインを書いたりと Appleのデバイスを アラビア語用に 変更した例です

現在アラビア語専用のシンボルは 単純な向きの調整 あるいはアラビア文字を含む 新しいシンボルの作成により 300種類以上にも 及んでいます これらはすべて SF Symbols Appで利用でき その中で アラビア語の代替語や 他の言語を見ることが できます シンボルやアイコンに非ラテン 文字でe-インターフェイスに 書かれるのは初めてですが 細かいところにまで気を配る ことでAppの 使用感を向上させました それはユーザの言語や思考に 沿ったものだからです ではアラビア数字について 説明します

いま世界で一般的で ほとんどの人が英語だと 思っている数字は

実はアラブ発祥のものです イスラム圏で発明され ラテン数字に置き換りました 例えばこれまでの西洋での 計算といえばほとんどが 足し算や引き算です この例のような アラビア語の向きのように

右から左へ向かいます 1の位 次に10の位 そして100の位を 足していきます

現在アラビア数字は 東洋式と西洋式があり アラブ世界のさまざまな国で 使われています 現在世界で普及している アラビア数字を使う マグレブの国々も 東洋式を使うレバントや 湾岸諸国の一部もそうです エジプトや サウジアラビアなどの国では 地域や個人の好みに合わせて 設定で

どちらかの様式を使用します 数字の選択は国によって 自動的に行われます そして計算Appや カレンダーAppのように アラビア語ユーザが 利用できる数字を変更する オプションもあります

数字が両様式で設計されて いる文字盤もありますし 他にも文字盤に見られるイン ターフェイスが多くあります 開発するAppに 数字を使用する場合 両様式を使用できるよう 設計するか Appが使用される国や 地域に適した様式を 確認することが望ましいです

アラビア語など右から左へ 表記される言語を網羅した インターフェイスデザインに ついてと詳しく知りたい方は 現在 英語のみで提供されている インターフェースのデザイン ガイドをご覧ください

本日はアラビア語のデジタル デザインやコンテンツ

インターフェイスの 方向性に与える影響について フォントでは アラビア文字の特徴や

Appleの アラビア語フォントについて デジタル製品のフォントに 関する注意点をお話しました

シンボルやアイコンは製品や Appの品質を向上させる事

あらゆる種類のアラビア数字 とその使用方法

そして最後にデザイン ガイドについてお話しました 本講演はApple Developer Conferenceで 初めて行われる英語以外の言語による講演です これはアラビア語デザインを 豊かにしたいという想いからです アラブ世界でのAppの改善や 開発の始まりとなるよう願っています 皆さんが取り組む全ての製品 やAppが使えることを期待しています ありがとうございました