-
SF Symbols 6の新機能
AppleプラットフォームのシステムフォントであるSan Franciscoとシームレスに統合するようデザインされたAppleのアイコンライブラリ、SF Symbolsの最新アップデートを確認しましょう。新しいアニメーションプリセットであるWiggle、Rotate、Breatheを使用すると、インターフェイスを生き生きとさせることができます。このセッションの内容を最大限に活用するには、まずWWDC23の「What's new in SF Symbols 5(SF Symbols 5の新機能)」を視聴されることをお勧めします。
関連する章
- 0:00 - Introduction
- 1:21 - Animation presets
- 10:09 - SF Symbols app
- 15:43 - New symbols
リソース
関連ビデオ
WWDC23
-
0:07
こんにちは Apple Designチームの デザイナーのThaliaです このセッションではSF Symbolsの 世界に飛び込みます Appleが提供するアイコンライブラリで 親しみやすくアクセスしやすい シンボルを提供するために 作成されています SF Symbolsは強力なツールで ローカリゼーションから 表現力豊かな アニメーションまでをカバーします 内容が多岐にわたるため さっそく始めていきましょう 今日は 新しいプリセットと機能強化を アニメーションプリセットの セクションで紹介します SF Symbolsアプリのセクションでは いくつかアップデートを紹介してから シンボルに注釈を付けて 新しいアニメーションを フル活用する方法を説明します そして最後に このライブラリに追加された 新規シンボルを確認します SF Symbolsアニメーションは 以前導入された機能です 詳しくは「What's new in SF Symbols 5」をご覧ください 今回は この機能のコンセプトについて 解説し アニメーションの力を 詳しく紹介します
1:10
1:21
今年 ユニバーサルアニメーションの 新しいプリセットが導入されます Wiggle Rotate Breatheです ReplaceとVariable Colorにも 素晴らしいアップデートがありました これらのプリセットはアニメーションの 表現力を向上させて インターフェイスの質を高めます
1:41
1:44
Wiggleプリセットは 見逃されやすい変更や コールトゥアクションを 強調するのに役立ちます Wiggleは操作を 動きで目立たせたり シンボルの意味を強調したり することもできます 例えば 特定の方向を指し示す 矢印があるとしましょう 方向というのは Wiggleにとって非常に 重要な概念です 例として紙飛行機を使用します シンボルは右または左に動かせます 読む方向に振動させたり 逆方向に振動させたり することもできます これらを指定することで シンボルは水平方向に 動いてから元の位置に戻ります
2:27
2:35
2:41
さて このシンボルの場合 紙飛行機の向きと同じ方向を指し示す 動きはありません 同じ方向を指すには カスタム角度で シンボルの方向を指定する 必要があります 315度に設定すれば 紙飛行機が離陸するように見えます
3:04
使いやすくする目的から Wiggleの多くのシンボルには この紙飛行機のように 推奨の振動方向が あらかじめ組み込まれています もちろん アプリの必要に応じて カスタマイズし 別のアニメーションを 使用することもできます
3:19
3:22
Rotateでは シンボルに ダイナミックな動きを追加して 現実世界の動作を模したり 視覚的なインジケータとして 使用したりできます 例えば タスクの進行中に Rotateを適用すると タスクが期待どおりに 進んでいるとわかります
3:40
シンボル全体を 回転できるものもあれば 一部だけが回転する シンボルもあります この卓上扇風機の場合 By Layer回転オプションで ファンだけを回転させられます 独自のシンボルでこれを 行う方法も後で説明します
4:02
4:05
4:23
Breatheは SF Symbols 5で導入された Pulseプリセットと似たところがあります Pulseは不透明度の変化で アクティビティの進行を表現します 一方 Breatheは不透明度とサイズを 変えることでシンボルに動きを与えます どちらのプリセットを使用するか迷ったら 自問してみてください 何を伝えたいのか? ハートの存在感を強く押し出して 生きているような見た目にしたい場合は Breatheの方が適しています
4:58
5:02
5:08
5:13
5:30
Magic Replaceは新しいデフォルト動作ですが 注意点が1つあります Magic Replaceの使用が好ましい場合でも シンボル同士が関連していなければ 実行できない場合があります 2つのシンボル間でMagic Replaceを 使用できない場合は 標準のReplaceアニメーションを使用します
5:52
5:59
6:10
6:23
独自のシンボルに シンボルコンポーネントを使用する場合も Magic Replaceが役立ちます シンボルをSF Symbols 6アプリから 再エクスポートし Xcode 16にインポートするだけで 準備が整います
6:39
Variable Colorにも アップデートがありました これは色を様々な強度レベルで 表示するプリセットです 色を使って 時間とともに変化していくシンボルの状態を 伝えることができます シンボルのデザインにより Variable Colorの繰り返しの 印象は異なってきます 一部のシンボルでは 色の不透明度の変化を 一方通行にするのが適しています 両端が接していない場合は オープンループと呼びます 両端が接している場合は クローズドループと呼びます 私たちは 各シンボルの性質を尊重して Variable Colorを繰り返す際の アニメーションを改善しました クローズドループのアニメーションが スムーズになったのです 今後Variable Color対応の シンボルを使う際は 注釈を付けてクローズドループの デザインを最適化し シームレスに 再生を繰り返しましょう
7:41
これらの新しいプリセットが アプリに実装された場合の 例として 植物が好きな人向けの サンプルアプリを設計しました このアプリは 植物を分類したり 必要なケアのアクティビティを追跡したり 植物の健康状態をモニタリングします これがそのアプリです UIで使用するために 新しいシンボルのセットデザインしました SF Symbolsライブラリの シンボルと組み合わせて使用します Magic Replaceを使用して 植物に影響のありそうな 天気の変化を警告しています シンボル間をスムーズに切り替える時は Magic Replaceがこれまでで最も優れた 方法なので 可能な限り使用することをおすすめします
8:24
8:38
画面上で行うべき操作を 明確に示すために ボタン内部の矢印アイコンが 振動し始めます こうすることでユーザーの 注意を引き モンステラを植物コレクションに 追加できるように導きます 見た目の複雑なUIを 実装した場合は このようなアニメーションで ユーザーにアプリの使い方を 案内してください
9:03
9:15
9:23
ランの仲間は 根を15分ほど 水に浸すことで水やりをします タイマーを開始させると 水滴のシンボルがBreatheプリセットで アニメーション化されます 視覚的なフィードバックにより アクティビティが進行中であることが示されます
9:42
ただし 考慮すべきことが1つあります アニメーションはUIに使うと効果的ですが 多用したり 間違った文脈で使用すると 目障りで 気が散るものになってしまい 重要なコンテンツや操作から ユーザーの注意が逸れかねません
10:00
アニメーションは 目的を意識して使用し ユーザーがしっかりと体験に 集中できるように設定しましょう 新しいプリセットの説明が すべて終わりましたので 次はSF Symbolsアプリの 最新のアップデートを紹介します
10:18
10:30
10:50
11:03
11:19
アニメーションの繰り返しも 細かく制御できます では繰り返しが 1度だけ行われます ではアニメーションは 繰り返し再生され その合間にどれだけ 一時停止するかを設定できます では 明示的に停止されない限り 再生が繰り返されます
11:44
新しいアニメーションプリセットの 概要を説明しました システムに搭載された シンボルを見てきましたが 独自にカスタマイズしたシンボルを アプリに使う場合も SF Symbolsアプリなら 新しいアニメーション機能を 手軽に利用できます
12:02
12:15
12:23
12:38
これで完璧です 次はこれらの水滴を Breatheでアニメーション化します 動かしたい順序で 各レイヤに一滴ずつ追加します または すべてを1つのレイヤにまとめて プリセットがシンボル全体をアニメーション するようにすることもできます 2つ目 3つ目の レイヤを追加します
13:01
13:04
13:07
13:24
13:34
13:37
13:40
期待どおりの動きではありません このシンボルでは 矢印が最も重要なパーツなので そのレイヤだけを動かしたいのです を選択します これで良くなりました を使用したレイヤは 回転のアンカーポイントを基準に その周囲を回転します
14:06
14:12
14:23
14:42
14:51
14:56
15:02
15:07
15:18
これらのコントロールにも注目です シンボルのコンポーネントのように 回転のアンカーポイントもこれら3つの ウェイトで定義する必要があります 定義が完了すると システムが自動的に値を補間して あらゆるウェイトおよびスケールの アンカーポイントを算出します
15:43
15:52
16:05
16:22
新規シンボルは800種以上 SF Symbols 6のライブラリがさらに充実し 6,000種以上のユニークなシンボルを あらゆるスケール ウェイト レンダリングモードで利用できます 魅力的なアニメーションプリセットで アプリをさらに良いものにできます
16:45
新たに追加されたシンボルや アニメーションプリセットを 試してみたい場合は SF Symbolsアプリの 新しいベータ版を入手できます developer.apple.com/jp/sf-symbols/です
17:00
-