2013年にWEBを席巻したアイコンフォントまとめ

Pocket

【この記事を読むのに必要な時間は約 4 分です】

2013年のWEBデザイントレンドと言えば、レスポンシブ・フラット・アイコンフォントなどがキーワードとして挙げられると思います。
近年スマートフォンやタブレットでWEBサイトを見るユーザが増えたことで、マルチデバイスに対応するレスポンシブデザインはもはや必須と言えるものになりました。さらに、タッチデバイスの普及に伴いシンプルで洗練された UI を追及するApple・マイクロソフト・Google が競うようにフラットデザインを採用、リッチデザインに慣れた PC ユーザーにとっても新鮮な驚きをもって受け入れられました。

今回はフラットとも関連のあるアイコンフォント (Web フォント) を取り上げたいと思います。これまでは気の利いたアイコンを表示するには画像ファイルを使用するのが一般的でしたが、テキストベースで拡大・縮小に強く色の変更も容易なアイコンフォントが用いられることが増えてきました。中には、画像じゃないのか?と疑うような完成度のアイコンフォントも存在します。

アイコンフォントと言えば Font Awesome が広く知られていますが、いまでは多くのクリエイターによってアイコンフォントが公開されています。以下にフリーで使用可能な国内外 12 種類のアイコンフォントをご紹介します。

アイコンフォントまとめ

1. Font Awesome

私が一番初めに知ったアイコンフォントが Font Awesome で、当ブログでも使用しています。現バージョン(4.0.3)  で 369 種類のアイコンが提供されており、日本での利用者も多く導入手順が紹介されているのでアイコンフォントの入門には最適です。

Font Awesome

Font Awesome

2. Glyphs

Font Awesome は Web アプリケーション用のアイコンが豊富ですが、Glyphs は様々なカテゴリが用意されており、より汎用的に使えるため一般の Web サイトや業務向けのアプリケーションでも役立ちそうです。

ビジネス (115)、コミュニケーション (234)、コンピューター&モバイル (185)、エンターテイメント (28)、シンボル (147)、時間と場所 (166)・・・など14のカテゴリーにトータル 1,000 以上のアイコンが提供されています。

Glyph Icon Font from WebHostingHub

Glyph Icon Font from WebHostingHub

3. Sosa

160 種類程度と数は少ないのですが、マスターカード・アメリカンエクスプレスなどクレジットカードのロゴや世界地図など他ではあまり見ないユニークなアイコンフォントがあります。

Sosa

4. Metro UI

Metro UI CSS という Windows8 を模したオープンソースの CSS セットに含まれるアイコンフォントです。アイコンだけでなくテーブルやフォーム、ボタンなども提供されています。サイト全体を Windows8 っぽくする、なんてこともできます。

Metro UI CSS

5. Iconic

171 種類のアイコンセットをアイコンフォント、SVG、PNG、Adobe イラストレータ (.ai)、OmniGraffle ステンシル (.gstencil) 形式で提供。

Iconic

Iconic

6. Elusive Icons

Twitter Bootstrap を利用した 299 のオープンソースアイコンフォントを提供(Twitter Bootstrap の利用は必須ではありません)。シンプルながら使い勝手の良いアイコンが揃っており、どのようなテーマのサイトにも無理なく馴染めるでしょう。

Elusive-Icons Webfont

7. Ligature Symbols

Liagture を使用した京都の Web デザイナー Kazuyuki Motoyama さんによるアイコンフォント。Web フォントの自作方法についても自身のブログ 【完全版】Ligature Symbols フォントセットの自作方法   にて説明されています。

icon fonts Ligature

8. Entypo

250 種類以上のアイコンをフォントの他、PSD,  EPS,  PDF 形式で提供。

icon fonts Entypo

icon fonts Entypo

9. Typicons

10. Batch.

icon in the Batch

icon in the Batch

11. ZURB

おまけ・画像を用いたアイコン

1. Maki

106 種類 × 3 サイズのパターンを揃えた地図用のアイコン。

icon fonts Maki

コメントを残す

メールアドレスが公開されることはありません。