Font Awesomeとは
Font Awesome*は、使い勝手のよいアイコンをフォントファイル形式にして公開しているアイコン集です。Webで使用する際は、CSSのclassで特定のフォント（アイコン）を指定し、それを元にフォントデータが表示されるという仕組みになっています。
*注：Font Awesomeの開発
Font Awesomeの開発はGitHub上で行われています。米ツイッター社が提供しているUIフレームワーク「Bootstrap」のために作られているので、すでにご存じの方も多いかと思います。
SIL OFL 1.1のライセンスで公開されていますので、特定の条件*の下で無料で使用することができます。
*注：特定の条件
特定の条件については、以下の日本語訳などを参照してください。法律的な正式文書は文中にリンクのある英文書です。
アイコンをフォントファイルとして扱うことで、従来の画像を切り出して配置する方法と比べて、多数のデバイスに対応するコストの削減や、柔軟なサイズ設定・色変更・アニメーションの付与など、より効率的なアイコン利用が可能となります。
アイコンを作成するデザイナーから見ると、すでに、アイコン表現として認知を得つつある「矩形」を、案件ごとに毎回作成する手間を省くことが期待できます。また、Webアプリケーション開発などであれば、プロトタイプ開発時に使用して、プロジェクト初期段階のスピートアップなどにも役立てることができるかと思います。
なぜFont Awesome？
なぜ、Font Awesomeが便利なのでしょうか。簡単に言ってしまうと、設置や変更・調整、運用が非常に簡単だからです。また、ここ数年、ウェブサイト閲覧環境の多種デバイス化への対応と、サイト（アプリ）の表示および動作速度の高速化の重要性が、特に高まっています。そのような問題の解決手段のひとつとして、Font Awesomeは相性がよいと感じているのです。以下、Font Awesomeのメリットを挙げてみます。
多様な解像度に対応できる
画像を切り出す方法で、アイコンを作成した場合、例えば、Retinaディスプレイのような高密度な解像度を持つ端末の表示に対応しようとすると、別途2倍サイズの画像の書き出しが必要になります。一方、Font Awesomeの場合、アイコンはベクター形式で作成されているため、サイズ変更による劣化がありません。ですので、端末ごとに新たにデータの作成や指定をする必要がありません。
これにより、2倍サイズに対応する手間や、将来的に、さらに高密度な解像度を持つ端末が登場した場合の新たな対応の必要がなくなります。また、比較的ファイルサイズの大きくなりやすい2倍サイズのデータへのリクエストの軽減にもなります。
2倍サイズの対応という意味では、SVGファイルもベクター形式なのでサイズ変更による劣化がありません。しかし、現状のさまざまな端末と、さまざまなOSバージョンへの表示対応を考えると、CSSの@font-faceを使用してアイコンを表示するFont Awesomeの方が、より広いブラウザバージョンをカバーしています。このことに関しては、次回、詳しく解説します。
リクエスト数が軽減できる
また、サイト表示の高速化をする上で重要となる、ファイルへのリクエスト数軽減の点でも、Font Awesomeのアイコンデータは、fontawesome-webfont.woffのようにひとつのファイルにまとめられているので、とても有利です。1ファイルであるため、アイコンデータへのリクエストを最小限に抑えることができ、Image Spriteを作成する必要もありません。そのため、サイト表示高速化に貢献することが可能となります。
デザイン自体のクオリティが高い
最後に私のデザイナーとしての、個人的な視点から見ると、前述したように技術的に採用するメリットが多い上に、収録されているアイコンのデザイン自体のクオリティが高いというのも、重要な理由となっています。
普通のフォントとなにが違う？
Font Awesomeは通常のフォントと、大きな違いはありません。ダウンロードしたFont Awesomeのfontsフォルダに入っているフォントの.otf（OpenType）や、.ttf（TrueType）は、OSやデザインアプリケーションなどで広く使われている形式です。また、woff（Web Open Font Format）というウェブ表示用の形式もありますが、本質的にはOpenTypeやTrueTypeと同じものです。
ひとつ違うのは、通常のフォントであれば、アルファベットのAやBが格納されている場所*に、それぞれのアイコン図形が格納されているというところだけです。
*注：アイコン図形が格納されている場所
イメージしやすいように、このような言い方をしましたが、実際には、Unicode上でA、Bなどのグリフが収録されているBasic Latinブロックに、アイコンは格納されていません。Font Awesomeの場合、アイコンはPrivate Use Areaブロックに格納されています。
ですので、FontAwesome.otfファイルを使用すれば、Adobe系のデザインアプリケーションでFont Awesomeを配置*してデザインをすすめることも可能です。
*注：Adobe系アプリケーションでFont Awesomeを配置
Adobe系アプリでFont Awesomeを使用するには、CSSで指定されているUnicodeの符号位置を、実際の文字列（Character）に変換してからペーストする必要があります。フォントをFont Awesomeに指定した上で、Every Font Awesome 4.0.3 Icon, CSS Class, & Unicodeから、アイコンをコピー＆ペーストして使います。
Font Awesomeを使うデメリット
非常に使い勝手のよいFont Awesomeですが、デメリットがまったくないわけではありません。
単色での指定しかできない
Font Awesomeを使うと、単体のアイコンに複数の色を指定できません*。これはフォントファイルである以上、仕方のない部分でもあります。基本的にフォントファイルは閉じたパスの黒塗りで構成されているため、複数の色をアイコン（文字）単体に指定することができないのです。
企業のロゴマークなど、カラーの指定が複数同時に存在してしまうケースで、効率的にさまざま解像度に対応させたいときは、SVGファイルを選択することになると思われます。
なお、Font Awesomeには、プリセットで用意された便利クラスを上手に使用することで、多少の色付けは可能です。この実装については、次回、解説する予定です。
黒文字・白マドができない
白以外の背景色の場合、黒文字・白マドができません。これは次のサンプルの画像を見ていただけば一目瞭然だと思います。デザイン的にはaの状態を目指しても、実際はbになってしまいます。
なぜかというと、aを実現するには、1つのアイコンに対して、白と黒という2色を指定しなければいけないのですが、前述したように、1つのアイコンには単色の指定しかできないからです。個人的に、黒文字・白マドができたら便利なのになと思うことが多いので、デメリットとして挙げておきます。
フォントファイルを拡張する必要が出てくることもある
ほしいアイコンがFont Awesomeになかった場合、フォントファイルを拡張する必要が出てくることがあります。この場合の対策は、アイコンを自作して、別途アイコンファイルを用意する方法や、そこだけ諦めてSVGやPNGにしてしまうという方法があります。
必ずアイコンファイル全体を転送しなければならない
Font Awesomeに収録されているアイコンのうち、実際に使いたいアイコンが少数、例えば、3つだけだった場合でも50〜80KB（読み込まれるフォントの形式によりサイズが違う）程度のファイルサイズのフォントファイルをダウンロードする必要があります。本来、3つ程度のアイコンであれば、もっと少ない転送量で済ませられるので、気になる人はいるかもしれません。
コラム：Fontelloを使う
前述のフォントファイルの拡張と、使いたいアイコン数が少ない場合については、Fontello - icon fonts generatorというサービスを使うことで解決は可能です。このサービスはアイコンフォントのサブセット化とオリジナルのSVG添付をサポートしていますので、ファイルサイズの最適化と同時に、オリジナルアイコンの添付も可能になります。
ただし、この解決方法の欠点は、CSSの指定自体はFont Awesomeではなくなってしまうことにあり、Font Awesomeの持つ便利な機能の利用ができなくなります。また、このサービスのClass名の命名規則は、最新版のFont Awesome 4系ではなく、旧バージョンの3系を踏襲したものとなっています（執筆現在）。
まとめ
今回はFont Awesomeの特徴とあわせて、Web開発に使用するメリットとデメリットについて解説しました。多端末化がますます拡大する、これからのWeb開発に有利であることがおわかりいただけたと思います。次回は、具体的な実装方法を解説します。