実践
第1回 Webアプリの利用

Web Fontsファイルにはアイコンなどのベクターデータを登録できます。Web FontsにするとCSSでの装飾などが簡単に行えます。記事では簡単なWebアプリを利用したファイル生成方法を紹介します。

2015年04月02日発行

目次

このシリーズでは、任意のWeb Fontsのファイルを生成する方法を解説します。今回はエンジニアでない方にも、プロジェクトでの必要に応じて、手軽にアイコンセットを作成することができるようになることをゴールとします。また、gulpを用いた自動化についても、次回解説します。

アイコンフォントとは

アイコンフォントはその使いやすさから、WebのUIには欠かせないものとなりました。アイコンフォントには、次のような特徴があります。

メリット

  • 1つのファイルに複数のアイコンを格納できる
  • ベクター画像の一種なので解像度を気にする必要がない
  • アイコンをCSSで装飾することが可能。サイズ(font-size)、色や透明色(color)、影(text-shadow)などを付けられる

つまり、アイコンフォントを利用すると、1つのフォントファイルを読み込むだけで、さまざまなアイコンをHTML上に展開することができ、また、アイコンの大きさや色をCSSで自在に変えることができます。PNGやJPEGで、「同じ形状のアイコンだけどサイズや色の分だけ複数画像を用意する」というようなことはしないでいいわけです。

Web Fontsの利用

デメリット

  • 1つのアイコンを複数色にはできない

デメリットはありますが、メリットがとても多く、今からでも押さえておきたいテクニックでしょう。

フォントアイコンはIE8以降と、そのほかのブラウザで利用することができます。2015年現在、現役のブラウザのすべてで利用できるわけですね。

カスタムしたアイコンフォントは、すでにさまざまなWebサイトで使われています。

サイト名アイコン名
GitHubOcticons
MicrosoftMSHP Icons
AirBnBAirGlyphs
NIKEOneNikeGlyphs
sony.jpicon
cookpadCookpad Simbols
GitHubの例
AirBnBの例

グローバルなWebサイトでももちろんですが、国内の有名サイトでも独自のアイコンフォントは使われています。

今回は「これから始める」という方に向けた、手軽な利用方法*を紹介します。

*注:手軽な利用方法

あらかじめオープンソースのアイコン群パッケージとして用意されているフォントファイル、Font Awesomeの利用も手軽な方法のひとつです。Font Awesomeについてはアートディレクターの小原が記事を執筆していますので、参照してみてください。

アイコンフォントの元を用意する

さて、今回は、完全に独自のアイコンフォントを用意することを目的としています。まずは、アイコンフォントの元となる、ベクター画像を用意します。

任意のSVGファイルを用意するだけです*。正方形ですとアイコンとして扱いやすいため、今回はAdobe Illustratorを使い、256x256ピクセルのSVGファイルを複数用意しました。

*注:SVGファイルの作成

IllustratorからSVGファイルを生成する方法は、次の記事を参照してください。

SVGファイル

変換Webアプリケーションを使う

フォントファイルを生成するためには、どうしてもツールが必要になってしまいます。

フォントファイル編集/生成のためのツールはいくつか存在しています。もっとも手軽に使えるのは、インストールが不要なWebアプリケーションでしょう。

フォントファイルの書き出し

フォントファイルの書き出しを補助してくれる「IcoMoon」というWebアプリケーションを利用すると、とても便利です。

IcoMoonサイト

右上にある「IcoMoon App」のボタンからアプリケーション本体に移動しましょう。すると、初期状態で、すでに多くのアイコンが登録されています。初期状態のフォントのライセンス(GPLあるいはCC BY 4.0CC BY-SA 3.0)が気になるようでしたら、一度すべて消去してしまうといいでしょう。

一括して消去するには右上のメニューから「Remove Set」を選択します。

登録されているフォントを一括消去する

IcoMoonにアイコンを登録する

左上の「Import Icons」のボタンから、「アイコンフォントの元を用意する」で用意した正方形のSVGファイルを選択するだけです。複数選択にも対応していますので、Shiftキーを押しながら一度にまとめて登録することもできます。

Import IconsのボタンでSVGファイルを登録する

一度登録したアイコンは、ブラウザを閉じてもローカルストレージに保存されます。ですので、間違えてブラウザを閉じてしまっても復帰でき安心です。

SVGファイルを登録した状態

フォントファイルをダウンロードする

ひと通りアイコンの登録が終わったら、「Import Icons」の隣にある、矢印型の「選択ツール」を使い、それぞれのアイコンを選択状態にします。黄色い枠で囲まれた状態が「選択状態」です。

アイコンを選択状態にする

選択後、画面右下部の「Generate Font」から、ファイル出力設定に移ります。

ファイル出力設定画面

ファイル出力設定画面では、次の項目が表示されます。

  • アイコンの表示例
  • class名
  • 文字コードポイント

class名と文字コードポイントについては変更することができます。ただし、多くの場合、この画面は特に変更しないでもいいでしょう。特に、文字コードポイントについては、自動でe600以降が採用されているので、このままで問題ありません。

ファイル出力設定画面の表示項目

文字コードポイントE000からF8FFは私用領域(Private Use Area)として用意されています。この範囲のコードポイントは「a,b,c,A,B,C,1,2,3」や「あ、い、う、壱、弐、参」など、普段利用する文字は割り当てられていません。そのため、アイコンに割り当てても問題がないのです。

出力設定が終わったら、画面下部Downloadボタンを押し、ファイルをダウンロードします。

Downloadボタンを押してファイルをダウンロードする

アイコンをプロジェクトに組み込む

ダウンロードした「icomoon.zip」を展開すると、フォントやCSSファイルが格納されています。

ファイルを解凍した状態

ここから、fontsフォルダとstyle.cssを取り出し、あなたのプロジェクトに組み込みます。

fontsフォルダとstyle.cssは同じ階層になるように配置します。階層を変えたい場合にはstyle.css内の読み込みパスを変更します。

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?-fo0y4q');
    src:url('fonts/icomoon.eot?#iefix-fo0y4q') format('embedded-opentype'),
        url('fonts/icomoon.woff?-fo0y4q') format('woff'),
        url('fonts/icomoon.ttf?-fo0y4q') format('truetype'),
        url('fonts/icomoon.svg?-fo0y4q#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

HTMLからstyle.cssを読み込めるようにし、spanタグでアイコンを埋め込みます。

<span class="icon-pxg"></span>
<span class="icon-webgl"></span>
Web Fonts組み込み例

これで独自のアイコンセットを用意することができました。こうした独自アイコンフォントセットはプロジェクトに応じて作るといいでしょう。また、一度作ったアイコン用のSVGはストックしておき、ほかのプロジェクトでも使いまわしてもいいでしょう。

次回はgulpを使って作業を自動化する方法を解説します。

小山田 晃浩
小山田 晃浩
フロントエンド・エンジニア

2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。また、SVG, Canvas, WebGLの扱いも得意としている。 外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Tokyo WebGL Meetupの主催者。2011年から2015年まで5連続でMicrosoft MVP for IEを受賞。 著書に『Webデザイナー/コーダーのための HTML5コーディング入門』(共著:エクスナレッジ、2011年3月12日)や『CSS3デザイン プロフェッショナルガイド』(共著:毎日コミュニケーションズ、2011年5月28日)』などがある。