ロゴまでWebフォント化! とうとうテンプレートの画像を全部なくしたった
ここまでやらんでもいいんじゃないか? という気もしないわけじゃないんですが、進行中の当ブログデザインリニューアルも進みに進み、とうとうロゴ画像のWebフォント化までしてしまいました。
これによって当ブログの自作テンプレートのほぼ全域に亘って、背景画像の使用がなくなったことになります。
Webフォントにしたといっても、ロゴを一文字ずつではなくまるっとロゴそのものをフォント化しています。Webフォント化するにあたって利用したのは以下のサービス。
SVGファイルをアップロードすることで、好きなアイコンをWebフォントとして使うことができるようになります。
今回のデザインリニューアルにおいて、Feedlyのアイコンやはてなブックマークのアイコン、AmazonのアイコンなんかはイラレでSVGファイルを用意して、ここでWebフォント化しています。
Webフォント化のワケ
デザインリニューアルにあたって、ちょっとばかりチャレンジしたいと思っていたのが、テンプレート内の背景画像の排除。
先日のお知らせでも書いていますが、もともとうちの自前テンプレートはあんまり画像を使わないというコンセプトで作っています。
しかし、制作当時はそれなりに画像に頼らざるを得ない知識レベルだったこともあり、ロゴをはじめ、上の見出しやサイドバーに使っているボーダーなどは画像を使っていました。というか、昨日までは使ってたんですけどね。
しかし、今回のリニューアルではそうした画像を、できれば全て排除したかったのです。
ボーダーの始めや終わりが直線で、途中から点線とか、制作当時のCSSレベルではなかなか実現できなかったのですが、:beforeと:afterの擬似要素を駆使すればできるじゃねーかってことで実装。
見出しにおいても頭においていた吹き出しアイコンをもうやめたかったこともあって、こちらもWebフォントに置き換えました。
で、本来ならここまででまぁ目的はほぼ達しているわけです。
ロゴ画像は別に画像のままでも良かったといえば良かったのですよ。でもねぇ、なんか気になる。。だったらロゴもWebフォント化してみるのも一興じゃないかと。
まして、うちのロゴ画像は単色カラーなロゴなので、Webフォント化したところで、これといって特に困りません。
じゃーやっちゃえってことでサクリとロゴのaiデータを元にSVG化し差し替えてしまったというわけです。
ロゴのWebフォント化のメリット
ロゴをWebフォント化したことで得られたメリットも。
特に大きいのが、フォントなのでサイズ変更や色変更などが容易に対応できるという点。
画像じゃないですからサイズを大きくするのにイラレやフォトショを立ち上げる必要すらありません。ちょちょっとCSSをいじるだけ。以下は実例。
こんな感じでサクリとfont-sizeを変えるだけ。
画像じゃないから拡大縮小しても荒れません。
このように色の変更だってばっちり。これはうちのロゴが単色だからこそアリなわけですけど、その時々に応じていくらでも変えることができますね。
また、実例のように記事だろうがテンプレートの中だろうが、どこであってもclass属性さえ付与すればロゴがサクッと表示できるので、テキストと織り交ぜて使うことが可能なのも、なにげにいいかもしれません。
高速化に結びついたのか?
画像を使わないということは、サーバーのリクエスト数を減らすことにもつながります。ひとつひとつの画像は、容量的にさほど大きなものではありませんでしたが、それでも塵も積もれば山となるというやつで、それなりにサーバーの応答時間に影響を与えます。
今回全面的にデザインリニューアルを行った結果、これまでのサーバー応答時間と比較すると半分くらいになりました。要は速くなったわけです。
多分これでもっとグレードの高いサーバーに移転したら爆速になるんだろうなと。
すべての皆さんにおすすめできる方法ではありませんが、うちの場合はこれでかなりの高速化が図れたことは間違いありません。
ロゴのWebフォント化やってみる?
万人向けのことではないですが、ロゴをWebフォントにしてしまうというのも、結構面白いですね。
もしやるならロゴが単色であること、単色になっても問題ないことが前提ではありますが、興味のある人はロゴ画像のaiデータがあればそれを元に、もしくはロゴ画像をトレースしてSVG画像として作って、試してみるといいかもしれません。
ただ、「古いブラウザ大丈夫?」って声も聞こえてきそうです。特にIEに関して。
確かにその点は多少の懸念がありました。実際、Webフォントに対応するのはIE8以降ですからね。
一応調べてみたところ当ブログでは1ヶ月の訪問者のうち約0.3%程度の人が、Webフォントに対応していないIE6、もしくは7でアクセスしていることがわかりました。
まぁその程度の数なら別にいんじゃね? っていう判断です。というかバージョンを上げるかいい加減他のブラウザを使えよっていうね。
古いブラウザなんか切り捨ててやるぜ! ヒャッハー!
っていう考え方ができることも、Webフォント化の前提かもしれません。
いずれにせよ、これでロゴも画像ではなくなり、テンプレートの99%の背景画像の排除が完了しました。
残る1%も排除して、テンプレートの背景画像ゼロを目指したいと思います。