カスタムシンボルの作成

こんにちは WWDCへようこそ Mikeです 今日は SF Symbols 3の 新機能を活用した カスタムシンボルの作成について 説明します まずはカスタムシンボルが何か いつ使うのかついて復習しましょう カスタムシンボルは SVGテンプレートを使いますが SF Symbols 3では 新テンプレートを導入したので 以前のバージョンとの 違いについて説明します

テンプレートの生成や シンボルの編集 モノクロ以外の レンダリングモードに加え

レンダリングの情報を シンボルに追加する アノテーションについて 説明します

ワークフローを劇的に 向上させるテクニックも伝授します

最後にXcodeへのエクスポートと カスタムシンボルの配信 について触れます まずカスタムシンボルとは 何でしょうか SF Symbolsは2019年に公開され

リリース時は 1,500以上のシンボルが Appで利用できるよう 公開されました 以後 シンボルの数は 増加の一途をたどり ２年後のSF Symbols 3には 3,000以上のシンボルが搭載され テーマやカテゴリも 多様化しました でも この「丸にコップ」のような 既存のシンボルではAppのニーズが 満たされない場合もあるため カスタムシンボルを使います

製図はベクトルパスにて行い カスタムシンボルの テンプレート内に配置します テンプレートsはSVG形式で デザインに加え 寸法ガイドを含みます

このテンプレートにより SF Symbolsの全機能を カスタムシンボルでも 利用できるようになります タイポグラフィの配置を整え シンボルと文字が スムーズに並ぶようにし 余白を調整して 箇条書きや表で 視覚的に整列させます

さまざまなウェイトで iOSのアクセシビリティの 太文字などに対応します

様々なUI要素に合わせて調整できる ウェイトに基づく三段階のスケール これらが SF Symbolsとカスタム シンボルの主な特徴です カスタムシンボルの テンプレートについては WWDC2019の 「Introducing SF Symbols」で 復習することをお勧めします SF Symbolのデザインの詳細については WWDC2021の 「What's new in SF Symbols」を 確認してください カスタムシンボルの用途が分かったところで そのテンプレートについて見てみましょう SF Symbolsの新仕様に従い テンプレートも新しく バージョン3.0ができました このバージョンは バージョン2.0から 重要な機能の改良をしており Xcode 13以上が必要です

このバージョンでは 左・右揃えの寸法ガイドが より明確に名付けられ 対応するデザインを 明記しています

この余白はサフィックスが "Regular-M"とありますが

視覚的に配置の調整で サフィックスが一致すれば テンプレートの どのバリアントでも 余白を追加できます

さらに重要な改良点として このテンプレートに 情報を組み込むことで 各レンダリングモードでの シンボルの見た目を設定できます 既存のモノクロ・マルチカラーに加え 新しい階層モードやパレットモードでも アノテーションが可能です さらにバージョン3.0では より少ない労力で より多くを達成するための 高度な機能を備えています 「上級テクニック」の項目で これを詳しく見ていきます 新テンプレートの完全な仕様は 最新ドキュメントを developer.Apple.com/SF-Symbols で確認してください

テンプレートを理解したところで カスタムシンボルを作成しましょう トランプゲームのAppを 同僚と開発中で 使うシンボルの多くは SF Symbols Appでカバーできました ４種のスートと カードの束を表すマーク ただ 一つ欠けているのは Appで特別な役割を持つ ハートのクイーンです 王冠の上にハートではどうでしょうか SF Symbols Appを開き 既成のシンボルをカスタマイズします こうすれば線の厚みやスケール 配置の目安にできるからです Appで「crown」と検索すると ちょうどよく 塗りつぶしでない バージョンが見つかりました 今のところ順調です 後はハートを足すのみ

コンテキストメニューから 「カスタムシンボルとして複製」 を選択すると サイドバーの カスタムシンボル欄に 複製したばかりの 王冠が表示されます 「Custom.crown」だと わかりにくいので

「Queen.heart」と 具体的な名前にします カスタムシンボルを作るには 良い方法ですが 1.0や2.0のテンプレートを使用した 前年までのシンボルはどうでしょう これも問題ありません 画面に既存シンボルをドロップすると 自動的に既存コレクションに 追加され 3.0テンプレートに 上位変換されます 一旦コレクションに加えれば 「王冠」のようなSFシンボルや 「Teacup.circle」のような カスタムシンボル どちらも SketchやIllustrator Figmaなど 好みのデザインAppに エクスポートできます ファイルエクスポート テンプレートを選択するか コマンド＋Eキーを押し カスタマイズができるよう モノクロで3.0テンプレートを エクスポートします

