カスタムSF Symbols：可変テンプレートと3つの必須ソース

Appleは6,000以上のSF Symbolsを提供しており、SF Symbolsアプリも無料です。しかし多くのアプリでは、Appleが用意していないアイコンが必要になる場面が出てきます。ブランドマーク、ドメイン固有のグリフ、システムの語彙に収まらないカスタムアクションなどです。ここで取るべき正しい道は、静的なSVGを放り込むのではなく、カスタムSF Symbolを作成することです。なぜならカスタムSF Symbolはシステムの仕組みを無償で継承するからです。Dynamic Typeに合わせてスケールし、Symbol Effectsアニメーションに対応し、4つのレンダリングモードで描画され、SF Proタイポグラフィに整列し、アプリ個別のコードなしでアクセシビリティ設定を尊重します。静的なSVGはこれらのいずれにも参加できません。

本稿では、WWDC 2021でSF Symbols 3とともに導入された¹、SF Symbolsアプリの可変テンプレートに沿ってワークフローを追っていきます。フレームは「3つの必須ソースデザインとは何か、なぜそれが必要なのか」です。なぜなら、テンプレートのフォーマットこそが、ほとんどのデザイナーやエンジニアが初回に見落とす、ワークフローの中核を担う部分だからです。後続のSF Symbolsリリース（4、5、6、7）では、可変色、Magic Replaceトランジション、グラデーション対応、アニメーション効果などでテンプレートフォーマットが拡張されてきましたが、可変テンプレートの中核にある3ソース構造はSF Symbols 3以来安定しています。

TL;DR

• カスタムSF Symbolsは、SF Symbolsアプリからエクスポートされたテンプレートから始まります（File > Export Template、または⌘E）²。テンプレートはSVGで、サイズ調整のためのシステム定義のガイドと、置き換える対象のプレースホルダーシンボルデザインが含まれています。
• 可変テンプレートに必要なソースデザインはわずか3つ、Ultralight-Small、Regular-Small、Black-Smallです。残りの24バリエーション（3スケール × 9ウェイト）はSF Symbolsアプリが自動的に補間します³。
• パス互換性が中核となる要件です。すべてのパスは、3つのソース全体にわたって、同じ数のアンカーポイント、同じ開始点、同じ方向を持つ必要があります。これがないと、補間は不正なグリフを生み出します。
• カスタムシンボルは、4つのレンダリングモード（モノクローム、階層、パレット、マルチカラー）すべてと、レイヤー構造（プライマリ、セカンダリ、ターシャリ）に対応します。Symbol Editorのレンダリングインスペクターパネルで、サブパスをレイヤーに割り当てます。
• 最終的な納品では、シンボルファイルをアセットカタログ内のSymbol Image SetとしてXcodeに追加します。SwiftUIはImage(_:)からシンボル名で参照し、残りはシステムが処理します。

可変テンプレート

SF Symbols 3（WWDC 2021）が導入した可変テンプレート³は、3つのソースデザインを取り込んだ単一のSVGファイルで、ここからSF Symbolsアプリが27バリエーションのフルグリッドを生成します。3つのソースは次のとおりです。

• Ultralight-Small。 最も軽いウェイト、最も小さいスケール。
• Regular-Small。 中間のウェイト、最も小さいスケール。
• Black-Small。 最も重いウェイト、最も小さいスケール。

アプリはこの3つを使って、残りの24セル（Ultralight-Medium、Regular-Medium、Black-Medium、Ultralight-Large、Regular-Large、Black-Large、および各スケールの中間ウェイト）を補間します。ソースパスが互換性のある構造を持っていれば、補間は自動的に行われます。

SF Symbols 3が可変テンプレートを導入する前は、カスタムシンボルには27バリエーションすべてを手動で描く必要がありました。可変テンプレートはそれを「3 + 補間」に縮減しました。これは、扱える範囲のデザイン作業と、プロジェクトを潰しかねない作業との違いに相当します。

互換データの要件

