Material Design 3 要点まとめ #10 Icons

2023年3月17日 21:16

Material Design 3 ガイドラインの要点をまとめたものです。
第10回はIconsの章。マテリアルデザインにおけるアイコンの役割や、アイコンデザインの基準について説明しています。また、Googleが提供するアイコンライブラリ「Material Symbols」についても紹介しており、デザイナーが利用する際の注意点や使い方についても解説しています。

Overview

・M2からの更新ポイント

M2からの更新ポイント

バリアブルアイコンフォントとしてMaterial Symbolsが登場した。
Material Symbolsにはアウトライン、ラウンド、シャープの3つのスタイルが用意されている。
Material Symbolsはウェイト、フィル、オプティカルサイズ、グレードの4つの軸で見た目を自由に調整できる。
Material SymbolsはGoogle Fontsで閲覧、カスタマイズ、ダウンロードが可能。
Figma用の公式プラグインもあるよ。

Designing icons

アイコンを「作る」ことについてのセクション。

・アイコンデザインの原則
・サイズとレイアウト
・グリッドとキーライン

アイコンデザインの原則

簡略化し、わかりやすく、視認性を高くする。
複雑なデザインは避ける。
幾何学的で大胆な形状にする。
繊細で有機的な形状にはしない。
1つのアイコンセットの中では、一貫したスタイルを用いる。

この章は全体的に「MDにおけるアイコンデザインとその運用」というテーマなのですが、この小セクションに限ってはMDに限らずUIアイコンをデザインする上で念頭に置くべきガイドラインとして読めます。原文にOK/NGが図で例示されてて良い感じです。

サイズとレイアウト

MDにおけるアイコンの標準サイズは 24 x 24 dp 。ピクセルパーフェクトにしたい場合は原寸で作る。
オプティカルサイズに対応する場合は24dpに加えて20, 40, 48dpのサイズを作る。オプティカルサイズに対応させると、使用するサイズに応じて適切な密度のデザインに切り替えることが可能になる。詳細は後述。
アイコンのグラフィックは基本的に「ライブエリア」に収まるように作る。24 x 24 dp の場合、ライブエリアは 20 x 20 dp 。

グリッドとキーライン

Material Symbolsのプリセットにないアイコンを自作したい場合、テンプレートをDLして利用することができる。
テンプレートは「グリッド」と「キーライン」で構成されている。
「グリッド」は 24 x 24 のピクセルパーフェクトのためのガイドになる。
「キーライン」とは、アイコン形状の基礎になる代表的な4つの形状（正方形、円、横長の長方形、縦長の長方形）がグリッドに収まる形で配置されているもの。アイコンセット全体の一貫性を保つのに役立つ。
グリッド、キーライン以外にも、通常ウェイト（400）の場合のストロークの太さは2dp、角丸のサイズも2dp、など細部の基本ルールが決まっている。

グリッド・キーライン・その他細部の基本ルールを駆使することで、プリセットに用意されていないアイコンを、プリセットと同じデザインルールで自作することが可能です。もともと2000種類以上のデザインが用意されているので、ニーズに合致するものが全く見つからないということはあまり無い気がしますが、既存のデザインをちょっとアレンジしたい場合などには便利かもしれません。

Applying icons

アイコンを「使う」ことについてのセクション。

・3つのスタイル：アウトライン、ラウンド、シャープ
・4つのカスタマイズ軸
　・ウェイト
　・フィル
　・グレード
　・オプティカルサイズ
・シンボルのUIへの適用

3つのスタイル：アウトライン、ラウンド、シャープ

Material Symbolsにはアウトライン、ラウンド、シャープの3つのスタイルが用意されている。
アウトラインスタイルがMDにおける最も一般的なスタイル。タイポグラフィに合わせてストロークの太さを細かく調節することが可能。詳細は後述。
ラウンドスタイルは、アウトラインスタイルをベースにストロークの角や端を丸くしたもの。曲線的なロゴや円形の要素を使用するUIとの相性が良い。
シャープスタイルは、アウトラインスタイルよりも形状を直線的にしたスタイル。メリハリが強いため、小さいサイズでも視認性が良い。

