2019年04月29日更新

Google iconsとは？マテリアルデザイン対応アイコンの使い方を解説！

Google iconsとは、Google Material iconsというGoogleのマテリアルデザインのアイコンです。アイコンのデザインはシンプルで認識しやすく設計されています。Google iconsの使い方やダウンロードの方法を解説します。

Google iconsとは？マテリアルデザイン対応アイコンの使い方を解説！のイメージ

目次

  1. 1Google iconsとは？
  2. ・Google Material icons（マテリアルアイコン）とは
  3. ・ Webアイコンフォントとは
  4. 2Google Material iconsのデザイン
  5. ・マテリアルアイコンの特徴
  6. ・アイコンのデザイン一覧
  7. 3Google Material iconsの使い方
  8. ・ HTMLのhead要素内にコードを入れる
  9. ・ Google Iconsを使用する
  10. 4Google Material iconsのカスタマイズ
  11. ・CSSでサイズや色を変更できる
  12. 5Google Material iconsのダウンロードの方法
  13. ・ SVGフォーマット
  14. ・ PNGフォーマット
  15. 6Google iconsを使ってサイトをデザインしよう！
  16. ・Googleの記事が気になった方にはこちらもおすすめ！

Google iconsとは？

Googleのイメージ

Googleが無料で公開しているMaterial Design（マテリアルデザイン）のiconsです。マテリアルデザインとは、2014年にGoogleが推奨した、デザインのルールです。

Googleのデザインのガイドラインで、デザインについて細かくルールが決められています。どの端末でもデザインとレイアウトを統一化することで直感的に認識できるように設計されています。

インターネットやアプリでは、メニューの「三」や閉じる（close）「×」の規則性に反応しています。

Google Material icons（マテリアルアイコン）とは

Google Material のイメージ

よく使うアイコンが揃っていて、デザインも統一されていて、便利なGoogle Material icons（マテリアルアイコン）が、900種類以上が揃っています。アプリやwebサイトの開発で使用できます。商用利用可能で、リンクやクレジット表記も必要ありません。デザインの作成が苦手な人はGoogle iconsがオススメです。

アイコンの画像

マテリアルアイコン（Material icons）は、アイコンフォントやSVG、PNGのファイルフォーマットでダウンロードできます。

Webアイコンフォントとは

アイコンのイメージ2

Web icon font（ウェブアイコンフォント）とは、webサイトのデザインとして、アイコン素材を使うことができます。ボタンのラベルなどに設置することができます。

四角のイメージ

アイコンフォントのメリットは、読み込みが速く、カラーやサイズをCSSを利用してアイコンフォントをカスタマイズできることです。デメリットは、特殊なフォントの場合は、表示されないことがあります。□の豆腐のマークがでる可能性があります。

Google Material iconsのデザイン

マテリアルデザインのイメージ

Google Material iconsは、マテリアルデザインです。このマテリアルデザインを使うことで、デバイスを変えても、スマホやPCの利用がストレスを感じず快適なまま操作することができます。

しかし、Googleのマテリアルデザインがストレスなく利用できるのは、どうしてなのか気になるところでしょう。他のデザインとの違いもわかりにくいと思います。以下で、説明しましょう。

マテリアルアイコンの特徴

デザインのイメージ

Google Material icons（マテリアルアイコン）のデザインは、視覚的に認識しやすいことが特徴です。基本はシンプルなデザインです。デバイスよっても、差異がないデザインを利用することで、利用者が直感的に理解できるように表現されています。

デザインのイメージ2

フラットデザインは、同じくシンプルなデザインですが平面の表現で影は使いません。画面上変化を見られないアイコンです。マテリアルデザインは影を使って層の重なりを表現しています。

アイコンのデザイン一覧

Googleのアイコン画像

Google  iconsのカテゴリーは、Action、Alert、Av、Communication、Content、Device、Editor、File、Hardware、Image、Maps、Navigation、Notification、places、Social、Toggleです。以下、デザインの一部をご紹介します。

Action

Actionの画像

カテゴリーの中で、一番アイコンが多いです。androidやbuild、credit_card、face、favorite、get_app、pets、seachなど見たことがあるアイコンが並んでいます。

Alert

Alertの画像

エラーや警告のアイコンカテゴリーです。

Content

Contentの画像

