はじめに
SF SymbolsとMaterial Symbolsのアイコンの形状の比較と、それぞれのガイドラインを読みました👀
気になったところをメモします📝 何か参考になればうれしいです。
アイコンを雑に比較する
一般的に使用される同じ意味合いのアイコンを４つ集めましたが、他のアイコンだと今回の解釈に合っていないものもあると思います
- Material SymbolsはSF Symbolsよりもシンプルな形状の印象
- SF Symbolsは
homeやmailなど現実にあるものを想起させるアイコンはディティールが結構細かい
- SF Symbolsは
- SF SymbolsはMaterial Symbolsよりも柔らかい印象
- FillでもSF Symbolsは抜けが多い
-
homeの屋根と本体の間やmailの封の部分
-
- 丸みが強く感じる
-
searchの丸の部分がMaterial Symbolsよりも大きく感じる -
searchの虫眼鏡持ち手の処理やも丸みがある - Material Symbolsは丸み強めにも調整できるので、抽象度の好みで使う方選ぶと良さそう
-
- FillでもSF Symbolsは抜けが多い
よく使われるアイコンを4つ抜粋して、形について見てみました
このアイコンがどのように作られているのかも気になります...！
というわけで、デザインガイドラインを読んでみます
読んだもの
Apple社が提供しているデザインガイドライン「Human Interface Guidelines」のSF Symbols
Googleが開発したデザインシステム「Material Design 3（MD3）」のIcons
Human Interface Guidelines（SF Symbols）について
SF Symbols 概要
- Appleが提供しているシンボルフォント。FontAwesome的なもの。
- シンボルは個別のレイヤーで構成されている
- San Francisco システムフォントと統一されていて、テキストに合わせてシンボルを揃えられる
レンダリングモード
-
モノクロ
全てのレイヤーに1つの色を適応する -
階層的
全てのレイヤーに1つの色を適用して、各レイヤーのレベルごとに色の不透明度を変える
-
パレット
レイヤーごとに1色使用して、シンボルに2色以上適用する
-
マルチカラー
意味を強調するために固有の色を適用する
可変色
- レンダリングモードに関係なく、時間の経過とともに変化する特性を表せる
- 例：異なる音域を伝えられる
- しきい値によって音波レイヤーの色が変化する
奥行きを伝えるためには使用しない
デザインのバリエーション
- 塗りつぶし
- アウトライン
- スラッシュを含むもの
- 円・正方形・長方形に囲まれたもの
- 小さいサイズでも見やすい
アニメーション（実際見たほうが早い）
- 役立つとき
- ユーザーに何か促すとき
- ユーザーのアクションに応じたフィードバックするとき
- ステータスや進行中のアクティビティの変化を伝えるとき
- 注意すること
- アニメーションを多用しすぎない
- 意図が明確に伝わるようにする
- サービスのトーンを考慮する
オリジナルのシンボルに編集する
- 作りたいシンボルに近いテンプレをExportする
- RegularのMのシンボルを最初に作る
- S,M,Lのスケールがある
- Mを1.0として、S：0.783倍 / L：1.29倍
- テキストのウェイト・サイズに合わせて27種類作る必要がある
- UltralightとBlackの両極端を作って、その間を埋めてるように調整する
- 位置、marginを調整する
- レイヤー構造やレイヤー名は元と同じままにする
- SVG書き出し
Material Design 3（MD3）（Icons）について
概要
- Google Fontsからアイコンをコピペできる（色とサイズが変えられる）
- マテリアルシンボルはアウトラインでも3種類ある
- 普通、丸みがあるもの、シャープなもの
- 普通、丸みがあるもの、シャープなもの
- Figmaのプラグインから使える
- 4つの調整可能な属性がある
- Weight（太さ）
- Fill（塗りつぶし）
- Grade（細かい太さ調整）
- Optical sizes（線の太さとか最適化されたサイズ変更）
Gradeについて詳しく
- シンボルの太さに影響する
- Weightよりも細かい調整ができる
- その分与える影響は小さい
- コントラストによる見え方の違いの補正にも使える
- 例：黒背景に白いアイコンだと線が太く見える -> 同じように見せるよう、白背景の時の黒アイコンを太め調整する
- 色の見え方参考
- ダークモードとライトモードの見え方を同じにするために有効
| Light | Dark |
|---|---|
 |
 |
アイコンのデザイン
- ⭕️ シンプルでモダン
- ⭕️ 親しみやすい
- ⭕️ 時には風変わり
- ⭕️ 一貫性と読みやすさを確保する
- ⭕️ グラフィカルに
- ⭕️ 太めに
- ⭕️ ライブエリア内に収まり、2dpのパディングがある
- ⭕️ 正面図
- ⭕️ 整数値
- ❌ 複雑
- ❌ 繊細
- ❌ ゆるい
- ❌ 有機的な形
- ❌ 回転、立体的
- ❌ ストロークの太さが一定でない
- ❌ 角丸が一定でない
- ❌ テキストとアイコンの大きさがばらけて見える
- ❌ テキストとアイコンの太さがばらけて見える
- ❌ テキストとアイコンのベースラインが同じ値
- 11.5%下げる（<- 具体的な数値が書いてあった）
- 🔺 ナビゲーションの時アイコンのみで使用する
- テキストもあると、みんなが理解できる
- アイコンが意図にあった翻訳をされるためにも、ラベルを使う
グリッドとキーライン
- これに沿って作る
- 一貫した視覚的な比率を保てるが、柔軟にも配置できる
読んでみた感想
Human Interface Guidelinesでは、アニメーションに言及されていたので、アイコンを実際に使用するときのことがイメージしやすいな〜と思いました！
Material Designは、カスタムが柔軟な印象です。同じアイコンでもシャープなもの・丸みあるものがあったり！
アイコンの形状は好みによるかと思いますが、個人的にはMaterial Symbolsのシンプルさが好みでした。
まとめ
今回はアイコンについて見比べてみたり、二つのデザインシステムを読み比べました！もっといろんなアイコン、いろんなモードで比較してみたい...
今回比較したのはほんの一部なので、誤った記載があったら教えてください
何か参考になればうれしいです。最後までお読みいただき、ありがとうございます！