SF SymbolsとMaterial Symbolsのアイコンとデザインガイドラインを見る！

## はじめに
SF SymbolsとMaterial Symbolsのアイコンの形状の比較と、それぞれのガイドラインを読みました👀
気になったところをメモします📝 何か参考になればうれしいです。

## アイコンを雑に比較する
:::note warn
一般的に使用される同じ意味合いのアイコンを４つ集めましたが、他のアイコンだと今回の解釈に合っていないものもあると思います
:::

![Material SymbolsとSF Symbolsの比較。左側には家、虫眼鏡、ダウンロード、メールの各アイコンが描かれたMaterial Symbols。右側には同様のアイコンが描かれたSF Symbols。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/8184abf9-11f9-71d0-695a-ffd91ab4a295.png)
- Material SymbolsはSF Symbolsよりもシンプルな形状の印象
    - SF Symbolsは`home`や`mail`など現実にあるものを想起させるアイコンはディティールが結構細かい
- SF SymbolsはMaterial Symbolsよりも柔らかい印象
    - FillでもSF Symbolsは抜けが多い
        - `home`の屋根と本体の間や`mail`の封の部分
    - 丸みが強く感じる
        - `search`の丸の部分がMaterial Symbolsよりも大きく感じる
        - `search`の虫眼鏡持ち手の処理やも丸みがある
        - Material Symbolsは丸み強めにも調整できるので、抽象度の好みで使う方選ぶと良さそう


よく使われるアイコンを4つ抜粋して、形について見てみました:eyes:
このアイコンがどのように作られているのかも気になります...！
というわけで、デザインガイドラインを読んでみます:book:


## 読んだもの
Apple社が提供しているデザインガイドライン「Human Interface Guidelines」のSF Symbols

https://developer.apple.com/design/human-interface-guidelines/sf-symbols

Googleが開発したデザインシステム「Material Design 3（MD3）」のIcons

https://m3.material.io/styles/icons/overview

## Human Interface Guidelines（SF Symbols）について:memo:
### SF Symbols 概要
- Appleが提供しているシンボルフォント。FontAwesome的なもの。
- シンボルは個別のレイヤーで構成されている
- San Francisco システムフォントと統一されていて、テキストに合わせてシンボルを揃えられる
![フォルダーにプラス記号のアイコンが表示された画像。行は小、中、大のサイズに分かれ、列はウルトラライト、シン、ライト、レギュラー、ミディアム、セミボールド、ボールド、ヘビー、ブラックのウェイトで構成されている。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/d150f120-999c-ac2e-9c52-db7f093a0e81.png)


### レンダリングモード
1. <b>モノクロ</b>
全てのレイヤーに1つの色を適応する
1. <b>階層的</b>
全てのレイヤーに1つの色を適用して、各レイヤーのレベルごとに色の不透明度を変える
![さまざまなアイコンの並び。共有、フォルダー追加、ゴミ箱禁止、レイヤー、番号付きリスト、テキスト入力、スマートフォンのワイヤレス、コンピュータ画面のアイコンが左から右に表示されている。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/ab0df795-9ad2-c806-b886-c5884ea9a05a.png)
1. <b>パレット</b>
レイヤーごとに1色使用して、シンボルに2色以上適用する
 ![フォルダーにプラス記号の付いたアイコン。新しいフォルダーを追加することを示している。プラス記号だけ青い。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/15e7bd5d-c1af-08f0-6666-27e0c037e107.png)
1. <b>マルチカラー</b>
意味を強調するために固有の色を適用する
 ![ごみ箱に斜線が引かれた赤いアイコン。削除禁止を示している。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/9640f99a-03c8-407a-3afd-67f1345504f4.png)


### 可変色
- レンダリングモードに関係なく、時間の経過とともに変化する特性を表せる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/3d611ac1-bb67-4dca-eef1-72c5442c0ca7.png)
    - 例：異なる音域を伝えられる
    - しきい値によって音波レイヤーの色が変化する

:::note warn
奥行きを伝えるためには使用しない
:::


### デザインのバリエーション
- 塗りつぶし
- アウトライン
- スラッシュを含むもの
- 円・正方形・長方形に囲まれたもの
    - 小さいサイズでも見やすい

### アニメーション（実際見たほうが早い:eyes:）
https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Animations:~:text=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E3%83%90%E3%83%AA%E3%82%A8%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3-,%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3,-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%B7%E3%83%B3%E3%83%9C%E3%83%AB


- 役立つとき
    - ユーザーに何か促すとき
    - ユーザーのアクションに応じたフィードバックするとき
    - ステータスや進行中のアクティビティの変化を伝えるとき
- 注意すること
    - アニメーションを多用しすぎない
    - 意図が明確に伝わるようにする
    - サービスのトーンを考慮する

