アイコンデザインをWebフォントで表現出来る「アイコンフォント」の基本知識を解説

情報をコンパクトにわかりやすく伝えるデザインの1つに「アイコン」があります。

直感的に表しているものを理解できるアイコンは、看板からホームページのボタンまで様々なシーンに利用されています。
しかし、アイコン画像を使いすぎると、容量過多になりページが重くなってしまいます。
そんな時に便利なのが、テキストとしてアイコンを埋め込める「アイコンフォント」です。

今回はアイコンフォントとは何か、どのようなメリットがあるのかを解説します。
CSS3でも対応され、今注目を浴びているアイコンフォントについて、ホームページの制作に関わっている人は学んでおきましょう。

アイコンフォントとは

アイコンフォントとは、簡単にいうと*「アイコンを表現出来るWebフォント」*です。

Webフォントとは、クラウド上にあげられたフォントデータを読み込むことでホームページに反映させる仕組みを指します。
CSS3からWebフォント機能が追加され、Webデザインの世界でも利用が進んできました。

アイコンフォントはWebフォント同様、CSS3を利用すれば比較的簡単に導入できます。

http://fontawesome.io/

このようにアイコンフォントは画像によるアイコンの表示と見た目はあまり変わりません。
ただ、ページソースをみると、アイコンは画像のファイルを読み込むのではなくテキストデータとしてCSS3で記述されているのがわかります。

アイコンフォントを利用する際には、基本的には以下の手順で導入します。

1.アイコンフォントをダウンロードする
2.ダウンロードしたフォントファイルのスタイルシートをサイト内にコピーする。
3.スタイルシートをリンクさせ、適用させたい箇所にマークアップしていきます。

マークアップの方法はアイコンフォントによって異なるので注意しましょう。

参考記事：
[“たかが文字”では済まされない。Webフォントを採用するメリットとは]
(https://ferret-plus.com/4586)

利用するメリット

では、アイコンフォントを利用するメリットはどこにあるのでしょうか。

画像で表示するよりもページを軽くできる

アイコンのデザインを画像として作成する場合、画像の保存先をURLで指定して読み込むことで表示します。

そのため、あまり多用しすぎると画像のデータ量のせいで読み込みに時間がかかり、ページが重くなってしまうというデメリットがあるでしょう。

一方でアイコンフォントは、画像ではなくテキスト（文字）のデータとして埋め込みます。
そのため、ページのデータ量を画像よりも抑えることができるというメリットがあります。

画像の利用数によっては、アイコンフォントを入れるよりもむしろ軽くなる場合もあるので注意しましょう。

CSS3を利用してサイズ、色を変えられる

アイコンフォントはテキストデータなので、CSS3を利用すれば、サイズや色を簡単に変えることができます。
画像の場合はアイコンごとに色を変えた差分を作成しなければいけません。

一方アイコンフォントを利用すれば、コードを変更するだけで色やデザインを変えられるので工数を減らせます。
また、通常の画像とは異なり、コードとしての入力になるのでユーザーの利用する端末に合わせて表示されます。

総務省による調査では、2015年末の時点でインターネットを利用する人の5割がスマートフォンを利用しているという結果が出ています。
そのような中で、どのような端末からでも解像度を維持したままアイコンを表示できるアイコンフォントはUXの面でもメリットがあるでしょう。

参考：
もはや定番!?アイコンフォントとは
[平成28年度情報通信白書｜総務省]
(http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h28/html/nc252110.html)

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

アイコンは自分で制作したものをアップロードすることでアイコンフォントとして利用できます。
それだけでなく、無料でも豊富な素材をダウンロードできます。そのようなアイコンフォントの素材をダウンロードできるホームページをご紹介します。

1.Font Awesome

http://fontawesome.io/

電池やメールのマークのような基本的なアイコンだけでなく、FacebookやAmazonのようなブランドのアイコンなど675個ものアイコンを無料でダウンロードできます。

外部のサーバにフォントデータがすでにアップロードしてあるため、自社のサーバーにフォントデータを置いておく必要がありません。
そのため、サーバーへのリンクを設置するだけで利用を始められるので、手軽に始めたい人にとっても重宝するでしょう。

2.Genericons Neue

http://genericons.com/

WordPressの開発元が公開しているフォントで、WordPressの管理画面にも使われています。ショッピングカードや矢印のような基本的なアイコンが揃っています。

3.Ligature kudakurage Symbols

http://kudakurage.com/ligature_symbols/

日本人のウェブデザイナーが公開しているアイコンフォントです。
はてなブログのブックマークやmixiといった日本国内で普及しているサービスのアイコンも豊富です。

4.Typicons

http://typicons.com/

太めの線で描かれたデザインのアイコンフォントです。
ダウンロードやWi-FiのようなWebで利用する基本的なマークのほか、天候に関わるマークなども収録されています。

参考：
気軽に使えるアイコンフォントまとめ

まとめ

アイコンフォントは、画像ではなくテキストとしてホームページに埋め込めるものです。CSS3で記述することで色や大きさを変更することもでき、どのようなデバイスでも同様の解像度で表示が行えるのがメリットと言えるでしょう。

一方では、*InternetExplorer6、7などの古いブラウザでは表示がされない可能性もあります。*なんらかの原因でフォントデータがダウンロードできなかった場合、ページに文字列が表示されてしまうことになるので注意しましょう。

アイコンフォントは今回紹介したような素材サイトにて無料で配布されています。アイコンフォントを活用して、画像を多用することなく魅力的なデザインを組み立てられるようになっていきましょう。