初代編集長ブログ―安田英久

Googleのマテリアルアイコンは軽量・デザイン・アクセシビリティOKの優れモノ

このマテリアル・アイコンを使えば、画像ファイルを自分用意しなくてもアイコンをWebページにカンタンに設置できます。

安田英久（Web担編集統括） 2016/6/28 11:00 Web担当者／仕事 | コラム

今日は、Webデザインの話題を。Webページの要素をわかりやすく示すアイコンで、デザイン性とアクセシビリティを兼ね備え、さらに軽量で使いやすいものがありました。グーグルの「マテリアル・アイコン」です。その特徴を解説し、ページでの使い方を解説します。

Material icons - Google Design

このマテリアル・アイコンを使えば、画像ファイルを自分で用意しなくても、（accessibility）や（assignment）、（face）、（directions_run）、（smoking_rooms）、（search）なんてアイコンを、カンタンにWebページに設置できます。

アイコンはWebフォントファイルで実現されていて、フォントファイルのサイズは最小42KB。サイズを変えたり、色を付けたりも自由です。

使えるアイコンは900個以上。Material iconsのページに一覧が示されています。

しかも、この仕組みはアクセシビリティにも優れていて、文字読み上げソフトを使うと、アイコンの部分は上記例のかっこで囲んだ文字が読み上げられるのです。

Webフォントを使ったアイコンというのはけっこうあるのですが、その多くは何らかの文字にアイコンを割り当てているので、アイコンのビジュアル表示に対応できない環境では意味を把握しづらいんですよね。

その点このマテリアル・アイコンは「合字（ligature）」の仕組みを使っており、上記の例で言うと、アイコンの部分はHTMLでは「accessibility」「assignment」などの文字列が書かれているため、アクセシビリティ面も配慮されています。

グーグルでは、このマテリアル・アイコンをWeb上ですでに利用しています。たとえば、Google アナリティクス - Google 広告主コミュニティなどのコミュニティ・フォーラム系のページですね。

Google Material Iconsの使用例

グーグル「マテリアル・アイコン」の使い方

使い方はカンタン。「Material Icons Guide」の「Icon font for the web」に書かれているとおりです。

Icon font for the web（Material Icons Guide）

Google Web Fontの仕組みを使って、マテリアル・アイコンのWebフォントとCSSを読み込みます。
```
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```
アイコンを置きたい場所に、次のように記述します。
```
<i class="material-icons">face</i>
```
i要素のなかに書くのは、各アイコンが割り当てられている文字列。このHTMLは、マテリアル・アイコンのページでアイコンを選ぶと示されます。
https://design.google.com/icons/
この文字列を1文字として扱うのが「合字」。これで、制作時のわかりやすさやアクセシビリティに対応してるんですね。

アイコンのサイズや色を調整したい場合は、次のようなCSSをページに追加し、各アイコンのクラス名に指定するといいでしょう。

●CSSに追加

<style>
/* 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); }

.material-icons.orange600 { color: #FB8C00; }
</style>

●表示例

大きさ
	`<i class="material-icons md-18">directions_run</i>`
	`<i class="material-icons md-24">directions_run</i>`
	`<i class="material-icons md-36">directions_run</i>`
	`<i class="material-icons md-48">directions_run</i>`
背景色に合わせる
	`<i class="material-icons md-dark">directions_run</i>`
	`<i class="material-icons md-light">directions_run</i>`
色を付ける
	`<i class="material-icons orange600">directions_run</i>`