[4098] 日本語Webフォント 魚のように文字が泳ぐ

投稿:  著者:  読了時間:17分(本文:約8,000文字)



《「竹麦魚」と「細魚」が読めない》

■わが逃走[178]
 おできの話 股間編 の巻
 齋藤 浩

■もじもじトーク[38]
 日本語Webフォント最新事情・その2 魚のように文字が泳ぐ
 関口浩之




━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■わが逃走[178]
おできの話 股間編 の巻

齋藤 浩
http://blog.dgcr.com/mt/dgcr/archives/20160331140200.html
───────────────────────────────────

10代の頃、キンタマと右脚の付け根の間になんかできた。

腰を曲げて覗き込んでみると、うっすらとした点がある。

が、とくに気にならなかったので放置していた。

たしか高校時代だったと思う。

それがだんだん大きくなってきた。

が、とくに痛みもなかったので放置していた。

そのうち、硬くなってきた。コリコリした軟骨のような感じだ。

ここで初めて不可解に思った。

しかし、邪魔にもならないのでやはり放置していた。

そんなことをすっかり忘れていた夏のある日、

股間をボリボリと掻いていたら、そいつがぽろっととれたのだ!

そこで初めてぎょっとした。

そいつがさっきまでついていたであろう場所を覗き込んでみたが、痕跡はまったくない。

傷もなければ血も出ていない。

安物の顕微鏡を持ち出して、取れたモノを観察してみる。

薄皮でコーティングされた直径8ミリほどの黒っぽい物体だ。

形は球体に近く、弾力がある。

謎の寄生生物の卵だったらコワイな。

実は宇宙人に人体実験されたときに埋め込まれた超小型通信機かもしれない。

もちろんそのような経験はないが、UFOに拉致された人はたいてい記憶が消されると、木曜スペシャルかなにかで言ってたことを思い出す。

見ているだけではよくわからんので、切ってみることにした。

デザインナイフの刃先を鋭利な30度タイプに付け替え、謎の黒い物体をスパッと半分に切る。

すると……。

なんと中から毛の塊が出てきたのだ。

断面が不二家ノースキャロライナのごとく、渦を巻いている。

おそらく、生えてきた毛が皮膚の外に顔を出せずに成長した結果なんだと思う。

体育坐りをしているときに自分の膝小僧を観察すると、皮膚の下に細いうぶ毛のようなものが這いつくばっているのを発見したことがあるが、きっとこれはそのスゴイバージョンだ。

こんな形で外界を見ることになろうとは、毛の野郎もさぞかし驚いたことであろう。

それにしても、ああ、なんで捨ててしまったのだろう。

そうなのだ。私は一通り観察した後、そのノースキャロライナ君を捨ててしまったのだ。

ああ、もったいない!

そのうちまたポロっと取れると思っていたのだが、あれから30年くらい経つけどそのような兆候はない。

まあそれはそれで結構なことではあるが。

こんどはもっとじっくり観察したい。

そして写真として記録したい。

そのために必要なのはマクロレンズだ。どうせならライカのレンズがいい。

というわけで値段を調べてみたところ、42万円だそうだ。

もし仮に大金持ちになって、この42万円のレンズを買ったとして、最初の被写体がポロリと取れたおできだったとしたら。

実に雄大な無駄遣い感であることだなあ。


【さいとう・ひろし】saito@tongpoographics.jp
http://tongpoographics.jp/

1969年生まれ。小学生のときYMOの音楽に衝撃をうけ、音楽で彼らを超えられないと悟り、デザイナーをめざす。1999年tong-poo graphics設立。グラフィックデザイナーとして、地道に仕事を続けています。


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

関口浩之
http://blog.dgcr.com/mt/dgcr/archives/20160331140100.html
───────────────────────────────────

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


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
編集後記(03/31)

●中国通のジャーナリスト・福島香織の「SEALDsと東アジア若者デモってなんだ!」を読む(イースト新書、2016)。台湾、香港、中国、そして日本の今の学生運動の状況について、思うことをまとめている。台湾と香港ではみごとな現地取材で読ませるが、SEALDsの奥田愛基には取材を断られており、直接会っていないため周辺からアプローチしている。古谷経衝は、SEALDsに日本を変える力はないと見立てる。奥田にはまだ表現者として語る中身がない。時間があったはずなのに単著が出せないのは、おそらく自分の主張や考えを体系的に一冊にまとめるだけの中身がなかったし、そういう意志もなかったからだ。

そして、共産党や社民党などいまいちパッとしなかった野党に利用され、消費されつくされて、それで終わってしまうだろうと語る。とはいうものの、保守派デモよりは、真剣に国の未来を考えている若者たちであるらしい。むしろ古き良き保守層みたいな愛国心があるようだ。そのくせ、中国や北朝鮮も話し合えば分かる人たちだと錯覚している。中国の覇権主義がさらに台頭して、日本に本当の危機が迫っているような状態になったとき、SEALDsはどう動く。その頃は消滅しているか。台湾ひまわり学連のリーダー林飛帆らは、国民党・林金平派や民進党をうまく利用した。SEALDsは左派野党に利用されるだけだ。

