モリサワの「新ゴ」フォントがWebでCMSと連携、クラウドフォントで拡がるWebデザインの可能性とは [イベント・セミナー] | Web担当者Forum

紙のデザインでは、さまざまなフォントを駆使してきました。しかし、日本語の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では画像にするしかなかった。クラウドフォントは、フォントを提供者（サーバー）からダウンロードしてくるので、環境による見え方の差を少なくできます。これがクラウドフォントの力です。

実はクラウドフォント自体は新しい技術ではない。しかし、記号や特殊文字を入れても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との相性も非常に良い。導入リスクが少なく、作業負荷も下げられますから、顧客にどんどん提案していい技術だと思います。

グラフィックデザイナーが力を発揮できる環境が整いつつある

続いてのセッションは「デザイナーだからこそ活用したいCMSの魅力と実力」と題し、国産のCMS専業メーカーであるミックスネットワーク 布施貴規氏が講演。

布施氏はコピーライター出身で、紙、テレビCM、Webなどさまざまな媒体でディレクター、プロデューサーとして活躍してきたキャリアの持ち主。「Webの世界でのグラフィックデザインの可能性」といったことをテーマに、自らの経験を踏まえながら刺激に満ちた講演を行った。

まず布施氏は最近のWebデザインの傾向について、次のような問題をシビアに提起した。

Webデザインの現場の方に不評を買うかもしれませんが、提案いただく立場からあえて指摘させてもらうと、最近、動線設計やユーザーインターフェイス（UI）が、ルールのように均一化されたサイトが目立っています。提案を受けると、10社中8～9社は、同じようなワイヤーフレーム。“使いやすい”という魔法の言葉で均一化を進め、デザインの差別化がなくなっているのです。

情報設計の部分だけに注力し、使いやすいけれども楽しい部分がない。そして肝心の情報も、ニュースやトピックス程度しか更新されない。キャンペーンサイト以外の多くの企業サイトは、ユーザーの記憶に残すという「アド（広告メッセージ）的な要素」を欠いているのではないか。このように布施氏は話した。

そして、この使いやすさ偏重とも言える状況に陥った背景として布施氏が指摘するのが、優秀なグラフィックデザイナーが不足しているのではないか、ということだ。Web黎明期の90年代後半、グラフィックデザイナーは技術的なハードルの高さや、デザイン上の制約からWebを敬遠し、紙媒体など従来の領域にとどまってしまった。その結果、システム寄りの制作者によるロジカルな情報設計が主流になり、デザインの均一化が進んでしまったのではないか、というのだ。

本当にクライアントが求めているのは、価値ある情報が載っていたり、見ていて楽しかったりするなど、使いやすさだけでなくUX（ユーザーエクスペリエンス）まで高いレベルで提供できるサイトです。そしてUXを高め、差別化をするうえで重要なポイントになるのがデザインなのです。グラフィックデザイナーの方には、これまで磨いてきたデザインの力を生かして、Webの世界に新風を吹き込んでほしいと思っています。

布施氏によれば、最近のWebの世界では、グラフィックデザイナーが自らの力を最大限発揮できる環境が整いつつあるという。その要因は2つあり、1つはセッション1のメインテーマとなったクラウドフォントの普及、そしてもう1つが、扱いやすく高機能なCMSの存在だ。

CSSやHTMLをサポートしてくれるCMSを利用すれば、デザイナーは情報設計とデザインに集中できます。最近、リーンスタートアップ（ムダのない開発や起業の方法論）という言葉をよく聞きます。HTMLやCSSの知識は必要ですが、難しい技術はあとで学べばいい。まずはCMSをうまく利用して、これまでに培ってきたデザイン力を発揮することから始めてみてもいいと思います。

たとえば、ミックスネットワークのCMS「SITE PUBLIS 3」では、HTMLやCSSを一切意識しないでサイトを制作できるようになっている。サイトの構成要素をブロックと呼ばれるパーツにし、それらを組み合わせてWebを制作できるからだ。デバイスごとの表示・非表示もブロックごとに管理できるため、マルチデバイスへの対応も一元的に可能だ。当然ながら簡単に作れるということは、サイトの改善作業の負荷も低い。PDCAを繰り返して情報の鮮度と有効性を保っていくことで、徐々にサイトの価値を高められる。

クラウドフォントもタグを貼り付けるだけで簡単に表示できる。しかも、CMSの編集画面上にもクラウドフォントが反映されるので、コンテンツ担当者も、見た目の美しさを確認しながらコンテンツを入力したり編集したりできる。

グラフィックデザイナーが持っている、自由自在にフォントを扱えるスキルは、今後のWebデザインの世界では技術面をカバーする強力な武器になり得る。「そのフォントのスキルを生かして、リーンスタートアップも実践できる」と布施氏は、始めてみることの重要性を改めて強調した。

iPadがわかりやすい例ですが、技術というより思想やデザインで、業界が大きく変わるケースがあります。Webの世界も技術だけがすべてではない。みなさんが持つデザインの力で、Webの将来を変えていってほしい。

最後に布施氏はこのようにエールを送り、講演を終えた。

クラウドフォント活用に問われる、デザイナーとしてのセンス

最後のセッションでは、これまでに登壇した濱田氏と布施氏に、モリサワの高桑剛氏が加わり、「クラウドフォントとCMSでWebデザインの未来を拓く」と題したパネルディスカッションが行われた。

