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

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

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

アイコンフォントとは

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

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

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

スクリーンショット_2017-02-20_15.54.25.png
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)