addやブロックなどのコンテンツがあります。CSSを使用するとカラーを変えて使用できます。

File

ファイルの画像

folderやcloud、attachmentなどのアイコンがここにはあります。

Maps

マップの画像

navigationやplace、restaurant、360、atm、subway、train、traffic、satelliteなどがあります。

Navigation

Navigationの画像

appsや矢印マーク、cancel、close、menu、refreshなどがあります。

Toggle

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の使い方

HTMLのイメージ

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」から各アイコンを選択できます。

Google Icons

  1. 上記のサイトから、サイトに使用したいアイコンを選択して、画面に表示されるコードをコピーします。
  2. 導入コードを入れてから、アイコンのコードを入れます。
  3. プレビューなどで正常に表示されれば完了です。

favoriteの例

favoriteのイメージ

Actionのfavoriteを表示させて使い方を説明します。

favoriteのタグの位置

  1. favoriteのコード「<i class="material-icons">favorite</i>」をコピーします。
  2. 導入コードを入れて、上記のコードを入れます。
  3. プレビューで正常に表示されればOKです。

favoriteの表示画像

上記のようにfavoriteのIconsが表示されます。

paletteの例

paletteのイメージ

Imageのpaletteを表示させて説明します。

paletteの画像

  1. paletteのコード「<i class="material-icons">color_lens</i>」をコピーします。
  2. 導入コードを入れて、上記のコードを入れます。
  3. プレビューで正常に表示されればOKです。favoriteのようにのpaletteのIconsが表示されます。

Google Material iconsのカスタマイズ

カラーのアイコンのイメージ

Google iconsのCSSでの使い方をご説明します。

CSSでサイズや色を変更できる

CSSのイメージ

  1. Google Material iconsのicon font（フォント）をCSSで呼び出します。
  2. 下記の引用が推奨されているサイズ、カラー、ステータスです。

/* 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をみてみましょう。

HTMLの赤とオレンジの画像

  1. 「<i class="material-icons">color_lens</i>」を赤にします。
  2. HTMLで赤に変える場合では「<i class="material-icons red">color_lens</i>」です。
  3. HTMLのオレンジに変える場合では「<i class="material-icons orange600">color_lens</i>」
  4. HTMLに入れます。

赤とオレンジのCSS画像

  1. 赤のフォントの色のCSS定義「.material-icons.red{ color: red; }」です。
  2. オレンジのフォントの色のCSS定義「.material-icons.orange600 { color: #FB8C00; }」です。
  3. 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>」

サイズのCSSとHTMLの画像

  • 大きさ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)です。

反転のCSSの画像

  • 上下反転するのは「.material-icons.transform{ transform: scale(1, ｰ1); }」
  • 左右反転するのは、「.material-icons.transform{ transform: scale(-1, 1); }」

回転させる

回転のイメージ

最後に、アイコンを回転させる使い方を説明をします。回転のプロパティはtransformとrotateです。HTMLでは「<i class="material-icons rotate">favorite</i>」です。

回転のCSS画像

アイコンを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の記事が気になった方にはこちらもおすすめ！

ThumbGoogleカスタム検索のサイト内設置方法！デザインカスタマイズ方法は？
Googleカスタム検索は無料で使える検索システムです。自分のサイト内に検索エンジンを埋め込...
ThumbGoogleカレンダーをWebページに埋め込む方法！デザインカスタマイズやレスポンシブ対応させるには？
Googleカレンダーはホームページやブログに埋め込みをすることができます。この記事ではGo...
ThumbGoogle Web Designerの使い方！無料でテンプレートからバナー作成も簡単！
私たちの生活になくてはならない存在になっているGoogleには、なんと無料でデザインができて...
ThumbGoogleフォトの容量を無制限に増やす使い方！無料でストレージを増やす方法は？
何も考えずにGoogleフォトに写真や動画を保存すると、その容量がどんどん消費されてしまいま...
ThumbGoogleフォトの「バックアップと同期」とは？使い方を解説！
Googleフォトを使うとスマホやPCに保存した写真を自動でバックアップしたり、端末間で同期...

関連するまとめ

関連するキーワード

Original
この記事のライター
ma-gol
Windows10・Android・iPhone/MOS資格有。趣味は旅行。

人気の記事

人気のあるまとめランキング

新着一覧

最近公開されたまとめ