SF Symbols 7の新機能

こんにちは Apple DesignチームのKelseyです 今日は SF Symbolsに追加予定の すべてのアップデートを紹介します 昨年のWWDCセッション 「What’s New in SF Symbols 6」を 未視聴の方はぜひご覧ください 最新情報を把握し 次に備えるための優れたリソースです 本日の内容に入る前に シンボルの デザインや構築方法を簡単に復習しましょう 今年の新機能を理解する上で 欠かせない部分です シンボルは アイデアや感情が一瞬で伝わるよう 細心の注意を払ってデザインされています これらのアイデアは 1つのベクトルポイントから 連続したパスを作成し 徐々に図形にしていくことで デザインに変換されます 各ベクトルポイントと曲線により 一定の意図のもとで線をガイドし 図形の特徴や輪郭を定義します 曲線と角度は 意図が反映され バランスが取れており 視覚的に情報を伝えられる必要があります

ここでは矢印を取り上げます シンボルは 単に目に見える 輪郭を持つパスではありません そのままではシンボルを完成させる 微妙なディテールが入らないからです 代わりに 入念にアウトライン化された 図形から構築され 比率、余白、視覚的な重みを 正確に制御できるようになっています これにより 明確さと一貫性が得られ より洗練された 目的に沿った外観に仕上がります 一部の図形は 方向が逆の2本のパスで構成されるので それぞれのパスを使って 外観を細かく調整することができます またこれは パスのアニメーションの 動きを定義する上で重要な要素です では 今年の新機能をチェックし それらの機能が 最新の体験に どのように組み込まれているか学びましょう まず 新しいアニメーションと レンダリングのプリセットを含む 「Draw」を紹介します 次に 今年さらに機能が強化された 最新版のマジック置換について説明します グラデーションについても取り上げ シンボルやレンダリングモードへの 適用方法を学びます その後 カスタムシンボルに 注釈を付ける手順を詳しく掘り下げます 最後に APIのアップデートについて説明します 内容が多岐にわたるので早速始めましょう 今年は SF Symbolsに Drawを導入することができました 手書きにヒントを得た新機能で 定義したパスに沿って 表現力豊かなシンボルを作成できます

Drawでは2つの新しい アニメーションプリセットを導入しました アニメーションでシンボルを 画面に登場させるDraw Onと シンボルを画面から消失させる Draw Offです これらのプリセットは シンボルのレイヤー構造を利用しており アプリなどの体験に統合することで アニメーションを通じて 重要な瞬間を強調できます Draw OnとDraw Offは 既存の再生オプションをサポートします 例えば デフォルトオプションのBy Layerですが By Layerでは パスごとに描画の開始時点が異なります より迅速に完了するエフェクトが 必要な場合は Whole Symbolを選択できます これは すべてのレイヤーをまとめて描画し 各描画パスが同時に開始し 同時に終了するものです また Drawプリセットの 新しい再生オプションである Individuallyでは 各レイヤーを1つずつ描画し 前のレイヤーが終了するのを待ってから 次のレイヤーを開始します 意図に沿った表現を追求し それぞれの動きに注目を集めたい場合は このオプションを使用しましょう Drawでは柔軟性を重視し 描画方法をシンボルごとに 定義できるよう設計されています 例えば 風のシンボルでは 左から右へ描画することで動きを表しますが このアラビア文字のシンボルは 文字の書き方向と一致させるために 右から左へ描画されます さらに この正対称のシンボルのように 中心から描画できる シンボルもあります 利用できる描画の方向を理解しておくと 独自のカスタムシンボルに 注釈を付ける際便利です これについては セッションの後半で少し触れます 矢印のように 2つの図形で構成され 1つの図形として動作する 複雑なシンボルもあります Drawはこれらの合成図形にも対応しており 矢印の先端を パスに沿って移動させることができます この動きはシンボルの意味を強化し アプリに活気を吹き込むのに役立ちます Drawについて説明したので 今度はSF Symbolsアプリに移り 新しいアニメーションをプレビューします Draw OnとDraw Offの両方が インスペクタのアニメーションに加わりました まず Draw Onを選択すると 先ほど説明した 3つの再生オプションが表示されます 既存のアニメーションプリセットのように アプリ内でプレビューできます Draw Offも同様ですが リバーススイッチがある点が異なります これは パスを描画方向に従って描画するか 既存のモーションを継続するか 終了点から 逆方向に描画するかを指定するものです Drawはアニメーションによって シンボルに精彩を与えられますが 進捗状況を表現するために 活用することもできます 可変色について馴染みがある方は ご存じと思いますが 一部のシンボルでは 強度や進捗状況を 色によって表現するために 可変レンダリングをサポートしています 解像度を高めるため レンダリング プリセットに可変描画を導入しました 可変描画では 対象の各レイヤーで 新しい描画注釈を活用します

