【この記事を読むのに必要な時間は約 4 分です】
2013年のWEBデザイントレンドと言えば、レスポンシブ・フラット・アイコンフォントなどがキーワードとして挙げられると思います。
近年スマートフォンやタブレットでWEBサイトを見るユーザが増えたことで、マルチデバイスに対応するレスポンシブデザインはもはや必須と言えるものになりました。さらに、タッチデバイスの普及に伴いシンプルで洗練された UI を追及するApple・マイクロソフト・Google が競うようにフラットデザインを採用、リッチデザインに慣れた PC ユーザーにとっても新鮮な驚きをもって受け入れられました。
今回はフラットとも関連のあるアイコンフォント (Web フォント) を取り上げたいと思います。これまでは気の利いたアイコンを表示するには画像ファイルを使用するのが一般的でしたが、テキストベースで拡大・縮小に強く色の変更も容易なアイコンフォントが用いられることが増えてきました。中には、画像じゃないのか？と疑うような完成度のアイコンフォントも存在します。
アイコンフォントと言えば Font Awesome が広く知られていますが、いまでは多くのクリエイターによってアイコンフォントが公開されています。以下にフリーで使用可能な国内外 12 種類のアイコンフォントをご紹介します。
アイコンフォントまとめ
1. Font Awesome
私が一番初めに知ったアイコンフォントが Font Awesome で、当ブログでも使用しています。現バージョン（4.0.3） で 369 種類のアイコンが提供されており、日本での利用者も多く導入手順が紹介されているのでアイコンフォントの入門には最適です。
2. Glyphs
Font Awesome は Web アプリケーション用のアイコンが豊富ですが、Glyphs は様々なカテゴリが用意されており、より汎用的に使えるため一般の Web サイトや業務向けのアプリケーションでも役立ちそうです。
ビジネス (115)、コミュニケーション (234)、コンピューター＆モバイル (185)、エンターテイメント (28)、シンボル (147)、時間と場所 (166)・・・など14のカテゴリーにトータル 1,000 以上のアイコンが提供されています。
3. Sosa
160 種類程度と数は少ないのですが、マスターカード・アメリカンエクスプレスなどクレジットカードのロゴや世界地図など他ではあまり見ないユニークなアイコンフォントがあります。
4. Metro UI
Metro UI CSS という Windows8 を模したオープンソースの CSS セットに含まれるアイコンフォントです。アイコンだけでなくテーブルやフォーム、ボタンなども提供されています。サイト全体を Windows8 っぽくする、なんてこともできます。
5. Iconic
171 種類のアイコンセットをアイコンフォント、SVG、PNG、Adobe イラストレータ （.ai）、OmniGraffle ステンシル （.gstencil） 形式で提供。
6. Elusive Icons
Twitter Bootstrap を利用した 299 のオープンソースアイコンフォントを提供（Twitter Bootstrap の利用は必須ではありません）。シンプルながら使い勝手の良いアイコンが揃っており、どのようなテーマのサイトにも無理なく馴染めるでしょう。
7. Ligature Symbols
Liagture を使用した京都の Web デザイナー Kazuyuki Motoyama さんによるアイコンフォント。Web フォントの自作方法についても自身のブログ 【完全版】Ligature Symbols フォントセットの自作方法 にて説明されています。
8. Entypo
250 種類以上のアイコンをフォントの他、PSD, EPS, PDF 形式で提供。
9. Typicons
10. Batch.
11. ZURB
おまけ・画像を用いたアイコン
1. Maki
106 種類 × 3 サイズのパターンを揃えた地図用のアイコン。