### オリジナルのシンボルに編集する

https://spinners.work/posts/kudakurage-sf-symbols-20191025/#sf-symbols%E3%81%AE%E4%B8%BB%E3%81%AA%E7%89%B9%E5%BE%B4

1. 作りたいシンボルに近いテンプレをExportする
1. RegularのMのシンボルを最初に作る
     - S,M,Lのスケールがある
     - Mを1.0として、S：0.783倍 / L：1.29倍
     - テキストのウェイト・サイズに合わせて27種類作る必要がある
1. UltralightとBlackの両極端を作って、その間を埋めてるように調整する
1. 位置、marginを調整する
1. レイヤー構造やレイヤー名は元と同じままにする
1. SVG書き出し



## Material Design 3（MD3）（Icons）について:memo:
### 概要
- Google Fontsからアイコンをコピペできる（色とサイズが変えられる）
- マテリアルシンボルはアウトラインでも3種類ある
    - 普通、丸みがあるもの、シャープなもの
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/66179d0a-edf9-828c-0655-b4674b862926.png)
- Figmaのプラグインから使える
- 4つの調整可能な属性がある
    - Weight（太さ）
    - Fill（塗りつぶし）
    - Grade（細かい太さ調整）
    - Optical sizes（線の太さとか最適化されたサイズ変更）

### Gradeについて詳しく
- シンボルの太さに影響する
    - Weightよりも細かい調整ができる
    - その分与える影響は小さい
- コントラストによる見え方の違いの補正にも使える
    - 例：黒背景に白いアイコンだと線が太く見える -> 同じように見せるよう、白背景の時の黒アイコンを太め調整する
    - [色の見え方参考](https://chot.design/concept-of-design/006b02b07daa/)
    - ダークモードとライトモードの見え方を同じにするために有効

| Light | Dark |
|:-:|:-:|
| ![買い物カートのアイコンと「Add to cart」と書かれたボタン。右上に太陽のアイコンがあり、カートに追加することを示している。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/3f50eb9d-c243-8f6f-0d3a-74753fa8ffca.png)|![買い物カートのアイコンと「Add to cart」と書かれたボタン。右上に月のアイコンがあり、カートに追加することを示しているダークモードのデザイン。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/c1c8221e-1c20-cf95-2f24-19abfe5897ca.png)|

### アイコンのデザイン
- ⭕️ シンプルでモダン
- ⭕️ 親しみやすい
- ⭕️ 時には風変わり
- ⭕️ 一貫性と読みやすさを確保する
- ⭕️ グラフィカルに
- ⭕️ 太めに
- ⭕️ ライブエリア内に収まり、2dpのパディングがある
- ⭕️ 正面図
- ⭕️ 整数値
- ❌ 複雑
- ❌ 繊細
- ❌ ゆるい
- ❌ 有機的な形
- ❌ 回転、立体的
- ❌ ストロークの太さが一定でない
- ❌ 角丸が一定でない
- ❌ テキストとアイコンの大きさがばらけて見える
- ❌ テキストとアイコンの太さがばらけて見える
- ❌ テキストとアイコンのベースラインが同じ値
    - 11.5%下げる（<- 具体的な数値が書いてあった）
- 🔺 ナビゲーションの時アイコンのみで使用する
    - テキストもあると、みんなが理解できる
    - アイコンが意図にあった翻訳をされるためにも、ラベルを使う

### グリッドとキーライン
- これに沿って作る
- 一貫した視覚的な比率を保てるが、柔軟にも配置できる

![グリッド上に描かれた円と角が丸い正方形の図形。デザインやアイコンのレイアウトのためのガイドラインを示している。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/7c866ba7-4529-bd78-b5a0-9103710fe7d8.png)
![グリッド上に配置された円と角の丸い正方形の重なった図形。デザインやアイコンのレイアウトガイドを示している。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/56604867-370d-a2ea-45b5-0f1162999211.png)


## 読んでみた感想
Human Interface Guidelinesでは、アニメーションに言及されていたので、アイコンを実際に使用するときのことがイメージしやすいな〜と思いました！<br>Material Designは、カスタムが柔軟な印象です。同じアイコンでもシャープなもの・丸みあるものがあったり！<br>アイコンの形状は好みによるかと思いますが、個人的にはMaterial Symbolsのシンプルさが好みでした。


## まとめ
今回はアイコンについて見比べてみたり、二つのデザインシステムを読み比べました！もっといろんなアイコン、いろんなモードで比較してみたい...:mag_right:<br>
今回比較したのはほんの一部なので、誤った記載があったら教えてください:pray:<br>
何か参考になればうれしいです。最後までお読みいただき、ありがとうございます！