Webフォントのいま

先日、ソフトバンク・テクノロジーの関口さんと、素敵なデザイナーの方々による「ウェブフォント勉強会＆活字ハッカソン」に参加しました。

全体的には「今Webフォントを使うなら？」というところでいろんな意見が出たのでまとめておきます。尚、使い方や実装方法については、同じく参加された千貫りこさんが「KICKS Web｜Webフォント」で丁寧に説明してくださっていますのでぜひごらんください。

Webフォントについて

Webフォントの仕様自体は、実は2002年ごろから策定が開始されていましたが、ここ最近になってやっとブラウザが実装しはじめたところ。

サーバー上にあるフォントファイルを読みこませてスタイルシートで指定することで、自分の使いたいフォントをHTMLテキストで使えるというものです。

2011年10月4日にW3Cの仕様書で、CSS Fonts Module Level 3のワーキングドラフトが出て以来、海外ではWebフォントを使えるサービスが続々と増えてきました。

わたしもよく使っていたは、使いたいフォントを決めたあとはHTMLに1行、CSSに1行追加するだけで簡単に導入できました。

当時は10種類もなかったのに、今や506種類もある中から選べるようになっている。すごい。

そんな中、日本ではやっと始まったばかり。この理由は主に次の2点。

日本であまり今まで普及しなかった理由

日本語フォントの重さ

欧文フォントは、基本的にはアルファベットの大文字／小文字、そして数字と一部の記号があれば使えます。そのため、フォントファイルは大きくてもせいぜい100〜200KBのファイルサイズ。これなら通常のインターネット回線だと気にしなくてもダウンロードして表示できるレベルです。

それに対して日本語は、なにより漢字がネック。教育漢字（小学校6年生までに習う漢字）だけだとしても1,006字。常用漢字だと2136字。漢検1級の対象漢字となると約6,000字。これらを全部含めたフォントファイルは10MBにも… このレベルだとさすがに導入をためらってしまっていました（エンドユーザーのためにも）。

昔ながらの有名フォントベンダーがなかなか身を乗り出さなかった

そしてもうひとつの理由が、これ。今までにもWebフォントのサービスは実はあって、

デコもじ｜ウェブフォントで、ホームページが、ブログが、もっと楽しくなる♪
WEBフォント｜アマナイメージズ
もじでぱ｜ウェブフォントでブログ＆ホームページの文字（フォント）を自由に変更して楽しもう♪

などわりと安価で使えるものもたくさんあったのですが、いわゆるDTP時代からの大きなブランドフォントがなかったので、少し敬遠されていた部分もあるはず。

現在では「モリサワ」「イワタ」「フォントワークス」「モトヤ」などのフォントが使えるサービスも出てきました。

TypeSquare [タイプスクウェア]（モリサワ）
HOME | フォントプラス（モリサワ、イワタ、フォントワークス、モトヤなど）

今までHTMLではデバイスフォントしか使えなかったことが当たり前なわたしたちにとって、新ゴなどがHTMLテキストとしてWebサイト上に表示されることは、非常にエキサイティングです。

Webフォントを使うメリット

メリットについては、2年前ぐらいから言われていることと何ら変わりないと思います。

更新性

言うまでもありません。

「Webの特性」と「デザイナーのエゴ」の両立が可能

「更新・修正しやすい」「検索ロボットにもやさしい」というWebの特性と、「きれいな文字で表現したい」というデザイナーのエゴが両立できます。

レスポンシブにもやさしい

見出し文字などを明朝体の画像にしていた場合には、スマートフォン閲覧用の数行に分かれた画像も準備しなければならなかったでしょう。 Webフォントならきれいな文字でダイナミックに対応できます。

もちろんiPhone・AndroidのブラウザではWebフォントは表示できますから。

Webフォントを使うデメリット

お金がかかる

実際、自分のパソコンにインストールするためにフォントを買うお金がかかります。さらに、Webで使う場合は同じフォントでも二重でお金がかかるような気になってしまいます。 font+の場合だと、最低で月額1,050円〜。（入会金は初回に10,500円）正直、わたしたちのようなクリエイターにとってはそんな大きな額ではありませんが、キリッキリの中小企業さんにとっては、Webフォントごときにお金をかけられるかぁー！という方もいらっしゃるのではないでしょうか。

表示速度

先ほども述べたような「重い」フォントをダウンロードして表示するのに時間がかかります。これには、font+さんでもいろいろな方法がとられていて、できるだけユーザーにストレスを与えないように日々改良されているとのこと。

