SF Symbols 4の新機能

（音楽）

こんにちは Thaliaです 今日は新しいSF Symbols についてお話しします シンボルは非常に有効な コミュニケーションツールの一つです 感情や物 行動や概念などを表すのに シンボルは素晴らしい 手段になります シンボルは頻繁に 一貫して使われ 習い性となっているため 使用せずに日常を過ごすのは 難しいほどです その結果 インターフェイス デザインに欠かせなくなり 素晴らしいコミュニケーションの 援助手段となっています またシンボルはインタラクションの 手段として役に立ち 空間効率も良く 美観性を高め 非常に使いやすいものです さらに多くの言語を 超越することもできます 万国共通なのです その結果 アイデアをシェア する上で人々を団結させ 言葉以上に深いレベルで エンゲージすることが可能です AppleではUIと 全体的な体験の向上に 常に努めています それがSF Symbolsを 作った理由です 広範なアイコンライブラリで システムフォントの San Franciscoと統合し すべてのApple プラットフォームにおいて 強力で柔軟なデザイン リソースを提供します SF Symbolsは タイポグラフィが基盤で さまざまなweightsやscales outlinedやfilled Variants などの特徴があります これらの特徴と 使用方法については 昨年のWWDCのビデオを ご参照ください 今日は新しいレパートリーと カテゴリをご紹介します レンダリングモードでは 色を加えることの利点を復習し シンボルの挙動を自動にする 新構造についてお話しします Variable Colorという 新機能も追加しました 色でシンボルをダイナミック にする方法を見てみます 最後はシンボルの注釈を さらに効率良くする方法を Unified Annotationsで ご紹介します それでは始めましょう 新しいカテゴリと シンボルで SF Symbolsライブラリは 毎年 拡張しています ホームには ライトやブラインド 窓や扉が追加されました ライトスイッチと コンセントまであります そして新しい家具と家電 健康に関する シンボルもあります フィットネスのシンボルも 今年から使用できます 通貨のシンボルも拡張し オブジェクトも多彩豊富です もちろんローカライズされた シンボルも拡張し さまざまな筆記体や 右書きシステムに対応します 700以上の 新しいシンボルが加わり SF Symbolsライブラリは 4,000以上になりました すごいことです 新しいシンボルが加わり SF Symbols Appを ナビゲートしやすくするため 非常に役に立つ５つの カテゴリを追加しました カメラと写真 アクセシビリティ プライバシーとセキュリティ ホーム そしてフィットネスです もちろんApp内で ニーズにあったシンボルを 自身のコレクションとして 収集できるのをお忘れなく ではレンダリングモード についてお話しします ご存知の通り SF Symbolsには レンダリングモードが ４つあります それぞれシンボルの色を コントロールします Monochromeは最も ニュートラルなモードです 統一され一貫したルックスで SF Symbolsのタイポグラフィを 最もよく反映するモードです Hierarchicalは一つの色調で 美学を追求しつつ 強調を加えたモードです 最も大切な物を ハイライトして深みを与え 前後に浮き出し 遠近感を作り出します 重要部分を強調することで 視覚的階層を作り出すのです Paletteは２つ以上の 対照的な色を使用し 卓越性や多彩性を与え 周りの色彩環境にあった カスタマイズ性を与えます Paletteは全体的美学を 犠牲にすることなく 対照的でユニークな ルックスを与えます Multicolorはシンボルの 本質的でネイティブな 色を象徴するモードです このモードはあらゆる色を シンボルに使用して 実際の色を表現したり シンボルが伝えようとする 意味を強調します UIでシンボルが目立つ時に Multicolorを使って シンボルにまつわる 色彩的な描写を伝達します これまでモードを 選択しなければ Monochromeが デフォルトでした でも今年から シンボルの 特徴をハイライトする レンダリングモードで簡単に 表示できるようにしました シンボルによって異なる 最適のレンダリングモードが 表示されます これをAutomatic レンダリングと呼んでいます これを選ぶと各シンボルを 手動で指定することなく 最適のモードと設定を 提供します 例えばAutomaticを選ぶと camera filtersシンボルは Hierarchicalを自動選択し 実際のレンズとフィルタの 透明度を意味する 不透明度をシンボルに 反映できる このレンダリングモードを 選択します もう一つの例です Automaticを選ぶと SharePlayシンボルは Hierarchicalを選択します これによる人の形が 前面に押し出され ウェイブが背景で 脇役を果たします 友人や家族とシェアし コネクトする SharePlayの特徴が ここに強調されています たいていの場合 Automaticが最適です しかし状況に注意しましょう 例えばAirPods Proのシンボルは Automaticが選ばれると Hierarchicalが選ばれます しかし ここでは シンボルが非常に小さく この背景だと コントラストがありません コンテキストによっては ルックスを統一するため レンダリングモードの指定が 必要な場合もあります この場合 読みやすく ディテールが少ない Monochromeが 最も相応しいモードです ですので常に最適のモードを 選ぶようにしてください いろんな状況下で 視覚的解決策を提供するため モードによっていろんな色が シンボルに適用されます 色はパワフルなツールです さらに掘り下げてみましょう すでにダイナミックな シンボルもあります これらを分析すると ２つの特徴があります １つ目は 形や向きで 強さを表していることです ２つ目は 色で その状況の変化を 伝えようとしていることです 今年はVariable Colorで 色の使い方を さらに拡張します シンボルのベクターパスを レイヤに置き換え それらのレイヤを 連続する順番に並べ これらのレイヤを通して 新しい方法で色を配給します これにより強さのレベルや シーケンスについて シンボルを通して 伝えることができます 一つ重要なのは すべてのパスをシーケンス に使用するものもあれば 一部だけの場合の シンボルもあります 例をいくつか見てみましょう Variable Colorで iPhoneを示すパスを variable sequenceにせず 電波を表すパスを ハイライトしたいとします これにより電波の強さを 強さの順に 表示することができます パスをどう示すか 定義することが重要です 例えばこの場合 電波を 右から左にハイライト するのは無意味です その代わりに電波の強さを 表すパスで グループにせねばなりません ２つの小さい方の電波を １つのレイヤに ２つの大きい方の電波を 別のレイヤにします iPhoneはvariable sequence には参加させません 次はよく見るこのシンボルを 見てみましょう たいてい このシンボルは ある状況と一致する スライダーと一緒に 使われます ユーザーがスライダーを 動かすことで この波もそれを反映し ボリュームの大きさを 表示します 先ほどのiPhone同様 このスピーカーを示す形は シーケンスに参加させません 参加するのは ボリュームの大きさを示す ３つの波の形のものです 小さいボリューム　中間 大きいボリュームです これらのパスは レイヤとしてまとめられ 選ばれたレイヤに Variable Colorが選ばれます 強さはパーセントで 示されます ０％はオフの状態 ０以上ならシンボルの一部が ハイライトされ 100％に近づけば すべてがハイライトされます 一つ大切なのは Variable Colorは 深さは作り出しません その代わりにシンボルが 象徴するステップや 状態を ハイライトするものです 例えば室内の満員状況を示す シンボルが 必要だとしましょう これがいいかもしれませんね では詳細を見てみましょう シンボルの一部を ハイライトするだけでなく シンボルをシーケンスか 範囲として考えるべきです ゴールは違う状態を 反映することで 誰もいない状態 少し人がいる状態 半分の状態 そして満員の状態です Variable Colorを オプトインすると 伝えたい内容を このように簡単に 示すことができます この機能にオプトインできる パスの制限はありません １つでもたくさんでも ニーズにあうデザインを 選択してください 波や光線 楕円やレイヤなど シーケンスに基づく強さを 示したいなら Variable Colorで それが可能です 不透明度が基盤で どのモードでも使用できます

