もじもじトーク[40]日本語Webフォント今昔物語・その4 日本語Webフォントは市民権を得たのか?/関口浩之

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



こんにちは。もじもじトークの関口浩之です。今回は『日本語Webフォント今昔物語・その4』最終回です。

●日本語Webフォントは市民権を得たのか?

日本語Webフォントが各社から提供開始されたのが2010年後半なので、今年で約5年になります。

Webフォントに限らず、新しいプラットフォームって「今年が普及元年」と毎年言い続ける傾向がありますよね。例えば、電子書籍、VR、IoT、ロボットなどなど。すでに市民権を得たプラットフォームもありますが。

「今年が普及元年」と毎年言い続けているけど、いつの間に消えてしまうものもありますよね。例えば、3Dテレビ。まだ消えてないですが、消える運命をたどるかもしれません。

さて、日本語Webフォントはどうでしょうか? 答えは「YES」だと思います。




なぜなら、今年になってから、大手企業や有名企業が当たり前のように日本語Webフォントを採用しはじめたからです。「画像文字じゃなくてWebフォントを使ってみようかな。ページ更新の運用も楽になるしね」という感覚で、普通に導入するケースが増えてきました。

フォトショップ/イラストレータで画像文字を作るのが従来の絵の具としたら、Webフォントは「新しい絵の具」で、筆はCSS(Cascading Style Sheets)を使うというイメージです。

日本語Webフォントを導入している数多くのサイトの中から、僕のおすすめの企業サイトをご紹介します。

東京糸井重里事務所 吉本隆明氏の183講演
http://www.1101.com/yoshimoto_voice/

電通報
http://dentsu-ho.com/

博報堂 生活定点
http://seikatsusoken.jp/teiten2014/

京都造形芸術大学 通信教育部
http://www.kyoto-art.ac.jp/t/

日本ケロッグ
http://www.kelloggs.jp/

ガトーフェスタ ハラダ
http://shop.gateaufesta-harada.com/shop/

小田原市
http://www.city.odawara.kanagawa.jp/

●市民権が得られるまで

どの導入事例サイトも、表示が遅いと感じることはなかったと思います。

実は2013年あたりまでは、日本語Webフォントを導入しているページの表示時間はかなり遅かったのです。システムフォントが一度表示されて、その後一呼吸してから、Webフォントが出てくる感じでした。

「あっ、やっぱり、日本語は1万文字以上あるし、早く表示できるわけないよね……」との印象を持った方が多かったと思います。

そういう時代があったため、アーリーアダプターの皆さんは、そのときに悪いイメージを持ってしまったので、速くなったことを知らない方もまだ多いかもしれません。

ここ数年で、表示速度が大幅に改善され、画像文字を表示させるのと同じか、それよりも早くなるケースもあります。

「このスピードならWebサイトリニューアルの時に、画像文字はやめてWebフォントにしよう」という企業が増えてきました。

もう一点、「文字詰め」に対応したサービスが出てきたことも、市民権を得た大きな理由だと思います。

文字詰めすると、Webサイトの印象がどう変わるのが、3パターンのサンプルを作ってみました。違いをじっくり見比べてみてください。

▽文字詰め適用なし
http://goo.gl/4HDK8t

▽ページ全体に文字詰め適用
http://goo.gl/3TQAtC

▽見出しだけ文字詰め適用
http://goo.gl/jAetaj

最初の「文字詰め適用なし」の見出しは、括弧などの約物が空きすぎて読みづらいと思いませんか?

二番目の「ページ全体に文字詰め適用」だと、本文の句読点が詰まりすぎて読みづらいですよね。読みやすいのは三番目の「見出しだけ文字詰め適用」だと思います。

ただし、三番目のサンプルを作るのに難しいプログラミングが必要なら、文字詰め機能を使用したくても諦める人もでてくると思います。

実は、導入方法はすごく簡単でシンプルなんです。

font-familyに名前の後に、{pm}を付け加えるだけです!
例) font-family: "秀英初号明朝{pm}";

そうすると、Webフォント配信するときにX軸方向の表示位置を調整して表示しているのです。それぞれのフォントが持っている、プロポーショナルメトリクスという値を解釈して、読みやすい文字配列にしているのです。

もし更に詰めたいという場合は、letter-spacing: -0.1em; とか指定すればいいのです。逆にゆったり空けたい場合は、letter-spacing: 0.1em; とか指定してください。

なお、日本語Webフォントサービスを提供している会社は複数社あります。表示速度の違い、文字詰めできるできないの違い、料金の違いなどがありますので、実際に導入する際は各社サービスをお確かめください。

●おすすめのフォント関連情報

フォントに関する情報で、最近気になったサイトをご紹介します。

「CSS Nite」セミナーを10年以上にわたり主宰しているスイッチ鷹野雅弘さんのスライド「2015年のフォント総括」です。

http://goo.gl/Ud7ydi

このスライドはなんど134ページあります。非常に参考になる情報満載です。デザイナーに限らず、すべての方に読んでいただきたいスライドです。

「フォント」はWebデザインの必須科目だと思います。そしてこの資料は、必修科目「フォント」の最新教科書の位置付けになるかもしれませんね。

●フォントに関するセミナー情報

僕が主宰しているセミナーの案内をさせてください。東新宿での開催ですが、ご興味のある方、ぜひご参加ください。

FONTPLUS DAYセミナー Vol.3 [ざっくばらんなデザインのお話]
http://fontplus.connpass.com/event/31249/

第3回FONTPLUS DAYのテーマは『ざっくばらんなデザインのお話』です。今回のゲストスピーカーは、書体設計家の片岡朗さんとアートディレクターの副田高行さんです。

誰もが毎日のように目にしている「丸明オールド」。片岡さんが5年の歳月を掛けて制作した書体なのです。

この書体、2000年に発表されてから16年経った今でも使われ続けています。特徴がある書体なのにあきがこない書体なのです。

丸明オールド以外にも山本庵、佑字、芯など、砧書体制作所の素敵な書体も紹介していただきます。

ところで、吉永小百合さんが登場するSHARPのCM見たことありますよね。キャッチコピーと映像が素敵に融合した広告です。この広告、副田さんがプロデュースした広告のひとつです。1980年代のアナログ時代から何十年もの間、素敵な広告を世の中に次々に送り続けています。

2000年2月に開始されたサントリー新モルツの広告キャンペーン(新聞15段広告)で丸明オールドを採用したのが副田さんなのです。丸明が世の中にデビュー頃の誕生秘話もお二人からお話いただきます。

片岡さんと副田さんは、写植や手書きデザインがまだ主流だった1980年代、広告エージェンシーで一緒に仕事をしていたそうです。アナログデザインとデジタルデザインにおける相違点や共通点、デザインの本質についても熱く語っていただきます。


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

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

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

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