もじもじトーク[39]日本語Webフォント今昔物語・その3 自分のTwitter IDを入力してみて!/関口浩之

投稿:  著者:  読了時間:6分(本文:約2,900文字)



こんにちは。もじもじトークの関口浩之です。

春らしい陽気になりましたね。みなさん、体調いかがですか? 僕はここ5日間、熱が37〜39度の間を行ったりきたりを続けています。

病院で検査したところ、インフルエンザではなかったのですが、熱がしばらく続くウィルス性の風邪のようです。流行っているとのことでした。みなさんもお気をつけください。

今年は年初からずっとスケジュールがたてこんでいました。週末を含めて4月前半まで、ほとんど休日が取れずで心身ともに緊張した状態が続いていたような気がします。風邪気味の時にもどうにか持ち堪えていたんです。

ところが、久しぶりに土日の休みがとれてゆっくりできそうになったのと、今週月曜から水曜まで社内会議以外のアポイントがほとんどない状態になっていることに気づいたら、急激に体調を崩しました。

かかりつけの病院の先生いわく「体が悲鳴をあげてるんです。このようなサインが出たら忙しくても体を休めることが必要。このまま数か月忙しい状態が続いたら、もっとひどい病気になっていたと思うよ。今、風邪引いてラッキーなんだよ」と言われました。




ほんとそう思いました。

今週前半はスケジュールに余裕があったので、やり残した仕事を一気に片付けるつもりでした。そのことを頭から一切捨てて、この二日間は会社休んでずっと寝てました。熱はまだ少しありますがだいぶ楽になりました。

なにも考えずに二日間ずっと寝てるのも、すごく贅沢なことだなと思いました。熱があって両方の鼻が詰まっているので安静が一番ですけど。

普段、体調不良で休みをとってもメール対応はするんですが、今回はずっと寝てました。でも、大事なクライアントから携帯電話に数回電話あったので、寝ながらちゃんと対応しました。そのあとすぐに寝ました……。

4月は、学校では新学期、会社では新年度でスタートする季節ではありますが、一年間の疲れも出るときだと思います。体調が悪いときは、無理せず、まずはかかりつけ医に相談するのがいいと思いました。

さて、今回は『日本語Webフォント今昔物語・その3』です。

●自分のTwitter IDを入力してみて!

こちらのWebサイトで、ご自分のTwitter IDを入力してみてください。
http://goo.gl/I19o1f

Twitter ID持ってない人は、自分の好きな有名人のTwitter IDを入れてもいいですよ! @は付けずに入力してください。

ねっ、楽しいでしょ!!

ずっと読んでいたくなります。

「私って、こんなくだらないこと、いつもつぶやいているのねーー」と笑いながら見ている人もいると思いますが…(笑)

日本語Webフォントを活用したこの事例、5年前の作品「Motion Typography」です。

どうやって、こんな楽しいコンテンツを実現させているのかを簡単に解説しま
すね。

1. Twitter APIを利用して、入力したアカウントのタイムラインを数十個取得する。

2. タイムラインを形態素分析して、要素ごとに文字サイズを変えたり、フォント名を変えたりする。

3. Webフォントサーバーに必要な文字だけ(指定されたfont-familyごとに)、取りに行く。

4. 形態素分析された文字がフェードイン・フェードアウトしたり、3D回転したりします。※閲覧デバイスやブラウザにより動きが異なります。

ブラウザの右下に書体名が表示されるので、書体好きな人にとっては「おっ、これはロダンだね」とか、「これはモトヤステンシルアポロですね」とか、書体のお勉強を楽しむこともできます。

Twitterタイムラインも、テキストに動きと書体の変化が加わることで、楽しさが10倍ぐらいになりますよねーー。

この作品を作ったエンジニアさん、何がすごいかっていうと形態素解析(けいたいそかいせき)を取り入れたことだと思います。

形態素分析って「言語で意味を持つ最小単位に分析し、その要素を品詞判定等をする」ということです。日々、みなさんが利用している「なか漢字変換」(日本語文字入力)は、まさに形態素分析の応用技術といえます。

この作品をさらに発展させて、タインラインが楽しい内容だったら楽しそうな書体、悲しい内容だったら悲しそうな書体にすることもできそうです。

このように、文字を動きで表現したアニメーションを「モーションタイポグラフィ」と言います。

海外のアルファベット圏のほうがモーションタイポグラフィの作品が多いような気がします。表意文字である日本語のほうが適していると思いましたが、リアルすぎて難しいのかもしれませんね(素人目線です)。

●インフォグラフィックへの活用

もう一つ、5年間の日本語Webフォントを活用した導入事例で、記憶に残っている作品をご紹介します。これです。ジャーン!
http://goo.gl/92ou4O

これは作品「タイポマップ」、気に入っています!

主要国の面積の大きさに合わせて、文字サイズを変えて表現しています。漢字一文字で各国を表現できる日本語って素敵ですよね。アルファベットでは一文字で国を表すことは無理ですからね。

アメリカ合衆国の「米」をクリックすると、面積/人口/GDPなどが表示されます。※情報が古いままですけど。

画面を拡大すると小さい文字(面積が小さい)も出てきます。例えば、スペインを示す「西」の左下の小さい文字「葡」はポルトガルです。

さらに、メニューバーを操作することで[漢字一文字]から[日本語/正式]や[現地語]に切り替えたりすることができます。

文字サイズが[面積]で比較表示されてましたが、[人口]や[GDP]などに変更することもできます。

今回ご紹介した事例は、5年前に制作されたものですが古さを感じさせません。表意文字である日本語をうまく活用して、情報が直感的に理解できるインフォグラフィックや、見てる人を惹きつけるモーションタイポグラフィがもっともっと増えるといいなぁと思います。僕はそのセンスはないですけど。

前回と今回は、日本語Webフォントの黎明期における僕の大好きな事例をいつくか紹介しました。次回は少し新しめのおすすめ事例を紹介します。


【せきぐち・ひろゆき】sekiguchi115@gmail.com
Webフォント エバンジェリスト
http://fontplus.jp/

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

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

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