今年 全モードを通して 統一レイヤ構造を作成することで カスタムシンボルのアノテーションが 速く簡単になりましたし パン焼きが好きなので カップケーキ専門Appを デザインしようと思いました カスタムシンボルが 作りたくて ニーズにあうセットを デザインしました これは統一レイヤ構造で どうシンボルをアノテーションするか お見せする絶好の機会です またVariable Colorでも お見せできます この２つを例に使いましょう アノテーションを始める前に 考慮すべきことがあります 階層について考え z-orderを書き出します z-orderはシンボル内での Z軸上のパスの順序です また２つのコンセプトに 注意してください DrawとEraseです これらはレイヤの レンダリングを定義します 例えば ここに 円と正方形が重なった シンボルのパスがあります 正方形があるレイヤを選ぶ時 Drawを選ぶと そのレイヤにある パスを描きます Eraseを選ぶと そのレイヤにある パスが消され シンボルのレンダリングに 影響します ではカップケーキの アノテーションを始めましょう まず 階層を作るため レイヤ内のパスを 整理せねばなりません よく見ると 主な形が４つあります フロスティングとベース バッジとプラスです 必要なだけパスを 足すことができます この場合 フロスティングには ３つのパスがあり それ以外のレイヤは パスが一つのみです このように形を整理すると 全モードに対して 一つの構造のアノテーションに 柔軟性を与えられます これでシンボルの カスタマイズに必要な情報が 一箇所にまとまりました 全モードの アノテーションができます Multicolorを見てみましょう 形は用意できているので 色を選ぶだけです レッドベルベット風味が 好きなので フロスティングは白 ケーキベースは赤を選びます 次にプラスバッジに SF Symbolsで定義される 同じロジックを適用します バッジは緑　プラスは白です いい感じですね バッジに注目します ここではunified annotation アプローチが最適です Multicolorは定義したので HierarchicalとPaletteを 見てみましょう このモードで 階層を使っているので バッジがPrimaryになり このように黒を背景に 白でレンダリングされます ではプラスで バッジの一部を消します Eraseが役に立ちます レイヤが重なる時に その部分を消すことで 想像通りに バッジがレンダリングされます 最後にMonochromeの アノテーションです ここには複雑な要素が ないため 同じロジックを使います プラスで バッジの一部を消します ほぼ完成です あと少し詳細を足します HierarchicalとPaletteでは 残りの形を Secondaryと注釈します コントラストを作るため Paletteで色を選びます そしてMonochromeで 残りの形には Drawが選択されて いることを確認します

これで完成です 全モードに対してカップ ケーキの準備ができました

次にキッチンタイマーです パスは時間の経過を示し これはシーケンスなので Variable Colorが最適です このシンボルにも 同じ方法が使えますが タイマーのパスを １レイヤにまとめる代わりに １レイヤごとに 分けねばなりません これはシンボルの状態を 伝えるため シーケンスを作り直せるよう 形を整理する必要が あるからです Variable Colorは どのモードでも使えます Variable Colorと SF Symbols Appについては "SF Symbolsにおける Variable Colorの採用"をご覧ください 新しいUnified Annotation アプローチや 数多くの新しいシンボルや 機能にアクセスしたいなら SF Symbols Appのベータ版は developer.apple.com/ sf-symbolsにあります Automaticレンダリングから Variable Colorまで シンボルをUIに取り込む時 SF Symbolsは パワフルなツールです SF Symbolsは今年 さらにパワフルになり さまざまな表現が可能な 機能を備えています ありがとうございました お楽しみいただいたことを 願っています