地味だけど強力なWebフォントのお話。まだ日本のWebデザインで普及してないから書いとく

今日SNSでつぶやいたネタを少し広げて書いておこうと思う。

興味深い採用事例。サイト運用コスト軽減のためWebフォントを使う。たしかに大規模なコーポレートサイトの場合効果があるかもしれない。結果が知りたいところ。

と言ったら、MJの例の人が「画像つくる手間なくなるのいいからウチでもつかってるよ。」的なレスくれたりして、なるほどなーと思った。

WebFont。CSS Font Module Level 3でCSSによる仕様がまとめられている。まあ日本ではまだ活用事例が少ない地味なHTML5関連の技術である。

すごく簡単に言うと、どんなフォントでも使えるようになるって機能。Web上にフォントを置いておいて、Webサイトを表示するときにそのフォントを使うことでコンピュータの中にないフォントでもWebサイトで利用できるということ。

今までのWeb制作ではどんなPCでも入っているフォント、MSゴシック系やメイリオ系のみを使うのが常識だった。でもWebFontのおかげで今はモダンブラウザならどんなフォントでも使えるようになってる。これはWeb制作的に常識が覆る出来事なんだけども、地味だよね。イマイチ話題にのぼらない。

海外ではかなーりWebFontを使ったサイトが増えてきているんだけど、日本はまだ希少。原因はいくつか予想できるんだけど、それは最後に書くとしてWebFontのメリットについて書いておこうと思う。

まず1番目、冒頭にあるように制作コストが軽減できるというメリットがある。
主に装飾目的での画像文字をWebFontに置き換えることで作業コストを抑えられるシーンがある。文章中の作品名だけはこのフォントでお願いね～って依頼にイチイチPhotoShopでテキストのカーニングに合わせたそれっぽい画像文字つくってとかしなくてよくなる。

でも旅館のトップバナーとか写真に装飾文字かぶせるってパターンだとPhotoShopでやったほうがはやくね？という意見もあるかもしれないけど、画像にWebFontかぶせたほうが<div style="text-indent: -9999px; background-image: url(hoge.png);">ようこそ◯◯へ</div>みたいなことしなくていいから便利じゃね？と逆に思う。

あと、RWDを意識するとWebFontは有利だなと思う。WebFontはベクターデータなので様々な画面サイズで表示される際にもキレイに表示される。対して画像文字だと解像度に合わせたものを用意しないとキレイに見えないし、スマートデバイスなどでズームしたときに対応しない。

さらにRetina対応なんかも気にしなくていい。将来Retinaの倍の解像度がでてきたって大丈夫。だってベクターデータだから。解像度非依存ってのは将来のお客さんのクレームもつぶしてくれるほんと素晴らしいもんだと思います。

まーでもGUIツールでWeb制作しているデザイナさんなんかはコーディングでオフセット位置キメたりするよりフォトショでやったほうがラクだよねーと言いそう。ごもっとも。ボクのようにテキストエディタでWebコンテンツを作っているビンボープログラマーにもやったことないけど理解はできる。

しかしオンブラウザ・デザインというのも流行ってきているというし、Adobe Edge Reflowなんかが本格的に使われるようになると、WebFontを画像の上にドラッグして位置キメるとか普通になるんじゃないかな。そのへんでフォトショでバナーつくるの古くね？みたいになるような気がする。

そう考えるとAdbe Edgeみたいな次世代の制作ツールが早く普及したほうがいい気がしてきた。みなさん頑張って勉強してください。ボクはあいかわらずテキストエディタでいきます。

さて2番目、WebFontはアクセシビリティに貢献する。思えば1年前某Webフォント業界の方にそんな話をして意気投合したもんだ。ずっとこの考えは持ってたんだけどよく考えたらプレゼンやったことないな。WebFont話してって言われないもんなｗ

JIS X8341-3:2010、WCAG2.0など、Webアクセシビリティのガイドラインでは基本的な考えとして、画像化された文字を推奨しない。画像化文字はアクセシブルではないという判断だ。まあ画像データはそのままじゃスクリーンリーダーは読みあげてくれないし当たり前かもしれない。

WCAG2.0の達成基準1.4.5では「画像化された文字」についての基準がある。この達成基準は日本のWebアクセシビリティガイドラインであるJIS X8341-3:2010にも継承されているため公共サイトなどでよく実施される適合試験をクリアするためには対応する実装が必要になる。

