どうも、SeikouUdokuのケイトです。

本日はオリジナルWebアイコンフォントの作り方をご紹介したいと思います。

Webアイコンフォントとは？

Webアイコンフォントとは、上記のようにアイコンをWebフォントとして利用するものです。JPEGやPNGなどの画像ではありません。

Webアイコンフォントとして利用することのメリットは、

1. ベクター形式なので大きさを変更しても綺麗に表示される
2. cssで色の変更ができる

WebアイコンフォントはSVGで作成します。SVGとは、ScalableVectorGraphics（スケーラブル・ベクター・グラフィックス)の略で、ベクター形式のデータです。
JPEGやPNGなどのピクセル（画素）を用いたビットマップに対して、ベクター形式は、座標情報によるものなので、図を拡大しても、ビットマップのように画像が荒くなることがありません。
それゆえ解像度に合わせてJPEGやPNGのように複数用意しなくていいのです。

また、フォントのように色を自由に変更することができます。ただし、単色しか指定できず、複数の色をアイコンに着色することはできないといったデメリットもあります。そこは、アイコンにするのか画像にするのかデザインの段階で考える必要があります。

アイコンを作成する

それでは、実際にアイコンを作成しましょう。
作成ツールですが、イラストレーターやSketchがオススメです。

今回はSketchで作成します。SketchはMac専用のアプリでサブスクリプションによる年額制ですが、1ヶ月は無料で利用することができます。
Sketch – The digital design toolkit

アートボードの作成

アートボードの大きさは任意で構いませんが正方形にします。小さすぎるのも作業しにくいので、私は、90×90pxで作成しています。

アイコンの描画

色は黒(#000000)にして自由に作成しましょう。

90×90pxのアートボードに対して線幅を6pxで作成した場合、上記のアイコン(フォントサイズは左から14px、25px、50px)の感じになります。

最近のアイコンのデザイントレンドとしてはインスタグラムやairbnbなどのラインスタイルのアイコンデザインがよく使われているので、参考にするといいかと思います。

アイコンのデザインの統一感の出し方としては、アートボードに占める白(余白)と黒(線や塗り)の割合に気をつけることです。アイコンごとに線の太さが違ったり、線と塗りのバランスが悪いと統一感がなくなります。

アイコンの書き出し

作成できたら、アウトライン化しましょう。
アウトラインとは、線や文字をパスにすることです。アウトライン化すると文字などは編集できなくなるので、コピーしときましょう。

ファイル形式をSVGにして書き出ししましょう。この時ファイル名は、利用したい名前を英語名で保存しましょう。

アイコンをアップロードする

IcoMoonというサービスを使って作成したアイコンをWebフォント化します。
IcoMoon App – Icon Font, SVG, PDF & PNG Generator

まず初めに、「import icons」ボタンから先ほど作成したアイコンをアップロードしましょう。

次に、「select」ボタンでwebフォントにしたいアイコンを選択します。

次に、メニューにあるRearrange IconsでOrder by name(or first tag) を選択して並び替えます。この並び替えは任意ですが、並び替えることでa-z順になるのでアイコンを探しやすくなります。

最後に「Generate Font」から「Download」ボタンをクリックすれば完了です。

実際に使ってみる

先ほどダウンロードしたZIPファイルを解凍したら「fonts」フォルダと「style.css」を自分のプロジェクトに移します。
「style.css」は任意の名前に変更していただいて構いません。

headタグに「style.css」を読み込んだら、アイコンの名前の接頭に「icon-」をつけてclass名として指定するとアイコンが表示されます。

<i class="icon-home"></i>

まとめ

いかがでしたでしょうか？
有名どころのFontAwesomeやIcoMoonでも無料で用意されているものもありますが、自分のサイトにオリジナルアイコンフォントを導入してデザインの幅を広げてみるのも良いと思います。

興味のある方は是非参考にしてください！