「台湾のひまわり学連も香港の雨傘革命も、若者たちが大人を利用し、政治に無関心、あるいはそう装っていた大人たちを動かしたのに、日本の若者デモは、反安倍政権の主張を拡散したい左派野党や左派知識人たちが、3.11東日本大震災で社会活動や政治への関心に目覚めた若者の、比較的まっすぐな情熱を利用したように見える。デモで一番熱弁を振るっているのが日本共産党委員長という奇妙な風景が登場し、やはり『志位るず』に見えてしまった。その結果、安保法制の是非をより中立的な立場で多角的に考えたい人たちに、なんかSEALDs感じ悪いよね、という感覚を与えてしまった」。君たち脇が甘過ぎるよね。

予想どおり、民進党の結党大会に「来賓」として呼ばれ、利用された奥田。スピーチの内容は凡庸で中味は何もない。「僕らはアホじゃないです。僕らはバカじゃないです。この政治家がウソをついているか、本当のことを言っているか、何となく喋っているのを聞いたら分かります」って言うが(お子様レベルの言い分)、分かってないじゃないか。ソコは民進党の結党大会だよ(笑)。SEALDsよ、この本を読め。君らが日本を変えていく本当の民主政治の力になりうるために、なにが求められているのか、台湾や香港の「若者デモ」と比較しながら考えてみなさい。しっかりしてくれ、わが大学の後輩たちよ。 (柴田)

福島香織「SEALDsと東アジア若者デモってなんだ!」
http://www.amazon.co.jp/exec/obidos/ASIN/4781650627/dgcrcom-22/


●名古屋ウィメンズマラソン続き。専門ショップのおすすめサプリメントは、走る前と長距離なら途中で「VESPA PRO」、エネルギー補給の「メダリスト Energy GEL」「C2MAX PowerGel」、フルマラソンなら35kmあたりの疲れた時に
「ここでジョミ」、去年私も食べた電解質補給用「塩熱サプリ」。よく脚がつる人は「2RUN(ツゥラン)」など。

あ、あと走る前の「ZEN NUTRITION BEFORE トラ」と、ゴール後の「ZEN NUTRITION AFTER ダルマ」もあった。

ハーフ過ぎのバナナが食べられなかったと書いたが、今年は「ういろう」と「かりんとう」は食べられたぞ〜! あとは塩飴やパン。ういろうは「for アスリート」とうたわれている「塩さくら」。ほんのり甘く、塩気がきいていて美味しかったよ〜。

後ろから4つ目のブロックでのスタートで、遅速ギリギリランナー。エイドで食べられないものがあってかわいそうって思うでしょ? でも「バナナ丸ごと持っていってもいいよ〜」という残り福だってあるんだぜ(自虐)。

丸ごとはさすがに遠慮したけど、カットしたのを2つもらったよ。マラソン中のバナナは本当に美味しいっ。

検索したら、ふところ餅・れんこんチップ・チョコ・なめるサボテン・きのこの山などがあった。

きのこの山は去年は軸しか残っていなかったが、今年はそれすら遭遇できず。そういえばスポンジだって看板は見かけるのに、遭遇したことないわ……。 (hammer.mule)

VESPA PRO「体脂肪を燃焼させる効果があると学会で発表されたスズメバチの栄養液を原料」
http://www.amazon.co.jp/exec/obidos/ASIN/B000V2F7GY/dgcrcom-22/

メダリスト Energy GEL「ベトつかず、咀嚼による満足感を得られるやや固めのゼリータイプ」
http://www.amazon.co.jp/exec/obidos/ASIN/B00HWV49O8/dgcrcom-22/

C2MAX PowerGel「他社製品に比べて4倍のナトリウムを含有」
http://www.amazon.co.jp/exec/obidos/ASIN/B00PIBDKQC/dgcrcom-22/

ここでジョミ「回復系スポーツサプリメント」
http://www.amazon.co.jp/exec/obidos/ASIN/B001LQ49OA/dgcrcom-22/

炎熱サプリ「電解質や栄養素を瞬時に摂取できるタブレットタイプ」
http://www.amazon.co.jp/exec/obidos/ASIN/B003ERAWPY/dgcrcom-22/

2RUN(ツゥラン)「脚がつること(=筋肉の異常収縮)の直接の原因であるカルシウムとその調整役であるマグネシウムに注目」
http://www.amazon.co.jp/exec/obidos/ASIN/B00D1R4AT6/dgcrcom-22/

ZEN NUTRITION BEFORE トラ「運動時のみに利用し」「理想的な効率をつくりあげます」
http://www.amazon.co.jp/exec/obidos/ASIN/B0046E74TG/dgcrcom-22/

ZEN NUTRITION AFTER ダルマ「最適な栄養を素早く補給することが効果的なリカバリーとボディデザインに繋がります」
http://www.amazon.co.jp/exec/obidos/ASIN/B0046E8QHU/dgcrcom-22/

青柳ういろうforアスリート 塩さくらと塩しろ
http://www.aoyagiuirou.co.jp/news/athlete_uirou.pdf
青柳総本家のロゴマークは「柳に飛びつくカエル」。カエルがゴールテープを切ってるところ

通販はここ
http://www1.enekoshop.jp/shop/aoyagisouhonke/item_list?category_id=458742