アイコンフォント

アイコンフォントの概要

アイコンフォントとはベクトル形式のフォントに文字ではなくアイコンが割り当てられたフォントのことです。アイコンフォントはどんなサイズのデバイスにも柔軟にフィットします。PNGやGIFのようにスケーラブルでないアイコン画像を置き換えることで1つのリソースであらゆるスクリーンサイズに対応することが出来ます。 アイコンフォントには次のようなメリットがあります。
メリット
  • アイコンがスケーラブルでレスポンシブデザインと相性が良い
  • アイコンとテキストの配置をスタイルシートで調整できる
  • アイコンサイズをスタイルシートで調整できる
  • アイコンの色をスタイルシートで調整できる
アイコンイメージがベクトル画像なのでWebのデザインでマルチデバイスをサポートする場合に一つのアイコンフォントファイルでアイコン画像が綺麗にレンダリングできるのでレスポンシブデザインを採用しているWebサイトではアイコンフォントを使用しているサイトが多くなって来ています。
デメリット
  • 一度に使用しないアイコンも含めてすべてのアイコンをロードする
  • アイコンが単色になる

一度に使用しないアイコンも含めてすべてのアイコンをロードする問題

ロード時間を少しでも短くしたい場合には、オープンソースのアイコンフォントであればアイコンフォントのファイルをカスタム作成することでこの問題は回避することが出来ます。したがって、オープンソースのアイコンフォンを利用すれば無駄にアイコンをロードしないように出来ます。

アイコンが単色になる問題

アイコンフォントはフォントである以上一つのアイコンに複数の色を指定できません。アイコンをカラフルにしなければいけないという要件でもなければ、大した問題ではないかもしれません。 この問題を少しばかり軽減するテクニックはありますので紹介します。
ドロップシャドー
テキストと同様にスタイルシートでドロップシャドーのエフェクトをかける事ができます。

アイコンフォントの対応環境

アイコンフォントはOSのデフォルトフォントではないので外部からロードすることになります。 Web ブラウザでは Web フォントとしてサーバーからロードすることが出来ます。ブラウザ毎の対応状況はWebフォントのブラウザ対応で確認できます。JavaFX のようなリッチクライアントの場合はフォントファイルをアプリケーションとともに配布してローカルからロードすることも、Web フォントとしてロードすることも可能です。

オープンソースのアイコンフォント

次のアイコンフォントはオープンソースとして公開され自由に利用することが出来ます。他にも多くのアイコンフォントが公開されていますが、品質とバリエーションが実用に十分であるものをピイクアップしています。
アイコンフォントのライセンス
名称 著作者 ライセンス
Font Awsome Dave Gandy SIL OFL1.1
Code licensed under MIT License
ionicons DRIFTY MIT License
IcoMoon Free Pack Roonas GPL,
Creative Commons 4.0

アイコンフォントの評価について

アイコンフォントのイメージについての品質は次の観点から客観的に評価すべきでしょう。
  • コンセプトが伝わる
  • サイズが揃っている

アイコンフォントのイメージの比較

アイコンを実際に使用する際には同じカテゴリのアイコンを組み合わせて使用することが多いので利用頻度の高いアイコンのイメージを次のカテゴリ毎にFont Awsome と ioniconsを比較してみます(IcoMoonについては割愛します)。いずれのフォントも実際のレンダリング結果からき実用レベルの品質であることが分かります。

ソーシャルサービス

ソーシャルサービスのブランドアイコンは元になるデザインがあるので基本的にはフォント毎の差異が大きくことなる事はありません。ブランドアイコンの利用には細かいガイドラインがあることが一般的なので確認する必要があります。
コンセプト Font Awsome ionicons
Twitter
Facebook
Google+
GitHub
YouTube(large)
YouTube(small)
SlideShare
Flickr

プラットフォーム

プラットフォームのブランドアイコンは元になるデザインがあるので基本的にはフォント毎の差異が大きくことなる事はありません。
コンセプト Font Awsome ionicons
Windows
Mac
Linux
FreeBSD
Android
Ioniconsのプラットフォームのブランドアイコンはサイズがまちまちになっていますが、Font Awsome にない FreeBSD のアイコンがあります。

デバイス

コンセプト Font Awsome ionicons
Smart Phone
Tablet
Laptop
Desktop
Monitor
Printer
Camera
Video camera
Desktop と Monitor のコンセプトをアイコンで区別するのは難しいようでFont Awsome では 区別がなく、ioniconsでは類似のイメージになっています。この2つのアイコンを並べて表示するのは避けるべきです。

接続

コンセプト Font Awsome ionicons
Wifi
USB
bluetooth

Web

コンセプト Font Awsome ionicons
Search
Download
Upload
Share
Sign in
Sign out
Loading
Bookmark
RSS
Mail
Shopping Cart
Sitemap

アプリケーション

プレイヤーコントロール

コンセプト Font Awsome ionicons
Play
Pause
Stop
Skip Backward
Skip Forward
Shuffle
Expand
Compress

サウンドコントロール

コンセプト Font Awsome ionicons
Volume down
Volume up
Volume off

地図

コンセプト Font Awsome ionicons
Compass
Location
Navigate

天気

コンセプト Font Awsome ionicons
晴れ
晴れ曇り
曇り
曇り夜
Ioniconsに存在する天気のアイコンを並べてみましたが種類が少ないので天気予報専用のアイコンを使用すべきでしょう。

参考

関連文書