不透明度を下げた各レイヤー上で 特定のパーセンテージで パスをレンダリングします これは ダウンロードなどの 進捗状況を視覚化したり 気温を反映したり ヨガのセッションの 完了状況を示したりする際にも最適です

SF Symbolsアプリに話を戻して 可変描画のプレビュー機能が加わった 最新版の レンダリングインスペクタを紹介します 既存の可変レンダリングピッカーを拡張して 新しい描画オプションを追加しました

を選択すると 対象の描画レイヤーが 可変色の場合と同様に 可変レンダリングに反応します

なおシンボルでは 可変色と描画の両方を サポートするよう設定できますが レンダリング時に選択できるのは いずれか1つだけです このような場合 システムが優先する可変レンダリングの モードを使用する デフォルトのオプションを選択します 新しいDrawアニメーションのほかにも 関連する複数のシンボルの アニメーションの間における 統一感を高めるために マジック置換の機能を強化しました 強化されたマジック置換は 一致するエンクロージャを認識し 2つのステータス間の シームレスな遷移を実現します 2つのシンボルが同じエンクロージャを 共有する場合 システムは そのエンクロージャを維持しつつ 異なるレイヤーを置き換えます さらに サポート対象のシンボルにおいて マジック置換にDrawを追加しました これで 消失するシンボルにはDraw Offを 登場するシンボルにはDraw Onを 利用できるようになります エンクロージャの一致の機能と併せ 対象の各シンボルに これらの新機能を それぞれ適宜活用することで システムは シームレスで 表現豊かな遷移を実現します アニメーションインスペクタの 既存のマジック置換プリセットで これらの機能強化をプレビューできます ご存じの方もおられるでしょうが マジック置換は他のプリセットと同じく アニメーションピッカーの中にあります グラデーションは 一般的に 図像に奥行き、次元、視覚的な魅力を 加えるために使用されます 今年 SF Symbolsにグラデーション機能を 追加できたことを嬉しく思います シンボルにグラデーションを 適用すると 階調のない色では表現できない 光が当たっているような印象を 生み出せます SF Symbolsの新しい グラデーションレンダリングは 単一のソースカラーから 滑らかな線形グラデーションを生成します これはシステムカラーとカスタムカラーの 両方で使用できます すべてのレンダリングモードで使用でき 独自のカスタムシンボルにも適用できます

グラデーションは あらゆる縮尺とサイズで 美しく表示されますが 特に大きなインスタンスで効果的です シンボルの奥行きや次元などに 目を引きつけたい場合に グラデーションを活用します SF Symbolsアプリに戻って グラデーションをプレビューしましょう グラデーションをオンにする 新しく追加されたスイッチは インスペクタの レンダリングモードの下にあります グラデーションのプレビューでは 選択したオプションを使用すると カラーグラデーションが すべてのレンダリングモードに適用されます システムシンボルでこれらの新機能が どのように機能するかを確認したところで これらの新機能を活用するための カスタムシンボルへの 注釈付けについて詳しく説明します ここでは 独自のシステムシンボルに 注釈を付ける方法を紹介します ビデオを見ながら実際に記述してみる場合は カスタムシンボルとして複製し 既存のガイドポイントを削除し 一緒に注釈を付けてみてください 描画の注釈の仕組みを理解するには シンボルの描画方法を 詳しく知っておく必要があります このハートのシンボルの例は 2本の別々のパスで構築されています scribble.variableは 可変幅で描画されています そのため パスをストロークするだけでは アニメーションを構築できません Drawは実際 どう機能するのでしょうか