もともとSF Symbols Appの シンボルなら 3.0テンプレートの初期設定で スタティックとバリアブルの 2つのオプションがあります これはデザインの意図次第で

スタティック設定は 2.0テンプレートに 似ているため 見慣れているでしょう 27セットのパスと 中スケールで レギュラーウェイトの 余白が１セットあります 特定のウェイトやスケールを 想定している場合や バリアントを数件のみ 作る場合は こちらが向いています 一方バリアブル設定は パスと余白が それぞれ３つずつある 3.0テンプレートを生成します すべてのデザインバリアントを サポートしたい場合は 残りの24バリアントの 生成に必要な 最小値を満たすこの設定から 始めると良いでしょう この場合 全てのパスの間で 互換性と一貫性を保つ 必要がありますが

これらの要件と テンプレート設定については 後で詳しく説明するので ご心配いりません 今回はひとつかふたつの バリアントを描画するだけなので スタティック設定を エクスポートします デザインAppで テンプレートを開いて 編集を開始します

2.0テンプレートと同様 不要なデザインバリアントは削除し 数個のデザインから始めます

ただ 互換性のあるパスが まだないテンプレートの場合は Regular-Mediumでの 作図が必要となります

王冠中心部の ハートを配置したい部分を空けて マルチカラーで映えるよう パスを調整し シンボルの特定部分に 色を加えやすくしておきます これで王冠の空洞部は 閉じた図形となりました 次はハートを作図します

加工の際は ストロークを使い Regular-Mediumの 厚さに合うよう調整します これで ハートの 寸法とサイズを調整するための 柔軟性が得られます

デザインに満足したら ストロークをパスに変換し ストロークされた造形を 後で色で塗れるようにします パスに変換するもう一つの利点は ストロークに比べて 微細な視覚上の調整ができる点です このハートの上部のように ストロークが太く 内側に丸みがあります パスに変換すれば もっとすっきりとした形に 調整できます

１つデザインバリアントが できたので シンボルをモノクロ以外に レンダリングする際の 注意点を確認しましょう

最終デザインでは ライブストロークを避け 出来上がった造形に カラーや階層グループを 付与できるよう パスに変換しましょう

また 開いたパスは避けましょう 始発点と終着点が 繋がらないパスのことで 閉じたスペースがない以上 色を塗ることができません 全ての図形で 塗りつぶし領域が定義されるよう 閉じていることを 確認しましょう

グラデーションや ドロップシャドウなど 複数色を使った特殊の 塗りつぶしは控えましょう シンボルにおける マルチカラーや 階層のデータが 無効となるからです 特別効果なしの フラットフィルを ご利用ください デザインツールを見ると テンプレートにはあまり コンテンツがありません

セミボールドのシンボルを加え iOSのアクセシビリティ機能に 適応させましょう このためには既存のデザインを 希望するレイヤーにコピーします

こうすると デザインバリアント間で パスの数を統一できるため 習慣づけておきましょう

すべてのデザインバリアント間で パス数を統一することは マルチカラーや階層データを 利用する際の要件となります

この例ではパスに色付けて 番号と順番がわかるようにしました いずれのデザインバリアントも ４つのパスで構成 最初の２つは ファイルの輪郭 ３つ目は円で ４つ目はプラス符号

マルチカラーにすると インパクトがありますね

この図もまた ４つのパスで構成されますが よく見ると右の図のパスは 順番が変わっており

左の図では輪郭をたどる 最初のストロークが 右の図では３つ目のパスに なっています 同じ数のパスで 順番のみが違う場合 レンダリングが変わる可能性が 高くなります

マルチカラーなら それぞれ異なるものになります 左ではプラス符号の緑が 右ではフォルダに適用されています

Queen.heartに 話を戻します 良い見た目ですね 注意深くデザインバリアントを 作成したので アノテーションを加えて マルチカラーや階層モードに すればさらに良くなります

その前にシンボルを Appに再インポートします 既存のセルにドロップするだけで SF Symbols App内で 更新できます

アノテーションは必須では ありませんが シンボルを モノクロ以外に レンダリングしたい場合は 役に立ちます

アノテーションの対象はシンボルの 構成要素である 個々のパスを使い

レンダリングモードに従い レイヤーを形成します レイヤーは パスのコレクションに レンダリング情報を 加えたものです ７つのパスからなる王冠の レイヤーがあり ２つのパスからなる ハートのレイヤーがあります

マルチカラーではレイヤーに 色が割り当てられ 階層モードではレイヤーに 階層グループが割り当てられます

