プラカンブログSTAFF BLOG

2016.02.10

アイコンフォントを活用しよう!

sanblog_19

こんにちは、デザイナーの(杉)です。
2016年を迎えての初ブログはアイコンについてです。

最近よくピクトアイコンを多様することがあります。
少し前までは画像で対応していましたが、Retinaディスプレイなどに
対応する際、倍のサイズで書き出しなど、手間が増えてしまいます。

そこで「Webフォント」を使って表示できるアイコンフォントをご紹介します。


アイコンフォントって?

アイコンフォントとは、「アイコン型のWebフォント」のことを指します。
フォント1文字に対して、テキストではなくアイコンが割り当てられて表示させる方法です。


アイコンフォントのメリット

  • テキストとのベースラインが合わせやすい
  • cssで簡単に色を変えられる
  • ベクターデータなので背景色があるときなどのエッジの処理を気にしなくていい。

アイコンフォントのデメリット

  • 単色のみになり、複数の色を使用したアイコンはできない
  • 一度に複数のアイコンデータを読み込むので、読み込みが重くなる(※)
  • フォントなので拡大縮小はfont-sizeで指定になり細かなサイズ調整が難しい場合がある

※アイコンフォントのジェネレーターサイトでは予め使用するアイコンを選択することが可能です。


様々なアイコンフォントセット提供サイト

「アイコン Webフォント」と調べてみると様々なアイコンフォントを提供しているサイトがたくさんありますが、その中で個人的にお気に入りのサイトを紹介します。


フォントセットのサイト

Font Awesome

FireShot Capture 2 - Font Awesome, the iconic font an_ - https___fortawesome.github.io_Font-Awesome_

有名なアイコンフォントサイトです。ソーシャル系のアイコンも多く使いやすいです。
個人・商用利用もOKですので大変ありがたいですね。

https://fortawesome.github.io/Font-Awesome/


WebHostingHub Glyphs

FireShot Capture 3 - WebHostingHub Glyphs - http___www.webhostinghub.com_glyphs_

こちらも個人・商用利用もOK。
アイコンがカテゴリ分けで紹介されており、目的のアイコンも探しやすいです。
またPNG形式でもダウンロードが可能なので、デザイン段階にアイコンを入れる場合もありがたいです。

http://www.webhostinghub.com/glyphs/


ジェネレーターサイト

Fontello

img-webfont-001-v2-640x483

使用したいアイコンを選択→DLという形のジェネレーターサイトです。
先ほど紹介した「Font Awesome」なども使用可能です。
またオリジナルのアイコンも併用して使用できたりと大変使いやすいです。

※PCのセキュリティの設定によってはエラーが発生してページが正常に開かない場合があるようです。
その場合は、セキュリティの設定を調整してください。

http://www.fontello.com/


IcoMoon

FireShot Capture 7

「Fontello」と同じように使用できるジェネレーターサイトです。
有償ですが、洗礼されたアイコンフォントライブラリーもあるので、他のサイトと差別化したい際は、検討してもいいかも。

https://icomoon.io/app/#/select


flaticon

FireShot Capture 8 - Free vector icons

アイコンの数が10,000個以上!しかも検索機能が使い勝手がよく、大変使用しやすいサイトです。また、Webフォント以外にも、PNG、EPS、PSD、SVG形式でもダウンロードが可能です!
フリープランはライセンス表記は必要ですが、有料会員の場合は表記する必要がないとのことです。

http://www.flaticon.com/


まとめ

Retinaディスプレイやレスポンシブデザインが増えていく中、画像で対応するのことも可能ですが、できるだけ効率良くサイトを作成していく上で、こういったサイトをうまく活用していくといいかもしれません。
今回は個人的によく使用したり参考にするサイトを紹介しましたが、他にも洗礼されたアイコンフォントを提供しているサイトが沢山ありますので、自分にあったサイトを探してみてはいかがでしょうか?

この記事は、SUGIYAMA が書きました。