パスの補間には、3つのソースパスが同じ形状を同じ順序で記述している必要があります²。

• 同じ数のアンカーポイント。 Regularウェイトで4つのアンカーを持つ正方形は、見える曲率が異なっていても、UltralightとBlackでも4つのアンカーを持つ必要があります。
• 同じ開始点。 パスの最初のアンカーは、3つのウェイトすべてで概念的に同じ位置（例：常に左上の角）になければなりません。
• 同じ方向。 3つのパスはすべて同じ順序（時計回りまたは反時計回り）で形状をたどります。

これらのいずれかを満たさないと、補間アーティファクトが発生します。折れ曲がり、誤った重なり、欠けたストロークなどです。SF Symbolsアプリはこれらの一部を表面化させます（バリアントプレビューが補間結果を表示します）が、微細な問題は最終的にエクスポートされたアセットでしか現れません。

実用的なワークフローは、まずRegular-Smallをデザインし、次に同じパスのスケルトン上でストローク幅を細くしてUltralightを、太くしてBlackを派生させることです。各派生は、構築の段階でアンカー数、開始点、方向を保ちます。各ウェイトを独立にデザインすると、構築をやり直すよりもデバッグに時間がかかる互換性問題を生みます。

ワークフロー

コンセプトから動くアセットまで5つのステップ。

1. 似た既存シンボルを探す

SF Symbolsアプリのライブラリには6,000以上のシンボルがあります。コンセプトに構造的に近いもの（円の中にコンテンツがあるもの、四角形にオーバーレイがあるもの、線に装飾があるもの）を探します。テンプレートエクスポート方式は、既存シンボルのジオメトリを出発点として使います。

2. テンプレートをエクスポートする

File > Export Template…または⌘E。テンプレートタイプとして「Variable」を選択します。結果は、シンボルの3つのソースウェイトがレイアウトされたSVGファイルで、SF Symbolsがテキストと整列するために使うキャップ高さ、ベースライン、視覚マージンを示す参照ジオメトリも含まれています。

3. テンプレートのパスを置き換える

ベクターエディター（Sketch、Figma、Illustrator、Affinity Designer、Inkscape）でSVGを開きます。テンプレートの名前付きレイヤーには3つのソースデザインが含まれています。レイヤー名とキャップ高さ／ベースラインの整列を保ちながら、それぞれをカスタムデザインに置き換えます。

ここでパス互換性の要件が効いてきます。各ウェイトを同じパススケルトンからデザインし、描き直すのではなくストローク幅や塗りのウェイトを変化させます。ベクターツールの「複製して修正」というワークフローが、最も抵抗の少ない道です。

4. 再インポートして検証する

修正したSVGをSF Symbolsアプリにドラッグして戻します。アプリは27バリエーションを生成し、バリアントグリッドに表示します。複数のズームレベルで各ウェイト×スケールの組み合わせを確認しましょう。補間アーティファクトは、すぐには気づきにくい中間ウェイトで現れることがしばしばあります。

複数の視覚要素を持つシンボル（本体にバッジが付いたもの、円の中にさらに形状があるものなど）の場合、レンダリングインスペクターパネルを開いてサブパスをレイヤー（プライマリ、セカンダリ、ターシャリ）に割り当てます。レイヤーの割り当てが、シンボルが階層、パレット、マルチカラーの各モードでどう描画されるかを決定します。

5. Xcodeに追加する

シンボルファイル（SF Symbolsからエクスポートされた.svg）をXcodeのアセットカタログにドラッグします。XcodeはこれをSymbol Image Setとして扱います。コードからの参照は次のとおりです。

Image("MyCustomSymbol")
    .symbolRenderingMode(.hierarchical)
    .foregroundStyle(.tint)

Image(_:)（systemName:パラメーターなし）はアセットカタログから読み込みます。システムシンボルで動作する.symbolRenderingMode、.foregroundStyle、.symbolEffect、Dynamic Typeの挙動はすべて、シンボルが正しくオーサリングされていれば、カスタムシンボルでも同様に動作します。

