SF Symbolsの新機能

こんにちは タリアです Apple Design Teamの デザイナーです 今日は SF Symbolsについて お話しします UIデザインの 一要素として シンボルの価値は 言うまでもありません

ユーザーとデバイス間の 最もシンプルな伝達方法で 直感的ナビゲーションと 利便性の 鍵となります

またほとんどが 言語に依存しないため 素早くナビゲートでき インターフェイスが 使いやすくなります コンテンツの伝達や 実行の呼び出しが楽になり 複雑で抽象的な コンセプトの解決に シンボルが 役立つこともあります SF Symbolsは San Franciscoフォントに シームレスに統合されるよう デザインされており すべてのApple プラットフォームにおける パワフルで柔軟性のある リソースを提供します 今日はまず SF Symbolsの基本を おさらいします

また拡大するレパートリーから 新しいシンボルをご紹介します

スクリプトカバレッジの増大で ローカライズされたシンボル が追加されました これらをローカリゼーションで 確認してみます

シンボルの構造を学び その構造がどう 色に影響するか学びます

また レンダリングモードで シンボルに色を追加する メリットを紹介します

そして最後に SF Symbols Appと カラーライブラリの アップデートについてです では 始めましょう シンボルには自動的に テキストラベルと一致する 幅広いウェイトがあります iOSではSF Symbolsは Dynamic Typeと Bold Textのアクセシビリティ 機能をサポートします またSF Symbolsには ３つのスケールがあります SmallとMedium そしてLargeです

これらのスケールは 同じポイント数を維持し スケールだけが変わります 太さは視覚的に調節され ウェイトはテキストと整合します

また２つの配置があります 一つ目は垂直配置で シンボルはスケールや ウェイトに関わらず San Franciscoの キャップハイトの 中央に配置されます

シンボルによっては ネガティブマージンがあります これらのマージンは 水平配置に役立ちます 例えば ほとんどの バッジがついた シンボルの場合です UI上では シンボルは 水平中央に配置され 類似したバリエーションなら 一貫した見た目を維持します

SF Symbolsの全機能については WWDC20のセッションを 参照してください 次はバリアントについてです シンボルは コミュニケーションに役立つ 象徴的価値の表現です 例えば愛という言葉は ハートで描写されます UIではシンボルは 意味を伝達するための 視覚システムです この伝達システムを さらに豊かにするため 同じ意味のシンボルが いろんな形で表現できます

SF Symbolsではデフォルト つまりユニバーサルバリアントは シンボルのアウトラインです タイポグラフィにおいて 同じツールで作成した シンボルと文字を考えて みましょう コンテキストがなければ アウトラインが デフォルトになります

シンボルを目立たせたい時 例えば 選択しやすいよう 表面部分を 色で埋めたい時などは 塗りつぶしのバリアント がいいでしょう

SF Symbolsでは さまざまな形態の シンボルがあります アウトラインや塗りつぶし またスラッシュの バリアントもあり 削除機能や 無効 または 利用不可のアイテム などに使います

囲みのバリアントは シンボルを円や四角 長方形などで囲む ものです

これらのバリアントは UIをさらに豊かにし インターフェイス要素や コンテンツの 視覚的階層の設定に さらなる柔軟性を提供します 明確な視覚システムは 実行内容が複雑でも 外見上は そのように見せない 効果があります そのため シンボルのバリアントを 使い分けることが重要です iOSのタブバーで スワイプした時の 塗りつぶしのシンボルは 一貫した外見と 強調度を提供し 明確に定義された 色を使うことで 選択オプションの 提示に役立ちます 塗りつぶしのバリアントの 円型のシンボルは 小さいサイズのUIで 読みやすくなります デフォルトの アウトラインのシンボルは ツールバーや ナビゲーションバー またはリストなど シンボルがテキストと 一緒に表示されたり シンボル間の統一性が 望まれる場合に最適です 独自のシンボルを デザインする時 一貫性とユーザーの ニーズを考慮します そうすれば シンボルの操作で 発生するアクション または シンボルと関連する コンテンツの意味が 視覚的に伝わります 全プラットフォームで シンボルを利用できます 拡張を続ける SF Symbolsライブラリに 今年は約600の新しい シンボルが追加されます またApple製品やデバイス

ゲームコントローラー用も 追加されました

ヘルスケア関連のシンボルや 通信関連のシンボルも 豊富です

新しいInsetシンボルは インターフェイスの レイアウトや ウィンドウ管理の デザインに最適です

またwatchOS用シンボルも デザインしました

新しいオブジェクト が多数追加された

SF Symbolsライブラリには 3,000以上のシンボルが 用意されています

次はローカリゼーション についてです Appleでは インターフェイスの 包摂性を強化し 多文化なグローバル ユーザーを考慮しています