Drawのアニメーションは 目的の描画パスに沿って配置される ガイドポイントにより動作します これらのポイントは 名前の通り 定義したルートに沿ってパスをガイドします 描画パスを適切に計算するには パスに少なくとも2つの ガイドポイントが含まれる必要があります 開始点は白抜きの円で示され 終点は閉じた円で示されます パスが複雑になるにつれ ガイドポイントを追加して 開始点と終点の間のギャップを埋めたり 複数の描画パスを示したり パスに沿って 矢印の先をガイドしたりする必要が生じます さらに 一部のシンボルでは システムが描画パスを正しく計算できるよう 特殊なガイドポイントが 必要になる場合があります 例えば 複数のサブパスで 開始点と終点を共有する場合もありますし パス内の急カーブはコーナーポイントとして マークする必要があります ここでは学ぶ項目が多いので SF Symbolsアプリに移動して 実際にシンボルに 注釈を付ける方法を確認しましょう まず line.diagonalを例として説明します アプリツールバーのコントロールを使用して ギャラリービューに表示を切り替えました アニメーションリストで かを選択すると Drawツールバーが キャンバスの上部に表示されます 左端のボタンを選択すると ガイドポイントモードになり キャンバス内でカーソルを動かすと 配置プレビューが表示されます

位置に問題がなければ シングルクリックでガイドポイントを配置し 次のポイントの配置に移ります 最初に配置したポイントが 自動的に 開始点になっていることがわかります 2つ目のガイドポイントを配置すると システムが 終点と描画方向を決定し 矢印で示します

アニメーションを試す準備が整いました

いいですね 定義したパスに沿って 上向きに線が描画されます

シンボルが複雑になるとどうでしょうか スクリブルのシンボルはターンが多く 各ターンで アニメーションをガイドするには パスに沿ってさらにガイドポイントを 配置する必要があります SF Symbolsアプリに移動して この注釈を再現してみましょう

既にガイドポイントを数個配置しましたが 急なターンの付近の ギャップを埋める必要があります 複雑な図形のパスを スムーズにアニメーションで動かすには ここで正確に作業することが重要です 確かめてみましょう

完璧です アニメーションでターンが うまく処理されています ここまでは 1つのパスで シンボルに注釈を付けていました しかし 描画するパスが複数ある シンボルはどうでしょうか シンボル内の各パスに 同じルールセットを使用して 特定の描画パスと方向を定義できます このビデオを見ながら 注釈を書いているなら line.3.horizontalで試してみてください

このシンボルに注釈を付ける方法は 複数ありますが ここでは 各レイヤーを選択して 左から右に描画するよう それぞれの線に注釈を付けます

このままでもいいですが 中央の線を逆方向に描いてみましょう 既存の配置ガイドポイントは パスに沿ってドラッグして動かせます 別の既存のガイドポイントに越えるように 開始点をドラッグすると 矢印の方向が反転し パスが反対方向に 描画されることを示します これは一方向に描画する シンボルに最適ですが 中には 中心からの方向性が 想定されるシンボルもあります これらのシンボルについては 注釈を付けて双方向に描画できます この場合の最適なユースケースが wave.3.upです まず パスの中心に開始点を配置し 開始点の両側に 追加のガイドポイントを配置します システムは自動的に双方向性を認識し 開始点の両側に矢印を付けて示します この場合 対称効果を得るために 複数のレイヤーすべての開始点が 整列するようにします スナップ機能をオンにすると 整列しやすくなります

次の2つのパスに注釈を付けると ガイドポイントが パスの頂点と 他のレイヤーの 既存のガイドポイントの両方に スナップしていることがわかります

すべてのパスが 中心から外側に向かって描画されるか アニメーションで確認します ここまで いくつかのシンボルに注釈を付けたので 次は 描画アニメーションを好みに合わせて カスタマイズするための 追加の構成オプションを紹介します デフォルトでは パスは丸みのある エンドキャップで描画されますが 別の方法が必要な場合もあるでしょう この例では ご覧の通り アニメーションが急に終わっています 丸いエンドキャップが この描画に合わないからです これを修正しましょう 開始点でコンテキストメニューを使用し 適応型のエンドキャップを設定すると アニメーションで パスに合った エンドキャップスタイルが使用されます やり直してみましょう

