ブログ

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

Materialicon-00

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

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

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

目次

  • Google Material iconsってどんなもの?
  • マシンにインストールすると便利
  • Illustrator(Photoshop)上で使うには
  • 埋め込みコードをメモしておくといい
  • サイトでアイコンを逆引きする方法

Google Material iconsってどんなもの?

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

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

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

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

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

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

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

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

サイトにアクセスする

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

Materialicon-02

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

Materialicon-03

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

Materialicon-04

Materialicon-05

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

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

Materialicon-06

Illustratorで使うには

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

使いたいアイコンを探す

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

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

Materialicon-08

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

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

と思いますが、大丈夫。

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

Materialicon-10

はい、表示されました!
Materialicon-11

Materialicon-12

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

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

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

Materialicon-13

弊社エンジニアに確認すると、ここのコード「<i class=”material-icons”>&#xE859;</i>」が必要だとのことです。
Materialicon-14カンプや指示書に、こんな感じでメモを残しておくといいでしょう。
実際どのように伝えるかは、現場ごとのやり方があると思います。担当のエンジニアさんとご相談ください。
(まずはプロジェクト開始時に、「Google Material Icons使っていいですか?」とお伺いをたてておきましょう←これ大切

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

埋め込みコードがわからなくなったらどうしましょう!
うっかりメモを残し忘れたり、引き継いだデータに埋め込みコードが書かれてなかったりすることもありますよね。
Materialicon-17↑指示書とカンプが食い違う、あるあるな状況。

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

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

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

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

まとめ

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

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

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

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

■この記事を書いた人 Tantan(デザイナー)

18歳まで広島育ち。大阪・東京でデザインの経験を積み、先日広島にUターンしてきました。糖質制限を実践中で冷凍庫には牛肉を常備。最近気になるキーワードは「ミニマリスト」。でも家の中を散らかしまくる2児の子育てに疲労困憊。

関連記事

  1. Hirofuro-logo-8 WordBench倉敷に参加してきました! & 広島フロントエン…
  2. thumbnail 広島初!子供プログラミング教室にお邪魔してきました
  3. news_study 第95回「WEB TOUCH MEETING」にUstreamで…
  4. consaru エム・フィールド 広島オフィスで「広島フロントエンド勉強会 Vo…
  5. ba2d551a71d04d5d845f05aa74658fb5_m パソコンスクール HA*NA講師を終えて
  6. coaching コミュニケーションを円滑にする4のメソッド
  7. webtouchmeeting94 第94回「WEB TOUCH MEETING」で話してきました
  8. hirofro20161104-1 「広島フロントエンド勉強会 Vol. 3」開催レポート&告知

最近の記事

  1. DSC_0072
  2. Hirofuro-logo-8
  3. carp9
  4. carp8
  5. carp7
PAGE TOP