レイヤーには一定の Zオーダーが定められ 上層のレイヤーが下層の レイヤーを遮断します この点はデザインAppの レイヤー作成と同じです アノテーションをするには Appでシンボルを選択し ギャラリービューにします 右側のインスペクタの レンダリングタブより シンボルの プレビューとアノテーションが できます

モノクロ 階層 パレット マルチカラーの中から 選択できます モノクロ以外のモードの場合 選択したモードに沿いレイヤーの 追加・加工ができます

中央にはプレビューがあり ここで 全パスを操作でき レイヤーに割り当てる ことができます

まずはマルチカラーから

王冠に新しいレイヤーを加え

レイヤーの色を選択します マルチカラーの場合 システム色とカスタム色の 両方が利用できますが ライトモード ダークモード コントラスト 鮮明度設定など様々な状況で 対応可能なシステム色を できる限り選択するのが よいでしょう 王冠には システム色の黄色を使い

１つのレイヤーは完成です お次はハート 独自のレイヤーとし 色は赤にします

また 空洞部にも色をつけ 深みのあるシンボルを 作りたいです

パスは複数のレイヤーで 使用できるので 塗りつぶしのため レイヤーを加え 透明にしたい部分を選択し 透明度を調整した色で塗りました

ハートでも同じようにします

うまくできました 次は階層モードです

レイヤーの構成は同じですが 色ではなく 第一から第三までの 階層を割り当てます この階層データは 階層モードと パレットモードで使います

王冠のレイヤーは第二

ハートを第一レイヤーとします

ハートは完全に不透明ではないので 王冠とハートの 重複部分が 重なって見えます これは重複する図形を扱う際 よく起こりますが

これを避けるために 右側に各レイヤーのトグルを設け

オフの場合は左のように 透明なレイヤーが 下のレイヤーと重複します これがデフォルトの動作です オンの場合は 上層のレイヤーは 下層のレイヤーを無視し 覆い隠します

トグル設定でレイヤーを隠せば シンボルも完成です この階層アノテーションは パレットモードでも使用されるので こちらでもレイヤーの動作を 確認します

大丈夫ですね Cyanのレイヤーは 透明ですが Indigoの王冠は 透けて見えません

パレットモードは 階層モードと違い 単色ではなく二色または三色の 色を割り当てられます アノテーションを行う これら２つのモードを 比較してみましょう

階層モードは 一色のみを使い 透明度を 階層に合わせて変化させます この例では 第一グループと 第三グループがあります 一方 パレットモードは ２〜３色を使い 使用する色の数により 動作が変わります ２色なら 階層の上下に関わらず 各階層グループに分配されます このシンボルは グループが２つのみなので 第一の色は第一グループに 二色目は 第三グループとなります

３色の場合は 階層に従い割り当てられ 第一色は第一グループに 第二色は第二グループに 第三色は第三グループになります

アノテーション済みのシンボルを 編集する場合は テンプレートをエクスポートし ツールにてモノクロで編集し その後再度インポートし アノテーションがまだ レンダリングできるか 確認をします アノテーションデータを 維持したい場合は シンボルのパスの改変には 細心の注意が必要です パスの数が 同じであればよいので ポイントの追加・削除 調整は可能です

しかし パス全体の 並び替えや削除は アノテーションデータの 同期に支障をきたします この場合は 新たなパス構造を アノテーションしなおす 必要があります ２つのデザインバリアントを持つ シンボルが完成しました アノテーションのおかげで その他のレンダリングモード でも完璧です ここで終わりにもできますが これ以外に ウェイトやサイズの組み合わせは 可能でしょうか ここからは３つ以上のデザイン バリアントで カスタムシンボルを効率的に 作成する方法を伝授しましょう

以前は希望する ウェイトとスケールに合うよう パスを調節して 残りのバリアントを 一つ一つ埋めていました しかしSF Symbols 3では これがずっと効率的になりました 互換性のあるデータでたった ３つのデザインバリアントを 提供するだけで 残りのテンプレートを無料で 取得できます これは3.0バリアブル テンプレートで得られる SVGの構造です 互換性の高いデザインのための 要件を学びましょう まず デザインソースを チェックします これらは Ultralight-Small Regular-Small および Black-Smallですが これらが デザイン済みであれば ソースにまたがってパスが 一致するか確認されます Regular-Smallと Black-Smallを比較します

全てのデザインバリアントで 全パスが同じ数・順序で なければならないことは アノテーションの要件でも お話ししました 順番が分かりやすいように 色をつけました ９つのパスがあり 順序も一致