基準をクリアできる実装としてはC30: CSSを用いて、テキストを画像化された文字に置き換え、変換するユーザーインタフェースコントロールを提供するなどがある。C30の実装パターンはいくつか考えられるんだけど、上にも書いた<div style="text-indent: -9999px; background-image: url(hoge.png);">ようこそ◯◯へ</div>みたいなよくあるコーディングがこれに該当する。

画像データの中に書いてある文字をマークアップすることで画像文字の代替テキストを提供する。これによってスクリーンリーダーはマークアップされた文字を読むことができる。目の不自由な人にも情報が提供できるってわけだ。

Webのデータの中で最もアクセシブルなデータはテキストだ。Webアクセシビリティを勉強していってると何気に「テキストデータ最強」みたいな傾向を見て取ることができる。フォントというのはテキストデータを表示するためのもので、WebFontはあらゆるデザインフォントをWebコンテンツ中で利用するための仕様だ。

できるだけデータをテキストとして提供することがWebアクセシビリティに貢献することにつながる。デザインとアクセシビリティとの調和をWebFontが実現する。

今でもたまーに「アクセシビリティを意識するとダサいWebデザインしかできない」という意見を見ることがあるが、そんな人はミツエーさんのサイトとかをみて同じ事が言えるかもう一度考えてみてほしい。考えてから自分の勉強不足を猛省してほしいもんだ。

さて、もっと考えたら他にもいろいろ出てくるだろうけど、WebFontを使うメリットは現在のWeb制作の中にもある。単にCSS3で新しいとかいうだけじゃない。本質的に大事な要素があるわけ。しかし日本ではまだまだ普及してないですね。

普及してない理由を考えてみると、まず日本語フォントのクラウドサービスが有料だというのがある気がする。上記記事のフォントプラスもモリサワのTypeSquareも基本的に有料サービス。お金がかかるってことで個人運営のWebサイトでは使いづらいというのがあるだろう。

日本語のデザインフォントもフリーなものがあるけど、モトヤやモリサワには及ばないし、第2水準くらいまでしか収録されてないというのもあって汎用的に使うのはちょっと辛いというのもあるだろう。

欧文だとGoogle Webfontsとか無料で十分実用に耐えるサービスがあるけど、日本語フォントは事情が違う。なんで日本語は無料じゃないんだよ、無料にしろよ！と。そうなんだけど日本語フォントってのは欧文に比べて製作コストがハンパなく高いので無料にしにくいんだと思う。難しいところだ。

欧文に比べて日本語フォントはデータが大きくて重い。というのも一因な気がする。日本語WebFontが重いからダウンロードに時間がかかる。これがクライアントのストレスになるというケースが既に発生しているようだ。

現行のモダンブラウザの中にはWebサイトのレンダリングが完了し、WebFontのダウンロードが未完了な場合、まずそのブラウザの標準フォントでテキストを表示するものがある。その後WebFontダウンロードが完了すると、そのWebFontでテキストを再描画する。

この場合、素人目に見るとWebサイトがなにか変な動きをしているような違和感があるので「なんとかなんないの？」と言われるわけである。言われてもどうすることもできない。そのブラウザの仕様だから。今のところそれを制御するような仕組みは用意されていない。

今、Firefox19でみるかぎりではテキストはWebFontのダウンロードが完了してから表示されているように見える。その辺のブラウザ仕様もいろいろ考えられてるっぽい。これは少しいい動きなんだけど、それでもテキスト以外のCSSや画像は表示されていて、文字だけ表示されないタイミングがあるのでなんか微妙ではある。

できればWebFontのダウンロードが完了して、レンダリングが全て正常に完了した時点でWebサイトをパッと表示したい。それまではプログレスバーで。という実装をしたいと思える。そのために先日CSS Font Load Events Module Level 3がEditor's Draftとして公開された。

これによると document.fontloader.onloadingdone イベントが聴けるようになる。それを元にいろんな処理ができるので上に書いたフォントダウンロード完了でパッと表示みたいなこともできそうだ。欧文フォントみたいに字数が少なくて軽いデータには大していらないかもしれないけど、日本語みたいな重いデータでは重宝しそうだ。この仕様、すぐWD Lastcallあたりまでは行きそうな気がする。

以上、日本語フォントの特性もあってまだ日本では活用シーンが限られている。というのがWebFontの現状かもしれない。しかし環境は整いつつある。メリットは書いたとおりいろいろある。

Webデザインを手がける方々はそろそろ使ってみるのもいいと思います。Webデザインはその誕生から現在に至るまで、テキストの装飾というノウハウをほとんど蓄積していなかったのだから。