簡単6ステップ!オリジナルアイコンフォントの作り方

アイコンフォント

 

昨日参加させてもらったウェブの勉強会でアイコンフォントの話を聞いてきたので、ご紹介したい。

 

スポンサード リンク



 

 

アイコンフォントとは?

オリジナルアイコンフォントの作り方のご説明の前に、アイコンフォントについても簡単にご説明をしたい。
アイコンフォントとは、ウェブフォントとしてテキストではなくアイコンを表示させるもの。だから、テキストと同じように、CSSで色やサイズを変更することができる。

 

メリット・デメリットはこんな感じ。

 

メリット

・データが軽い
・CSSで色やサイズを変更できる
・高解像度のディスプレイでも鮮明に表示
・無料の素材を使用可能

 

デメリット

・レガシーブラウザでは使用できない場合あり

 

個人的には、Retinaのような高解像度ディスプレイで表示させてもにじんだりせずきれいに表示できるというところが一番の魅力。
また、アイコンフォントデータをひとつにまとめておけば、データの読み込みが1度で済む。なので、画像をひとつひとつ読み込む必要がなくなり、サーバーへのリクエストが少なくて済む、というメリットもある。

 

アイコンフォントの作り方

1, Illustratorでデータ作成

まずはじめは、イラレで150px * 150px のデータを作成。
このとき、写真のようにガイドを引いておくと便利!

 

アイコンフォント1

 

2, Illustratorでアイコンのデザイン作成

次にイラレのガイドに合わせて、アイコンのデザインをする。
今回は、簡単に角丸正方形を★で切り抜いたアイコンを作成したい。

 

アイコンフォント2

 

なんか、アイコンがかわいくて楽しくなってくる。

 

このとき、角丸正方形の中の★マークは、パスファインダーで切り抜かれていることを必ずご確認いただきたい。ブラウザでは黒く塗りつぶされている部分だけが表示されるので、その部分のレイヤーがひとつだけ存在している状態であれば問題ない。

 

【補足説明】
余計なアンカーポイントを削除しておくと、生成されたアイコンデータが多少軽くなったりするみたい。

また、アイコンとなるパスを全て選択したときのバウンディングボックスが、キャンバスからはみ出ているとアイコンが生成された際に、表示位置がズレてしまうことがあるみたい。
その場合は「オブジェクト」→「変形」→「バウンディングボックスのリセット」を選択し、バウンディングボックスを最適化する。

 

3, SVGで保存

作成したaiデータとは別にsvgデータとして、データを書き出す。
Macの場合は、「ファイル」→「別名で保存」を選択し、「ファイル形式」を「 SVG (svg)」に変更して保存するだけ!

 

アイコンフォント3

 

4, 無料ウェブサービスでアイコンデータを登録

ご紹介するウェブサービスはこちら。
icomoon.io

 

基本的には無料、一部有料のアイコンを購入することもできる。
icomoon.ioにアクセスしてもらうと、こんな感じでサイトが表示される。

 

アイコンフォント14

 

右上の「IcoMoon App」という赤いボタンをクリックしてもらうと、かわいいアイコンたちがお出迎え。

 

アイコンフォント4

 

 

早速オリジナルのアイコンを登録したい。
左上の「Import Icons」ボタンをクリックすると、ファイル選択が可能になるので先ほどつくったsvgデータを登録する。
※複数ファイルの選択も可能

 

アイコンフォント5

 

 

登録した画面はこんな感じ。
twitterロゴで切り抜いたアイコンもつくちゃったので、一緒に登録する。

 

アイコンフォント6

 

5, アイコンデータの選択

次に、書き出したいデータを選択する。
選択すると、アイコンがこのようにハイライト表示される。また、下の「Selection(2)」という表示部分で、2つのアイコンが選ばれているということが示している。

 

アイコンフォント7

 

ご自分で作成したデータ以外にも、無料のアイコンで必要な使いたいものがあれば、一緒に選択しておくと良い。

 

右下の「Generate Font』ボタンをクリックすると…

 

アイコンフォント8
次のような画面に遷移する。

 

アイコンフォント13

 

iconの名前はデフォルトではデータ名と同じになっいるけど、それぞれ変更できるので、そこは任意で。

 

6, データダウンロード

次に、登録したアイコンデータをウェブ上で使えるようなデータに変換し、さらにcssファイルなどのデータも自動生成し、それを一括ダウンロードする。右下の「Download」ボタンをクリックするとデータが一式ダウンロード!

 

アイコンフォント9

 

ダウンロードしたファイルに含まれる、「demo.html」をブラウザで開くと、先ほどのように表示される。

 

アイコンフォント12

 

また、htmlファイルには、
<span class=”icon-i-star”></span>
とコードがアイコンを表示させるコードのよう。

 

さらに、「style.css」を少々いじって、font-sizeを大きくしたり、colorを変えたりするとこんな感んじで見せ方を変えることができる。ちょっと極端に大きくしてみたけど、ボケやにじみなどはなく鮮明に表示されている!

 

アイコンフォント11

 

ただ、ご自分のサイトなどにアイコンフォントを表示させる場合は、CSSとかフォントデータ(tff、woff)なども読み込ませる必要があるのでご注意いただきたい。

YouTubeはじめました

靴磨きの動画 汚れ落としから鏡面磨きまで

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントは送信いただいてから表示されるまで時間がかかることがありますのでご了承ください。