Main menu

Column コラム

Webフォントで手に入れる新たな表現力

Shinya Kunihiro

クリエイティブディレクター
国広 信哉

Webフォントで手に入れる新たな表現力

早速ですがみなさんはフォントが好きですか?
サイトを回遊していていい文字の使われ方を見るとついつい興奮してしまうディレクター国広です。

これまでWebデザイン上、フォントに表現力をもたせるためにはGIFやJPEGなど「画像化」された文字を作成する必要がありました。しかしグラフィックソフトで切り出して、htmlに挿入し、そしてaltを設定するなど、表現力と引き換えに多くの時間を割いていたのも事実。(ユーザ側からもコピペできない、拡大縮小できない、など不便な側面も多かったはず)。その問題を解決する技術として徐々に導入されてきているのがWebフォントなのです。

Webフォント自体は目新しい技術ではありません。海外では、Webフォント配信サービスを利用したサイト構築もかなり一般的になってきています。ただ日本では、今まで文字容量や著作権の問題からなかなかWebフォントが普及していなかったのが現実。(特に日本語のWebフォント配信サービスが使用されるケースはかなり少ない)。それが今、各社が日本語Webフォント配信サービスを本格的に開始し、徐々に盛り上がりを見せ始めています。

そんな時代の流れも受け、8月3日に「紙からWebへ。デザイン領域を拡げる2つの鍵」というタイトルでモリサワさん、ミックスネットワークさんと一緒にセミナー登壇する機会もあったので、「日本語Webフォント」、特に「日本語Webフォント配信サービス」を導入するメリットや可能性を制作者視点で少し書いてみます。

Webタイポグラフィの可能性について熱弁中

今さら聞けない!? Webフォントの基礎知識

まずは少しおさらい。Webフォントはサイト上で制作者が意図したフォントを表示できる仕組みです。今まではユーザ環境(PC)が持つデバイスフォントをブラウザ上で表示していたのに対し、Webフォントを使用すると、サーバ上に置いたフォントを指定して呼び出すことで制作者の意図したフォントを表示することができます。さらにWebフォント配信サービスを使えば、配信されている数多くのフォントをサイトのイメージに合わせてほぼ自由に使うことができるのです。

海外ではTypeKitやfonts.comなど各社がせめぎあって上質なWebフォントを配信しています。このサービスを使えば各フォント単位で購入する手間が省けるのはもちろん、豊富なフォントを利用してサイトのロゴをOmnes ProからMuseo slabへ、そしてLearning Curve Dashedへと移りゆく季節に合わせて変えるといった表現も可能です。(実際ドイツのデザイン雑誌Slantedのサイトでは、月一回使用されているWebフォントを一新し、サイトイメージのリフレッシュをはかることに成功しています)

このフォント配信サービスが今、日本でいよいよ熱気を帯び始めており、ネットワークやデバイスの環境も整い手軽に導入できる時代に突入してきているというわけです。代表的なものがモリサワさんのTypeSquareやソフトバンクテクノロジーさんのフォントプラス。印刷でしか再現できなかったあのフォントも、Webサイトで表現することが徐々にできるようになってきています。

上段左からTypeSquare、フォントプラス、下段左からデコもじ、アマナWebフォント

日本語Webフォントを導入したくなる3つの理由

ここで、日本語Webフォントを導入する魅力を制作側の視点で書いてみます。
制作側からすると以下の3点が大きな魅力ではないかと思っています。

  • Webテキストの特性と表現力を併せ持っている
  • マルチデバイス対応への柔軟性
  • 生産性の向上

まずは「Webテキストの特性と表現力の両立」
WebテキストはHTMLテキストと画像テキストの2つに大別できます。HTMLテキストの特性と言えば「検索優位性」「更新のし易さ」「ユーザビリティ」。画像テキストの特性と言えば「様々なフォントを使える」「装飾が自由」「微調整可」…。この2つのいいところを組み合わせたのがWebフォントと言えるかと思います。モリサワさんの見出ゴやリュウミンを利用しながら検索性も担保できる。SEO対策の視点から見てもかなり有効ではないでしょうか。

続いて「マルチデバイス対応への柔軟性」
みなさんPCからタブレット、そしてスマートフォンなどたくさんのガジェットをお持ちではないかと思います。Webフォントを使えば、それらの各デバイスに合わせて改行してくれたり、文字サイズの切り替えを行ってくれます。レスポンシブデザインに代表される新しいWebスタンダードに対しても非常に親和性が高いと言えるのではないでしょうか。

