WebページをRetina対応させるテクニック〜実践編：jQuery×HTML5×CSS3を真面目に勉強（5）（2/3 ページ）

[山田 直樹，クラスメソッド]

アイコンフォントを活用する

　アイコンフォントとは、通常のアルファベットや平仮名とは違い、シンボルや絵文字、記号などを収録したフォントのことです。ビットマップ画像とは異なりフォントという性質を持っているため、サイズを大きくしてもぼやけることがなく、CSSで簡単に色を変えられるなど非常に使い勝手の良いものとして、利用するWebサイトがここ最近で一気に増えてきました。

　仕組み自体は特に目新しいものではなく、われわれが普段使っているUnicodeにも一部のアイコンがフォントとして収録されています。アルファベットや平仮名などとは性質が異なるため、HTML上に表示するにはそれぞれのアイコンに割り当てられた文字参照を指定します。非常に多くのアイコンが収録されているため、ちょっとした間に合わせ程度であれば、これだけでも十分にカバーできるでしょう。

　Unicodeフォントについては、次のWebサイトに素晴らしいチートシートがあります。

• Unicode character table

※なお、これらのアイコンは機種依存文字に該当するため、利用する際はサポートする動作環境での検証をしっかりと行う必要があります。

　とはいえ、どこかデザインがやぼったかったり、Webページの用途にそぐわないものが多かったりと、決して使いやすいとはいえません。そこで、Webページでの利用により適したアイコンだけをまとめたWebフォントが積極的に作られるようになりました。有料のものもありますが、多くは無料で公開されているため気軽に利用可能です。

　以下にWebフォントを幾つか紹介します。

Font Awesome

　アイコンフォントの中でも、とりわけ広く認知されているライブラリです。Twitter Bootsrap2.xをベースとしつつ、アイコンの種類を大幅に追加したパッケージとなっています。基本的にはBootstrapのプラグインという位置付けですが、単体でも利用可能です。全体的に丸みを帯びたデザインで、ポップな雰囲気を作り出しています。また、LESSやSCSS（Sass）形式でも提供されているため、CSSに簡単に取り込めます。IE7もサポートしています。

• アイコン数：361
• ライセンス：
  • フォント：SIL OFL 1.1（再販しない限り自由）
  • ソースコード：MIT License
  • ドキュメント：CC BY 3.0

Elusive-Icons

　こちらもBootstrap2.xをベースに大幅にアイコンが追加されたパッケージです。コンセプトとしてはFont Awesomeと類似しており重複しているアイコンも多いですが、Elusive-Iconsにしか収録されていないものもあります。また、Font Awesomeが丸みを帯びたデザインなのに対し、こちらは全体的に角の立ったデザインが特徴で、Bootpstrapの標準的なアイコンに近い仕上がりとなっています。IE7をサポートしており、CSS以外にもLESS形式で提供されています。

• アイコン数：283
• ライセンス：SIL

IcoMoon

　デフォルトで用意されているアイコンだけでなく、自作したアイコンデータ（SVG形式）をアップロードすることで自分だけのアイコンフォントを作れるのが最大の特徴です。既存アイコンも450個とかなり多く、有料版を購入すれば最大1266個ものアイコンを利用できます。IE7をサポートしています。

• アイコン数：
  • Free Version：450
  • Essential Pack/39ドル：900
  • Ultimate Pack/59ドル：1266
• ライセンス：CC BY 3.0

Foundation Icon Fonts 2

　アイコンの数は少なめですが、「アクセシビリティ・セット」という車いすを始めとした障がい者関連のアイコンがそろっているのが特徴です。医療や介護、ユニバーサルデザインをテーマとしたコンテンツを制作するのに役立ちそうです。

• アイコン数：139
• ライセンス：MIT License

Entypo

　アイコンフォントの他に、PSDファイルやEPSファイル（Illustrator用ベクターファイル）も併せてダウンロードできます。

• アイコン数：284
• ライセンス：CC BY 3.0

Typicons

　アイコン自体はベーシックなものでまとめられていますが、全体的に丸みを強く帯びたテイストが特徴です。

• アイコン数：308
• ライセンス：CC BY 3.0