モリサワの「新ゴ」フォントがWebでCMSと連携、クラウドフォントで拡がるWebデザインの可能性とは

紙のデザインでは、さまざまなフォントを駆使してきました。しかし、日本語のWebサイトでフォントにこだわるためには、画像を使うしかない。

Webデザインにおいて、「日本語フォントの本文や見出しについては妥協せざるを得なかった」という、Webデザイン・制作の課題を解決するにはどうすればいいのか。その答えを示すべく、フォントメーカーのモリサワと、CMSベンダーのミックスネットワークは、セミナー「紙からWebへ。デザイン領域を拡げる2つの鍵。」を7月23日に開催した。

2つの鍵、クラウドフォントの普及と、高度なプログラミングスキルを必要としないCMS導入によって、Webデザインの世界はどう進化するのか。Web制作会社であるロフトワーク協力のもと、各社の視点で語られたセミナーの模様をレポートする。

• セッション1：クラウドフォントで手に入れる新たな表現力
• セッション2：デザイナーだからこそ活用したいCMSの魅力と実力
• パネルディスカッション：クラウドフォントとCMSでWebデザインの未来を拓く

2年後ではもう遅い、クラウドフォント活用のチェックリスト

株式会社ロフトワーク
クリエイティブディレクター
濱田 真一氏

フォントを活用したデザインがテーマの本セミナーには、紙媒体をメインとするグラフィックデザイナーやWebデザイナーが参加した。セミナーではまず、ロフトワークの濱田真一氏が「クラウドフォントで手に入れる新たな表現力」という題目で講演。

Webデザイナー歴8年、現在はディレクターとして活躍する濱田氏が、「クラウドフォントとは何か」といった基本から、実際の顧客企業への提案事例まで説明した。

まず、クラウドフォント（Webフォント）とは、インターネットを介してフォントを配信し、ブラウザのWebページ表示に使う仕組みだ。ユーザーのデバイス（PCやスマートフォン）にフォントが搭載されていなくても、制作者側が指定したフォントを表示できるのが特徴。

一般的に、Webデザインで特殊なフォントを利用する場合は、テキストを画像化するものだが、クラウドフォントを使うと「たとえば、見出しには立体的な文字を使い、リードは太めの丸ゴシック、本文は読みやすい中ゴシックにするといった表現が可能になる」と濱田氏は説明する。

フォントには伝統的なもの、現代的なもの、カジュアル、上品、力強いものや優しいものなど、いろいろなものがあります。紙のデザインではこれらを駆使していましたが、Webでは画像にするしかなかった。クラウドフォントは、フォントを提供者（サーバー）からダウンロードしてくるので、環境による見え方の差を少なくできます。これがクラウドフォントの力です。

クラウドフォントの基本的な仕組み。ユーザーのPCに搭載されたフォントではなく、クラウド上からダウンロードした指定のフォントを使って文字を表示する。

実はクラウドフォント自体は新しい技術ではない。しかし、記号や特殊文字を入れても250文字しかない欧文書体と異なり、日本語では数千から一万数千もの文字をフォントとして用意しなければならない。そのため、著作権フリーのフォントが少なく、フォントファイルのデータサイズも大きくなるという問題があった。だが、最近ではモリサワの「TypeSquare」をはじめ、これらの問題を解決する商用フォントのクラウドフォントとしての配信サービスが増えてきているため、「今後、クラウドフォントが普及しないということはない」と濱田氏は強調する。

では、Webサイト制作者として、クラウドフォントを採用するメリットはどこにあるのか。濱田氏は次の3点を挙げる。

1. テキストデータの強みを最大限に発揮

   1点目は、テキストデータの強みを最大限生かせること。クラウドフォントを用いれば、画像データを用いなくても多彩なフォントを利用したデザイン表現が可能だ。ドロップシャドウ、グラデーションといった文字装飾、字間の調整もCSSで実現できる。つまり今まで画像で作っていた見出しなどを、テキストに置き換えられる。これにより、検索性が向上し、ユーザビリティ向上（コピー＆ペーストが可能になるなど）、アクセシビリティ向上にもつなげられる。

