こんにちは。もじもじトークの関口です。前回に引き続き、日本語Webフォン
トのお話です。
※「日本語Webフォント最新事情」というタイトルを変更して、
「日本語Webフォント今昔物語」と致します。
「日本語Webフォントって何？」と思う方も多いと思いますので、まずはこちらのWebサイトをご覧ください。じゃーん！ 素敵でしょ。
http://goo.gl/5aXRyd
●水族館へようこそ
僕はこのWebサイトをこう名付けました。
「文字が泳ぐ。本当のお魚のように」
「ぜんぶ読めるかな？ 海のお魚あれこれ」
すごいよねー。まるで、生きているお魚が泳いでいるような感覚になります。このサイト、お気に入りなので、いままでに百回以上見たことがあります。なので、文字というよりも魚を見る感覚で捉えているかもしれません。
実はこのサイト、4年前に公開されましたコンテンツなのです。
制作者：ニフティ株式会社 クリエイティブデザイン部
作品名：SeeSea
作品概要：ウェブフォントを用いた文字の魚や貝などが海を泳いでいます。泳いでいる生き物をクリックすると、その画像と紹介文が読めます。
5年前に開催した『Web Designing ウェブフォントデザインアワード2011』の最優秀作品です。
この作品をはじめて見たとき、『AQUAZONE 1.0 Mac版』を思い出しました。AQUAZONEは水族館でなく水槽ですけどね。パソコンの画面の中でスクリーンセーバー的な動きをするところが似てますよね。
●33種類ある書体当てゲーム
「このWebページは日本語Webフォントをバリバリに駆使してるね〜。すごい！」とか「JavaScriptで文字の長体、平体をうまく表現してますよね〜。すっげー！」という意見をよく耳にしました。
それもそうなんですが、僕は、それぞれの魚の性格に合わせて、書体の見事な選択、魚が群れている様子を文字を重ねてうまく表現していること、魚の動く速度に変化を与えているところ、などが気に入っています。
表意文字である日本語の特徴をうまく表現している作品ですね。
いくつか、楽しみ方の例をあげてみます。
◎「秋刀魚」の大群をクリックしてみよう
秋刀魚（さんま）は、シュッと細長い魚なので、文字のエレメントがシュッとなっている「Popフューリ」という書体を採用しています。
ご存知ない方もいると思うので、書体名の確認方法を解説します。
1. パソコンのブラウザFirefoxを例にして説明します。［ニフティ seesea］で検索すると、［SeeSea - nifty］が出てくるのでアクセスしましょう。
2. 少しだけ下方向にスクロールして、しばらく待つと、左のほうから秋刀魚の大群が現れます。
3. 秋刀魚の文字をクリックすると、魚の詳細説明のウィンドウが出てきます。
4. 「さんま」または「秋刀魚」をつまんで右クリックして、［要素の調査］を選択します。
（Chromeは［検証］、Safari［要素の詳細を表示］、IE［要素の検査］でfont-familyが見られます）
5. ブラウザの下部に開発ツールが現れます。［フォント］という項目に書体名がでてきます。英語表記の書体名の場合は、検索すれば、日本語の書体名を調べることができます。
6. ［ルール］を見ると、CSSの記述も出てきます。font-family: PopFuryStd-B;
7. 開発ツールの右上角の［×］マークをクリックすれば、通常のブラウザ表示に戻ります。
この方法で33種類ある書体当てゲームを楽しむことができます。たとえば、「鸚鵡貝」はモトヤバーチ、「鯨」は古今髭、「鮫」はコミックレゲエ、「飛び魚」は白雨という風に。
全部の書体名が当てることができたら、フォントオタクであること、間違いなしです。
◎この漢字全部よねるかな、家族みんなで楽しもう
このWebコンテンツ、上下左右にスクロールすると、さまざまな魚や海の生き物が現れます。
家族みんなで「この漢字、読めるかな？」ゲームで楽しむこともできます。文字をクリックすれば、その魚の写真、説明、由来などがでてくるので勉強になります。イーラーニングコンテンツとしても充実しています。
「烏賊」「鰈」「鮃」「河豚」は読める人は多いと思いますが、「竹麦魚」と「細魚」は上級問題だと思います。僕は読めませんでした。
◎この5年間の技術進化
このページ内で33種類の日本語Webフォントを使用しています。回線の速度が速ければ一瞬でダウンロードが完了するはずです。
実は数年前までは33書体、全部ダウンロード完了するまでに10秒以上掛かっていました。
日本語は1書体1万文字以上で構成されているので、外部サーバからフルセットをダウンロードすると、1書体あたり3〜10Mバイトの容量があるので、その方式は実用的ではありません。
そこで、必要な文字だけ取得する、ダイナミックサブセッティングという方式を採用しています。
当初から必要な文字だけ取得するこの方式でしたが、33種類のフォントファイルを外部サーバから取得するのに、当時は結構時間が掛かっていたのです。
でも、この5年間で改良がどんどん進み、33種類のフォント取得を一瞬でできる高速配信が実現したのです。
●ウェブフォントデザインアワード2011
今から約5年前に、フォントメーカー3社（フォントワークス・イワタ・モトヤ）と業務提携して、日本語Webフォントサービス『FONTPLUS』が発表されたのが2011年7月でした。
現在は10社のフォントメーカーと提携して、800書体以上使えるサービスになりました。
海外では5年前、『Google Web Fonts』や『Fonts.com』などのWebフォントサービスが流行しはじめました。でも、日本語に対応したWebフォントって、存在すら知られてなかった時代でした。
そこで、日本語に対応したWebフォントの時代が来ましたよ〜っノリで花火を上げて、日本語Webフォントの市場を作ろうと思ったわけです。
当時、Webデザインの先端トレンドを積極的に取り上げていたマイナビ『Web Designing』馬場編集長に相談したところ、どんどん企画がふくらんで、立派なコンテストが開催できました。
アーリーアダプターの多くの方々から応募いただき、今回紹介したSeeSeaが最優秀賞を受賞したのでした。
最優秀賞発表：
http://pr.fontplus.jp/2011/winner/page.html
コンテスト概要：
http://pr.fontplus.jp/
そのときの審査員は、HTML5/CSSの技術スペシャリストから、書体デザイナー、ブックデザイナーまで、非常に幅のあるメンバー構成でしたが、最優秀賞は満場一致で決まりました。
祖父江慎さんがこんな発言していました。「僕はHTMLとかCSSとか全く分からないけど、Webの世界、なんかすっごく楽しいね〜。僕もHTMLとか勉強しちゃおうかなぁ〜。でもたぶんやらないと思う…（会場全員爆笑）」楽しい審査会でした。
コンテスト最終審査会:
http://pr.fontplus.jp/2011/winner/
今回、日本語Webフォントがテーマのお話ですが、「書体が変わるとサイトの印象が変わるねー」とか、書体の歴史をひも解きながら「フォントって楽しいよねー」って感じの軽いノリのシリーズ企画にしたいと思います。
Web制作に関わる側の視点だけでなく、Webサイトを見る側の視点で、日本語Webフォント導入事例を時系列で取り上げて解説する予定です。
【せきぐち・ひろゆき】sekiguchi115@gmail.com
Webフォント エバンジェリスト
http://fontplus.jp/
1960年生まれ。群馬県桐生市出身。電子機器メーカーにて日本語DTPシステムやプリンタ、プロッタの仕事に10年間従事した後、1995年にインターネット関連企業へ転じる。1996年、大手インターネット検索サービスの立ち上げプロジェクトのコンテンツプロデューサを担当。
その後、ECサイトのシステム構築やコンサルタント、インターネット決済事業の立ち上げプロジェクトなどに従事。現在は、日本語Webフォントサービス「FONTPLUS（フォントプラス）」の普及のため、日本全国を飛び回っている。
小さい頃から電子機器やオーディオの組み立て（真空管やトランジスタの時代から）や天体観測などが大好き。パソコンは漢字トークやMS-DOS、パソコン通信の時代から勤しむ。家電オタク。テニスフリーク。