What's new in SF Symbols 4

ハイライト

SF Symbols 4 では、700 以上の新しいシンボル (合計 4,000 以上) が追加され、最適なレンダリング方法を自動的に選択する自動レンダリングモードが導入され、レイヤー化されたカラーリングで強度の変化を伝える可変カラー機能が追加され、カスタムシンボルの注釈構造が統合されています。

主要内容

シンボルライブラリ拡張

SF Symbols は年々成長しています。 2022 年には 700 を超える新しいシンボルが追加され、合計は 4,000 を超えました。

（02:35）

新しいシンボルは複数の領域をカバーします。

家: 照明、カーテン、窓、ドア、スイッチ、ソケット
健康とフィットネス: フィットネスの人々のアイコン
通貨: より多くの通貨記号
ローカリゼーション: さまざまなスクリプトと右から左へ書く表記体系をカバーします。

SF Symbols アプリには、ナビゲートに役立つ 5 つの新しいカテゴリ (カメラと写真、アクセシビリティ、プライバシーとセキュリティ、ホーム、フィットネス) が追加されています。開発者は独自のコレクションを作成することもできます。

4 つのレンダリングモードの確認

SF Symbols には 4 つのレンダリングモードがあり、それぞれが異なる度合いで色を制御できます。

（04:02）

モノクロ: 最もニュートラルで統一された色で、タイポグラフィーの本質に最も近い色です。
階層: 透明度の違いによって重要な形状を強調する単色グラデーション
パレット: シンボル要素を目立たせるための 2 つ以上の対照的な色
マルチカラー: 物理世界の実際の色など、シンボルの固有の色を使用します。

Automatic Rendering

以前は、レンダリングモードが指定されていない場合、デフォルトでモノクロが使用されていました。各シンボルには、「自動」が選択されている場合に自動的に一致する「優先レンダリングモード」が設定されるようになりました。

（05:38）

例えば：

カメラフィルターシンボルは、レンズの半透明性を強調するために、自動の下の階層を使用します。
SharePlay シンボルは自動で階層化を使用して、人間の姿を目立たせ、音波を背景に隠します。
AirPods Pro シンボルは自動の下で階層を使用します

ただし、自動が常に最良の選択であるとは限りません。小さいサイズのコントラストの低いシーンでは、モノクロの方が鮮明になる場合があります。レンダリングモードは引き続き明示的に指定できます。

Variable Color

バリアブルカラーは、2022 年の最も重要な新機能です。これは、シンボルのベクトルパスを複数のレイヤーに分割し、順番に色付けして、強度の変化や時間シーケンスを伝えます。

（07:51）

主要な概念:

シーケンスに参加するパスもあれば、参加しないパスもあります
参加パスはレイヤーごとに構成されており、各レイヤーはステージに対応しています
パーセンテージ値による制御: 0% すべてオフ、100% すべてオン
透明度に基づいて、すべてのレンダリングモードで動作します

シナリオ例:

電波強度: 携帯電話の形状は関係なく、電波は強度に応じて階層化されます。
音量: スピーカーの形状は関係ありません。3 つの音波レイヤーは低音/中音/高音量を表します。
部屋の容量: 空/少量/半分/満杯を示すために重ねられた人間のアイコン

Unified Annotations

カスタムシンボルのラベル付け方法は、2022 年に簡素化されます。すべてのレンダリングモードは、統合されたレイヤー構造を使用します。

（12:09）

新たに導入された概念:

描画: レイヤー描画にはパスが含まれています
消去: レイヤー消去パス。重なり合う領域のレンダリング効果に影響します。

開発者は、レイヤー構造を一度整理するだけで、すべてのレンダリングモードの注釈を生成できます。可変カラーを使用すると、動的な状態を持つカスタムシンボルを作成することもできます。

詳細

自動レンダリングを使用する

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            // Automatic: システムがシンボルに応じて最適なレンダリングモードを選択
            Image(systemName: "camera.filters")
                .symbolRenderingMode(.automatic)
                .font(.system(size: 60))
            
            // Hierarchical を明示的に指定
            Image(systemName: "camera.filters")
                .symbolRenderingMode(.hierarchical)
                .foregroundStyle(.blue)
                .font(.system(size: 60))
            
            // Monochrome を明示的に指定（小さいサイズではより鮮明）
            Image(systemName: "airpodspro")
                .symbolRenderingMode(.monochrome)
                .foregroundStyle(.primary)
                .font(.system(size: 16))
        }
    }
}

キーポイント:

.symbolRenderingMode(.automatic)システムにシンボルの優先モードを選択させます
ほとんどの場合、自動が最良の選択です
サイズが小さく、コントラストの低いシーンでは、明示的にモノクロを指定する必要がある場合があります
.foregroundStyle()コントロールカラー

可変色を使用する

import SwiftUI

struct VolumeView: View {
    @State private var volume: Double = 0.5
    
    var body: some View {
        VStack {
            // Variable Color は数値に応じてシンボルの異なる部分を強調表示
            Image(systemName: "speaker.wave.3.fill")
                .symbolRenderingMode(.hierarchical)
                .font(.system(size: 60))
                .foregroundStyle(.blue)
            
            Slider(value: $volume, in: 0...1)
                .padding()
        }
    }
}

UIKit で使用される:

import UIKit

class ViewController: UIViewController {
    let imageView = UIImageView()
    let slider = UISlider()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let config = UIImage.SymbolConfiguration(
            paletteColors: [.systemBlue]
        )
        imageView.image = UIImage(
            systemName: "wifi",
            withConfiguration: config
        )
        
