こんにちは。前回、デジクリデビューしました関口浩之です。
前回のもじもじトーク第1弾は「デジタルフォントが豊富に手に入る時代」と題して、文字の持つ情報伝達力について、そして、デジタルフォント化によって広がる表現力についてのお話をしました。
今回のテーマはWebフォントです。「Webフォントってなに？」って方もいると思うので、今日はWebフォントの基本講座パート1をお送りします。かなり基本的なお話ですので「Webフォント知ってるよ」って方はスルーしてください（笑）
■システムフォントと画像文字、そして、Webフォント
まず、この二つのバナーサンプルを見比べてください。おっ、なんか、懐かしいバナーですね。
http://goo.gl/gfhr3s ← 画像文字
http://goo.gl/jLtYIB ← Webフォント
原寸表示だと同じに見えるかもしれませんが拡大表示してみてください。画像文字のほうは拡大すると文字がだんだんギザギザしてきますよね。Webフォントのほうはいくら拡大してもギザギザにならずに綺麗ですよね！
ブラウザに文字を表示させる方法は一般的に二通りあります。まずひとつはパソコンやタブレットなどに入っているシステムフォントで表示させる方法です。もうひとつは画像編集ソフトなどで作成した画像文字を表示させる方法です。
「えっ、なんでわざわざ文字を画像で作らなくちゃいけないの？」と素朴な疑問をお持ちの方はいませんか？ そんな疑問をお持ちの方は、こちらのバナーサンプルをご覧ください。
http://goo.gl/yKuDRC ← システムフォント
なんかあっさりしすぎですよ…。やはり、キャッチコピーや見出しにはお気に入りのフォントで表現したいですよね。なので、画像編集ソフトでボタンやバナーをせっせと制作してました…。日本語Webフォントが登場するまでは。
■日本語Webフォントサービスの登場
システムフォントはプラットフォームやOSバージョンによってまちまちです。搭載されてるフォントは数書体（ゴシック体と明朝体）なのが一般的です。Mac OS Xにはヒラギノ書体、Windows7や8ではMSゴシックやメイリオなどが標準搭載されてます。
ブラウザはアウトラインフォントが表示できるんだから、筑紫明朝とかUD新ゴNTとかをWebサーバから配信すればいいじゃんと思ってましたが、フォントワークスLETSやMORISAWA PASSPORTではそのような利用方法は使用許諾範囲外です。
では、Webフォント利用OKのフリーフォントをWOFF変換して配信することを考えてみましょう。でも、フォントをフルセット配信すると3～15MBと大きなフォントデータになってしまいます。なぜなら、日本語はAdobe-Japan1-6（Pr6）を例にとると2万3千文字以上あるからです。また、WOFF形式だけだと、IE8ではWebフォント表示できないとかも課題もありますね。
そこで、3年ぐらい前から日本語対応したWebフォントサービスが5社から提供開始されました。FONTPLUS、TypeSquare、デコもじ、アマナイメージズ WEBフォント、もじでぱの5つです。
PV数などに応じて料金が掛かりますが、Webフォントサービスの料金には各フォントメーカーのWebフォント使用許諾料が含まれているので安心して使用できます。また、また、そのページで使用している必要な文字だけを配信するのでフォントデータ容量が軽くすみます。
この記事の総文字数とユニークグリフ数（重複した文字は1文字計算）、Webフォントデータサイズを計算してみました！
総文字数: 2188文字
ユニークグリフ数: 369グリフ
WOFF形式でのデータサイズ: 約50KB ※ロダンNTLGの場合
おおぉ、ひらがなとかが結構重複しているので、368文字しかないのですね。また、このページをWebフォントで作成しても、フォントデータは50KBなので重くないですね。実際にこのページをWebフォントでページ作成してみました。
■Webフォントって何がいいの？（閲覧者視点）
あなたのホームページの訪問者にとっては、文字が画像で作られているか、Webフォントで作られているかを気にして読んでいる人は少ないと思います。なぜなら、そのサイトに欲しい情報があるかや欲しい商品があるかのほうが重要だからです。
でも、こんなことでイライラしたことありませんか？
・お店の名前や住所がコピーできない
・電話番号をタップしても電話がかけられない
・商品名をコピペしたかったけどコピーできなかった
・ナビゲーションの文字や見出しの文字が読みづらい
そうです。このようなケースは、文字は画像文字なのです。
僕は気に入ったフレーズをWebサイトで見かけるとコピペしたくなるのですが、マウスでドラッグしてコピーしようとしたら、「名前と付けて画像を保存」と出てきてコピペできないことが多いんですよね。
あと、僕は出張が多いので、宿泊するホテル名と住所を自宅にメールしようとしたら「あれ～、画像文字じゃん」てことで、紙でメモしてからメールすることも少なくありません。前もって宿泊先を家族に伝えることを忘れているのも問題なんですが…。
Webフォントを利用すれば、デザイン性を損なうことなく、限りなく文字をテキスト化することができます。なので、ユーザーエクスペリエンスの向上につながります。
最後に、自分の会社のWebフォントサービスのPRになってしまいますが、FONTPLUSの無料トライアル版の利用方法を掲載したページを共有しますので、ご興味のある方は、一度、実際に試してみることをおすすめします。
http://goo.gl/jmwlWp
次回は、WebサイトオーナーやWeb制作会社にとっての日本語Webフォントの導入メリットをお送りする予定です。