この記事から得られること
この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Product icons(プロダクトアイコン)」の概要について学ぶことができます。
Material Design : Design section “Product icons”
URL：https://material.io/design/iconography/product-icons.html
なお、この記事は「約8〜10分」で読める内容となっています。
この記事の前提
この記事では、私が実際に「マテリアルデザイン」を読んだ経験から「理解しておくべき基本的な内容」を抜粋して紹介しています。
また、マテリアルデザインで使用されている専門用語は「英語のまま」使用しています。
理由は、日本語に翻訳しますと不自然な表現となるためです。
少し読みにくい部分もあるかもしれませんが、ご了承ください。
また、この記事は、記事上の各画像を細かく見ていただくためにも「パソコンでの閲覧」を推奨していますが、「スマホのブラウザ」でももちろん閲覧可能です。
なお、この記事を読み進めるなかで、もし分からない専門用語が多い場合は、「マテリアルデザイン」ガイドラインの最初の「概要編」の記事から順番に読み進めることをおすすめします。
プロダクトアイコンとは？
出典：Material Design : Design section “Product icons”
URL：https://material.io/design/iconography/product-icons.html#design-principles
マテリアルデザインにおける「プロダクトアイコン」とは、そのプロダクトやサービスの「ブランド」を視覚的に表現したものです。
また、すべての「プロダクトアイコン」は、そのプロダクトやサービスの「コンセプト」に従って、統一されたデザインである必要があります。
そして、この「Product icons」の章では、「プロダクトアイコン」をデザインするために理解しておくべき「ルール」と「デザイン要素」について解説します。
なお「プロダクトアイコン」は、プロダクトの色々な場面で使用するアイコンとなりますが、基本的にUIデザインにおいては「アプリアイコン」と解釈して問題無いと考えます。
アイコンサイズとグリッド
出典：Material Design : Design section “Product icons”
URL：https://material.io/design/iconography/product-icons.html#grid-and-keyline-shapes
マテリアルデザインにおけるプロダクトアイコンのサイズは「48 x 48dp」と規定されていますが、アイコンをデザインする際は、そのサイズを400%まで拡大し「192 x 192dp」で作成することが推奨されています。
拡大してデザインすることにより、100%のサイズに戻した際に、アイコンの角は鋭く表現され、アイコンの配置も正しく表現されるためです。
また、プロダクトアイコンは「グリッド」と呼ばれるガイドを使用して、デザインします。
Keyline｜キーライン
出典：Material Design : Design section “Product icons”
URL：https://material.io/design/iconography/product-icons.html#grid-and-keyline-shapes
「グリッド」のほかにも、プロダクトアイコンは「キーライン」と呼ばれるガイドを使用してデザインします。
「キーライン」とは、プロダクトアイコンの形のベースとなる「基本的な図形や対角線などのガイド線」のことであり、対角線を除き、以下の4つの図形があります。
- Square｜正方形
- Circle｜円
- Vertical rectangle｜縦長の長方形
- Horizontal rectangle｜横長の長方形
このガイド線である「キーライン」を使用してプロダクトアイコンをデザインすることにより、統一感のあるアイコンをデザインすることができます。
プロダクトアイコンの要素の分解
出典：Material Design : Design section “Product icons”
URL：https://material.io/design/iconography/product-icons.html#specs
プロダクトアイコンをデザインする際は、上の図のように、いくつかの構成に分解してデザインする必要があります。
具体的な構成は以下の通りです。
- 1：Finish｜仕上げ
- 2：Material background｜マテリアルの背景
- 3：Mterial foreground｜マテリアルの前面
- 4：Color｜色
- 5：Shadow｜影
それでは、これらの構成に関連する要素についてそれぞれ解説します。
Lighting｜光
出典：Material Design : Design section “Product icons”
URL：https://material.io/design/iconography/product-icons.html#specs
マテリアルデザインでは、プロダクトアイコンには「光」が照らされており、その「光」によってアイコンの角を強調することができます。
「光」は「上方から」と「上方の45度から」アイコンを照らしています。
上の図では「赤ピンクの半透明の部分」が「光」となります。
Shadows｜影
出典：Material Design : Design section “Product icons”
URL：https://material.io/design/iconography/product-icons.html#specs
プロダクトアイコンに使用される「影」には、「Contact shadow」と呼ばれる「影」があります。
上の図では「赤ピンク」で表現されており、アイコン内の正方形に対して「Contact shadow」を落としています。
なお、「Contact shadow」の設定値(AdobeのIllustratorの設定値です)は以下の通りです。
- Opacity｜不透明度：20％
- X Offset｜Xオフセット：4dp
- Y Offset｜Yオフセット：4dp
- Blur｜ぼかし：4dp
Tinted and Shaded edge｜色味と陰のエッジ
出典：Material Design : Design section “Product icons”
URL：https://material.io/design/iconography/product-icons.html#specs
プロダクトアイコン上の各要素に対しては「Tinted edge(色味のエッジ)」と「Shaded edge(陰のエッジ)」を付けます。
「Tinted edge」は、要素の「上側の角」だけに付けるエッジのことで、以下の設定値で表現します。
- Height｜高さ：1dp
- Opacity｜不透明度：20％
- Color｜色：白色(#FFFFFF)
また「Shaded edge」は、要素の「下側の角」だけに付けるエッジのことで、以下の設定値で表現します。
- Height｜高さ：1dp
- Opacity｜不透明度：20％
Finish｜仕上げ
出典：Material Design : Design section “Product icons”
URL：https://material.io/design/iconography/product-icons.html#specs
プロダクトアイコンには、アイコンの一番上に重ねる「仕上げ(Finish)」と呼ばれるレイヤーがあります。
この「仕上げ」のレイヤーは、上の図のように、左上から45度の角度で当たる光で表現され、具体的な「仕上げ」のグラデーションの設定値は以下の通りです。
- Type｜形状：放射線状
- Angle｜角度：45度
- Color｜色：白色(#FFFFFF)
- Midpoint Location｜中点の位置：33％
- 1つ目のスライダーの不透明度：10％
- 1つ目のスライダーの位置：0％
- 2つ目のスライダーの不透明度：0％
- 2つ目のスライダーの位置：100％
Color｜着色
出典：Material Design : Design section “Product icons”
URL：https://material.io/design/iconography/product-icons.html#icon-treatments
基本的なお話とはなりますが、プロダクトアイコンには、さまざまな色を「着色」させることができます。
「着色」することにより、そのプロダクトのブランドや特徴を表現することができます。
なお、上の図のように「着色」に対して「影」や「エッジ」は不要です。
Layer｜レイヤー(階層)
出典：Material Design : Design section “Product icons”
URL：https://material.io/design/iconography/product-icons.html#icon-treatments
プロダクトアイコン上の各要素は「レイヤー(階層)」としてとらえることができます。
そして、各「レイヤー」に対して「影」を適用し、奥行きを表現することができます。
ただ、「レイヤー」が多すぎますと、上の図のように「アイコンが複雑に見えてしまう」懸念があるため、要素の数は多すぎることのないように、レイヤーの数を制限することが推奨されています。
Scoring｜スコアリング(みぞを付ける)
出典：Material Design : Design section “Product icons”
URL：https://material.io/design/iconography/product-icons.html#icon-treatments
プロダクトアイコンの表現方法として「Scoring(スコアリング：みぞを付ける)」という方法があります。
アイコンに対して「スコアリング」することによって、奥行きを表現することができます。
なお、「スコアリング」は「アイコンの中心」に付ける必要があり、上の図のように、中心から外れた位置に付けることはできません。
Fold｜おりたたみ
出典：Material Design : Design section “Product icons”
URL：https://material.io/design/iconography/product-icons.html#icon-treatments
プロダクトアイコンの表現方法として「Fold(おりたたみ)」という方法もあります。
この方法も「スコアリング」と同様に、アイコンに対して「おりたたみ」をすることによって、奥行きを表現することができます。
なお、上の図のように、重要な要素に対して間違った表現をしないように、おりたたまれた領域内に、重要な要素や色を使用することは、禁止されています。
Overlap｜重ね
出典：Material Design : Design section “Product icons”
URL：https://material.io/design/iconography/product-icons.html#icon-treatments
プロダクトアイコンの表現方法として「Overlap(重ね)」という方法もあります。
この方法も「おりたたみ」と同様に、アイコンに対して「重ね」をすることによって、奥行きを表現することができます。
なお、上の図のように、アイコンが複雑になりすぎないように、3つ以上の「重ね」をおこなうことは禁止されています。
Accordion｜アコーディオン
出典：Material Design : Design section “Product icons”
URL：https://material.io/design/iconography/product-icons.html#icon-treatments
プロダクトアイコンの表現方法として「アコーディオン」という方法もあります。
この方法も「重ね」と同様に、アイコンに対して「アコーディオン」のように「折り目」を付けることによって、奥行きを表現することができます。
なお、上の図のように、アイコンが複雑になりすぎないように、2つ以上の「アコーディオン」を付けることは禁止されています。
Distort｜ゆがみ
出典：Material Design : Design section “Product icons”
URL：https://material.io/design/iconography/product-icons.html#icon-treatments
これは禁止事項となりますが、プロダクトアイコンのデザインにおいて、アイコンに対して「Distort(ゆがみ)」を加えることは禁止されています。
具体的には、上の図のように、アイコンを斜めにゆがめたり、湾曲させるようにゆがめることは禁止されています。
まとめ
出典：Material Design : Design section “Product icons”
URL：https://material.io/design/iconography/product-icons.html#design-principles
マテリアルデザインにおいて、プロダクトアイコンをデザインする際は、さまざまな「ガイド」や「表現」のルールに従う必要があります。
そしてこのルールは、プロダクトの「ブランド」を表現し、シンプルで分かりやすいアイコンをデザインするために活用することができます。
そのため、プロダクトアイコンをデザインする際は、ぜひ参考にしてみることをおすすめします。
最後までお読みいただきありがとうございます。
今回の記事は以上です。
この内容がみなさんのUIデザインの勉強になりましたらうれしいです。
引き続き、UIデザインの勉強を一緒にしていきましょう。
続きを学びたい方は
なお、「マテリアルデザインの続き」を学びたい方は、よろしければこちらの記事もご確認ください。
次のガイドラインを学びたい方は
一つ前のガイドラインを学びたい方は
