SF Symbols 6の新機能

こんにちは Apple Designチームの デザイナーのThaliaです このセッションではSF Symbolsの 世界に飛び込みます Appleが提供するアイコンライブラリで 親しみやすくアクセスしやすい シンボルを提供するために 作成されています SF Symbolsは強力なツールで ローカリゼーションから 表現力豊かな アニメーションまでをカバーします 内容が多岐にわたるため さっそく始めていきましょう 今日は 新しいプリセットと機能強化を アニメーションプリセットの セクションで紹介します SF Symbolsアプリのセクションでは いくつかアップデートを紹介してから シンボルに注釈を付けて 新しいアニメーションを フル活用する方法を説明します そして最後に このライブラリに追加された 新規シンボルを確認します SF Symbolsアニメーションは 以前導入された機能です 詳しくは「What's new in SF Symbols 5」をご覧ください 今回は この機能のコンセプトについて 解説し アニメーションの力を 詳しく紹介します

また SF Symbolsアプリについても 知っておくことをお勧めします 詳しくは「Create animated symbols」を 視聴してください では始めましょう

今年 ユニバーサルアニメーションの 新しいプリセットが導入されます Wiggle Rotate Breatheです ReplaceとVariable Colorにも 素晴らしいアップデートがありました これらのプリセットはアニメーションの 表現力を向上させて インターフェイスの質を高めます

まずはWiggleです

Wiggleプリセットは 見逃されやすい変更や コールトゥアクションを 強調するのに役立ちます Wiggleは操作を 動きで目立たせたり シンボルの意味を強調したり することもできます 例えば 特定の方向を指し示す 矢印があるとしましょう 方向というのは Wiggleにとって非常に 重要な概念です 例として紙飛行機を使用します シンボルは右または左に動かせます 読む方向に振動させたり 逆方向に振動させたり することもできます これらを指定することで シンボルは水平方向に 動いてから元の位置に戻ります

垂直に振動させることもでき 上または下に 動いたあとで開始地点に戻ります

時計回りまたは反時計周りに 動かすこともできます

さて このシンボルの場合 紙飛行機の向きと同じ方向を指し示す 動きはありません 同じ方向を指すには カスタム角度で シンボルの方向を指定する 必要があります 315度に設定すれば 紙飛行機が離陸するように見えます

使いやすくする目的から Wiggleの多くのシンボルには この紙飛行機のように 推奨の振動方向が あらかじめ組み込まれています もちろん アプリの必要に応じて カスタマイズし 別のアニメーションを 使用することもできます

次はRotateです

Rotateでは シンボルに ダイナミックな動きを追加して 現実世界の動作を模したり 視覚的なインジケータとして 使用したりできます 例えば タスクの進行中に Rotateを適用すると タスクが期待どおりに 進んでいるとわかります

シンボル全体を 回転できるものもあれば 一部だけが回転する シンボルもあります この卓上扇風機の場合 By Layer回転オプションで ファンだけを回転させられます 独自のシンボルでこれを 行う方法も後で説明します

次はBreatheです

Breatheはシンボルをスムーズに脈動させて 生きているような印象を与えます 状態変化を表したり アクティビティの進行を示したりできます 例えば 進行中の 録画セッションなどで役立ちます

Breatheは SF Symbols 5で導入された Pulseプリセットと似たところがあります Pulseは不透明度の変化で アクティビティの進行を表現します 一方 Breatheは不透明度とサイズを 変えることでシンボルに動きを与えます どちらのプリセットを使用するか迷ったら 自問してみてください 何を伝えたいのか？ ハートの存在感を強く押し出して 生きているような見た目にしたい場合は Breatheの方が適しています

次はReplaceです

Replaceアニメーションはシンボルが 別のシンボルと入れ替わるプリセットです

今年 ReplaceにはMagic Replaceという 素晴らしい新オプションが加わりました

Magic Replaceでは図形付きの 2つのシンボルがスマートに切り替わります スラッシュは描画したり消したりでき バッジはベースのシンボルとは独立して 現れたり消えたり 置き換えられたりします