        // Variable Color 通过 symbol configuration 控制
        let variableConfig = UIImage.SymbolConfiguration(
            variableValue: 0.6
        )
        imageView.image = UIImage(
            systemName: "wifi",
            withConfiguration: variableConfig
        )
    }
}

キーポイント:

渡された変数カラーvariableValue(0.0 ～ 1.0) ハイライトのレベルを制御します。
0.0 はすべてのパスが強調表示されていないことを意味し、1.0 はすべてのパスが強調表示されていることを意味します
中間の値がレイヤーの順序で段階的に強調表示されます
シーケンスに参加していないパスは常に完全に表示されます。
すべてのレンダリングモードで動作します

可変色をサポートするカスタムシンボルを作成する

SF シンボルアプリの場合:

1.カスタムSVGシンボルをインポートする 2. パスを論理的に複数の層に分割する 3. バリアブルカラーに参加するパスに別のレイヤーを作成します 4. 各レイヤーの描画/消去動作を設定します 5. すべてのレンダリングモードのラベルを統一する

例: キッチンタイマーのシンボル

外側のリング、目盛り、タイマーの針を別のレイヤーに配置します
ポインターレイヤーは可変カラーシーケンスに参加します・外輪や目盛は関係なく常に表示されます。
可変色は、時間の経過とともにポインターレイヤーを徐々に強調表示します。

キーポイント:

パスのレイヤー順序によって、変数カラーのシーケンス順序が決まります。
すべてのパスがシーケンスに参加する必要はない
描画/消去は、レイヤー間の重なり合うレンダリング効果を制御します
注釈を一度付けるだけで、すべてのレンダリングモードに共通

4 つのレンダリングモードのコード比較

import SwiftUI

struct RenderingModesView: View {
    var body: some View {
        HStack(spacing: 30) {
            // Monochrome：统一颜色
            Image(systemName: "folder.badge.plus")
                .symbolRenderingMode(.monochrome)
                .foregroundStyle(.blue)
            
            // Hierarchical：单色渐变，有层次
            Image(systemName: "folder.badge.plus")
                .symbolRenderingMode(.hierarchical)
                .foregroundStyle(.blue)
            
            // Palette：多色对比
            Image(systemName: "folder.badge.plus")
                .symbolRenderingMode(.palette)
                .foregroundStyle(.blue, .green)
            
            // Multicolor：固有颜色
            Image(systemName: "folder.badge.plus")
                .symbolRenderingMode(.multicolor)
        }
        .font(.system(size: 40))
    }
}

キーポイント:

.monochromeそして.hierarchical色を受け入れる
.palette2 つ以上の色を受け入れ、異なるレイヤーに順番に適用します
.multicolorシンボルの組み込みの色定義を使用する
.automaticシンボルの優先モードに基づいて上記のいずれかを自動的に選択します

重要ポイント

スマートホームコントロールパネルを作成します

内容: SF シンボルを使用してさまざまなデバイスや状態を表す iOS/iPadOS スマートホームコントロールセンター
実行する価値がある理由: 新しいホームカテゴリには、照明、カーテン、スイッチ、ソケットなどのアイコンが含まれています。可変色により、明るさ/開口度を視覚的に表示できます。
開始方法: を使用しますsymbolRenderingMode(.hierarchical)+ 可変色を使用すると、電球のシンボルが明るさに応じて変化し、カーテンのシンボルが開閉に応じて変化します。

フィットネス追跡アプリを作成する

機能: さまざまな種類の運動を表すアイコンを使用して、フィットネスデータを記録および表示するアプリ
実行する価値がある理由: 新しいフィットネスの人間アイコンを直接使用でき、可変色で完了の進行状況を示すことができます。
開始方法: 可変色のフィットネスヒューマノイドシンボルを使用してトレーニングの完了を表示し、階層レンダリングを使用して現在アクティブなアイテムを強調表示します。

ネットワーク状態監視ツールを作成します

内容: ネットワーク接続の品質を表示するメニューバーツール
実行する価値がある理由: WiFi と信号強度のシンボルは、信号の品質を直感的に反映できる可変色に当然適しています。
開始方法: を使用しますwifiまたはcellularbarsシンボル、を通してvariableValue実際の信号強度値にバインドする

カスタムアイコンデザインツールを作成する

内容: デザイナーが特定のアプリ用にカスタム SF シンボルスタイルアイコンを作成できるツール
実行する価値がある理由: 統合アノテーションを使用すると、カスタムシンボルに一度注釈を付けると、複数のモードで再利用できるため、メンテナンスコストが削減されます。
開始方法: SF シンボルアプリでシンボルをデザインし、統合されたレイヤー構造で多色、階層、パレット、モノクロのラベルを付けます。

What's new in SF Symbols 4

ハイライト

主要内容

シンボルライブラリ拡張

4 つのレンダリングモードの確認

Automatic Rendering

Variable Color

Unified Annotations

詳細

自動レンダリングを使用する

可変色を使用する

可変色をサポートするカスタムシンボルを作成する

4 つのレンダリングモードのコード比較

重要ポイント

関連セッション

コメント

ハイライト

主要内容

シンボルライブラリ拡張

4 つのレンダリング モードの確認

Automatic Rendering

Variable Color

Unified Annotations

詳細

自動レンダリングを使用する

可変色を使用する

可変色をサポートするカスタム シンボルを作成する

4 つのレンダリング モードのコード比較

重要ポイント

関連セッション

コメント

4 つのレンダリングモードの確認

可変色をサポートするカスタムシンボルを作成する

4 つのレンダリングモードのコード比較