そして最後に「生産性の向上」
サイト上にいくつも含まれる見出しやタイトルの画像をいちいち作る必要がなく、修正対応もしやすいため、工数や制作コストの大幅な削減が見込めます。日々の業務の効率化によって余裕ができたスケジュールでクリエイティブ部分をブラッシュアップできる、これも大きな魅力のひとつです。

今すぐ導入すべき!?日本語Webフォント導入を検討すべき7つのチェック項目

どういうWebプロジェクトの場合に日本語Webフォントを導入するのが良いのか。例えばこういう簡易チェックリストを作ってみました。

1.世界観のある、デザイン重視のWebサイトを構築したい

2.更新頻度が高い。CMSを使っている

3.プロジェクトに先進性を求めている

4.印刷物等、他のメディアとも連動する

5.現在のWebサイトで、画像テキストを多用している

6.マルチデバイス対応をする

7.表示速度について、そこまでシビアな要求は無い


これらの項目に2〜3つ当てはまる場合は、プロジェクトに導入を検討しても良いのではと考えています。

実際に弊社で制作したWebサイト、

  • フェスティバル/トーキョー⇒1・4・6
  • 近日公開予定(!)の弊社サイト新loftwork.jp⇒2・3・6
  • と、3つ程度当てはまっています。

    例えば更新頻度が高く表現力を要求されるアート系のWebマガジンや、ブランドメッセージとしてクリエイティブや革新性が必要なLPなどに有効ではないでしょうか。まずはある程度期間が決まっているキャンペーンサイトなどで実験的に導入してみる、というのもひとつの方法かもしれません。

    しかし、いざ日本語Webフォントを導入するとなるとやや腰が重くなるのも事実。先日もクライアントに提案してみたところこういう質問が返ってきました。

「重いんじゃないの?」

Webフォントには「ダイナミック・サブセッティング」という技術があります。確かに日本語フォントはひらがな、カタカナ、漢字と、アルファベットと違って非常に多くの種類を持ちます。そして容量についてもアルファベットが1バイトに対して日本語は2バイト程度となり、これが今まで導入されにくかった大きな障壁の一つになっていまました。しかしダイナミック・サブセッティングを使えば、サイトで使われている文字だけを抽出してダウンロードするため、余計な重さや表示待ち時間を最適化できるという強みを持っています。

「どんな環境でも表示できるの?」

表示環境については、モダンブラウザならほぼ対応していると考えてOKかと思います。しかしユーザ側でJavascriptをオフにしていたり、ブラウザ側でフォント設定を無効にしていたりすると表示されないケースもあります。(詳しくはこちらのてっく煮ブログさんの記事がとても分かり易く解説してくれています。)しかしWebフォントが表示されなくてもデバイスフォントでの表示は可能なので、サイトコンテンツは理解できますし、大きなリスクは無いかと考えています。

「印刷はどうなるの?」

印刷対応についても画面どおりに印刷される環境なら問題なく印刷でできます。※場合によって一部ブラウザでWebフォント部分がデフォルトのデバイスフォントで表示される、などもあるようですが…。

「事例はあるの?」

日本語Webフォントの導入事例については、モリサワさんのTypeSquare導入事例に少し掲載されているもののほか、キャンペーンサイトやブログなどで少しずつ見かけるようになりました。ただ豊富に事例があるわけではなく実際には「これから」かと思います。しかし言い換えればこれは「チャンス」なのではないかなと個人的には思っています。サイト全てに導入する必要は無く、一部コンテンツで利用してみるだけでも(例えばアパレルのスマートフォン向け商品詳細ページで表現力を保ちつつ読ませたい時など)まずは有効ではないでしょうか。

日本語Webフォントのこれから

いかがだったでしょうか。既に海外ではアイコンをWebフォントで表現するためのサービス(FontAwesomeSymbolSet)や動的な数字をオリジナルフォントで表現するなどの試み(Nike「BetterWorld」等)も始まってきています。

Chromeの"WhatFont"というプラグインを使えば何のWebフォントを使っているか配信サービスまで判別してくれる

確かにWebフォントを表示する際の「ちらつき」現象があったり等、対応ブラウザの範囲によっては検証が大変だったり、まだ完璧な状態ではないかと言えるかもしれません。制作側としては手当たり次第に導入するのが良しではなく、サイトの特徴や性質に合わせて、引き出しのひとつとして、的確な提案をできることが重要です。

ネットワークやデバイスの環境が整備され、サイトコンテンツの中身が重要視される時代。これからどんどん加速していくだろう日本語Webフォント事情から目が離せませんね!!

コメント

blog comments powered by Disqus