今年は SF Symbolsの スクリプトカバレッジを アラビア語 ヘブライ語 デーヴァナーガリー語 に拡大し またデザインに関しては タイ語 中国語 日本語 韓国語に広げました

ユーザーのデバイス言語に基づき これら全ての ローカライズされた シンボルと スクリプトバリアントが 自動的に採用されます 右から左システムも含まれます もし左から右と 右から左の 両システムを デザインするなら 両ローカリゼーション バリアントの 方向性と 全体の見た目を考慮します 場合によっては シンボルの鏡像が 意図と異なることも あります この場合 ご覧のように このスクリプト用に デザインの変更が 必要になります

右から左用の デザインを 学びたい場合は Human Interface GUIdelines を参照してください

ではシンボルの 構造についてです 全てのシンボルは ベクターポイントが起点です そこから２タイプの セグメントが生まれます 直線と曲線です ベジェ制御点と 呼ばれています 完全に包囲された形として パスを作ることで シンボルのデザイン ソースを定義します そしてさらにソースを追加して スタイルの幅を広げ ポイントの互換性を 確認します これは いずれのソースも ベクターポイントの数が 同じだということです 次にデザインソースを補間し ウェイトとスケールの異なる インスタンスを作ります ご覧のように シンボルを作る時に 形に一貫性を持たせ 十分な柔軟性を確保するには パスに 隙間がないことが 非常に重要です

補間と シンボル描画の 詳細については Create Custom Symbolsを 参照してください

これまでペンツールで 描いたことがあれば ストロークをご存知でしょう 通常 これはパスに厚みを 与えるものですが SF Symbolsでは 少し違います 注意してみると ストロークはパスに沿って 厚さの数値を与えます ストロークの厚さは自由ですが 通常 パスを中央に配置します ストロークの境界線には ベクターポイントが ないため ストロークの 厚さを定義する ベクターポイントは 補間には 適切ではありません 補間をしやすくし 形をコントロールするための 適切なデザインをするには ストロークをアウトラインに 転換せねばなりません これには ほとんどの ベクターグラフィックエディタや デザインツールが使用できます

描き方がわかったところで 構造と形を見てみましょう お気づきの通り シンボルには 幾つかの オブジェクトを結合した ものがあります 例えばこの 共有シンボルは 矢印と四角形を使っています これらが結合された時 どちらかを強調しして もう一方を抑制できます こうすれば バッジやオーバーラップで デザインの戦略を 定義できます １つのシンボルで 全面と背面の要素を 決定することができ 違ったコンテナの形で さまざまな バリアントを作成でき 汎用性を持たせられます スクリーンをハイライト することもできます これらはアノテーションで 実現されるものです パス内のベクターを レイヤーのように グループ化しました こうすることで シンボルの構造の 第一 第二 さらには第三レイヤー を確認でき 階層を作ることで 可能性が広がります シンボルを お披露目する前に レンダリングモードについて 話しましょう カラーは言語同様 非常にパワフルな上 美的要素であるだけでなく 思考に影響し 行動の変化や 反応を促します 伝達の手段として 色には説得力があります ご覧のように SF Symbolsは カラーを使用すると 非常に汎用性が高まり さらにパワフルな ツールになります カラーを使用することで シンボルはユーザー エンゲージメントの鍵となり 明確に表現したり 注目を集める上で 役立ちます 今年 新しい レンダリングモードが 追加されました 階層とパレットが マルチカラーと モノクロに加わります まず 階層モードです このモードは 単一のカラーと不透明度を使い シンボルに視覚的階層を与え 深さと強調を加え １つの色相で 見栄えをコントロールします 共通の形を持つシンボルが いくつか並んだ時 このモードで 違いを目立たせ シンボルを読みやすくし 認知を促します また シンボルの要素を 取り除くことなく 透明度の調整で 視覚的に余分なノイズを 減らせます これはシンボルに 第一 第二 時には第三要素の階層を アノテーション することで可能になります シンボルに 基調のカラーが塗られると 自動的に 階層全てのレイヤーに 違った透明度が適用され シンボルの特性を 強調します

では階層レンダリングモードで シンボルを分析してみましょう 全ての階層レベルがある シンボルがあります 雲と太陽と雨のシンボルが いい例です しかしほとんどのシンボルに ３つのレベルは ありません これはデザインによります これらを見てみましょう シンボルの第一要素に 触れることなく 間に 隙間があるものは 第二の要素です 境界線が触れ 中に囲まれているもの ここに今 見えている 円やスクリーンは 第三の要素です 階層 レンダリングモードで 階層とカラーによる強調だけで しっかりしたインターフェイス を作成できます 階層モードで できることを踏まえ パレットモードで さらに広がる 可能性を見てみましょう 階層レンダリングモードは 単一のカラーを使います それと比べて パレットレンダリングモードでは ２つ以上の対照的な色を使い それぞれの要素に使われる カラーを個別に調整でき シンボルの要素を目立たせたり 汎用性を高めることができます さらに パレットレンダリングモードには 不透明度のコントロールがあり UI全体のデザインに合った シンボルのカスタマイズができ さらに可能性が広がります このレンダリングモードは 階層と同様 レイヤーアノテーションの データに依存しています ２色だけ使用する場合は 第三レイヤーは 第二レイヤーと 同じ設定になります このことを アノテーションの際に 考慮してください

