WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： はっち
カテゴリー： デザイン >フォント

Webサイトを見ていると、矢印やマークなどの「アイコン」を目にする機会があると思います。

「アイコン」には、ユーザーにとって「直感的な操作のしやすさ」「情報へのアクセスのしやすさ」などの役割を持つので媒体を問わず欠かせないものとなります。

Webサイトでは、今まで画像を用いWebサイト上に表示することが多かったのですが、Webサイトのレスポンシブ化やフラットデザインが主流となった昨今では「アイコンフォント」を用いることが定番となりました。

今回は、そんな「アイコンフォント」の基礎知識をご紹介します。

アイコンフォントとは？

簡単に言うと、Webフォントのアイコン版です。
Webフォント同様、フォントデータを読み込むことで表示させます。

CSS3以降でWebフォント機能が利用できるようになったため、使用されることが多くなりました。

メリット

■ 読み込み速度の向上
フリー素材等で制作したアイコンを画像で使用する場合、その画像を読み込むことで表示されます。
そのため、Webサイト内で画像を多用してしまうとデータの読み込み速度が低下してしまいます。

一方でアイコンフォントは、画像ではなくテキストデータとして表示してくれるためより速く読み込むことができます。

■ 多デバイス対応が可能。
昨今Webサイトのレスポンシブ化やスマホファーストな考え方が主流なため、様々なデバイスの解像度を想定して制作を進める必要があります。

アイコンフォントを使用すれば、テキストデータとして表示してくれるため様々なデバイス解像度に対応が可能となります。
画像を使用した場合、高解像度デバイス（Retina等）への対応が別で必要になるため、その作業時間を減らすことが可能になります。

■CSSでの装飾やアニメーションが可能。
テキストデータですので、CSSでアイコンのサイズ、色等の変更や、アニメーションの付与が可能になります。

色やサイズ等の変更があった場合には、短時間で対応可能となるので使い勝手がいいですね。

デメリット

・IE6,7など古いブラウザーで使えないことも。
・フォントファイルの読み込みができなかった場合、意図しない表示となる。

IE6,7対応が必要になることは最近ではあまりないとは思いますが、頭の片隅に置いておくといいかもしれません。

導入方法

各アイコンフォントによって細かい部分は違いますが、大体は共通して以下の手順となります。

• 1.アイコンフォントのファイルをダウンロード。
• 2.そのファイルをWebサイト内で読み込む。
• 3.必要なCSSを記載。

各アイコンフォントによって違いがあるため、注意しましょう。

アイコンフォント配布サイト5選

アイコンフォントを配布しているサイトをいくつか紹介いたします。

●Font Awesome

657個と多数のアイコンが用意されているので、個人的にFont Awesomeを使うことが多いです。SNSや乗り物、電池マークなどよく使用しそうなアイコンも多くあるので、かなり便利です。

●Stroke Icons 7

細めのデザインが特徴的です。
最近のデザインに合いそうです。
個人的に好み。

●Ligature Symbols

はてなブックマークやmixiなど他のアイコンフォントにはないものもありますね。

●ZURB

こちらも283種類と種類が多いです。

●Genericons Neue

WordPressのデフォルトテーマ「TwentyFourteen」で使用されています。

まとめ

いかがでしたでしょうか？

アイコンフォント毎にデザイン差がありますので、ページ全体のデザインに合うアイコンフォントを使用してうまく活用してみてください。