ずっと良くなりましたね これで描画スタイルに合った アニメーションが生成されます 適応型のエンドキャップを使用できるのは 単一方向に描画される シンボルのみであることにご注意ください これまでお見せしたシンボルはすべて 単一のサブパスとして描画される 図形から構築されます しかし すべてのシンボルのデザインが 同様ではありません 複数のサブパスで構築されたシンボルにも Drawの注釈を付けられますが メカニズムが少し異なります この円に注釈を付けましょう 最初のガイドポイントを設定すると システムは それが2つのサブパスに またがって配置されているのを検出し 開始点と終点の両方として扱います これは ガイドポイントの後端にある カプセルによって示されます デフォルトでは アニメーションは 時計回りに描画されます

円を反時計周りに描画したい場合は ガイドポイントのコンテキストメニューから 方向を切り替えることができます 必要な場合 複雑な形状のパスに沿って ガイドポイントを追加することもできます お気づきかもしれませんが このタイプの描画は一方向の アニメーションのみをサポートしており 双方向に描画するように 注釈を付けることはできません 描画と非描画の両方の コンポーネントがあるシンボルの場合 非描画コンポーネントは デフォルトで表示されます しかし 矢印など一部のケースでは 望ましい結果を得るには 追加の注釈作業が 必要になる場合があります そうした場合の注釈方法を確認しましょう

通例どおり シンボルの線コンポーネントは 時計回りの美しいアニメーションです しかし 線を描画する時に矢印の先が 線に付いていればさらに良いでしょう 配置済みのガイドポイントに 矢印の先をドラッグすることで ガイドポイントに関連付けられた 非描画要素である アタッチメントを作成できます アタッチメントのガイドポイントが示す点に アタッチメントが最初に表示され そこからパスに沿って移動します アタッチメントを作成すると 関連付けられたガイドポイントに アタッチされたパスのプレビューが 表示されます 削除する場合は パスをガイドポイントからドラッグし キャンバスの別の場所にドロップします アタッチメントを作成する際に重要なことは ベースとは別のパスとして 描画することです 描画アタッチメントを使うには カスタムシンボルを精査して修正し 矢印の先などの要素を 抽出する必要があります ここまで ガイドポイントの 自動配置を使用して 様々なシンボルに注釈を付けましたが シンボルの作りは必ずしも 単純とは限りません そこで 複雑なパスに注釈を付ける際の 高度なオプションを用意しました ガイドポイントを配置する際 システムは ガイドポイントの各端の デフォルトの配置の決定を支援します しかし 場合によっては デフォルトの位置が そのシンボルに 最適な配置ではない場合もあります

このような場合 optionキーを押したまま ガイドポイントの片側をドラッグすると 関連するポイントに影響を与えずに パスに沿って前方か後方に動かせます 多数のパスが重なり合うシンボルや パスが互いに 直接重なり合うシンボルの場合 ガイドポイントを レイヤーレベルから適切なサブパスに 配置するのは しばしば困難です こうした状況では レイヤーリストでサブパスを直接選択して そのサブパスに特定のガイドポイントを 強制的に適用することもできます セッションの前半で ガイドポイントの概要を説明した際 開始点と終点という 特定のタイプのガイドポイントを 取り上げました ガイドポイント配置の際 システムはパスに沿った配置に基づき タイプを決定します 配置と同様に デフォルトのタイプを 上書きする必要がある場合があります この操作は ガイドポイントの コンテキストメニューから随時実行できます ガイドポイントを標準のポイントにするか エンドポイントとして機能させるかを ここで決定できます また ガイドポイントは随時 設定を自動に戻して システムに面倒な作業を 任せることもできます このリストには まだ取り上げていない 追加のガイドポイントである コーナーという項目があることに お気づきでしょうか 特に鋭い角のパスを描画する場合 システムには特別な処理が求められます そうした際に ガイドポイントを コーナーポイントとして指定します その他すべてのタイプのガイドポイントは 描画するパスの両側に1つずつ 合計2つのポイントを関連付けます コーナーポイントの特殊な点は 2つのポイントを パスの同じ側に関連付けることと 菱形で表示されることです シンボルのデザインに応じて 注釈には多少の試行錯誤が 必要になるかもしれません 最初からやり直したい場合 ガイドポイントの リセットオプションが 各レイヤーの コンテキストメニューにあります ガイドポイントを配置する 正しい方法は1つではありません 様々な配置を試して シンボルに最適なものを見つけてください なお シンボルは 9つの太さと3つの縮尺をサポートします また カスタムシンボルのアニメーションが すべての構成で適切に動作することの 確認も重要ですが 注釈付けが必要なのは3つだけで 残りはすべて システムが処理するので簡単です カスタムシンボルに注釈を付ける場合 最初の注釈の太さは必ずRegularにします これは基本注釈として機能し ガイドポイントを追加および削除できる 唯一の太さとなります

