近年、WEBサイトを作る上で美しさと同じくらい求められているのが、直感的な操作性です。
そんなニーズに応えるため、「何をするボタン（リンク）なのか？」を分かりやすく伝える要素として「アイコン」がよく用いられるようになりました。
Googleでは、公式素材として「Material Icons」というアイコンが用意されています。
このアイコンは、画像としてダウンロードして使うこともできますが、WEBフォントとして使うこともできます。
ここでは、「Material Icons」の紹介とその使い方についてみていきましょう。
目次
「Material Icons」について
Googleでは、最も優れたデザインとして「マテリアルデザイン」を提唱しています。
「マテリアルデザイン」は直感的で美しいデザインとして様々なルールが決まっており、詳しくはGoogleマテリアルデザインガイドラインで定められています。
このデザインを補助するコンテンツとして用意されているのが「Material Icons」というアイコンです。
メリット
種類が豊富
「Material Icons」では1000個以上のアイコンが収容されています。
さらに、アイコンの種類もさることながら、アイコンのデザインテイストも１つのアイコンにつき５パターン用意されています。全て合わせると5000個を超えるアイコンの中から選ぶことができます。
Filled
塗りつぶしたデザインです。
Outlined
輪郭（アウトライン）のデザインです。
Rounted
丸みを強調したデザインです。
Two Tone
２トーンのデザインです。
Sharp
角を強調（シャープな印象）のデザインです。
デザインに統一性が出る
「Material Icons」はすべてGoogleの定めるマテリアルデザインガイドラインに沿ったデザインで統一して作られています。
そのため、デザインに統一性を持たせつつ直感的なデザインを演出できるため、バラバラなアイコン素材を集めて使うよりも圧倒的にオススメです。
コーディングが楽
「Material Icons」はWEBフォントとして利用することができます。
そのため、コーディングの際は全ての画像をダウンロードして配置する必要はなく、たった少しのプログラムで簡単に何種類でもアイコンを配置することができます。
読み込みが早い
先にも述べたように、「Material Icons」はWEBフォントとして使うことができます。
つまり、大量の画像の読み込みが無いのです。
一般に、サイトの表示速度を下げる要因として挙げられるのが、画像のファイルサイズとその多さです。
「Material Icons」を使えば、どんなに多くの種類のアイコンを使おうと、読み込み速度は速い状態を保つことができるのです。
色や大きさの変更が簡単
WEBフォントとしてアイコンを配置する場合、色や大きさはCSSで指定することになります。
つまり、実際にサイトを作り終わってみて、やっぱり色や大きさを微妙に変更したいとなった場合、通常だと１枚１枚の画像に修正を入れなければいけませんが、「Material Icons」ではCSSの記述をちょっと変えるだけでアイコン全体の色や大きさを一括して変更することができます。
使い方
デザインするとき
PhotoshopやIllustratorでサイトのデザインをするときは、画像データでダウンロードしましょう。
好きなアイコン画像を選択し、「SVG」または「PNG」と書かれたボタンをクリックすることで画像データがダウンロードできます。
コーディングするとき
実際にページを作るときは、サイトの軽量化・高速化のため、WEBフォントとして使うことがオススメです。
「Material Icons」をWEBフォントとして使う場合、まず最初にヘッダータグ内に以下のプログラムを貼ります。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="“stylesheet"">
次に、アイコンを配置したい場所に、タグを埋め込みます。
たったこれだけで、簡単に軽量かつ美しいアイコンが配置できてしまいます。
非常に簡単ですね。
まとめ
Googleでは、最も優れたデザインとして提唱するマテリアルデザインの実現サポートツールとして「Material Icons」が用意されています。
この「Material Icons」を使うことによって、直感的で美しいWEBサイトを実現することができます。