ハートは双方のバリアントで ８番目と９番目の パスとなっています 今のところ問題なしです 次にバリアント間で対応する 各パスの内側も 確認します ハートの外側パスを RegularとBlackの２ソースで 比較します 各パスは一連のポイントから 形成されます 赤いRegularソースは 24ポイント 青いBlackソースも 24ポイントです

このように 対応するパス間で ポイントが一つ一つマッチする 必要があります 対応する各ポイント間に 架空の線があり その線に沿って２つのパスを 融合することができます

Regularソースのポイントが Blackソースのポイントに 対応しているため これが可能です

内側の赤いハートのパスが より大きい青いハートのパスと 融合します

融合により 互換性のあるパス間の どこでも 新たなパスを生成できます この種の融合を「補間」と呼びます ポイントレベルの補間を見たので 次に 視野を広げて これをシンボル全体に 適応してみましょう

Ultralight RegularおよびBlack間の 全てのウェイトが計算可能です

このウェイト調整メカニズムが シンボルの中と大のスケールの デザインバリアントの 生成に必要です

では これらの要件を おさらいしましょう シンボルを補間可能にするには ３つの条件があります

まずこれら３つのデザインソースが 準備されていること

２つ目はパスの互換性です

ソース間のパスが全て一致すること 最後は ポイントの互換性です 対応するパスのポイント数が 一致することです

補間可能なシンボルを作るには どうすればいいでしょうか スタティック設定ではなく バリアブル設定で SF Symbols Appより 3.0テンプレートを エクスポートします そうすれば３つのソースデザインの 余白とアウトラインが取得できます

以前Regular Mediumで 行ったように Regular-Smallに ハートを加えますが 変わるのはスケールのみです

シンボル補間は 厳しい要求を課するため 最初のバリアントである Regular-Smallを 丁寧に作成することが大切です

Ultralight-Smallや Black-Smallの生成の際は Regular-Smallパスを コピー＆ペーストし ポイントのみを 調整しましょう

カスタムシンボルでの 他のバリアントの 自動生成に不可欠な要件なので もう一度見直しましょう

シンボルを 補間可能にしたい場合は 互換性の喪失につながる ポイントの追加や削除を避け

既成のポイントのみ 調整しましょう ポイントの移動や コントロールポイントは 互換性が損なわれないため 問題ありません

完成したら 更新したテンプレートを Appのカスタムシンボルセルに ドロップして 以前お見せしたように アノテーションを加えます ソースは丁寧に作成したので 全27のバリアントができ 実装するだけです カスタムシンボルの作成が できるようになれば 次のステップは シンボルの配信です

配信には２つのオプションがあり 2.0か3.0のテンプレートを エクスポートできます

2.0テンプレートは iOS 14など 旧OSに対応したい場合に限ります 2.0はモノクロにしか 対応していないので シンボルがモノクロのみで 済むことを確認してください

2.0への変換は 有損失の演算で アノテーションや余白情報は 旧OSが未対応のため すべて除去されます

3.0を使えば マルチカラーや階層のデータ さらにカスタム余白などに 対応可ですが 旧OSには対応できません

注意が必要な点として このテンプレートは 編集用のソースアーティファクト ではありません 現在のデザインツールでは 組み込みアノテーションデータと 互換性がない場合があります シンボルを追加で編集したり 同僚と共有する際 SF SymbolsのAppに シンボルを再インポートすれば アノテーションデータを 失うリスクを回避して モノクロで作業ができます

エクスポートした 3.0テンプレートは直接 Xcodeにインポートまたは SF Symbols Appで作業します リリースの最小ターゲットが iOS 14の場合 2.0と3.0の両方をエクスポートし バージョンチェックの上 適切なアセットを使用してください

最小ターゲットがiOS 15以降の場合 3.0テンプレートのみ エクスポートします

チーム内でシンボルを共有する際は 3.0テンプレートをエクスポートし 受け取る側の SF Symbols Appで 読み込めば編集できます 今日は沢山お話ししました 最後にまとめをしましょう 最新の3.0カスタムシンボル テンプレートや その機能の活用と編集方法に加え シンボルを作成し アノテーションを使った マルチカラーや階層データの 追加について話しました

また補間を活用するため さらに厳しい条件を満たす 上級のワークフロー そして最後にシンボルの 配信方法について学びました

配信後はすぐにOSから シンボルを使用できます レンダリングを 適切なモードで行うための 新しいAPIもあります

コードからSF Symbolsや カスタムシンボルを 呼び出す方法については 「UIKitとAppKitにおける SF Symbols」と 「SwiftUIにおけるSF Symbols」 で詳しく確認いただけます 以上カスタムシンボルの全体に ついてお話ししました ぜひ独自のシンボルの作成や カスタマイズをお楽しみください [陽気な音楽]