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