記事検索
購読 する ログイン

アイコンフォント 自由自在 第1回 Webアプリの利用

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

カテゴリー
HTML/CSS >
HTML/CSSの実践

発行

著者 小山田 晃浩 フロントエンド・エンジニア
アイコンフォント 自由自在 シリーズの記事一覧

はじめに

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

アイコンフォントとは

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

メリット

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

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

デメリット

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

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

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

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

| サイト名 | アイコン名 | | ----- | ----- | ------ | | GitHub | Octicons | | Microsoft | MSHP Icons | | AirBnB | AirGlyphs | | NIKE | OneNikeGlyphs | | sony.jp | icon | | cookpad | Cookpad Simbols |

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

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

*注：手軽な利用方法

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

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

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

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

*注：SVGファイルの作成

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

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

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

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

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

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

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

IcoMoonにアイコンを登録する

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

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

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

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

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

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

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

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

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

出力設定が終わったら、画面下部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>

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

次回はgulpを使って作業を自動化する方法を解説します。
X GitHub
運営会社