アイコンフォントの概要
アイコンフォントとはベクトル形式のフォントに文字ではなくアイコンが割り当てられたフォントのことです。アイコンフォントはどんなサイズのデバイスにも柔軟にフィットします。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 |
|---|---|---|
| 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では類似のイメージになっています。この２つのアイコンを並べて表示するのは避けるべきです。
接続
| コンセプト | Font Awsome | ionicons |
|---|---|---|
| Wifi | ||
| USB | – | |
| bluetooth | – |
Web
| コンセプト | Font Awsome | ionicons |
|---|---|---|
| Search | ||
| Download | ||
| Upload | ||
| Share | ||
| Sign in | ||
| Sign out | ||
| Loading | ||
| Bookmark | ||
| RSS | ||
| 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に存在する天気のアイコンを並べてみましたが種類が少ないので天気予報専用のアイコンを使用すべきでしょう。
参考
- Font Awsome – http://fortawesome.github.io/Font-Awesome/
- ionicons – http://ionicons.com
- IcoMoon – https://icomoon.io