従来のMaterial Iconsのころからアウトライン、ラウンド、シャープの3スタイルは存在しているのですが、見た感じシャープに関してはIconsとSymbolsでデザインがだいぶ違うようです。Iconsのシャープはアウトラインよりもフィルをベースに角張らせた印象なのですが、Symbolsのシャープはアウトラインがベースになっています。アウトライン／フィルの切替でアクティブ／非アクティブなどの状態変化を表現する用途があるので、それとスタイルのバリエーションを切り離したんだと思います。

4つのカスタマイズ軸

Material Symbolsは、自由な組み合わせでカスタマイズ可能な4つの形状属性を持っている。
カスタマイズ軸は、ウェイト、フィル、グレード、オプティカルサイズ。

ウェイト

ストロークの太さを表す。
最細（100）〜最太（700）までの7段階で設定。
ウェイトが大きくなるほど、アイコンのサイズも大きくなる。
標準サイズ（24dp）で表示するときに最細（100）や最太（700）のウェイトは使わない。
1つのUIテーマの中では一貫したウェイトを使用する。

フィル

アウトライン（ラウンド、シャープも含む）スタイルから地と図を反転したり塗りつぶされたスタイルに変化する。
値は 0（アウトライン）か 1（フィル）。
フィルの状態でUI上の状態変化を表現することができる。
例えば、非選択時はアウトラインスタイルのアイコンが選択状態になるとフィルスタイルに変化する、など。

グレード

ウェイトと同様にアイコンの太さに影響を与える属性だが、ウェイトよりも影響が小さい。
ウェイトよりも細かい微妙な調整によって、ビジュアルブリード（色のコントラストによって画像が大きく見えたり小さく見えたりすること）を補正することができる。
例えば、明るい背景に暗いアイコンの場合のグレードが0の場合、暗い背景に明るいアイコンでは-25にすることで、見かけ上の太さの印象を揃えることができる。
アイコンがアクティブな状態を表現するために、ストロークを太くして強調する使い方もできる。

オプティカルサイズ

アイコンを24dp用のデザインのまま大きなサイズで使用すると、オリジナルと比べて印象が重くなりすぎる。
異なるサイズでも印象を同じにするためにオプティカルサイズを用いて調整することができる。
オプティカルサイズのバリエーションは20・24（オリジナル）・40・48dpの4種類。
アイコンを小さく表示する場合は20を、大きく表示する場合は48を、というふうに使い分ける。

一つのデザインをベースに複数の軸で自由にカスタマイズできるのはとても便利です。4つの軸はそれぞれ用途がちょっとずつ違いますね。
ウェイトはスタイルと合わせてUIテーマのトンマナに適合させる目的で使うことが多そう。
フィルもトンマナ選びに使えますが、どちらかというとアウトラインスタイルとの対比による状態変化の表現に使うことが主になるでしょう。
グレードやオプティカルサイズはもっと細かい調整ですね。今まで実装のシンプルさと天秤にかけて妥協してきた微細な見た目の印象のコントロールが可能になったということで夢が広がります。

シンボルのUIへの適用

一緒に使うタイポグラフィとウェイトを揃える。（特にGoogle Sansファミリーの場合はウェイトの値を同じものを使う）
明確に意味が伝わる必要がある場合はラベルテキストを併用する。（代表的な例はボトムアプリバーなど）
視認性と操作性を担保するために、アイコンの周囲には十分なスペースを確保する。
- アイコンが24dpの場合は48dpのスペースを確保する。アイコンが20dpの場合は40dpのスペースを確保する。

この小セクションはMDのルールにとどまらず、UI上でアイコンを使う場合の一般的な留意点として参考にできます。操作性のためのスペース確保が特に重要かなと思います。

この記事が気に入ったらサポートをしてみませんか？