アイコンの管理を楽にするNucleo applicationのご紹介

ウェブサイトで使用するアイコンの管理ができるアプリケーション「Nucleo application」が、デザイナーにもフロントエンドにもメリットがありそうでしたのでご紹介します。

Nucleo applicationを導入した経緯

いままでアイコンフォントの書き出しにはFontelloを利用していました。
FontelloではFont Awesomeをはじめ、様々なアイコンの中から、使用したいアイコンを選択して、アイコンフォント化することができます。
しかし、各プロジェクトごとにデザイナーがアイコンを作成していたため、Font Awesomeなどのアイコンは使うことなく、Fontelloをアイコンフォントの書き出しツールとしてのみ利用していました。

また、製作者ごとに独自のアイコンセットを持っていることもあるかと思います。
この独自のアイコンセットは、なかなか管理に手間がかかります。
Illustratorで管理していたこともあるのですが、作っただけとなりメンテナンスを怠ってしまいがちでした。

Nucleo applicationのメリット

Nucleo applicationはデスクトップアプリケーションなので、ネットワーク環境がなくても使用することができます。
また、アイコンの管理だけでなく、書き出しも行えるので今までFontelloで行っていたアイコンフォントの書き出しの役目も果たしてくれます。
それ以外にも、Nucleoを導入することで、デザイナーにもフロントエンドにもそれぞれメリットがあります。

デザイナーへのメリット

デザインデータを作成する際、SNSアイコンなど、過去使用したものとまったく同じアイコンを使用する場合、わざわざ過去のデザインデータを開いてコピペしていくこともあるのではないでしょうか。
Nucleo applicationにアイコンを登録すれば、Nucleo applicationの画面からデザインツール（PhotoshopやIllustratorなど）にドラッグ&ドロップすることで、アイコンをデザインデータに配置することができます。
また、プロジェクトごとにアイコンのグループ分けができるため、各プロジェクトごとにどのようなアイコンを使っているのか、一目で把握することができます。

フロントエンドへのメリット

Fontello同様、書き出したいアイコンフォントとして書き出すことはもちろん、SVG・PNG・PDF・JSON・JSX・VUEと、全部で7種類の書き出し方式を選択することができます。
また、デザイナーのメリットにも記述した通り、プロジェクト機能もあるので、各プロジェクトごとにアイコンをまとめて整理しておくことができるので、プロジェクトごとに書き出しを行うことができます。
他にも、選択したアイコンのSVGコードをクリップボードにコピーする機能もあるので、SVGを直接埋め込むことも容易にできます。

Nucleo applicationでアイコンフォントを書き出す

1.「MY SETS」の右側にある「+」マークを選択

2.「Set Name」にセット名を入力（今回はFont Awesomeを使用しています）→「Drag & drop SVG icons here」にsvgデータが入ったディレクトリもしくはsvgデータをドラッグ＆ドロップ→「Create Empty Set」を選択

3.MY SETSに作成したセットが追加されるので、使用したいアイコンを選択→「Add to Project」から任意のProjectを選択→Project画面に切り替え

4.サイドナビのプロジェクトを右クリック→「Export」を選択

5.「Icon Font」を選択→「Export Icons」を選択→書き出し先のディレクトリを求められるので、任意のディレクトリを選択

以上でアイコンフォントに関するデータが一式書き出されます。
※「CUSTOMIZE」機能はNucleo Iconsでのみ使用できるようなので、独自で作成したアイコンには使用できないようです。

まとめ

Fontelloの使用方法が、独自で作ったアイコンをアイコンフォント化しているだけなのであれば、ぜひNucleo applicationを試してみてはいかがでしょうか。
MY SETSの中にFont Awesomeを登録することももちろんできるので、普段利用しているアイコンフォントをMY SETSに登録しておくという使い方もできます。

今回Nucleo applicationをアイコン管理ツールとしてご紹介しましたが、メインはNucleo Iconsとカスタマイズ機能を組み合わせた、プロジェクトごとに最適なアイコンを作成するためのツールだと思います。
Nucleo Iconsのアイコンはどれもクオリティが高くバリエーションも豊富で、さらにカスタマイズ機能を組み合わせることで、線の太さ角の調整、2色展開のアイコンに変更するなどプロジェクトに合わせてディテールを容易に調整することができるので、Nucleo applicationを使用してみて、興味を持った方は、ぜひNucleo Iconsを購入してみてはいかがでしょうか。
チーム機能（別途ライセンスの購入が必要）もあるので、メンバー間でアイコンの共有も容易にできそうですし、こちらも非常に魅力的な機能になっています。

Nucleo applicationはフロントエンドだけでなく、デザイナーにも大きなメリットがあるのではないでしょうか。
無料で使用できるようなので、ぜひ使ってみてください。

Nucleo application