この記事から得られること
この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「System icons(システムアイコン)」の概要について学ぶことができます。
Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html
なお、この記事は「約9〜11分」で読める内容となっています。
この記事の前提
この記事では、私が実際に「マテリアルデザイン」を読んだ経験から「理解しておくべき基本的な内容」を抜粋して紹介しています。
また、マテリアルデザインで使用されている専門用語は「英語のまま」使用しています。
理由は、日本語に翻訳しますと不自然な表現となるためです。
少し読みにくい部分もあるかもしれませんが、ご了承ください。
また、この記事は、記事上の各画像を細かく見ていただくためにも「パソコンでの閲覧」を推奨していますが、「スマホのブラウザ」でももちろん閲覧可能です。
なお、この記事を読み進めるなかで、もし分からない専門用語が多い場合は、「マテリアルデザイン」ガイドラインの最初の「概要編」の記事から順番に読み進めることをおすすめします。
システムアイコンとは？
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#design-principles
マテリアルデザインにおける「システムアイコン」とは、UIにおけるさまざまな「機能」「操作」「アイテム」「ファイル」などをシンプルに表現するためのアイコンです。
また「システムアイコン」は、小さいサイズでも見やすく、理解しやすいデザインにする必要があります。
そしてこの「System icons」の章では、「システムアイコン」をデザインするために理解しておくべき「ルール」と「デザイン要素」について解説します。
アイコンサイズ
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes
マテリアルデザインにおけるシステムアイコンのサイズは上の図のように「24 x 24dp」と規定されています。
また、パソコンのマウスやキーボードなどを使って入力するようなUIの場合、システムアイコンのサイズは「20 x 20dp」まで小さくするケースもあります。
Live area & Padding｜ライブエリアとパディング
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes
「24 x 24dp」のシステムアイコンをデザインする場合、アイコンそのものは「Live area(ライブエリア)」と呼ばれるエリア内でデザインする必要があります。
「ライブエリア」とは、上の図の左側のように「20 x 20dp」のエリアのことです。
アイコンを「ライブエリア」内におさめることにより、画面上の他のオブジェクト(例えば一時的に表示されるスクロールバー)によって見えなくなるケースを減らすことができます。
そして「ライブエリア」の周りを囲むかたちで、上の図の右側のように、「Padding(パディング)」と呼ばれるエリアがあります。
この「パディング」は「2dp」の幅となっています。
基本的に、この「パディング」のエリアにはアイコンそのものは配置しませんが、アイコンの表現の都合上、必要と判断した場合は「パディング」エリアも使用してアイコンを作成します。
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes
また、「20 x 20dp」のシステムアイコンをデザインする場合は、上の図のように、「ライブエリア」は「16 x 16dp」となります。
なお「Padding」は「2dp」の幅であることに変わりはありません。
Grid & Keyline｜グリッドとキーライン
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes
プロダクトアイコンと同様に、システムアイコンをデザインする際は、上の図の左側のような「Grid(グリッド)」と、右側のような「Keyline(キーライン)」を使用します。
この2つのガイドを使用することによって、システムアイコンとして一貫性のあるアイコンをデザインすることができます。
Pixel perfection｜ピクセルパーフェクト
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes
システムアイコンの「ひずみ」を避けるために、上の図の左側のように、アイコンは小数点無しの「整数のpx上」にアイコンを配置し、デザインする必要があります。
クロスプラットフォームへの適用
次に、クロスプラットフォーム(複数のOSへの適用)について、各OSに適用した際のシステムアイコンの例を紹介します。
「戻る」アイコンの例
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes
Androidの場合、「戻る」アイコンは、横棒が付いている矢印のアイコンとなっています。
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes
iOSの場合、「戻る」アイコンは、横棒の無い矢印のアイコンとなっています。
上の図の右側のように、ラベルが付いている場合もあります。
「アクションオーバーフローメニュー」アイコンの例
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes
Androidの場合、「アクションオーバーフローメニュー」アイコンは、タテ方向の3つの点で表現されています。
iOSの場合は、ヨコ方向の3つの点で表現されています。
それでは次に、システムアイコンをデザインする際の細かいルールについて解説します。
Corners｜角
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#system-icon-metrics
上の図のように、システムアイコンの外側の「Corner(角)」は、基本的には「丸角」にし、その半径は「2dp」にします。
そして、アイコンの内側の「角」の場合は、「丸角」ではなく、直角の「角」にします。
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#icon-themes
また、基本的に「角(丸角)」の半径は「2dp」ですが、上の図のように「0dp(丸無し)〜4dp」までの範囲が推奨されています。
「角」の「丸み」によってアイコンの印象は大きく変わりますので、そのアイコンの目的やUI全体のテイストに合わせて検討することをおすすめします。
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#icon-themes
上の図は、「角：0dp」を採用したシステムアイコンの例です。
「角：0dp」にすることにより、システムアイコンがシャープな印象になります。
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#icon-themes
また、「ストローク(アイコンの線)」が「2dp以下」の場合、上の図のように「丸角」の半径は「1dp」にする必要があります。
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#icon-themes
なお、上の図の右側のように、アイコンの輪郭が見えにくくなってしまう場合は、内側の角を「丸角」にすることは推奨されていません。
Stroke｜ストローク(線)
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#system-icon-metrics
上の図の左側のように、システムアイコンで使用する「ストローク(線)」の幅は「2dp」とします。
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#system-icon-metrics
上の図の右側のように、一部のストロークのみ「2dp」以外の線を使用することは推奨されていません。
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#icon-themes
そして「2dp」のストロークでデザインされたシステムアイコンは、そのサイズや使用されるアプリケーションを問わず、見やすいアイコンとなります。
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#icon-themes
また、ストロークの配置の仕方によって、システムアイコンの印象は変わります。
上の図のように、①の図形に対して、ストロークの位置を「②：図形の内側」「③：図形の上」「④：図形の外側」に配置することによって、アイコンの印象は大きく変わります。
アイコンの見やすさの観点から、基本的には「②：図形の内側」が採用されるケースが最も多いとされています。
Complex icon shapes｜複雑な形状
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#system-icon-metrics
システムアイコンが複雑な形状になる場合、「視覚補正」をおこない、その見やすさを向上させることができます。
具体的には、上の図のそれぞれのシステムアイコンのように、「視覚補正」として一部のストローク(線)を「2dp」ではなく「1.5dp」にすることにより、その見やすさを向上させています。
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#system-icon-metrics
また、上の図の右側のように、システムアイコンは複雑な形状にならないように、立体的に表現することを推奨されていません。
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#system-icon-metrics
また、上の図の右側のように、正確な表現をしすぎることによって、システムアイコンが複雑な形状にならないようにしてください。
Space｜スペース(タッチエリア)
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#system-icon-metrics
システムアイコンは、そのアイコンサイズとは別に「Space(タッチエリア)」を保持する必要があります。
上の図のように、「24dp」のシステムアイコンの「スペース(タッチエリア)」は「48dp」となります。
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#system-icon-metrics
「20dp」のシステムアイコンの場合は、上の図のように「スペース(タッチエリア)」は「40dp」となります。
背景が明るい際のアイコンの不透明度
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#color
背景のカラーが明るい配色の場合、上の図のように、システムアイコンのカラーは以下の不透明度にすることが推奨されています。
- アクティブでフォーカスされた状態：不透明度87％
- アクティブでフォーカス無しの状態：不透明度54％
- 非アクティブ状態：不透明度38％
背景が暗い際のアイコンの不透明度
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#color
背景のカラーが暗い配色の場合、上の図のように、システムアイコンのカラーは以下の不透明度にすることが推奨されています。
- アクティブでフォーカスされた状態：不透明度100％
- アクティブでフォーカス無しの状態：不透明度70％
- 非アクティブ状態：不透明度50％
ツートンカラーのアイコン
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#icon-themes
システムアイコンとして「ツートンカラーのアイコン」にすることもできます。
ツートンカラーのアイコンは、上の図のように、
- ①：ストローク(線)
- ②：透明度のある塗り
で構成されています。
アイコンの塗りつぶしの部分の透明度を調整することにより、見やすいアイコンにすることができ、塗りにブランドカラーを適用することもできます。
また、アイコンの塗りつぶしの透明度は、背景のカラーによって以下の値が推奨されています。
- 明るいカラーの背景：透明度87％
- 暗いカラーの背景：透明度100％
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#icon-themes
上の図は、ツートンカラーのシステムアイコンを採用したアプリの例です。各システムアイコンは、ブランドカラーであるグレーに溶け込むようになっています。
まとめ
出典：Material Design : Design section “System icons”
URL：https://material.io/design/iconography/system-icons.html#design-principles
マテリアルデザインにおいて、システムアイコンをデザインする際は、さまざまな「ガイド」や「表現」のルールに従う必要があり、このルールを守ることにより、アイコンをシンプルで分かりやすいものにすることができます。
そのため、システムアイコンをデザインする際は、ぜひ今回のようなデザインルールを参考にしてみることをおすすめします。
なお、こちらのWebページから、「Material icons」と呼ばれる、Googleが提供しているシステムアイコンをダウンロードできますので、よろしければご確認ください。
Material icons｜Google
URL：https://fonts.google.com/icons
最後までお読みいただきありがとうございます。
今回の記事は以上です。
この内容がみなさんのUIデザインの勉強になりましたらうれしいです。
引き続き、UIデザインの勉強を一緒にしていきましょう。
続きを学びたい方は
なお、「マテリアルデザインの続き」を学びたい方は、よろしければこちらの記事もご確認ください。
次のガイドラインを学びたい方は
一つ前のガイドラインを学びたい方は
