SF Symbols 5の新機能

♪ ♪

Thalia: こんにちはThaliaです Apple Design Teamで デザイナーをしています 本セッションでは 新機能とアップデートの詳細について お伝えしますが 昨年のWWDCのビデオを見ていない場合 まずはそちらをご覧いただくことを お勧めします スピードアップして 今年のアップデート準備へと繋がる 良いリファレンスとなります 本日 今年導入した素晴らしい新機能 アニメーションについてお伝えできることを とても嬉しく思っています さらに アニメーション描画における テクニックも紹介します そして最後に新しく追加された すべてのシンボルについても紹介します ではアニメーションから始めましょう 導入以来SF Symbolsは デベロッパとデザイナーが すべてのAppleプラットフォームで 調和のとれた 一貫したユーザーインターフェースを 作成する方法を一変させました こうした進化は一連のアップデートによって 実現されています 最初のSF Symbolsはモノクロの シンボルのみで構成されていました これらは一貫性をもたらし 親近感を生み出しました

2021年 SF Symbolsは 新たなレンダリングモードを提供し 高い汎用性を持つようになりました 階層型 パレット マルチカラーです

そして昨年2022年には 可変色が導入され シンボルで異なる強さのレベルを伝えたり 時間の経過とともに一連の流れを 伝えたりできるようになりました SF Symbolsは機能的で視覚に訴える 魅力的なユーザーインターフェースを 作る必要性に突き動かされ シンボルをより表現豊かにすることを 常に目指してきました そこで私たちはインターフェイスに バイタリティ 動き ダイナミズムを 加えることのできる新しい方法 アニメーションをご紹介します

設定可能なアニメーションプリセットの コレクションから選ぶことができ それぞれにユニークな特徴があります これらはすべてのシンボル スケール レンダリングモードで機能し シンボルをこれまで以上に カスタマイズできるようにする ライブラリ内のさまざまな プリセットを見ていく前に いくつか知っておくべき コンセプトがあります まずシンボルレイヤーとアニメーションの 関係という概念があります

簡単なリマインダーとして ライブラリ内の各シンボルは それを定義する 統一レイヤー構造があります レイヤーが正しい順序で 配置されているか確認することは レイヤーにどのように色が適用されるか 決定するのに役立ちます 想像できるようにレイヤーはシンボルが どのようなアニメーションにするか 重要な役割を果たします

デフォルトではシンボルはレイヤーごとに アニメーションします つまり各レイヤーが 1つずつアニメーションし シンボルのアニメーションが 明確で正確な動きになります 一方すべてのレイヤーを 一度に動かしたいシナリオがある場合は シンボル全体をアニメーション化できます 次にアニメーションにおける 空間の概念についてです この空間はシンボルに 動きが加えられたときに 奥行き感を生み出すための次元性を 意味します これらの平面は目に見えませんが シンボルの動きや インタラクションの理解に役立ち アニメーションをより魅力的に感じさせます そこでこれらの平面を視覚化してみましょう 中央の平面は3次元空間の中心に 位置する平面です この平面はシンボルの位置決めや 移動の基準点となります 前方の平面とは見る人に最も近い面です この平面に配置されたシンボルは 大きく表示されます そして後方の面が 見る人から最も遠い面です この平面はシンボルが インタラクションする 次元の範囲を定義する面です この平面のシンボルは小さく表示されます

シンボルは方向性に基づいて これらの平面を使用します アニメーションの種類によって シンボルは平面内を上と下に あるいは下と上に さまざまな方法で移動することができ 見る人の視界から 完全に外れることもあります

これらのアイデアを念頭に置いて 新しいアニメーションライブラリを 見てみましょう このライブラリはユニークな 設定可能なプリセットで構成されます 出現 非表示 バウンス スケール パルス 可変色 置換があります それらについて掘り下げていきましょう