レンダリングモードとレイヤー構造

SF Symbolsが公開する4つのレンダリングモードは、システムシンボルと同じようにカスタムシンボルでも動作します⁴。

• モノクローム。 単色（foregroundStyle）。最もシンプルなモードで、最もよく使われます。
• 階層。 単色、レイヤーごとに不透明度が変化。レンダリングインスペクターパネルで定義されたレイヤーには事前設定された不透明度が割り当てられ、開発者は1色のティントを適用するだけで自動的に視覚的階層が得られます。
• パレット。 レイヤーごとに明示的な色。開発者は複数のforegroundStyle引数を渡し、各レイヤーが固有の色を持ちます。
• マルチカラー。 Appleが定義したレイヤーごとの固定色。カスタムシンボルでは、Symbol EditorのMulticolor設定でデザイナーが割り当てた色が使われます。

レイヤー構造こそが、階層、パレット、マルチカラーを動作させる鍵です。レイヤー割り当てのないカスタムシンボルは、すべてのパスをプライマリレイヤーに集約します。シンボルはモノクロームでは描画されますが、他のモードでは視覚的階層が生まれません。深みから恩恵を受けるシンボルには、レンダリングインスペクターパネルでレイヤーを割り当てる時間をかけましょう。

よくある失敗

カスタムシンボルの障害ログから3つのパターン。

パス互換性違反。 最もよくある問題です。「Regularウェイトでは見栄えがいい」のに中間ウェイトでグリッチを生むシンボルは、ほぼ必ずパス互換性の問題を抱えています。診断方法はSF Symbolsアプリのバリアントグリッドを開き、中間ウェイトのバリアントを見ることです。期待される補間と一致しない折れ曲がりやストロークが見えるなら、3つのソースパスのいずれかが互換性に違反しています。

ベースラインまたはキャップ高さの不整合。 テンプレートのベースラインガイドを尊重せずにデザインされたシンボルは、テキストの隣で不自然に座ります。視覚的な症状は、.bodyテキストスタイルのTextとインラインで配置したときに、シンボルが高すぎる、または低すぎるように見えることです。修正方法はテンプレートの参照ジオメトリを使い、シンボルの光学的中心をキャップ高さの中点に配置することです。

レイヤー割り当てなし。 内部構造が豊富（複数の視覚要素）でもレイヤー割り当てがないシンボルは、モノクロームでしか正しく描画されません。階層またはパレットモードを選択するアプリには、平坦な出力が見えます。修正方法はレンダリングインスペクターパネルを開き、各サブパスをレイヤーに割り当てることです（メイン形状にはプライマリ、アクセントにはセカンダリ、ターシャリな細部にはターシャリ）。

このパターンがiOS 26+のアプリに意味すること

3つの要点。

1. アプリ内アイコンには、生のSVGではなくカスタムSF Symbolsを使う。 カスタムシンボルのワークフローは本物のエンジニアリング作業ですが、システム統合（Dynamic Type、Symbol Effects、レンダリングモード、アクセシビリティ）が、UIに長期的に存在するアイコンにはコストに見合う価値を与えます。静的なSVGは一度限りのマーケティングアセットには適していますが、コアUIには向きません。

2. 単一のスケルトンからデザインし、パス構造ではなくストローク幅を変化させる。 パス互換性違反こそが、中核を担う失敗モードです。防衛的なデザインプロセスは、1つのウェイト（Regular-Small）から始め、同じパスジオメトリからストロークを減らしてUltralightを、ストロークを増やしてBlackを派生させることです。互換性は構築の段階で保たれます。

3. レンダリングモードから恩恵を受けるシンボルには、明示的にレイヤーを割り当てる。 モノクロームでしか描画されないシンボルは、SF Symbolsシステムの半分から脱落しているシンボルです。レンダリングインスペクターパネルにかかるのは数分で、その結果として、システムシンボルと並んで階層、パレット、マルチカラーモードに参加するシンボルが得られます。