2. マルチデバイス対応に適している

   2点目は、デバイスに依存しないため、マルチデバイスへ対応しやすいことだ。たとえば、画面サイズにマッチした表示にするため、PC用、スマホ用と、見出し画像を別々に用意しているケースも多いだろう。クラウドフォントでは、前述の通りフォント表示はデバイスに依存しないため、デバイスに合わせた文字サイズの切り替えが容易になる。

3. 画像データの制作点数を削減

   3点目は、前述の2つのメリットとも関連するが、画像データの制作点数を劇的に減らすことができ、生産性の大きな向上が期待できる点だ。特にデザイン性の高い、見出しやキャッチコピーに画像を多用しているサイトで大きな効果が期待できる。

こうしたメリットの実例として、濱田氏は実際にクラウドフォントを活用して制作した、国際舞台芸術フェスティバル「フェスティバル/トーキョー」公式サイトのコンテンツを紹介。約200個の見出し画像を、クラウドフォント採用によってゼロにし、作業工程の大幅圧縮しながらスマホ対応を同時に実現したことを説明した。

「フェスティバル/トーキョー」では、独自の世界観を表現するため、見出しや本文にクラウドフォントを活用している。

こうしたメリットを説明したうえで、どのようなケースであれば、クラウドフォントのメリットを生かしたWebサイトづくりができるのか、濱田氏は詳細なチェックリストを紹介した。

1. 世界観やデザイン重視のサイトを構築したい。
2. 更新頻度が高い。
3. プロジェクトに先進性が求められている。
4. 印刷物など他のメディアと連動する。
5. 見出し画像など、画像でつくられたテキストを多用している。
6. マルチデバイス対応が必要。
7. 表示速度への要求がシビアではない。

この7項目のうち「3つぐらい丸がつくようであれば、クラウドフォントの利用を提案してみる価値は十分あるのではないか」と濱田氏は提言する。濱田氏は最近の事例で、上記のうち3、5、6を軸に、モリサワのTypeSquareを顧客に提案したという。特に3の先進性に関しては「これから爆発的に普及する技術なので、2年後に採用したのでは遅い」と話したそうだ。

これに対し、顧客からは「データは重くならないか」「本当にどんな環境でも表示されるのか」「印刷はできるのか」といった質問が寄せられた。濱田氏はこれらのポイントに対し、次のように回答した。

まずデータ量ですが、リュウミンというフォントで1万5,000文字を表示してみたところ、450KBでした。100文字だと36KB、1文字では4.5KBです。モリサワのTypeSquareは、ページ内に現れる文字に対応したフォントだけがダウンロードされる仕組みです。文字数によってデータ量は変わりますが、フォントファイル一式を埋め込む必要があったFlashなどと比較して軽いと言えます。

次に環境依存の問題ですが、フォントをダウンロードするにはTypeSquare用のJavaScriptを読み込む必要があるため、ブラウザ設定でJavaScriptを無効にしている場合や、表示フォントを指定している場合は、クラウドフォントは表示されません。しかし、そうした場合はデバイスフォントやユーザーの指定フォントが代替表示されますから、テキスト情報は保全されます。

そして最後に印刷ですが、画面通りに印刷されるブラウザであれば、フォントのデザインを維持したまま、印刷やPDF化ができます。

この提案の結果、費用面（TypeSquareベーシックプランはPVによって年間1万6,800～16万8,000円）でも問題がないということで、採用に至ったという。

最後に濱田氏は、今後は積極的にクラウドフォントを導入していくべきだろうと、次のように話し、講演をまとめた。

弊社では、“クラウドフォントは必ず来るから、Webディレクターももっとタイポグラフィを勉強しておけ”と社長から命じられています。このあと話がありますが、クラウドフォントはCMSとの相性も非常に良い。導入リスクが少なく、作業負荷も下げられますから、顧客にどんどん提案していい技術だと思います。