まず出現と非表示からです 出現アニメーションは インターフェイスにシンボルが 登場するときに使われます これはある要素が徐々に姿を現し シンボルを現し注目を集める 視覚効果です 一方非表示は出現の反対で シンボルがインターフェースから 取り除かれるときに使われます これは削除または消去された要素について 通知を受ける必要がある場合などに 視覚的なフィードバックを 提供するのに役立ちます 次はバウンスです このタイプのアニメーションの特徴は 物体の跳ね返りをシミュレートする 高速で伸縮性のある動きです そしてさまざまな方法で応用できます シンボルとのインタラクションが 成功したことを知らせたり アクションが行われたことを 知らせたりすることで フィードバックを提供するのに役立ちます シンボルが伝えようとしている コンセプトを強化し より遊び心を見せることができます あるいはシンボルをより インタラクティブで魅力的なものにし エネルギー感を生み出すこともできる 例を見てみましょう このスライダーは 左の最小レベルから右の最大レベルまで 連続的な輝度レベルを表します スライダーの両脇にある sun.minとsun.maxのシンボルは その機能を視覚的に伝えるのに 役立ちます つまりスライダーが 右端までドラッグされると バウンスアニメーションが発動します これは画面が最大輝度レベルに 達したことを知らせる 視覚的なフィードバックを 提供する素晴らしい方法です 次はスケールです スケールのアニメーションは シンボルのサイズを変えることで 視覚的なフィードバックを提供します サイズを大きくスケールアップするか サイズを小さくスケールダウンします この効果によって アクションが行われたことを確認したり シンボルの重要性を強調し注意を引けます 例えばシンボルは元の大きさに 戻る前に一瞬だけ大きくなり シンボルとのインタラクションが 認められたことを 視覚的にフィードバックします 一方シンボルが縮小され 元のサイズに戻った場合 押されたような印象を与えます これは物理的なボタンの 動作を模倣しており アクションが認識されたときの 理解の助けとなります これは人の動作に反応し より触れたという感覚を持つような インターフェイスを作りたい際に最適です スケールアニメーションの使用例を 見てみましょう フォルダの上にカーソルを置くと スケールのアニメーションが起こり シンボルのサイズが大きくなります このアクションは拡大された状態で持続し シンボルに注目を集めるのに役立ちます 次のシンボルに移ると 同じアニメーションが起こり 今度はフォルダから リストにフォーカスが移ります

バウンスとスケールのどちらを 選択するのが良いか悩むかもしれません バウンスはアクションが発生したこと あるいはアクションを起こす 必要性を伝えます 一方スケールはアイテムが選択されたとき フォーカスやフィードバックを提供できます さらにこのエフェクトはステートフルであり エフェクトが削除されるまで スケーリングされた状態が持続します

それでは不透明度を変化させ 進行中のアクティビティを伝える パルスアニメーションエフェクト を見ていきます

シンボルのデザインにもよりますが パルスはシンボルに レイヤーを使用することで それが伝えようとしている アイデアを強化できます この例を一緒に見てみましょう このマークは画面を 共有している人を表しています セッション中に進行中のアクティビティを さりげなく伝えるために シンボル全体をパルスにすることもできます あるいはこの機能を最大限活用するため 画面を表す形状だけをパルス化し アクションが起こっている間に より明確で正確な情報を提供できます こちらがその例です シンボルマークがパルスすることで 画面共有のアイデアを強化することができ アクティビティが特定の条件を満たすまで 続くことを伝えるのに役立ちます この場合FaceTime通話が 終了する時が該当します 次に可変色を見てみましょう 先に見たようにカラーバリエーションは 強さのレベルを変化させ シンボルの状態が時間とともに 変化することを色を頼りに伝えます 今年は可変色も アニメーションライブラリの一部となり 2つの異なる表現方法があります ひとつは累積的で もうひとつは反復的です 累積的なものは前の状態を維持したまま レイヤーを次々にハイライトする このアニメーションは ワイヤレス接続を可能にする Wi-Fiシンボルを見事に表現しています 一方反復的なものはレイヤーを 順番にハイライトしていきますが 一度に1つずつハイライトしていくので 利用可能なネットワークを探す Wi-Fiシンボルを効果的に表現できます メニューバーの例を見てみましょう 反復効果はWi-Fiシンボルに適用され それに加えて反転オプションがあります これは可変色を選択する際に 選択できる別の設定であり ハイライトされたレイヤーを 元のポイントに反転させ アクションが中断されるまで すぐにまたシーケンスを開始します

そして最後に置換です 置換はあるシンボルが 別のシンボルと入れ替わる アニメーションの一種であり 機能の移行を示すシンボルの状態の 変化を伝えるため使用されます どのシンボルをどれと置換するかを 決めることができ 他のプリセットと同様に 置換はデフォルトのレイヤーごと またはシンボル全体を アニメーション化することができます それに加えて方向性という概念があり

ダウン/アップがあります ではアニメーションを分析できるよう 少しスローにしてみましょう シンボルが下方に移動し視界から消え その後に新たなシンボルが 上方に移動しながら現れます これにより2つのシンボル間の スムーズな移行が実現し 通常は人の入力に従って 一方がもう一方に ダイナミックに置き換わります 方向性を利用したもう一つの例は アップ/アップです スピードを落としてみましょう シンボルは上方へ移動し視界から消え 続いて新しいシンボルが 安定した上方への動きで現れます これにより前へ前へと 進んでいく感覚が生まれ シームレスに展開する出来事を表現できます 別の例です: プレイシンボルを操作し アクションを開始すると すぐにポーズシンボルに切り替わります 一時停止が次のアクションであることを 示すことができます このインターフェイスの 3つの主なシンボルを詳しく見てみましょう これらは取り消し矢印 やり直し矢印 そして貼り付けアクションを表す クリップボードのある ドキュメントのシンボルです これらのシンボルに注目してください Hello という単語を選択すると いくつかの記号はすぐ他の記号に 置き換わります ハサミは切り取りを 書類はコピーを表しています