Apple Ecosystemクラスターの全体像は次のとおりです。型付きApp Intents、MCPサーバー、ルーティングの問い、Foundation Models、ランタイムとツーリングのLLM区別、3つの表面、単一の真実の源パターン、2つのMCPサーバー、Apple開発のためのフック、Live Activities、watchOSランタイム、SwiftUIの内部、RealityKitの空間的メンタルモデル、SwiftDataのスキーマ規律、Liquid Glassのパターン、マルチプラットフォームの出荷、プラットフォームマトリクス、Visionフレームワーク、Symbol Effects、Core MLによる推論、Writing Tools API、Swift Testing、Privacy Manifest、プラットフォームとしてのアクセシビリティ、SF Proタイポグラフィ、visionOSの空間パターン、Speechフレームワーク、SwiftDataマイグレーション、tvOSフォーカスエンジン、@Observableの内部、SwiftUIのLayoutプロトコル、私が書くことを拒むもの。ハブはApple Ecosystem Seriesにあります。AIエージェントを伴うiOSの広い文脈については、iOS Agent Developmentガイドをご覧ください。

FAQ

SF Symbolsアプリは必要ですか、それとも別の方法でカスタムシンボルを作成できますか？

SF Symbolsアプリは公式ツールであり、検証済みでApp Store互換のカスタムシンボルを生成できる唯一のツールです。サードパーティのツールやオンラインコンバーターも存在しますが、テンプレートフォーマットの要件を満たすかどうかは保証されないSVGを生成します。本番アプリにはSF Symbolsアプリを使ってください。

Windowsでカスタムシンボルを作成できますか？

SF SymbolsアプリはmacOS専用です。エクスポートされたSVGテンプレートはベクターエディターがあればどのプラットフォームでも編集できますが、エクスポートと再インポートのステップにはmacOSが必要です。ほとんどのチームには、これらのステップを担当できるmacOSのデザイナーが少なくとも1人います。リモートチームのワークフローでは、SVGファイルをバージョン管理または共有ストレージ経由で受け渡します。

カスタムシンボルで.symbolEffectをサポートするにはどうすればよいですか？

ほとんどのシンボルエフェクトは、シンボルの構造が適切に構成されていれば自動的に動作します。bounce、pulse、scaleなどは、ソースに関わらずシンボルに適用されます。.replaceコンテンツトランジションは、移行元と移行先のシンボルが互換性のある構造（似たレイヤー数、似た全体形状）を持つ必要があります。クラスターのSymbol Effectsの記事が、エフェクトの語彙を詳しく扱っています。

XcodeのSymbol Image Setと通常のImage Setの違いは何ですか？

Symbol Image Setはシンボルのフルテンプレート（27バリエーションすべて）をインポートし、SF Symbolsのレンダリングパイプラインを通じて公開します。シンボルはDynamic Typeに合わせてスケールし、レンダリングモードに参加し、.symbolEffectと動作します。通常のImage Setは静的なラスターまたはSVGリソースで、これらのいずれにも参加しません。カスタムSF SymbolsにはSymbol Image Setを使ってください。

カスタムシンボルはvisionOSとwatchOSでどのように扱われますか？

システムシンボルと同じように扱われます。プラットフォーム期待のサイズで描画され（watchOSでは小さく、visionOSでは大きく）、プラットフォームのアクセシビリティ機能に参加し、プラットフォームの色とエフェクトの慣例を尊重します。カスタムシンボルのオーサリングは一度きりで、クロスプラットフォームの挙動は自動的です。クラスターのApple Platform MatrixとvisionOSの空間パターンの記事が、プラットフォームごとの考慮事項を扱っています。

App Storeレビューへの影響は？

ありません。カスタムSF Symbolsは、他のアセットカタログのアセットと同一のレビューを受けます。視覚スタイルガイドライン（AppleのUIパターンを模倣しないこと、ブランド商標を侵害しないこと）は、他のカスタムアートワークと同様にカスタムシンボルにも適用されます。それ以外、レビュープロセスはこれらを標準的な画像アセットとして扱います。

参考文献