【技術・テクノロジー】

画像は使わない?HTML5時代のアイコンとは

  1. SVG
  2. アイコン
  3. フォント
  4. 技術
画像は使わない?HTML5時代のアイコンとは

こんにちは。フロントエンドエンジニアのaxcelworkです。二度目ましての方も、そうでない方もよろしくおねがいします。

前回はレスポンシブデザインについてまとめてみました。レスポンシブデザインでWebサイトを構築するメリットに「どんなデバイスでも見れる」「見た目の統一ができる」があります。詳しくは前回の記事をご覧ください。

さて、どんなデバイスでも見れる。とりわけ、PCとスマートフォンを考えた時にいつも悩まされるのが画像問題。
そう、

一昔前……レスポンシブデザインが出始めた頃は、PC用、スマートフォン用(タブレット兼用)とデバイスごとに用意していました。さらにRetinaディスプレイが登場したことで高解像度の画像が要求されるようになりました。

肥大化するWebページ。多くなるリクエスト数。サーバへの負荷。増加するコスト。しかし、昨年一筋の光明が差しました。
そう、それがアイコンフォント。フォントアイコンとも呼ばれています。アイコンフォントの登場によりレスポンシブデザインの構築が楽になりました。

今回は、そんなアイコンフォントについて、整理を兼ねてまとめていきますよ!
前回が長かったので今回は短めで。ばぶぅ。

アイコンのフォント?ってどういうこと?

早い話がWebフォントなんです

Webサイトでは様々なアイコンを使用しています。
各種矢印、ハンバーガー、虫眼鏡などアイコンはシンボリック故に、見ただけでどんな用途か機能かを示してくれるとても良い手段です。
今まではPNG(またはGIF)画像を使用していたアイコンを、Webフォントとして使用するというのがアイコンフォントなんですね。

アイコンフォントはWebフォントの仕組み(文字情報を表現する)を利用することによって実現しました。
文字情報とはひらがな、カタカナ、漢字、ローマ字など各言語だけではありません。スマートフォンでお馴染みの絵文字も文字情報にあたります。
これらはすべてUnicodeをもちいて表示されています。
アイコンフォントもこのUnicodeの私的領域(あらかじめ自由に使っていいと決められている領域)を使用して、アイコンを文字情報として登録しているのです(アイコンフォントとして登録する元画像の形式の多くはSVGです)。
余談ですがSVGファイルをテキストエディタで開いてみてください。文字が沢山並んでいますよね。SVGという画像形式は文字で画像(アイコン)を表現しているんですね。
そのようにして登録した文字情報をWebフォントへと変換し、実際に使用しています。

そろそろメリットを教えてもらおうか

フォント特有のメリットはそのまま引き継いでいます。
CSSを用いて色の変更。拡大・縮小。拡大しても荒れない!キレイ!などです。

また、個人的に最大のメリットと思っているのが

そうなんです、今まで画像だったアイコンがフォントになっているので、ファイルサイズが圧倒的に軽い!

これは驚きですね。
画像はどれだけ圧縮しても限界がありますがアイコンフォントなら驚きのファイルサイズ。圧倒的じゃないか我軍は…。
しかもリクエスト(サーバから受け取るファイル数)も圧倒的に少ない。
画像はそれぞれ個別に読みこむのに対し、アイコンフォントはフォントとして1つのファイルとしてまとめられているので1リクエストで済みます。
(1リクエストと書いていますが、クロスブラウザを考慮すると、.ttf .eot .woffの3つの拡張子のファイルが必要なので、厳密には3リクエストです。)

「ファイルサイズの違いが、Webサイトの決定的差ではないと言うことを教えてやる!」
と言っていた赤い大佐もびっくりですね。3分の1どころじゃない。6分の1なのにすべて表示できる。
もう画像だった時代には戻れませんね。ばぶぅ。

そううまくはないはずだ、デメリットがあるはずだろう

もちろん下記のようなデメリットも存在します。

  • フォントとはいえ、スクリーンリーダーには読み上げられない。
  • 合字(リガチャ)を使用したアイコンフォントの場合、表示が対応していないブラウザがある。
  • 単色のみ。(複数の色をつけることができない)
  • フォントなので縮小のサイズが10pxまで。

アイコンフォントはまだ出始めたばかり(というよりHTML5やWebフォントの普及などの環境がようやく整った)なので、まだまだ各ブラウザごとに表示の際の解釈が異なる場合があります。
現状でも十分すぎるほどの効力はありますが、今後に期待したい技術ではありますね。

まとめ

ということでアイコンフォントについてまとめました。
うまく使用することによって今までユーザ側、サーバ側に負荷があった部分を解消し満足度の向上に役立てることができます。
またアイコンフォントを使用することによって、レスポンシブデザインのメリットの一端を担うことができます。

もちろんアイコンフォントだけでは、冒頭の画像問題はすべて解決できません。
Webサイトを構築する(レスポンシブデザインだけではなく)に当たって、解決したい画像問題は残っています。
次回は残りの画像問題について少し考えてみることにしましょう。
ヒントは SVG です。

それでは、次回「HTML5時代の画像について考える」につづく!