Magic Replaceは新しいデフォルト動作ですが 注意点が1つあります Magic Replaceの使用が好ましい場合でも シンボル同士が関連していなければ 実行できない場合があります 2つのシンボル間でMagic Replaceを 使用できない場合は 標準のReplaceアニメーションを使用します

その場合も アニメーションの方向を 指定することはできます

さて 2つの共通シンボル間で Magic Replaceを実行させつつ 人のシンボルに変わる時は Off-Upが使用されていることに お気づきでしょうか

これはタップ可能な要素に最適です 例えば UIに即座に フィードバックしながら 新しいシンボルが表示された時にも モーションも保持できます

独自のシンボルに シンボルコンポーネントを使用する場合も Magic Replaceが役立ちます シンボルをSF Symbols 6アプリから 再エクスポートし Xcode 16にインポートするだけで 準備が整います

Variable Colorにも アップデートがありました これは色を様々な強度レベルで 表示するプリセットです 色を使って 時間とともに変化していくシンボルの状態を 伝えることができます シンボルのデザインにより Variable Colorの繰り返しの 印象は異なってきます 一部のシンボルでは 色の不透明度の変化を 一方通行にするのが適しています 両端が接していない場合は オープンループと呼びます 両端が接している場合は クローズドループと呼びます 私たちは 各シンボルの性質を尊重して Variable Colorを繰り返す際の アニメーションを改善しました クローズドループのアニメーションが スムーズになったのです 今後Variable Color対応の シンボルを使う際は 注釈を付けてクローズドループの デザインを最適化し シームレスに 再生を繰り返しましょう

これらの新しいプリセットが アプリに実装された場合の 例として 植物が好きな人向けの サンプルアプリを設計しました このアプリは 植物を分類したり 必要なケアのアクティビティを追跡したり 植物の健康状態をモニタリングします これがそのアプリです UIで使用するために 新しいシンボルのセットデザインしました SF Symbolsライブラリの シンボルと組み合わせて使用します Magic Replaceを使用して 植物に影響のありそうな 天気の変化を警告しています シンボル間をスムーズに切り替える時は Magic Replaceがこれまでで最も優れた 方法なので 可能な限り使用することをおすすめします

この例では ユーザーが自分の環境をスキャンして 家にある植物の種類を検出できます 検出が完了すると その植物の名前と関連情報が アプリに表示されます

画面上で行うべき操作を 明確に示すために ボタン内部の矢印アイコンが 振動し始めます こうすることでユーザーの 注意を引き モンステラを植物コレクションに 追加できるように導きます 見た目の複雑なUIを 実装した場合は このようなアニメーションで ユーザーにアプリの使い方を 案内してください

ライブアクティビティをより生き生きと させたいですか？ Rotateを使用しましょう この例では回転する矢印が タスクの進行を表現しています

他の例も見てみましょう このビューでは 植物の健康状態や 水やりの量を確認できます

ランの仲間は 根を15分ほど 水に浸すことで水やりをします タイマーを開始させると 水滴のシンボルがBreatheプリセットで アニメーション化されます 視覚的なフィードバックにより アクティビティが進行中であることが示されます

ただし 考慮すべきことが1つあります アニメーションはUIに使うと効果的ですが 多用したり 間違った文脈で使用すると 目障りで 気が散るものになってしまい 重要なコンテンツや操作から ユーザーの注意が逸れかねません

アニメーションは 目的を意識して使用し ユーザーがしっかりと体験に 集中できるように設定しましょう 新しいプリセットの説明が すべて終わりましたので 次はSF Symbolsアプリの 最新のアップデートを紹介します

これらの便利な新しいプリセットは いずれも 他のプリセットの横にある Animationインスペクタで確認できます 新しいWiggleアニメーションを 見てみましょう

設定では 各シンボルに 推奨の振動方向が適用されます このシンボルには上向き矢印があるので 上方向への振動が推奨されています しかし 自分で設定を変更して 右に揺らすことなどもできます

Wiggleと同じく Rotateの場合も 設定定は推奨の回転方向です 別の方向を選んでも構いません 時計回りや逆回りにできます