これは単語が選択された後 次にどのようなアクションが 可能かを理解するのに役立ちます これらの新しいプリセットはすべて 人とインターフェイスの間の コミュニケーションツールとして機能し ユーザー体験を向上させる 重要な役割を担っていますが 注目を集めるアニメーションと 機能的なインターフェイスの 適切なバランスを達成することに 取り組むことが重要であり 結果として圧倒されてしまうような体験に ならないようにします そのため常に機能性を優先し 意図するゴールを念頭に置くことを 目指しましょう アニメーションの導入に伴い 独自のシンボルをデザインする際に 精通しておかなければ ならない点がいくつかあります 昨年私たちは形状全体を使った 新しい革新的なシンボルの描き方を 紹介しました これはシンボルにレイヤー情報が 追加されることを意味し カスタムシンボルの デザインや描画が以前よりも 簡単で速くなります 一緒に例を見てみましょう 子供たちの芸術的なスキルを 伸ばすためのアプリを作っています このキャンディベアは子供たちが 色について学ぶのに役立ち タスクが達成されるたびに シンボルがバウンス効果で 動くようにしたいです これは子供と関わりながら 継続的な学習を促進する 素晴らしい方法となるでしょう このシンボルをデザインするための 手順をおさらいしてみましょう シンボルは基本的にベクトル描画です そこでこれを作るために 完全に囲まれた形として クマの体 顔 耳を描くことで シンボルのデザインを定義します

次に 前足と 消去レイヤーとして 使うオフセットパスを描きます シンボルをどう動かしたいか 視覚化する必要があるので この場合前足と消しゴムのレイヤーは 別々のレイヤーとして フォアグラウンドに配置します そうすることで アニメーションに奥行きを持たせ シンボルをより ダイナミックにすることができます これでデザインは完成です 次にそれをSF Symbolsアプリへ 持ってきます ここでは描画または消去で レイヤーに注釈を付けます 描画では選択されたレイヤーに パスが描画され 消去では選択された レイヤーのパスが削除され シンボルのレンダリング方法に影響します このようにシンボルに注釈をつけることで 望ましい結果を得ることができる

次にマルチカラー注釈に 楽しい色を選んでみましょう 遊び心が生まれます SF Symbolsアプリについて もっと知りたい方や 自分のアニメーションシンボルを作る方法に 興味がある方はぜひPaulの動画 「アニメーションシンボルの作成」を チェックすることをお勧めします 素晴らしい見識を共有してくれます シンボルに話を戻します さまざまなアニメーションプリセットを使い その動きを見てみましょう 細部が見えるよう スピードを少し落としました シンボルの追加パス情報を表示することで シンボルが動く際トランジションが スムーズであることが確認できます これで前まで部分的に隠れていた形状の 一部が見えるようになります 消去レイヤーを使わなくても シンボルをアニメートできますが 見ての通り大きな違いがあります 消去レイヤーを使ってシンボルを描くと シンボルのアニメーションが改善され 正確で精度の高い動きになります 一方消去レイヤーがないシンボルは 静止した状態では うまく機能するかもしれませんが 動くと深みと活気を失ってしまいます 形がスムーズに流れていかないからです 連続性とまとまりに欠け 不十分な視覚体験となってしまいます 消去レイヤーを使った この描画方法が本当に強力なのは 描画と補間の複雑な工程が 少なくて済むため スピードが速いだけでなく アニメーションの可能性を 最大限に引き出す 最も効果的な方法だからです カスタムシンボルに アニメーションを使用する予定が ある場合は必ず確認してください シンボルが動いているときは パスの調整が必要かもしれません 次にSF Symbolsライブラリに 新しく追加されたものを見てみましょう ステアリングホイール チャイルドシート 座った姿などのシンボルで 自動車カテゴリを拡大しました またアーケードゲーム機 アーケードスティック さまざまな種類のボタンなど ゲームカテゴリに 新しいシンボルが加わりました EVプラグの種類を表す 新しいシンボルも追加されました

また月の出 月の入り 虹のような 新しい天気のシンボルもデザインしました 多くの新しいオブジェクトを用意しました 700以上の新しいシンボルが加わり SF Symbolsは5000以上のユニークな シンボルのライブラリとなりました 新しい追加機能や 素晴らしいアニメーションプリセットに ついて知りたい場合は developer.apple.com/sf-symbolsで SF Symbolsアプリの新しいベータ版を 確認いただけます SF Symbols 5でシンボルは表現力の 新たな次元に到達します

本日はありがとうございました SF Symbolsの新しい情報を 楽しんでいただけたなら幸いです