Webアイコンフォントとは、サイト上で使われるアイコンをWebフォントとして利用できるようにしたものです。
レスポンシブサイトのアイコンなどに利用されることが多く、
PCでもスマホでも劣化することなく表示することができます。
※Webアイコンフォントの利用例
Webアイコンフォントを作るには？
Webアイコンフォントを作るには、ざっくり３つの工程が必要です。
- ベクターツール（Illustratorなど）でアイコンを作る
- アイコンをWebアイコンフォントに変換する
- SASS/CSS、HTMLを設定する
この記事ではまず、1つ目の「ベクターツール（Illustratorなど）でアイコンを作る」について説明したいと思います。
ベクターツールでアイコンをアイコンを作る
今回は、Illustratorで作成する場合で説明します。
正方形のアートボードやガイドを作り、その中に収まるサイズでアイコンを作ります。
※キャプチャはアートボードでの例
デザイン時の注意点
以下のことに気をつけてデザインデータを作るとGoodです。
- パスは必ずアウトライン化する
- アンカーポイントの数が多いとデータが肥大化するので不要なものは削除する
- パスファインダーで型抜きすると背面に透明なパスが隠れている場合があるので、アウトラインモード(⌘+y）で確認しつつ削除する
- デザインに関係ない、不要なアンカーポイントは必ず削除しましょう
アイコンをSVGで書き出す
作成したアイコンをSVG形式で書き出します。
今回は、「アセットの書き出し」機能を利用して書き出してみます。
まず書き出したいアイコンを１つだけ選択します。
※複数のアイコンを一気に選択するとそれが１つのSVGにまとまってしまうので注意
「アセットの書き出し」パネルに選択したアイコンをドラッグ＆ドロップ、もしくはパネル内の「追加」アイコンをクリックして追加します。
ここでのアセット名＝SVGファイル名になるのできちんと名前を設定します。
この時、プロジェクトの命名規則が決まっている場合、それに従った命名をしておくとトータルの工数が節約できて楽です。
書き出したい画像をパネル内で全て選択し、
「▼書き出し設定」から「SVG」に変更し、「書き出し...」を押します。
SVGが書き出されます。
なぜ「アセットの書き出し」なのか
理由は主に２つになります。
- 「別名で保存」とは異なり、大元のファイル名が先頭に付かない
- 「別名で保存」より、ファイルサイズが小さい
以下キャプチャを見てみると、「アセットの書き出し」では大元のファイル名が先頭に付かないことがわかります。
また、「アセット書き出し」の方がファイルサイズが小さいのがわかります。
さらに、テキストエディタで開くと圧縮されているのがわかります。
SVGはなるべく軽量な状態で書き出していますが、別途圧縮ツール（SVGOMGなど）を利用する場合もあります。
以上が、ベクターツールでのアイコンの作り方です。
次回は「アイコンをWebアイコンフォントに変換する」を説明したいと思います。