バリューライセンスとスマートライセンスがあるのですが、特徴がそれぞれ違います。

バリューライセンス

月額：1,050円サイト数：1ライセンスにつき1サイト

これは、静的サイトに向いています。いったん制作したHTML/CSSなどのファイルをまとめてfont+さんに投げます。そうすると、そこで使われている文字を解析して、必要な文字だけが入ったフォントファイルをサブセット化して送り返してくれます。

これだと必要な文字だけのフォントファイルになるので、ファイルサイズは非常に軽減されます。これをサーバーに置いておいて、初回時はこのフォントファイルをダウンロード。2回目以降はキャッシュが残っていればスムーズにサイト内ページを閲覧することができるようになるというわけです。

また、サブセット化は「ページ全体」「一部のページのみ」「1ぺーじのみ」など自由に自分で組み合わせて指定できるので、あまりにも大規模なサイトの場合は「カテゴリごと」にサブセット化をさせる、というのも効率的だなと思います。

バリューライセンスの不便な点は、サブセット化の都合で、動的な文字がからむ部分には使えません。たとえばCMSで本文にWebフォントを使っていた場合、更新ごとにサブセット化をするのは非常にめんどくさいですよね。なので実用的には、「ナビゲーションやカテゴリタイトルといったような、静的な部分のみ使える」といった感じでした。

スマートライセンス

年額：12,600円（年間120万ページビュー以下の場合）→月だと1,050円/10万ページビューサイト数：無制限

こちらは、のようにJavaScriptを読み込ませておいて、あとはCSSのfont-familyで指定をするだけという、動的コンテンツにも向いています。

ただ、こちらの難点は、 デバイスフォントが出る→いったん文字が消える→Webフォントが表示される ということ。

詳しい仕組みの部分はわかりませんが、どのみちフォントファイルの取得に時間がかかっているようです。

しかもキャッシュされずに毎回そうなるので、けっこうなストレスですし、クライアントさんも嫌がりそう…

解決方法

先日、ソフトバンク・テクノロジーさんがこの現象を解決する（というか緩和する）APIを発表したとのこと。

スマートライセンスのAPIを公開しました！ | フォントプラス

これらを組み合わせると、デバイスフォントが一瞬出たり、その後にいったん文字が消えたりといったことを制御することができるようです。（たぶん、Webフォントの適用が完了してから表示させるという処理を行うということだと思う）

Windowsでの表示問題

もうひとつ気になるのがこの問題。 Macでは気にしなくてもいいのですが、やはりWindows XPでの文字の表示について。ギザギザに表示されないのかどうか。

実際に見せてもらいましたが、Windows XPのIE7でもアンチエイリアスがかかるので、おおむね大丈夫かなという感じ。ただ、フォントによってはちょっとギザギザが出たりします。こればかりは実際に出力してみないとわからないですね。

そのあたりのブラウザがターゲットに入っている場合は、使おうと思うフォントを実際にブラウザに出力してみて、きれいなものを選んでいくのがいいと思います。

比較してみると、明朝体などはFirefoxで見た場合よりも、IE7のほうが少し太く見えて見えやすい、ということもありました。

どの導入方法がいいか？

font+ バリューライセンス

全ページがスタティスティック（静的）なものにおすすめ

どうしてもデザインに凝りたくて、本文もきれいな明朝体にしたい！というお客様の場合、そのサイトがある程度静的であれば、いいと思います。

CMSが入っているものでも、ずっと変わらないところには使える

たとえばグローバルナビゲーション、サブナビゲーション、大カテゴリなど、変動がない部分についてはWebフォントを指定してサブセット化しておくことで、ずっと使えます。動的なタイトルや本文はデバイスフォントがいいと思います。

font+ スマートライセンス

完全に動的なもの

現時点では、その都度リロードごとに起こるちらつきや、Webフォントの適用が終わるまでのタイムラグが少しストレス。いくらお客様が「それでもいいよ」と言おうと、ユーザーフレンドリーなサイトを作りたいわたしとしては、ちょっと両手をあげてすすめるわけにはいかないなーという感じ。

自分でttfやotf、woff、eotに変換

版権の問題から、有料フォントをこういった形に変換してWebフォントとして使うことはやめた方がいいでしょう。フリーフォントや、自分で作った文字などは形式を変換してサーバーにアップしておくと、キャッシュがきいて2回目以降はストレスなく表示されます。

