もじもじトーク[38]日本語Webフォント今昔物語・その2 魚のように文字が泳ぐ/関口浩之

投稿:  著者:  読了時間:7分(本文:約3,400文字)



こんにちは。もじもじトークの関口です。前回に引き続き、日本語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、パソコン通信の時代から勤しむ。家電オタク。テニスフリーク。