オリジナルWebフォントアイコンの仕組みを理解して実際に作ってみよう

昨今のWebデザイン…というかWebに限らずあらゆる場所ですが、アイコンのようなシンボリックなマークが多様されてるように感じますよね。
これはフラットデザインの煽りもあるんじゃないかと思うんですよね。特にスマホ画面上のボタンデザイン、スキューモーフィズムからフラットデザインへ、殆どの人が見ている画面のデザインが自然と日常へ浸透していってるというか。
フラットでシンボリックなマークって、トイレの男女のマークや道路標識などで昔から使われているものですけど、改めてシンプルで認知しやすいマークの有効性が再認知された…みたいな事もあるんじゃない？って個人的には考えてますけど。

冒頭から話が逸れましたが、そんなシンボリックでフラットなアイコンを、透過png画像やgif画像を使わずWebフォントを用いて作成しよう、そのメリットを活用しようっていう記事です。
あくまで『オリジナルのWebフォントアイコンを自作する』ための記事なので、フリーで利用できるWebフォントアイコンの紹介などはありませんよ。（そもそも私が自作アイコン派で、フリーのものを使ったことが殆ど無いので紹介のしようがありません！）

Webフォントの仕組みを知っておこう

Webフォントとは、従来は端末（PCやスマホ・タブレットなど）毎にフォントデータを持ち、その端末内のみで使用されていたものを、Webサーバ上に置くことで共用できるようにしたフォントデータのことです。

例えば自宅のPCで、Word等の書類作成ソフトで作業中にフォントを選択・変更しようとすると、名前のついた幾つものフォント（字体）がリストで表示されますよね。このリストの１つ１つがフォントデータとしてPC内に保存されており、Word等の文字を扱うアプリ（文字を扱わないアプリはまず無いので、要するに全てのアプリ）は、このフォントデータを読み込んで文字を画面上に表示させています。
このフォント（字体）は、使用しているPC内に保存（インストール）されている字体しか使えません。自分のPCの中に無いフォントは当然使えません。例えば丸文字が使いたくても、PCの中に丸文字フォントデータが入ってなかったら、どこからか丸文字フォントデータを調達してインストールするか、諦めて別の字体を使うしかありません。
当たり前の話のようですが、これが後述のWebページ上での話に関わってきます。

このフォントの仕組みが、Webページ上だとちょっとややこしい事になっています。

例えば、Webページ上に『こんにちは』というテキストを表示させたとします。
この場合、実際には『”こんにちは”という文字を表示してね』というデータだけしかWebページ上にありません。さらに噛み砕くと『”こんにちは”という文字を、自分のフォントを使って表示してね』という感じです。Webページを構成するファイルは『○○○という文字を表示してね』というデータは持っていますが、実際に画面に表示させるためのフォントデータは持っていません。
なので、Webページを開き『”こんにちは”という文字を表示してね』というデータを受け取ったら、自分のPC内からフォントデータを読み込んで、画面に表示させることになります。

ここで、前述の『自分のPC内に保存されている字体しか使えない』が関わってきます。
同じ『こんにちは』と表示されるページでも、Windows上ではMSゴシックで、Mac上ではヒラギノ角ゴシックで表示されます。フォントが違えば当然字体も変わります。ページを表示させる端末によって、テキストの字体が変わってしまうんですね。

端末によって異なるフォントで表示されてしまうと、色々な問題が生じてきます。
フォントによって文字の幅は若干異なるので、幅の狭いフォントではキレイに枠内に収まっても、幅の広いフォントだとはみ出したり、改行されてしまったりと、レイアウト崩れの原因になります。

また、Webページ内には『○○○というフォントで表示してね』というフォント指定も含めることができるんですが、『”さわやかな夏”という文字をMS明朝で表示してね』といった具合に指定がされていたら、どうなるでしょうか。
MS明朝はWindowsに標準で入っているフォントなので、Windows上で見るぶんには問題ありません。しかしMacやスマホ・タブレット等のMS明朝フォントを持たない端末で見たら、『さわやかな夏』という文字が標準のゴシック体で表示されてしまい、暑っ苦しい『さわやかな夏』になってしまいます。これではビジュアルデザインも丸つぶれですよね。

これを解決してくれたのがWebフォントです。
要するに『もう個々バラバラのフォント使わないで、Webページと一緒にフォントも置いちゃって、皆でこれ使いなよ』というものです。Webサーバ上に、htmlファイル等と一緒にフォントデータのファイルも設置し、それを読み込んで文字を表現させる仕組みです。

Webフォントでアイコンを表示する仕組み

Webフォントアイコンとは、例えばリスト文頭のマーカーや右矢印・左矢印など、Webページ上で使用されるアイコンをWebフォントの仕組みを用いて表示させるものです。

フォントデータの中身は、複数のベクターデータの集まりで構成されています。
イメージとしては、フォントデータの中身には番地のようなものが割り振られており、１番には『あ』の文字データ、２番には『い』の文字データ…といった感じで並んでいます。
前述の『”こんにちは”を表示してね』は、正確には『フォントの5番・48番・22番・17番・26番を表示してね』という指定になっています。この指定を受け取ったらフォントの中から5番目の『こ』、48番の『ん』、22番の『に』…と順番に文字デザインデータを読み込んで画面に表示させています。
この文字がデザインされたデータは、Illustratorのようなベクターデータ（点と点を線で繋ぎ、点からベクトルで向きと力量を加え線を湾曲させて作られた形状データ）で作られています。

この文字のベクターデータを、同じIllustratorで作られたアイコンに差し替えたものがWebフォントアイコンです。
例えば、1番『あ』のデータが入っている部分を、何らかしらのアイコンがデザインされたデータに差し替えます。そしてWebページで『”あ”を表示』＝『フォント1番を表示』と指定すると、『あ』の部分に入っているデータ＝アイコンが表示される、という仕組みです。