font+でいうところの「サブセット化」も自分でできるので、自作フォントを使う場合はかなりいいと思います。

自作フォントを作る場合は、ここソフトがおすすめです。→武蔵システム最近ではWebフォント用にフォントのサブセットを作成するフリーソフトも作られているんですね、これは便利！以前、わたしもOTEdit for Macを使ってナナホシフォントβ版を作りまして、ブログでも使っています。楽しかったです（笑）

いかにしてWebフォントを使ってもらうか？クライアントさんへの説明について

いろいろと特徴やメリット・デメリットを見てきましたが、今度はじゃあそれを使ってもらうためにはクライアントさんにどう説明したら納得してくれるのか？というところ。

小さな会社さんをクライアントにしているわたしたちにとって、Webフォントの導入はわりと敷居が高い。

それには、費用の問題が大きいと思います。 font+だと、最低ラインで月額1,050円。これはわたしたちからみると価値や苦労も知っているので「安い！」と思えますが、価値のわからない方にはどうしたら「安い」と思ってもらえるのか。

ケース1：ちょっとこだわりを持って、タイトルなどをすべて画像にしているお客様の場合

「タイトルをすべて画像で作る労力」と「それをテキストにしてWebフォントを使うときの導入労力」を考える。ボリュームにもよるとは思いますが、おそらく「タイトルをすべて画像で作る労力」＞「それをテキストにしてWebフォントを使うときの導入労力」だと思うので、月ごとの更新費用から1,050円を削り、その分をfont+の料金にあてる。

＃お客様側から見るとそんなに見た目も変わるものでもないので、上下しなくてもよいのではないかと思います。

＃現状だとサイトが続く限りコストが発生するものなので、「初期制作費用に上乗せしておく」というのはちょっと使えません。

ケース2：自社サイトを社内更新している場合

この場合も、更新にかかる労力を考えると断然Webフォントの方がコストパフォーマンスがいいはず。

ケース3（妄想）：テキストになる分マシンフレンドリーになり、検索でいい結果が出たとしたら…

今まで画像にしていたテキストの分を、Webフォントのテキストにすることによって検索でいい結果が出るようになったとしたら…（未検証のため妄想とさせておいてください）

デザインもきれいなまま維持されるとしたらそれはお客様にとってはうれしいことだと思います。

それを説明し、月額1,050円を負担していただくのを理解してもらう。

とにかく使ってみよう

「わたしたちが使えばそれが標準になるんですよ」 W3Cの深見さんが2011年6月の「HTML5+CSS3 制作現場の実践アプローチ大公開！ – イベント – まにまにカレッジ（まにカレ）」のトークセッションで言った言葉がとても心に残っています。

Webフォントもまだまだこれから。 font+さんが日本有数のフォントベンダーさんのフォントの扱いを始めてくださったおかげで、Webフォントは劇的に使いやすくなったと思います。

あとはくそ重い日本語のフォントファイルとどうお付き合いしていくかというところで、いろいろ工夫をしていくうちに、改良もされていくと思います。

その他いいこと

他にも、画像でなくてテキストのまま記述することでのメリットもあります。

APIを使って自動でルビをふる

テキスト解析:ルビ振りAPI – Yahoo!デベロッパーネットワーク

おおお！なんと、「グレード」が設定できて、小学○年生向けという設定ができる！教育用のコンテンツにとてもよさそうです！

今の段階でいちばんベストな方法

ちらつくのはやっぱりいやなので、

グローバルナビゲーション、サブナビ、カテゴリ名など静的になるものだけバリューライセンスでサブセット化して設置しておく。
動的な部分はもう今のところデバイスフォントにしておく。

という手法でしばらく進めていきたいなと思っています。

ちなみに千貫りこ先生は、Webフォントを使う／使わないに関わらず、通常のサイトを作るときにfont-familyを設定されないそうです。つまり、ユーザーがいちばん慣れているフォントにあわせるということ。Safariだと明朝体になるわけです。

そういう考え方もわたしは好きです。 Webはパソコンやスマホなどのデバイスで見るというのが前提で、使う人はそのデバイスでいつも使うフォントに慣れているのは当然のこと。これもひとつユーザーのことを考えている手法だと思います。

まだまだこれからですが、どんどん使っていけたらなと考えています。ぜひ参考に。

ソフトバンク・テクノロジーの素敵な中庭にて