もじもじトーク［02］Webフォント基本講座（1）
── 関口浩之 ──

●システムフォントと画像文字、そして、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サーバーに置いて使える形式に変換して利用することを考えてみましょう。でも、フォントをフルセット配信すると3〜15MBと大きなフォントデータになってしまいますね。なぜなら、日本語はAdobe-Japan1-6（Pr6）を例にとると2万3千文字以上あるからです。

また、Webフォントフォーマットは何種類もあって（WOFF/EOT/SVG/OFT/TTF）、ブラウザごとにデータを出し分けしないといけないのです。自分でWebフォント配信する仕組みを作るのは、かなりしんどいですね。

そこで、3年ぐらい前から日本語対応したWebフォントサービスが5社から提供開始され始めました。FONTPLUS、TypeSquare、デコもじ、アマナイメージズ WEBフォント、もじでぱの5つです。

PV数などに応じて料金が掛かりますが、Webフォントサービスの料金には各フォントメーカーのWebフォント使用許諾料が含まれているので、安心して使用できます。また、そのページで使用している必要な文字だけを配信するので、フォントデータ容量が軽くすみます。

この記事の総文字数とユニー文字数（重複文字は1文字で計算）、Webフォントデータサイズを計算してみました！
総文字数：2,568文字
ユニーク文字数：397文字
配信データサイズ：約50KB　※ロダンNTLGのWOFF形式

おおぉ、ひらがなとかは結構重複しているので397文字しかないのですね。このページをWebフォントで作成してみました。書体はロダンNTLGです。実際にChrome開発ツールなどでダウンロード容量を確かめてみてください。たしかに約50KBですよね......。重くない......。
< http://goo.gl/5yeMB6
>

注：編集部が原稿整理しているので、まったく同一ではありません

●Webフォントって何がいいの？（閲覧者視点）

あなたのホームページの訪問者にとっては、文字が画像で作られているか、Webフォントで作られているかを気にして読んでいる人は少ないと思います。なぜなら、そのサイトに欲しい情報があるかないかのほうが重要だからです。

でも、こんなことでイライラしたことありませんか？
・お店の名前や住所がコピーできない
・電話番号をタップしても電話がかけられない
・商品名をコピペしたかったけどコピーできなかった
・ナビゲーションの文字や見出しの文字が読みづらい

そうです。このようなケースは、文字は画像文字なのです。

僕は気に入ったフレーズをWebサイトで見かけるとコピペしたくなるのですが、マウスでドラッグしてコピーしようとしたら、「名前を付けて画像を保存」と出てきてコピペできないことが多いんですよね。

あと、僕は出張が多いので、宿泊するホテル名と住所を自宅にメールしようとしたら「あれ〜、画像文字じゃん」てことで、紙でメモしてからメールすることも少なくありません。前もって宿泊先を家族に伝えることを忘れているのも問題なんですが......。

Webフォントを利用すれば、デザイン性を損なうことなく、文字をテキスト化することができます。なので、ユーザーエクスペリエンスの向上につながります。

最後に、自分の会社のWebフォントサービスのPRになってしまいますが、FONTPLUSの無料トライアル版の利用方法ページを記載しますので、ご興味のある方は、一度、実際に試してみることをおすすめします。
< http://goo.gl/jmwlWp
>

次回は、WebサイトオーナーやWeb制作会社にとっての日本語Webフォントの導入メリットをお送りする予定です。

【せきぐち・ひろゆき】sekiguchi115@gmail.com

Webフォント エバンジェリスト
< http://fontplus.jp/
>

1960年生まれ。群馬県桐生市出身。電子機器メーカーにて日本語DTPシステムやプリンタ、プロッタの仕事に10年間従事した後、1995年にインターネット関連企業へ転じる。1996年、大手インターネット検索サービスの立ち上げプロジェクトのコンテンツプロデューサを担当。

その後、ECサイトのシステム構築やコンサルタント、インターネット決済事業の立ち上げプロジェクトなどに従事。現在は、日本語Webフォントサービス「FONTPLUS（フォントプラス）」の普及のため、日本全国を飛び回っている。

小さい頃から電子機器やオーディオの組み立て（真空管やトランジスタの時代から）や天体観測などが大好き。パソコンは漢字トークやMS-DOS、パソコン通信の時代から勤しむ。家電オタク。テニスフリーク。