パネルディスカッションの冒頭では、高桑氏がフォントの歴史を簡単に説明。モリサワのフォント配信サービスであるTypeSquareについては、「我々が開発してきた書体をWebの世界で使っていただける環境が、ようやく整ってきた。将来的にWebだけでなく、インターネット上のさまざまなデバイスに配信することを目指して“クラウドフォント”と呼んでいる」と話した。

続けて、クラウドフォントをすでに利用している会場参加者の声も交えながら、ディスカッションへと移っていく。まず、司会者から、セミナーを振り返り、改めてクラウドフォントのメリットとデメリットは何かと問われた。これに対しては、濱田氏が次のように説明した。

一番のメリットは手軽に使えて導入リスクも低いこと。一度使い始めたら、もとのデバイスフォントには戻れないと思う。

また現場では、今まで本文や見出しのフォントについては妥協せざるを得なかった。しかし優れたデザインのサイトなどを見ると、見出しなどにクラウドフォントが使われ始めている。

今年から来年にかけて、和文フォントがクラウドフォントにどんどん置き換わっていくだろう（濱田氏）。

次に、CMSの世界でフォントはどのように考えられているかと質問され、布施氏が次のように答えた。

今は残念ながら、クライアントからクラウドフォントを入れてほしいと要望される状況には至っていない。しかし逆に言えば、クライアントに対して新しいことを提案できる大きなチャンス。テキストなので軽く、検索エンジンとの親和性も高い。コスト的にも画像を作るのと差がなく、デザインセンスも発揮できる。クライアントの立場でいえば、そういう新しい提案ができる会社と組みたいはず（布施氏）。

では、実際に提案される企業は、どのようなイメージをクラウドフォントに対して持っているのだろうか。これについては、濱田氏が次のように話した。

お客さんによって、新しいデザインの受け入れ幅はかなり違う。受け入れてくれるお客さんをつかまえていく能力も、新しいデザインに取り組むには必要。さまざまな技術やCMS、クラウドフォントを組み合わせて、デザインの均一化を打破していきたい（濱田氏）。

クラウドフォントの活用については、会場参加者から「TypeSquareの期間限定キャンペーンを利用し、何千ページかに実際に使った。デバイスフォントに比べて若干重い感じも受けたが、CSSだけでフォントを表記でき、画像を作る手間をかなり省けた」との声も聞かれた。また、導入理由については、「別のWebフォントを使っていたが、サーバーによってはすぐに使えないことがわかった。使い慣れたモリサワの書体がよかったので、TypeSquareを利用した」と話している。

こうした話を受け、フォント提供者側であるモリサワの高桑氏には、同社クラウドフォントの利用動向について、質問が投げかけられた。

使用フォントのランキングとして特徴的なのは、「UD新ゴ」をはじめとするユニバーサルデザイン書体がよく使われている点です。見出し向きのフォントがよく使われると想定していたが、実際には本文に使われている傾向が強いのではないか（高桑氏）。

また、クラウドフォント活用のハードルは高くないのかと質問されると、布施氏と濱田氏が次のように説明した。

技術的なハードルはまったくない。むしろハードルになるのは、タイポグラフィの知識やデザインのセンス。美しいフォントを使って、美しいデザインをどう実現するのか。読みやすいページをどう作るのか。こうしたことは今までのWebにはなかった発想になる（布施氏）。

CMSのように便利なツールによって、従来のWebデザイン業務の一部が置き換えられることはあるかもしれない。しかしデザインやディレクション、マネジメントといった部分は、プロフェッショナルであれば置き換えられることはない。そのあたりで勝負をして、CMSとクラウドフォントをうまく使いこなし、制作に携わっていけるのではないか（濱田氏）。

最後に、本セッションのテーマである「クラウドフォントとCMSでWebデザインの未来を拓く」について、それぞれの視点で一言ずつ述べられた。

CMSとクラウドフォントは非常に相性が良いので、相乗的に広がってくれることを期待している。フォントメーカーの立場から申し上げれば、膨大な書体のなかから適切な書体を選び、使っていくにはかなりのスキルが必要になる。いくらでも使えるからと、むやみに書体を用いるとデザインを損なってしまう。Webサイトに合った書体をチョイスしてほしい（高桑氏）。

クラウドフォントは、サイト訪問者のコンピュータに入っていない書体でも自由に使えるのが面白い。ありきたりのデザインが増えていると言われるなか、クラウドフォントを用いれば、100ピクセルぐらいの大きな文字を使ったデザインも可能になる。日本でも海外のサイトのように知恵を絞ったデザインが、再来年あたりから見られるようになるのではないか（濱田氏）。

フォントを使ったデザインは、プログラミングよりもはるかに長い歴史の中で進化してきた。Webデザイナーが知らない知識がたくさんあるので、そういったスキルを生かして、クライアントに対する提案書類などもつくってみてほしい。

今後、デバイスが多様化するなかで、コンテンツを一元的に管理できるCMSの役割は、ますます重要になっていく。技術的な部分やマルチデバイス対応は、我々システム屋に任せていただき、デザイナーの皆さんはプログラムでは太刀打ちできないアイデアや発想力で勝負をしてほしい（布施氏）。

• 内容カテゴリ：サイト企画／制作／デザイン
• コーナー：イベント・セミナー

※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：モリサワの「新ゴ」フォントがWebでCMSと連携、クラウドフォントで拡がるWebデザインの可能性とは [イベント・セミナー] | Web担当者Forum
Copyright (C) IMPRESS BUSINESS MEDIA CORPORATION, an Impress Group company. All rights reserved.