🍎HIGざっくりまとめ Foundations編 vol. 10 SFシンボル

SFシンボルは、サンフランシスコのシステムフォントとシームレスに統合され、あらゆるウェイトとサイズのテキストと自動的に整列する、一貫性があり高度に設定可能な何千ものシンボルを提供します。

SF Symbols - Foundations - Human Interface Guidelines - Design - Apple Developer

• ナビゲーションバー、ツールバー、タブバー、コンテキストメニュー、テキスト内など、インターフェースのアイコンが表示される場所であればどこでも、オブジェクトやコンセプトを伝えるためにシンボルを使用することができます。

• 個々のシンボルや機能の利用可能性は、対象とするシステムのバージョンによって異なります。

• SF Symbolsからアプリをダウンロードし、シンボルの全種類を閲覧することができます。

• アプリのアイコンやロゴ、その他の商標にシンボルやそれに類似した画像を使用することの禁止など、SF Symbols の使用条件を必ず理解しておいてください。

---

レンダリングモード

SF Symbols 3 以降では、 4 つの描画モードがあり、シンボルに色を適用する際に複数のオプションを使用することができます。

1. 単色- シンボル内のすべてのレイヤに 1 つの色を適用します。シンボル内のパスは、指定した色でレンダリングされるか、または色で塗りつぶされたパスの中に透明な図形としてレンダリングされます。

2. 階層- シンボル内のすべてのレイヤーに1つの色を適用し、各レイヤーの階層レベルに応じて色の不透明度を変化させます。

3. パレット- シンボルに 2 色以上の色を適用し、レイヤごとに 1 色を使用します。3 階層を定義するシンボルに 2 色だけを指定すると、2 階層と 3 階層は同じ色を使用することになります。

4. マルチカラー- シンボルに固有の色を適用し、意味を強化します。例えば、葉のシンボルは物理的な世界での葉の外観を反映するために緑を使用し、trash.slashシンボルはデータ損失を知らせるために赤を使用します。マルチカラー・シンボルの中には、他の色を受け取ることができるレイヤーを含むものがあります。

• レンダリングモードに対応するために、シンボルのパスを個別のレイヤーに整理しています。たとえば、cloud.sun.rain.fillシンボルは 3 つのレイヤーから構成されています。第一レイヤーには雲、第二レイヤーには太陽とその光線、第三レイヤーには雨粒のパスが含まれます。

• 選択したレンダリングモードによって、シンボルは様々な外観を作り出すことができます。例えば、階層レンダリングモードでは、各レイヤーに異なる単色の不透明度を割り当て、視覚的な階層を作り出し、シンボルに奥行きを与えます。

• システムが提供する色を使用することで、レンダリングモードに関係なく、アクセシビリティや、vibrancyやDark Modeなどの外観モードに自動的に適応することが保証されます。

• シンボルのレンダリングモードがあらゆる状況でうまく機能することを確認してください。

---

バリアブルカラー

• SF Symbols 4のバリアブルカラーでは、レンダリングモードに関係なく、容量や強度などの時間と共に変化する特性を表現する方法が紹介されています。

• 例えば、speaker.wave.3 のシンボルで可変色を使用すると、曲がった波路を表すレイヤーを異なるデシベル値の範囲に対応させることで、3 つの異なる音域（さらに音がない状態）を伝達することができます。

• バリアブルカラーは変化を伝えるために使用し、深さを伝えるために使用しないでください。奥行きと視覚的階層を伝えるには、階層レンダリングモードを使って特定のレイヤーを高くし、シンボルの前景と背景の要素を区別してください。

---

ウィイトとサイズ

SFシンボルは、幅広いウェイトとスケールでシンボルを提供し、適応性の高いデザイン制作をサポートします。

• ウルトラライト（ultralight）からブラック（black）まで9種類のウェイトがある。それぞれサンフランシスコ・システム・フォントのウェイトに対応している。

• 各シンボルには、小、中（デフォルト）、大の3つのスケールが用意されている。スケールは、サンフランシスコ・システム・フォントのキャップの高さを基準として定義されている。

---

デザインバリエーション

SF Symbols では、塗りつぶし、スラッシュ、囲み（正方形、矩形などの形状で囲んでだ）などのデザインバリアントを定義しており、UI の視覚的な一貫性とシンプルさを維持しながら、正確な状態やアクションを伝えるのに役立ちます。

• 例えば、あるアイテムやアクションが使用できないことを示すためにシンボルのスラッシュバリアントを使用したり、選択を示すためにフィルバリアントを使用したりすることができます。

• 多くの場合、囲みやスラッシュのバリアントはアウトラインやフィルのバリアントと組み合わせることができます。

• 特定の言語や書記体系に対応する多くのバリエーションが用意されています。言語や文字に固有のバリアントは、デバイスの言語が変わると自動的に適応されます。

シンボルのバリエーションは、さまざまなデザイン目標に対応します。例えば

• アウトラインは、ツールバー、ナビゲーションバー、リストなど、文字と一緒に記号を表示する場合に有効です。

• 正方形や円形などの囲み図形を使った記号は、小さいサイズでも読みやすさが向上します。

• 塗りつぶしのバリエーションでは、ソリッドエリアがシンボルをより視覚的に強調する傾向があり、iOSのタブバーやスワイプ操作、アクセントカラーを使って選択を伝えるような場所での使用に適しています。

多くの場合、シンボルを表示するビューがアウトラインと塗りつぶしのどちらを使うかを決定するので、バリアントを指定する必要はないでしょう。例えば、iOS のタブバーは塗りつぶしのバリアントを好みますが、ナビゲーションバーはアウトラインのバリアントを用います。

---

カスタムシンボル

SF Symbolsが提供しないシンボルが必要な場合、自分で作成することができます。カスタムシンボルを作成するには、まず欲しいデザインに似たシンボルのテンプレートをエクスポートし、Sketch や Illustrator などのベクター編集ツールを使ってそれを修正します。

---

感想

SFシンボルってリッチだ！
ウェイト９ × サイズ３ × レンタリングモード４
塗りつぶし、スラッシュ、囲みなどのデザインもいろいろ。
さらに言語がシンボル内のモチーフとして用いられているようなもの（辞書マークとか）は、言語を切り替えると一緒に変わってくれるという・・・

レンタリングモードの「階層」はレイヤーごとに単色の透明度を変えて（濃淡ではない）立体的に見せてるっていうことだったので、背景色があったり、ダークモードだと背景に馴染む形で奥行き感を出すってことかな。

フォントとアイコンのウェイトを合わせるのがいつも悩ましいので９つもあるのが個人的には一番嬉しいかも。