パレットレンダリングモードでは いくつものシンボルに 同じカラーのパレットを 適用できるため 同レベルの機能性を持つ シンボルのグループを 見分けることができます 一方 よく似たシンボルに 違うカラーを割り当て 機能を定義することで アクションの違いを 他のシンボルと 明確に分けることもできます このように パレットレンダリングモードでは シンボルにコントラストと 汎用性を与えられます

次はマルチカラーです

マルチカラーは シンボルの本質的 または本来のカラーを 象徴します つまり現実の世界において そのオブジェクトの 外見に関連する複数色を 使用するか コンセプトと 指定した色が表す 意味を表現できます この例では “追加”のコンセプトは 緑で示され “削除”のコンセプトは 赤で示されています 多くのシンボルには デフォルトである この本質的カラーが 使用されています カスタマイズすれば 各カラーは任意的に 割り当てられます マルチカラーシンボルで シンボルの個性を強調し その形に相応しい カラーでのメッセージを 形成できます マルチカラーがシンボルを 左右する例は いくつかあります 全体にカラーを塗る場合 一部に塗る場合 つまりシンボルの一部が マルチカラーで それ以外はアクセント になる場合です 最後に マルチカラーの情報が 何もない場合 モノクロでレンダリングされます

今年 マルチカラーを伴った シンボルが いくつか加わります 使用できるカラーの範囲は 無制限です

最後はモノクロです

モノクロは SF Symbolsの タイポグラフィに 最も近いものです

中立的なカラーで 他のシンボルと 競争することなく うまく溶け込みます

カラーと不透明性が 使用できますが 他のレンダーモードと違うのは モノクロでは レイヤーの アノテーションデータに関わらず すべてに不透明度が 適用されることです

均一性を最優先するなら 統一性と一貫性が 最も優れたモノクロが 理想的です

次はSF Symbols Appに ついてです

今年 Symbols Appに 大きな変更を加えました お話しした通り 新しいレンダリングモードも 含まれています モノクロ 階層 パレット そしてマルチカラーです

レンダリングモードでの 色の選択には カラーピッカーがあります 既存のカラーライブラリから システムのアクセントカラーを 選ぶか カスタムカラーを選べ SF Symbols Appにある 全てのカラーが Appleの 全プラットフォームで 利用できます またカラーライブラリに アップデートがあり ライトや ダーク そしてコントラストを 強調したものがあり プラットフォームにより 調整されます その結果 プラットフォームによっては これまで 他のプラットフォーム に限定されていた 新しい色が加わります 例えば茶色は 以前はmacOSのみでしたが 全プラットフォームで 使用できるようになりました

またティールは 視覚的な認知を 正確に反映できるよう 緑の色相が足されています なお 以前のティールの カラー値の名前が シアンに改まりました これまでティールを 使用していた場合 外観を維持するには シアンに変える必要があります

さらにインディゴとパープルが より一貫した色相で 全プラットフォームで 使用できます

レンダリングモードの選択から 色の調整まで SF SymbolsはUIに シンボルを使用する上で 非常にパワフルなツールです SF Symbols Appに関しては Explore the SF Symbols 3 Appをご参照ください

それではおさらいです 新バージョンのAppを ダウンロードいただけます 何百もの新シンボルがあります SF Symbols Appのベータは developer.apple.com/ sf-symbolsにあります

バリアントと SF Symbolsの基本について お話ししました

ローカライズされたシンボルの 新スクリプトカバレッジと 右から左システム用の 新シンボルがあります

シンボルの構造と ベクターポイントとパスでの レイヤーアノテーションに ついて学びました

また 新しい レンダリングモードにも 触れました 階層とパレットです さらにマルチカラーと モノクロの素晴らしい機能を 復習しました どのレンダリングモードでも 動的に 全ての Appleプラットフォームに 適応します

自動的に鮮やかさと アクセシビリティ設定 アピアランスが 調整されます カスタムカラーでも 使用できます

新しいSF Symbols Appと カラーライブラリを ご紹介しました

今年 SF Symbolsは よりパワフルで 柔軟性があり 設定しやすく ニーズに適応できます

１つのシンボルに９つのウェイト それぞれに ３つのスケールと ４つのレンダリングモード すごいと思いませんか？ SF Symbolsの新機能を お楽しみいただけたでしょうか ぜひ ご活用ください [音楽]