🎨

ドキュメント『アプリのカスタムシンボル画像を作成する』のまとめ

に公開
SF Symbols
tech

カスタムシンボル作成手順

  1. SF Symbolsアプリで、テンプレートを書き出す
  2. ベクター編集アプリで、SVGファイルを編集する
  3. ベクター編集アプリで、ファイルをSVGファイルとして書き出す
  4. SF Symbolsアプリで、SVGファイルを検証する
  5. SF Symbolsアプリで、グループに整理する
  6. SF Symbolsアプリで、注釈を追加する (必要に応じて)
  7. SF Symbolsアプリで、シンボルを書き出す

静的テンプレートと変数テンプレート

  • テンプレートを書き出すときは、静的か変数かを選択できる

静的テンプレート

  • 特定のウエイトとスケールをターゲットにしている場合に使用する
  • 27セットのパスと1セットのサイドマージンが必要

変数テンプレート

  • すべての設計バリアントをサポートする予定の場合に使用する
  • 3セットのパスと3セットのサイドマージンが必要
    • システムが他の24を生成する

変数テンプレートの制限

  • Ultralight-S (特細-小)、Regular-S (標準-小)、Black-S (極太-小)が含まれていること
  • パスベースであること
  • パス数が同一であること
  • コントロールポイント数が同一であること

ガイドレイヤー

  • 3つのスケールのそれぞれについて提供されたベースラインとキャップハイト情報を使用して、シンボルのベースラインオフセットとキャップハイトを計算する
  • 互換性がSF Symbols 3から、シンボルの各バリアントはサイドマージンを持つことができる
  • サイドマージンにより、すべてのバリアントのマージンが固定ではなく、ウエイトとスケールによってわずかに変化する
  • サイドマージンは、left-margin-<variant-specifier>またはright-margin-<variant-specifier>の形式がある
  • 水平方向の負のサイドマージンを含めることができる
  • サイドマージンを指定しない場合、システムは次の順にマージンを決定する
    • 補間されたカスタムマージン（テンプレートが補間可能な場合）
    • Regular-M
    • Regular-S
    • システムが使用できる利用可能なマージン

スケールファクター

ウエイト Small (小) Medium (中) Large (大)
スケールファクター 0.783 1.0 1.29

注意点

  • 非表示のパスは使用しない
  • ドロップシャドウなどの追加エフェクトを使用しない (標準のフラットカラーフィルを使用する)
  • すべての図形に開始点と終了点が接続されている定義された塗りつぶし領域をつくる

Notesレイヤーは変更の必要がない

  • Notesレイヤーには、テンプレートファイルに関するオプションの注釈とメタ情報が含まれている
  • 内容を変更する必要はないので、誤って編集しないようベクター描画アプリのアートボードレイヤーをロックすることを推奨する

SVGファイルのエクスポート時の注意点

  • ベクトル描画アプリから最大限の精度でSVGファイルとしてエクスポートする
  • Illustratorはデフォルトで低精度のSVGを生成するため、デフォルトの小数点以下の桁数を7以上に変更して、SVGをエクスポートする

要件に準拠していることを確認

  • SF Symbolsアプリで「ファイル」>「テンプレートを検証...」からカスタムシンボルの検証が確認できる

可変色の設定

  • <style>タグで可変色の閾値を設定できる
<style>
    <!-- A symbol that contains three variable color layers --> 
    .monochrome-0 {fill:#000000}
    .monochrome-1 {fill:#000000}
    .monochrome-2 {fill:#000000;-sfsymbols-variable-threshold:0.0}
    .monochrome-3 {fill:#000000;-sfsymbols-variable-threshold:0.34}
    .monochrome-4 {fill:#000000;-sfsymbols-variable-threshold:0.68}
</style>

互換性

SF Symbols 2以降

  • iOS 14などの古いオペレーティングシステムに導入する予定がある場合に使用する
  • 注釈データとサイドマージンが削除される
  • モノクロしか含まれない

SF Symbols 3以降

  • iOS 15以降をサポートする場合はこのバージョンを使用する
  • すべてのマルチカラーと階層データアノテーション、およびサイドマージンが埋め込まれる

SF Symbols 4以降

  • iOS 16以降をサポートする場合はこのバージョンを使用する
  • 可変色注釈が埋め込まれる

参考資料

https://developer.apple.com/documentation/UIKit/creating-custom-symbol-images-for-your-app

Discussion