もちろん、通常テキストを表示させるためのフォントの中身を差し替えてしまったら大変なことになるので、アイコン専用のフォントを作ります。
例として、『web-icon.woff』という名前のWebフォントアイコンファイルを作り（.woffはwebフォント用の拡張子です）、文字データの部分に自分の好きなアイコンのデータを入れます。完成したアイコン用Webフォントをサーバにアップし、Webページのヘッダ部分でWebフォントとして読み込みます。ページ上の通常テキスト表示部分は『フォント＝MSゴシック』のように指定し、アイコンを使いたい部分では『フォント＝web-icon.woff』と指定して、表示させたいアイコンの番地を指定すれば、アイコンが文字として表示されます。

Webフォントアイコンのメリットとは

なんだか手順がややこしいし、アイコンは画像でもいいんじゃない？と感じるかもしれませんが、Webフォントアイコンには画像アイコンに無いメリットがあります。

Webフォントアイコンはテキストとして扱われるので、テキストと同じようにサイズを自由に指定できます。ベクターデータなので拡大縮小しても崩れることはありません。レスポンシブページなどでは要素のサイズが細かく変化するので、劣化無しで自由にサイズ変更できるWebフォントアイコンは効果的です。

また、テキストと同じように色も自由に指定できます。画像アイコンは使用各色分全て書き出さなければいけませんが、Webフォントアイコンは文字なのでcssから自由に色を指定できます。
transitionにも対応するので、マウスオーバーで黒が緑へなめらかに変化する…といった表現ができるのも、Webアイコンフォントならではの表現です。
また、例えばグローバルメニューなど、PCブラウザ表示時は白バックに黒字〜モバイル表示時は開閉式メニューでダークな背景に白字…といったような、端末によって表示色が異なるケースにも対応することができます。

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

実際に私がやっている方法を紹介します。

まずはアイコンをデザインします。
Illustratorでsvg形式のデータを作成します、といっても普通に作ったものをsvg形式で保存するだけです。

アートボードのサイズは自由ですが、私の場合は40×40pxサイズで作成しています。このサイズは特に意味はありませんが、通常アイコンとして使用するサイズ〜14pxから20px程度〜より大きくて細かな作業ができ、かつ大きすぎてサイズ感覚が崩れない程度にと、感覚的に40px四方で統一させています。正方形でなくとも、縦長や横長アイコンでも大丈夫です。（実際200×20pxという異様な横長アイコンも作ったことがあります）
線はアウトライン化して、塗りのみにします。色は恐らく何色でも大丈夫だと思いますが、実際のアイコン感覚に近くなるよう黒（#000000）で塗っています。
アートボードを複数並べて管理するのも良いかもしれません。書き出しはアートボード毎に一括svg書き出しで一発です。

アイコンのsvgデータが完成したら、これらをフォントデータにまとめます。
私はいつもIcoMoonというサイトを使って作成しています。

Icon Font & SVG Icon Sets ❍ IcoMoon

無料で利用できて、アイコンセットで複数のセットを管理できるので便利で気に入っています。
IcoMoonサイト右上メニューからIcoMoon Appを選択、左上メニューのNew Empty Setから新規セットを作成、セット上メニューのPropertiesで好きな名前を付け、Import to Setから先程作成したアイコンを登録（アップロード）します。（この時点で、アウトライン化しわすれて線が残っているファイルがあるととエラーが出ます）
アップロードが完了したら、実際にフォントとして書き出すアイコンを選択していきます。以前に登録した他セットのものも選択できますし、icomoonが提供してくれているフリーアイコン（有料のものもあり）も合わせて使うことができます。

フォントとして書き出したいアイコンを選択したら、下メニューGenerate Fontから書き出し設定をします。
各アイコンに付けられている名前は、html上でアイコンを表示させる際のclass名になります。そのままでも大丈夫ですが、適宜わかりやすい名前に変更しておきます。あとは下メニュー右Downloadからzipをダウンロードします。
解凍したzip内にはデモファイルも含まれているので、style.cssとfontsフォルダをコピーし、webフォントアイコンを使用したいサイトのフォルダへペーストします。そのままだとcssファイル名が被ると思うので、私はiconというフォルダを作成し、その中へペーストしています。
アイコンを使用したいページの<head>内でstyle.css（この場合はicon/style.css）を読み込み、アイコンを表示させたい場所にを挿入すると、指定のアイコンが表示されます。

アイコン名classを適用した要素のbefore要素としてアイコンが表示される仕組みなので、<p>や<a>に指定しても大丈夫です。
ただし全てbefore要素になっているので、テキストの後にアイコンを表示させたい場合は、style.css内の:before指定されている部分を:afterに変更しておきます。また、添付のstyle.css内ではアイコンのスタイルとしてfont-weightやline-heightが指定されており、このままではテキストのスタイルも一緒に変更されてしまう為、指定を:before（又は:after）にしてアイコン部のみ適用されるように変更しておきましょう。

これで自作のアイコンをWebフォントアイコンとしてページ内で使用することができます。
細かな部分を端折ってざっくり説明でしたが、慣れてしまえばサクサクと作れてしまうと思いますよ。
アイコンって特に個性が強く、ページのイメージを決める要素としてのパワーが強いって感じるんですよね。フリーアイコンも便利ですが、個性のない（フリー素材の個性に合わせられた）イメージにしかならないので、アイコンも丁寧にデザインして作ってあげるのも大切ですよね。オリジナルのアイコンでユニーク性をアピールしてやりましょう。