MD-Blog_Web Creative

どうもどうもこんにちは。
おはぎが大好きすぎて手作りしちゃうマークアッパーです。

待ちに待った（？）春がやって来ましたね。
うぐいすが鳴いたらうぐいす餅が食べたくなって、よもぎを見れば草餅が食べたくなって、桜が咲いたらさくら餅が食べたくなる、そんな季節ですね。いい季節ですね。
え？ 花粉症？ なんのことですか？（くしゃみ連発しながら）

アイコンフォント、使ってますか？

さて、皆さま。
今や随所で見かけるようになったアイコンフォント、使ってますか？ 使ってますよね？ いいですよね、アイコンフォント。

弊社でも様々な案件においてアイコンフォントを活用しています。画像と違って、拡大／縮小しても劣化しないし、CSSから色やサイズを操作することができて、とても便利で使いやすいです。
ただ、あくまでWebフォント。フォントファイルの読み込み前や、そもそもWebフォントが無効な環境の場合、アイコンが表示されなかったり、意図しない文字や記号や豆腐が表示されたりと、残念な見た目になってしまうことも…。

というわけで、前回の記事に続きまして（？）、今回はアイコンフォントが思った通りに表示されないケースについて、ぐだぐだと悩んでみようと思います。

なぜ悩むのか。なにを悩むのか。

Webフォントが無効な環境？？？

今の時代、だいたいのブラウザではWebフォントが使えます。ブラウザのサポート状況（参考）を見ると、「Webフォントが無効な環境」なんて、特に気にする必要はないのかもしれません。

でもですよ。2015年の秋にリリースされたiOS 9でコンテンツブロッカーが導入され、それに対応したアプリもたくさんリリースされました。主な機能は不要な広告のブロックですが、中にはWebフォントの読み込みをブロックする機能を備えたものまであるのです。
私が気にしているのは、まさにそこです。誰もが気軽に見え方をコントロールできる（＝Webフォントの読み込みもブロックできちゃう）、そんな時代になるんだろうか…なんてことを考えました。

まぁ、そんな時代は来ないかもしれませんが、「Webフォントが無効な環境」というのも考慮した上でサイト制作にあたらなければ、とは思うのであります。

何が問題なの？

通常のテキスト部分であれば、Webフォントが適用されなくても、文字は読めます。文字が読めれば、情報を伝えることはできます。大きな問題にはなりません。

ですが、アイコンフォントの場合、Webフォントが適用されないと、情報を伝えることができません。
そもそも、情報がなくなっても大丈夫な場所（適切なラベルとセットの場合など）でしか、アイコンフォントは使っちゃダメだと思ってますが、その上で使うにしても、やっぱり文字化けっぽく見えるのはカッコ悪い。
※ブラウザの違いやフォントの違いなど、環境や状況によってはただ表示されないだけのこともあるので、すべてにおいてカッコ悪くなるわけではありませんが…。

じゃあ、これをどうやって解決したらいいんだろうか…と、アイコンのマークアップにおけるベストプラクティスを探す、長い長い旅に出るのであります。

アイコンフォントに代わるもの

アイコンフォントではない別の手段でアイコンをマークアップする方法について、考えてみます。
「アイコンフォントでできること」ができないと、その代替にはなれませんので、下記の条件が満たせるものを探します。

1. 拡大/縮小しても劣化しない（異なるサイズでも使いまわしがしやすい）
2. CSSから色を操作できる（マウスオーバー時などのスタイルを指定したい）
3. transitionプロパティを使用してふわっと変化させたい

まずは、普通にアイコンフォントを使った場合のサンプルを用意しました。

• サンプル1 - アイコンフォント編

Webフォントが有効な環境での表示 ▼

Webフォントが無効な環境での表示 ▼

※スクリーンショット画像は、左側がMacのFirefox、右側がiPhoneのSafariで見た場合のものです。環境によって見え方は異なります。

Webフォントが無効な環境ではどのように表示されるのか、実際に確認してみてください。
…とはいえ、Webフォントを無効にできる環境がないと試せませんよね、そうですよね。

Webフォントが無効な環境を用意してみよう

(1) コンテンツブロッカーアプリを使う

iPhone/iPad（iOS 9.0以降）をお持ちの方でしたら、Webフォントのブロックもできるコンテンツブロッカーアプリを入れてみてはいかがでしょうか？
無料で試せるアプリを3つほど見つけましたので、ご紹介しておきますね（見つけられていないだけで、もっと他にもあるかもしれません）。

• Focus by Firefox
  Firefoxの開発元であるMozillaがリリースしたコンテンツブロッカーアプリ。設定項目が少なくて、とてもシンプルなアプリです。今回のサンプルを試してみるならコレがおすすめ。
• 1Blocker
  多機能なコンテンツブロッカーアプリですが、複数項目のブロックを有効にするには有料となるようです。Webフォントをブロックするだけなら、無料で利用できます。
