🎨
WWDC21『カスタムシンボルの作成』セッションのまとめ
カスタムシンボルの復習
製図はベクトルパスにて行う
テンプレートはSVG形式
タイポグラフィの配置を整える
余白を調整して視覚的に整列させる
さまざまなウェイトで太文字などに対応
UI要素に合わせて調整できるウェイトに基づく三段階のスケール
テンプレート概要
バージョン3.0に更新
- SF Symbolsの新仕様に従いバージョン3.0になった
- Xcode 13以上が必要
寸法ガイドの名前
- 左・右揃えの寸法ガイドがより明確に名付けられた
- 対応するデザインを明記する
- サフィックスが一致すればテンプレートのどのバリアントでも余白を追加できる
レンダリングモードの追加
- モノクロ、マルチカラーに加え、階層モード、パレットモードが利用できる
古いテンプレートは上位変換される
- 古いテンプレートバージョンのシンボルはSF Symbolsアプリに追加すると3.0テンプレートに上位変換される
静的テンプレートと変数テンプレート
静的テンプレート (スタティック)
- SF Symbolsアプリのシンボルは3.0テンプレートの初期設定で静的と変数の2つのオプションがある
- 静的テンプレートは27セットのパスとRegular-Mediumに余白が１セットある
- 特定のウェイトやスケールを想定している場合やバリアントを数件のみ作る場合に推奨
変数テンプレート (バリアブル)
- 変数設定はパスと余白がそれぞれ３つずつある
- すべてのデザインバリアントをサポートしたい場合はこちらを使う
- 全てのパスの間で互換性と一貫性を保つ必要がある
カスタムシンボルの編集
作成するカスタムシンボル
- 王冠の上にハートのカスタムシンボルを作成する
既成のシンボルを複製する
- 既成のシンボルをカスタマイズしてカスタムシンボルを作成する
- 既成のシンボルの線の厚みやスケール、配置の目安にする
- SF Symbolsアプリで
crownと検索する - メニューから「カスタムシンボルとして複製」を選択する
- サイドバーのカスタムシンボル欄にシンボルが複製される
シンボルのエクスポート
- [ファイル] > [テンプレートを書き出す...]からエクスポートする
パスの修正
閉じたパスに修正する
- 王冠の空洞部を閉じたパスに修正する
ハートを作図する
- Regular-Mediumの厚さに合うよう調整しハートを作図する
ストロークをパスに変換する
- ストロークをパスに変換し、ストロークされた造形を後で色で塗れるようにする
- パスはストロークに比べて微細な視覚上の調整ができる
セミボールドのシンボルを追加する
- セミボールドのシンボルを加える
- iOSのアクセシビリティ機能に適応可能となる
- デザインバリアント間でパスの数を統一するため既存のデザインを希望するレイヤーにコピーする
SF Symbolsアプリに再インポートする
- 既存のセルにドロップするとSF Symbolsアプリ内で更新できる
注釈 (アノテーション)
レイヤーを追加する
- 注釈は必須ではない
- シンボルをモノクロ以外にレンダリングしたい場合に注釈をつける
- 注釈の対象はシンボルの構成要素である個々のパスを使いレンダリングモードに従いレイヤーを形成する
- レイヤーはパスのコレクションにレンダリング情報を加えたもの
- ７つのパスからなる王冠のレイヤーがあり２つのパスからなるハートのレイヤーがある
Zオーダー
- マルチカラーではレイヤーに色が割り当てられる
- 階層モードではレイヤーに階層グループが割り当てられる
- レイヤーには一定のZオーダーが定められ上層のレイヤーが下層のレイヤーを遮断する
注釈のつけ方の概要
- 注釈をするにはSF Symbolsアプリでシンボルを選択しギャラリービューにする
- 右側のインスペクタのレンダリングタブよりシンボルのプレビューと注釈ができる
- モノクロ、階層、パレット、マルチカラーの中から選択できる
- モノクロ以外のモードの場合、選択したモードに沿いレイヤーの追加・加工ができる
- 中央にはプレビューがあり、ここで全パスを操作できレイヤーに割り当てることができる
マルチカラーの注釈
- マルチカラーの場合、システム色とカスタム色の両方が利用できる
- ライトモード、ダークモード、コントラスト、鮮明度設定など様々な状況で対応可能なシステム色をできる限り選択することを推奨
- 王冠のレイヤーを作り色を黄色にする
- ハートを別レイヤーにして色を赤にする
- 王冠空洞部を塗りつぶしのために別レイヤーにして色を黄色にして、さらに透明度を調整する
階層の注釈
- レイヤーの構成は同じ
- 階層では色ではなくプライマリ、セカンダリ、ターシャリの階層データを割り当てる
- 階層データは階層モードとパレットモードで利用される
- 王冠のレイヤーはセカンダリ、ハートのレイヤーはプライマリにする
- デフォルトではハートは完全に不透明ではないので王冠とハートの重複部分が重なって見えてしまう
- オフの場合は左のように透明なレイヤーが下のレイヤーと重複する
- オンの場合は上層のレイヤーは下層のレイヤーを無視し覆い隠す
- 王冠レイヤーの[背後にあるものを消去]をオンにしてハートレイヤーを隠す
パレットの注釈 (の確認)
- 階層データはパレットモードでも使用される
- パレットモードでプレビューして表示を確認する
- Cyanのレイヤーは透明ですがIndigoの王冠は透けて見えない
階層とパレットの比較
- 階層モードは一色のみを使い透明度を階層に合わせて変化させる
- パレットモードは二色または三色の色を割り当てられる
階層が2つのシンボルに二色を割り当てる
- 階層の注釈がプライマリとターシャリの場合
- Color 1はプライマリになる
- Color 2はターシャリになる
階層が2つのシンボルに三色を割り当てる
- 階層の注釈がプライマリ、セカンダリ、ターシャリの場合
- Color 1はプライマリになる
- Color 2はセカンダリになる (この場合、使われない)
- Color 3はターシャリになる
注意点
パスに変換する
- 最終デザインではライブストロークを避け、出来上がった造形にカラーや階層グループを付与できるようにパスに変換する
閉じたパスにする
- 開いたパスは避ける
- 始発点と終着点が繋がらない開いたパスは色を塗ることができない
- 全ての図形で塗りつぶし領域が定義されるようパスが閉じていること
特殊な塗りつぶしをしない
- グラデーションやドロップシャドウなど複数色を使った特殊の塗りつぶしは控える
- シンボルにおけるマルチカラーや階層のデータが無効となる
- 特別効果なしのフラットフィルを利用する
パス数を統一する
- すべてのデザインバリアント間でパス数を統一することはマルチカラーや階層データを利用する際の要件となる
パスの順番を統一する
- 同じ数でもパスの順番が異なるとレンダリングが変わる可能性が高くなるため順番を統一する
注釈済みのシンボルの編集
- パスの数が同じであればポイントの追加・削除 調整は注釈データを維持される
- パス全体の並び替えや削除は注釈データ同期に支障をきたす
- 新たなパス構造を注釈しなおす必要がある
高度なテクニック
- SF Symbols 3では3つのデザインバリアントでシンボルを作成できる
デザインソース
- Ultralight-Small、Regular-SmallおよびBlack-Smallデザインソースが必要
パス互換性
- 全てのデザインバリアントで全パスが同じ数・順序でなければならない
ポイント互換性
- 赤いRegularソースは24ポイント、青いBlackソースも24ポイントと同じ数でなければならない
- 対応する各ポイント間に架空の線があり、その線に沿って２つのパスを融合することができる
補間
- 内側の赤いハートのパスが、より大きい青いハートのパスと融合する
- この種の融合を「補間」と呼ぶ
- Ultralight RegularおよびBlack間の 全てのウェイトが計算可能となる
補間可能なシンボルを作る
- 静的テンプレートではなく、変数テンプレートSF Symbolsアプリより3.0テンプレートをエクスポートする
- ３つのソースデザインの余白とアウトラインが取得できる
- Ultralight-SmallやBlack-Smallの生成の際は、Regular-Smallパスをコピー＆ペーストしポイントのみを調整する
ポイント修正のコツ
-
シンボルを補間可能にしたい場合は互換性の喪失につながるポイントの追加や削除を避ける
-
既成のポイントのみ調整する
-
ポイントの移動やコントロールポイントは互換性が損なわれないため問題ない
Xcodeへのエクスポートとカスタムシンボルの配信
テンプレートの種類
- 配信には２つのオプションがあり2.0か3.0のテンプレートをエクスポートできる
2.0テンプレート
- 2.0テンプレートはiOS 14など旧OSに対応したい場合に利用する
- 2.0はモノクロにしか対応していない
- 2.0への変換は有損失の演算でアノテーションや余白情報は旧OSが未対応のためすべて除去される
3.0テンプレート
- 3.0テンプレートはマルチカラーや階層のデータさらにカスタム余白などに対応可能
- 旧OSには対応できない
シンボルの利用と共同作業
- テンプレートは編集用のソースアーティファクトではない
- 現在のベクトル編集ツールでは組み込みアノテーションデータと互換性がない
- シンボルを編集したり、同僚と共有する場合は、SF Symbolsアプリにシンボルを再インポートすれば、注釈データを失うリスクを回避してモノクロで作業ができる
- リリースの最小ターゲットがiOS 14の場合、2.0と3.0の両方をエクスポートしバージョンチェックの上適切なアセットを使用する
- 最小ターゲットがiOS 15以降の場合、3.0テンプレートのみエクスポートし使用する
- チーム内でシンボルを共有する場合は、3.0テンプレートをエクスポートし、受け取る側のSF Symbolsアプリで読み込めば編集できる
参考資料
Discussion