2019年04月29日更新
Google iconsとは？マテリアルデザイン対応アイコンの使い方を解説！
Google iconsとは、Google Material iconsというGoogleのマテリアルデザインのアイコンです。アイコンのデザインはシンプルで認識しやすく設計されています。Google iconsの使い方やダウンロードの方法を解説します。
目次
- 1Google iconsとは？
- ・Google Material icons（マテリアルアイコン）とは
- ・ Webアイコンフォントとは
- 2Google Material iconsのデザイン
- ・マテリアルアイコンの特徴
- ・アイコンのデザイン一覧
- 3Google Material iconsの使い方
- ・ HTMLのhead要素内にコードを入れる
- ・ Google Iconsを使用する
- 4Google Material iconsのカスタマイズ
- ・CSSでサイズや色を変更できる
- 5Google Material iconsのダウンロードの方法
- ・ SVGフォーマット
- ・ PNGフォーマット
- 6Google iconsを使ってサイトをデザインしよう！
- ・Googleの記事が気になった方にはこちらもおすすめ！
Google iconsとは？
Googleが無料で公開しているMaterial Design（マテリアルデザイン）のiconsです。マテリアルデザインとは、2014年にGoogleが推奨した、デザインのルールです。
Googleのデザインのガイドラインで、デザインについて細かくルールが決められています。どの端末でもデザインとレイアウトを統一化することで直感的に認識できるように設計されています。
インターネットやアプリでは、メニューの「三」や閉じる（close）「×」の規則性に反応しています。
Google Material icons（マテリアルアイコン）とは
よく使うアイコンが揃っていて、デザインも統一されていて、便利なGoogle Material icons（マテリアルアイコン）が、900種類以上が揃っています。アプリやwebサイトの開発で使用できます。商用利用可能で、リンクやクレジット表記も必要ありません。デザインの作成が苦手な人はGoogle iconsがオススメです。
マテリアルアイコン（Material icons）は、アイコンフォントやSVG、PNGのファイルフォーマットでダウンロードできます。
Webアイコンフォントとは
Web icon font（ウェブアイコンフォント）とは、webサイトのデザインとして、アイコン素材を使うことができます。ボタンのラベルなどに設置することができます。
アイコンフォントのメリットは、読み込みが速く、カラーやサイズをCSSを利用してアイコンフォントをカスタマイズできることです。デメリットは、特殊なフォントの場合は、表示されないことがあります。□の豆腐のマークがでる可能性があります。
Google Material iconsのデザイン
Google Material iconsは、マテリアルデザインです。このマテリアルデザインを使うことで、デバイスを変えても、スマホやPCの利用がストレスを感じず快適なまま操作することができます。
しかし、Googleのマテリアルデザインがストレスなく利用できるのは、どうしてなのか気になるところでしょう。他のデザインとの違いもわかりにくいと思います。以下で、説明しましょう。
マテリアルアイコンの特徴
Google Material icons（マテリアルアイコン）のデザインは、視覚的に認識しやすいことが特徴です。基本はシンプルなデザインです。デバイスよっても、差異がないデザインを利用することで、利用者が直感的に理解できるように表現されています。
フラットデザインは、同じくシンプルなデザインですが平面の表現で影は使いません。画面上変化を見られないアイコンです。マテリアルデザインは影を使って層の重なりを表現しています。
アイコンのデザイン一覧
Google iconsのカテゴリーは、Action、Alert、Av、Communication、Content、Device、Editor、File、Hardware、Image、Maps、Navigation、Notification、places、Social、Toggleです。以下、デザインの一部をご紹介します。
Action
カテゴリーの中で、一番アイコンが多いです。androidやbuild、credit_card、face、favorite、get_app、pets、seachなど見たことがあるアイコンが並んでいます。
Alert
エラーや警告のアイコンカテゴリーです。
Content
addやブロックなどのコンテンツがあります。CSSを使用するとカラーを変えて使用できます。
File
folderやcloud、attachmentなどのアイコンがここにはあります。
Maps
navigationやplace、restaurant、360、atm、subway、train、traffic、satelliteなどがあります。
Navigation
appsや矢印マーク、cancel、close、menu、refreshなどがあります。
Toggle
check_box、radio_buttun、star、toggle_off、toggle_onなどがあります。
フリーアイコン素材
以下にも、Google以外のフリーのアイコン素材をご紹介します。JPG・PNGはbitmap data（ビットマップデータ）、Ai・EPS・SVGは、vector data（ベクターデータ）です。Googleのマテリアルデザインは使用頻度の高いアイコンが多いです。
| サイト名 | 概要 | ダウンロード | |
| FLAT ICON DESIGN | フラットデザイン素材のサイトです。商用利用がOKです。クレジット表記も不要。 | JPG・PNG | Ai・EPS・SVG |
| ICOOON MONO | WEBデザインやDTP、ビジネスシーンで活用できる素材のサイトです。商用利用が可です。クレジット表記も不要。 | JPG・PNG | Ai・EPS・SVG |
| ヒューマンピクトグラム2.0 | ピクトグラムの素材サイトです。商用利用が可です。クレジット表記もなし。 | JPG・PNG | illistrator Ai |
Google Material iconsの使い方
Google Material iconsの使い方は、Google WebフォントをHTMLに導入することで簡単に設定できます。後ほどご説明しますが、PNGやSVGでダウンロードする使い方もできます。
HTMLのhead要素内にコードを入れる
Google Material iconsをサイトに導入する場合は、HTML内に以下のコードを入れます。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
このコードを<head>~</head>内に入れないと、Google iconsが表示されません。
Google Iconsを使用する
Iconsの使い方は、以下のリンクから、公式サイトのアイコン一覧「https://material.io/design/」にアクセスして「Tools」の「Icons」から各アイコンを選択できます。
- 上記のサイトから、サイトに使用したいアイコンを選択して、画面に表示されるコードをコピーします。
- 導入コードを入れてから、アイコンのコードを入れます。
- プレビューなどで正常に表示されれば完了です。
favoriteの例
Actionのfavoriteを表示させて使い方を説明します。
- favoriteのコード「<i class="material-icons">favorite</i>」をコピーします。
- 導入コードを入れて、上記のコードを入れます。
- プレビューで正常に表示されればOKです。
上記のようにfavoriteのIconsが表示されます。
paletteの例
Imageのpaletteを表示させて説明します。
- paletteのコード「<i class="material-icons">color_lens</i>」をコピーします。
- 導入コードを入れて、上記のコードを入れます。
- プレビューで正常に表示されればOKです。favoriteのようにのpaletteのIconsが表示されます。
Google Material iconsのカスタマイズ
Google iconsのCSSでの使い方をご説明します。
CSSでサイズや色を変更できる
- Google Material iconsのicon font（フォント）をCSSで呼び出します。
- 下記の引用が推奨されているサイズ、カラー、ステータスです。
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
色を変える
アイコン使い方で、モノクロのアイコンからカラーを付けたいという人は、CSSを利用しましょう。HTMLとCSSをみてみましょう。
- 「<i class="material-icons">color_lens</i>」を赤にします。
- HTMLで赤に変える場合では「<i class="material-icons red">color_lens</i>」です。
- HTMLのオレンジに変える場合では「<i class="material-icons orange600">color_lens</i>」
- HTMLに入れます。
- 赤のフォントの色のCSS定義「.material-icons.red{ color: red; }」です。
- オレンジのフォントの色のCSS定義「.material-icons.orange600 { color: #FB8C00; }」です。
- CSSに入れます。
アイコンを赤とオレンジにしました。
サイズを変更する
favoriteのサイズを変更する使い方です。デフォルトは24pxです。推奨サイズは、18、24、36、48pxです。HTMLでの使い方ではCSSの定義を利用します。
- 大きさ18pxでは、「<i class="material-icons md-18">favorite</i>」
- 大きさ24pxでは、「<i class="material-icons md-24">favorite</i>」
- 大きさ36pxでは、「<i class="material-icons md-36">favorite</i>」
- 大きさ48pxでは、「<i class="material-icons md-48">favorite</i>」
- 大きさ18pxでは、「.material-icons.md-18 { font-size: 18px; }」
- 大きさ24pxでは、「.material-icons.md-24 { font-size: 24px; }」
- 大きさ36pxでは、「.material-icons.md-36 { font-size: 36px; }」
- 大きさ48pxでは、「.material-icons.md-48 { font-size: 48px; }」
上下左右反転させる
上下左右反転する使い方は、HTMLでは「<i class="material-icons transform">palette</i>」、プロパティtransformです。
CSSでは、scaleで負の値を変えると、上下左右反転ができます。上下左右反転はscale(ｰ1, ｰ1)です。
- 上下反転するのは「.material-icons.transform{ transform: scale(1, ｰ1); }」
- 左右反転するのは、「.material-icons.transform{ transform: scale(-1, 1); }」
回転させる
最後に、アイコンを回転させる使い方を説明をします。回転のプロパティはtransformとrotateです。HTMLでは「<i class="material-icons rotate">favorite</i>」です。
アイコンを45度回転させる場合は、CSSでは「.material-icons.transform{ transform: rotate(45deg); }」です。
Google Material iconsのダウンロードの方法
Google iconsは、SVGフォーマットとPNGフォーマットでダウンロードができます。アイコンフォントで使用しても、ファイル形式でダウンロードするのも可能です。
SVGフォーマット
「SVGダウンロード」をクリックします。SVG（Scalable Vector Graphicsの略）は、完全にコードから成るベクター画像です。アイコンフォントと比べても確実にレンダリングされます。SVGは、どのアイコンフォントよりもサイズが小さくなります。scalableはサイズ変更が可能という意味で、vector graphicsはベクター画像の意味です。
ベクター画像は、画質の低下なしにイメージ一部拡大することも可能です。ベクター画像は、計算式で表現されているので、拡大縮小で計算式の値を変えながら描写しています。
PNGフォーマット
「PNGダウンロード」からPCにダウンロードします。Google iconsから、1x_webと2x_webの2つがファイルがダウンロードされます。
PNG（Portable Network Graphics）は、可逆圧縮の画像形式です。保存を繰り返しても画質の劣化がしません。カラー数が多く、デザインに強く、透過可能です。
Google iconsを使ってサイトをデザインしよう！
以上、Google material icons（グーグルマテリアルアイコン）について説明してきました。
マテリアルデザインは誰にでも使いやすく、利用する人が増えれば、視覚的な認識度も上がります。SVGやPNGでダウンロードもできて、画質の劣化がなく使いやすいです。サイトのデザインに手が回らないユーザーやデザインが苦手な人、Googleのシンプルなデザインが好みの人には、優れたアイコンでしょう。
この記事を参考に、Google iconsをサイトのデザインやアプリの開発に上手に使いこなしてみてください。
Googleの記事が気になった方にはこちらもおすすめ！
Googleカスタム検索のサイト内設置方法！デザインカスタマイズ方法は？
GoogleカレンダーをWebページに埋め込む方法！デザインカスタマイズやレスポンシブ対応させるには？
Google Web Designerの使い方！無料でテンプレートからバナー作成も簡単！
Googleフォトの容量を無制限に増やす使い方！無料でストレージを増やす方法は？
Googleフォトの「バックアップと同期」とは？使い方を解説！