システムは UltralightとBlackという 他の2つの テンプレートの太さに プレースガイドポイントを自動で補間します

UltralightとBlackの各ガイドポイントは 太さをRegularにした 元のガイドポイントに 関連付けられていることに注意してください

太さがRegularのガイドポイントを動かすと UltralightとBlackの 関連ガイドポイントも移動します

シンボルはテンプレートを使用して 各種の太さに対し補間できるため 関連付けられているガイドポイントが Regular、Ultralight、Blackで 同じ順序になっていることが重要です ガイドポイントの現在の配置を 確認しましょう ほとんどの場合は良好な状態です しかし Blackの太さではいくつかの ガイドポイントの配置がおかしいようです これらのガイドポイントの修正は簡単ですが 正しい順序になっていることを 確認する必要があります ガイドポイント番号の表示をオンにすると 確認しやすくなります 各ガイドポイントの横に 一意の番号が表示され Regularの太さで 関連づけられている順序に基づいて ガイドポイントを 実行する順序が表示されます これを見ると 6、7、8の順序が間違っていますが 新しい位置にドラッグするだけで 簡単に修正できます 上書きしたガイドポイントは オレンジ色で表示され シンボルがすべての構成で正しく 描画されるようにする上で役立ちます これで Drawのシンボルの 注釈付けが完了しました わずか数ステップで シンボルに アニメーションを追加できます

注釈が付けられたので 可変描画にオプトインするかどうか ここで決定できます

設定のポップオーバーで 可変レンダリングスイッチをオンにした後 レイヤーリストで 可変描画ボタンを使用して レイヤーをアクティブ化できます セッション前半で触れた 可変レンダリングスライダでも いつでもプレビューできます この選択を行う際は 各レイヤーを綿密にレビューし 適用対象のレイヤーを決めることが重要です この温度計の例では 1つのレイヤーのみで有効にしています そのため メーター部分が 他の描画レイヤーに影響を与えず 進捗状況を示すことができます 以上が Drawのカスタムシンボルの 注釈方法です ここまで SF Symbols 7の 新機能をすべて紹介しました 次に これらの新機能を直接 コードで活用するための APIのアップデートを確認します Drawを適用して 新しい アニメーションプリセットを使うには symbolEffectモディファイアを使い シンボルアニメーションの 既存のパターンに従います SwiftUIでは isHiddenの値が更新されると シンボルがDraw Offになってその後 Onになり アニメーションが適用されます また AppKitとUIKitではそれぞれ drawOnとdrawOffを指定し 各アニメーションをトリガーします 他のシンボルエフェクトと同様に デフォルトのBy Layerを上書きしたい場合は 希望する再生モードを インラインで直接設定できます

可変描画を利用するには 関連するセクションで VariableValueModeを指定します また シンボルを構成する際は 必ず希望する変数の値を設定します 最後に グラデーションレンダリングを 利用するには SwiftUIビューのモディファイアか UIKitとAppKitのsymbolConfigurationで ColorRenderingModeを gradientに設定します コードに簡単な項目を 追加するだけで SF Symbols 7の機能をフルに活用できます また 必要な場合はいつでも SF Symbolsアプリの ボタンで 直接コードを参照できます 今日は多くの機能を学びました 最後に 新機能をフル活用するための 次のステップを紹介します

SF Symbols 7のベータ版を未入手の方は さっそくダウンロードして シンボルライブラリのアップデートや グラデーション機能をチェックし Drawのパワーを体感してください カスタムの描画をレビューして 利用可能な注釈オプションを活用できるよう デザインを見直しましょう フレームワークに関するドキュメントで 新機能をコード内で直接 活用する方法を確認しましょう 以上 SF Symbols 7の新機能を紹介しました 本日の内容が皆さんのお役に立てば幸いです