デザイナーのためのGoogle Material iconsの使い方

2017.04.05カルアカスタッフ

{{ item.count }}

こんにちは、デザイナーのTantanです。

アイコンフォントは、アイコンを文字として扱えてとても便利です。
特に有名なのは、FontAwesome（フォントオーサム）です。種類が豊富で、無料で使えて私も大好きです。

それ以外に最近気になっているのはGoogle Material icons（グーグルマテリアルアイコンズ）です。こちらも種類が豊富で、無料です。
まだ知らない方も多いようなので、詳しくご紹介しようと思います。
主に、デザイナーのカンプ制作のための説明です。エンジニア向けの内容（実装方法）ではないので、ご了承ください。

Google Material iconsってどんなもの？

Googleがオープンソースとして公開しているアイコンフォントです。https://material.io/icons/
こういうの↓（これはGmailのボタン）

Gmailなど、Googleのサービスで随所に使われているので、Androidスマホをお持ちの方には馴染みがあるのではないでしょうか。
シンプルで癖のないデザインに統一されています。小さくても判別しやすく、わかりやすさも追求されています。

サイトでは、ライセンスについて書いてあります。ただし英語。
英語は不得手ですが、機械翻訳に頼りつつちょっと翻訳してみます。

このアイコンは、Apache License Version 2.0で利用できます。アプリの「about」画面で出典を表記していただけば嬉しいですが、必須ではありません。私たちが求める唯一のことは、これらのアイコンを再販しないことです。

ということです。ありがたく使わせていただきましょう。

マシンにインストールすると便利

インストールしなくてもSVG画像でレイアウトすることはできますが、自分のマシンにフォントとしてインストールしたほうが断然便利です。
Illustrator上でもPhotoshop上でもアイコンを文字のように扱えます。フォントサイズも色も調整できます！素敵！

では、やってみましょう。

サイトにアクセスする

https://material.io/icons/のサイトから、git repositoryにアクセスします。

git repositoryから、iconfontのフォルダをクリックします。

その中の、MaterialIcons-Regular.ttfをダウンロードします。

フォントをインストールする

ダウンロードしたフォントファイルを、自分のマシンにインストールします。
Macだと、このような感じでFontBookでインストールできます。

Illustratorで使うには

インストールしたフォントをカンプに入れてみましょう。（Illustratorでご説明しますが、Photoshopでも同様にできると思います。）
Fontawesomeのようにチートシートはありませんが、大丈夫です。むしろ、こちらのほうが探しやすくて便利かもしれません。

使いたいアイコンを探す

まずは、Google Material Iconsのサイトで使いたいアイコンを選びます。

水色のパネルが出てきて、英語とコードが書かれています。

この水色バーの左端にあるアイコンをイラレにコピペ。

ん？アイコンにならない？？

と思いますが、大丈夫。

フォントを、先程インストールした「Material Icons」に変更しましょう。

はい、表示されました！

あとは自由にデザインに取り入れて使いましょう。

埋め込みコードをメモしておくといい

コーディング時には、埋め込み用のコードが必要になります。

弊社エンジニアに確認すると、ここのコード「<i class=”material-icons”></i>」が必要だとのことです。

カンプや指示書に、こんな感じでメモを残しておくといいでしょう。
実際どのように伝えるかは、現場ごとのやり方があると思います。担当のエンジニアさんとご相談ください。
（まずはプロジェクト開始時に、「Google Material Icons使っていいですか？」とお伺いをたてておきましょう←これ大切）

サイトでアイコンを逆引きする方法

埋め込みコードがわからなくなったらどうしましょう！
うっかりメモを残し忘れたり、引き継いだデータに埋め込みコードが書かれてなかったりすることもありますよね。

↑指示書とカンプが食い違う、あるあるな状況。

そんなときは、サイトで検索することができます。（アウトライン化されていなければ。。。）
まずは、カンプ上でアイコンをテキストとしてコピーします。

そして、サイトで検索をかけます。
サイトのサーチ機能でもいいですし、command+Fでブラウザの検索機能を使ってもいいです。

サイトのサーチ機能にコピペすると、「bug_report」と表示されますが、そのままだとうまく検索できない場合があるようです。アンダースコアをスペースに変えて「bug_report」→「bug report」としてやると、検索できました。

command+Fで検索する場合はアンダースコアのままでも大丈夫でした。

また、command+Fでの逆引き検索はFontawesomeでも有効のようです。

まとめ

個人的に、アイコンは普及するほどわかりやすくなると思っています。

例えば、オーディオを再生するときの三角マーク。意味を連想しにくいただの三角ですが、昔からメーカーが共通のマークを使って広まったおかげで、今では多くの人が理解できます。
webやアプリでも、共通のアイコンが多くのサイトで使われれば、それだけわかりやすさが高まるわけですね。

逆に、使い方がブレてしまうと、わかりやすさは損なわれます。
例えば、ジグソーパズルのアイコン。「extension＝機能拡張」を表しています。形からの連想で、「ゲーム」や「パズル」のアイコンとして使ってしまったら、利用者は混乱してしまいます。
くれぐれも、アイコン本来の意味と違う用途で使用しないように注意してください。

商用利用もできるありがたいアイコンフォント、ぜひ積極的に使っていきましょう。