ブログ

icoMoon.appを使ってみた

某案件でIcoMoon.appというアイコンフォントを使うサービスを使ってみたので、感想とか使い方とかまとめてみました。

Icomoonのメリット

Icomoonは、アイコンフォントを選んでダウンロードできるサービスです。
類似のサービスに、FontelloWe Love Icon Fontsなどがあります。

Icomoonの特徴として、対応サービスの多さ、自作アイコンフォントへの対応があげられます。
対応アイコンフォント一覧は以下の通りです。

カスタムアイコンを使うときの注意

いくつかの対応アイコンフォントがありますが、カスタムアイコンを使うときの注意です。

できるだけベースのフォントサイズが同じアイコンを使うことをおすすめします。
ベースのフォントサイズが違うアイコンフォントを複数組み合わせると、サイズによってあまりきれいではないものもありますので注意する必要があります。

アイコンフォントを作るときの注意

今回、自作のアイコンフォントも使いました。
そこで、アイコンフォントを作るときに注意することを挙げてみます。

  • データはSVG形式で保存。
  • 画角は、できるだけ1対1に近いサイズで作る。3:1などのサイズで作らないほうが無。
  • サイズは480px×480pxで作成。
  • 色は白黒の2色で作成。
  • パスファインダーなどを使って、塗りがあるパスが重ならないようにする。重なるとどちらかの色になってしまうので注意。
  • フォントはアウトライン化しておく。
  • アートボードから要素をはみ出させない。

アイコンデータの保存方法

IcoMoonでは、アイコンの履歴などをJsonデータで保存しています。
このJsonデータを保存しておけば、サイト更新のときなどにまた利用することができます。

ちなみに、Fontelloなど、他のアイコンフォント制作サービスでもJsonデータでの履歴保存に対応しています。

まとめ

IcoMoonは、自作のアイコンフォントを使う事情がある人にはおススメのサービスです。
必要なアイコンがなくて、自作のアイコンを作る必要がある場合、好きなアイコンをアイコンフォントにして使いたい、などのニーズに対応できるサービスです。

また、Essential Pack・Ultimate Packのライセンスを購入することで、Essential Pack・Ultimate Packのアイコンを、アイコンフォントとして使うこともできるようです。

今後、アイコンフォントを使う案件は間違いなく増えます。
アイコンフォントの研究はいまからやっておいて損はないかと思います。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。