• Refine
  非常に細かく設定できる多機能なコンテンツブロッカーアプリですが、かなり細かいので、少々難しいかもしれません…。お試しレベルにはちょっと不向きかも。

(2) ユーザースタイルシートを使う

iPhone/iPadをお持ちでない場合は、ユーザースタイルシートを利用して、擬似的に同様の状況を作ってみましょう。下記のようなスタイルを用意して、サンプルページに適用させてみてください。
※Webフォントが無効になるわけではないのですが、今回のサンプルにおいては無効な場合と同様の表示結果が得られる、というものです。

*::before {
  font-family: inherit !important;
}

さてさて。
それでは早速、代替手段を探ってみましょう！

画像を使う？

いや…それはちょっと…

たしかに、画像を2枚（もしくは2つ分をスプライト画像で）用意してbackground-imageプロパティで使用すれば、CSSで色違いの画像を切り替えることができますし、がんばれば（2枚を重ねて配置して、上のレイヤーのopacityを変化させることで）ふわっと切り替えることもできなくはありません。
が、違うサイズでも使用したくなった場合、そのサイズで別の画像を用意しなければいけない or 画像の劣化を見逃さなければいけないわけで、あまりいい代替手段とは言えないですよね。

SVG（外部ファイル）を使う？

うーん…

たしかにSVGなら、画像のデメリットは解消できますね。拡大しても縮小しても、見た目が劣化することはありません。
ただやっぱり、画像と同じで、マウスオーバー用のSVGは別途用意しなければいけませんし、ふわっと切り替えたい時にはちょっと強引なことをしなければいけません。ベストプラクティスにはまだまだ遠い。

インラインSVGを使う？

なるほど、その手が…！

インラインSVGであれば、CSSから色を操作することができます。もちろん、transitionプロパティを使用してふわっと変化させることも可能です。
色違いの2種類を用意しておく必要がなく、サイズ違いも用意する必要がなく、ふわっと色を変えるのに強引なことをする必要もありません。素晴らしいではありませんか！

先ほどのサンプルページのアイコンを、アイコンフォントからインラインSVGに置き変えたバージョンを用意しました。

• サンプル2 - インラインSVG編

ただし、問題は「インライン」SVGであること。HTMLの中にSVGのコードを直接書かなければいけません。アイコンの数が多かったり、その形が複雑だったりすると、コード量が増え、HTMLがうわーなことになってしまいます。
うーん…ベストプラクティスとまでは言えないのかなぁ…。惜しい。

やっぱりアイコンフォントがいいのかなぁ

そうなんですよね、いろいろ考えてみても、やっぱりアイコンフォントはとても便利なものなのです。
アイコンフォントを使いつつ、問題を解決することはできないものか…。

………。

そうだ！
カッコ悪いくらいなら、アイコン消しちゃえばいいじゃない！

そもそも、表示されなくたって大丈夫なところでしかアイコンフォントは使っちゃダメ、という前提で考えてますので、Webフォントが使えない環境なら、いっそのことアイコンを出さなければいいのです。

というわけで、JavaScriptでWebフォントが使えるかどうかを判別して、使えない時にはアイコンの表示を消してしまう、そんなサンプルを作ってみました。

• サンプル3 - アイコンフォント使えない時には消しちゃう編

作り方しだいでは、消す時にカクっとなってしまったり、変な余白が残ってしまったりと、別のカッコ悪さが出てこないとは言い切れませんが、文字化けっぽいカッコ悪さは回避できます。

とはいえ…

やっぱりアイコンも表示させたいですよねぇ。
最終的にアイコンフォントがベストプラクティスかと言うと、実は環境によっては少し滲んで表示されてしまうこともあって、形しだいでは潰れてしまうこともあるので、これにも問題がないわけではなかったりしますし、うーん…どこまでも悩ましい…。

補足ですが、今回のぐだぐだ考察は、あくまでも特定の利用条件の下での考察なので、利用する場所や条件が変われば、答えもまた変わってきますし、人それぞれ考え方も違うでしょう。あくまでひとつの考え方としてお受け取りくださいね。

ちなみに、すこし前の話になりますが、GithubがアイコンをアイコンフォントからインラインSVGに変えたと発表して、注目を集めていましたね。
"なぜ" "どのようにして" インラインSVGを採用するに至ったのか、その記事の中で詳しく説明されていますが、HTMLがうわーなことになるのを防ぐためにRailsのhelperを活用しているそうで、そういった工夫ができるのであれば、これはベストプラクティスと言える気がします。

一概にどれが正解と言えるものでもないですし、いろんな方法を知っておいて、適材適所で対応できればいいのだろうなーとは思いつつも、ベストプラクティスを探す長い旅はこれからも続いていくのでありますよ。
たかがアイコン、されどアイコン。奥が深い！！（？）