これはBreatheプリセットです を有効にすると Pulseアニメーションで 選択されていたレイヤの 不透明度が変化し 奥行きを感じさせるダイナミックな動きが シンボルに適用されます

アニメーションの繰り返しも 細かく制御できます では繰り返しが 1度だけ行われます ではアニメーションは 繰り返し再生され その合間にどれだけ 一時停止するかを設定できます では 明示的に停止されない限り 再生が繰り返されます

新しいアニメーションプリセットの 概要を説明しました システムに搭載された シンボルを見てきましたが 独自にカスタマイズしたシンボルを アプリに使う場合も SF Symbolsアプリなら 新しいアニメーション機能を 手軽に利用できます

サンプルアプリ用にデザインしたシンボルを 覚えていますか？ それらを見直して いかに簡単に注釈を 付けられるかを紹介します この鉢植えの植物から見てみましょう

ハート型の葉を1つのレイヤに配置し 鉢は別のレイヤに配置します

アニメーションをプレビューすると 「いいえ」と首を振っているような 動きに見えます これを楽しく踊っているような 動きに見せたいです Wiggleの方向をに変更します

これで完璧です 次はこれらの水滴を Breatheでアニメーション化します 動かしたい順序で 各レイヤに一滴ずつ追加します または すべてを1つのレイヤにまとめて プリセットがシンボル全体をアニメーション するようにすることもできます 2つ目 3つ目の レイヤを追加します

プレビューしましょう

いいですね

ここで補足があります シンボルのレイヤでPulseを選択し 既に注釈を付けている場合 Breatheでもその注釈が使用されるので 改めて設定する必要はありません

このシンボルでRotateを確認しましょう ここでは 葉に1つのレイヤを割り当て

矢印に別のレイヤを割り当てています

動かしてみましょう

期待どおりの動きではありません このシンボルでは 矢印が最も重要なパーツなので そのレイヤだけを動かしたいのです を選択します これで良くなりました を使用したレイヤは 回転のアンカーポイントを基準に その周囲を回転します

このボタンをクリックすると 新しい コントロールがキャンバスに表示されます

アンカーポイントとガイドが シンボルの余白を示しています このアプリではアンカーポイントが ガイドの中央に自動配置されます

しかしときどき 卓上扇風機のような シンボルを選ぶと アンカーポイントをレイヤの中央に動かして を使えるように 整えるべき場合もあります この場合は扇風機のファンです そのために ボタンがあります

これをクリックすると 回転経路のベクトルが表示され アンカーポイントが これらの点に併せて移動します

アンカーポイントを定める際に 非常に便利です

必要であれば これらの2つの点を調べて

中間となる座標を 手動で入力することもできます

アンカーポイントは 正確に配置する必要があるので アニメーションがうまく動作するかどうか 必ずプレビューしてください

これらのコントロールにも注目です シンボルのコンポーネントのように 回転のアンカーポイントもこれら3つの ウェイトで定義する必要があります 定義が完了すると システムが自動的に値を補間して あらゆるウェイトおよびスケールの アンカーポイントを算出します

独自のシンボルに 注釈を付ける方法を説明しました 次はSF Symbolsライブラリへの 追加要素を確認しましょう

自動車カテゴリのシンボルが拡充され バッテリー コンバーチブル 気温計などが追加されました 様々なアクティビティを表す シンボルも増えました

ギリシャ文字 キリル文字 数種のインド数字など 特定地域の文字体系も 新たに追加されました プログレスインジケーター 触覚 ホーム ウィジェット関連など 多数のオブジェクトが用意されています

新規シンボルは800種以上 SF Symbols 6のライブラリがさらに充実し 6,000種以上のユニークなシンボルを あらゆるスケール ウェイト レンダリングモードで利用できます 魅力的なアニメーションプリセットで アプリをさらに良いものにできます

新たに追加されたシンボルや アニメーションプリセットを 試してみたい場合は SF Symbolsアプリの 新しいベータ版を入手できます developer.apple.com/jp/sf-symbols/です

今回のアップデートで シンボルの表現力がさらに高まるでしょう 本日はありがとうございました SF Symbolsの新機能と アップデートをぜひご活用ください