視点で語られたセミナーをレポート。›[PR]紙のデザインでは、さまざまなフォントを駆使してきました。日本語のWebサイトでフォントにこだわるためには、画像を使うしかない。Webデザインにおいて、「日本語フォントの本文や見出しについては妥協せざるを得なかった」という、Webデザイン・制作の課題を解決するにはどうすればいいのか。その答えを示すべく、フォントメーカーのモリサワと、CMSベンダーのミックスネットワークは、セミナー「紙からWebへ。デザイン領域を拡げる2つの鍵。」を7月23日に開催した。2つの鍵、クラウドフォントの普及と、高度なプログラミングスキルを必要としないCMS導入によって、Webデザインの世界はどう進化するのか。Web制作会社であるロフトワーク協力のもと、各社の視点で語られたセミナーの模様をレポートする。真一氏フォントを活用したデザインがテーマの本セミナーには、紙媒体をメインとするグラフィックデザイナーやWebデザイナーが参加した。セミナーではまず、ロフトワークの濱田真一氏が「クラウドフォントで手に入れる新たな表現力」という題目で講演。Webデザイナー歴8年、現在はディレクターとして活躍する濱田氏が、「クラウドフォントとは何か」といった基本から、実際の顧客企業への提案事例まで説明した。クラウドフォント(Webフォント)とは、インターネットを介してフォントを配信し、ブラウザのWebページ表示に使う仕組みだ。ユーザーのデバイス(PCやスマートフォン)にフォントが搭載されていなくても、制作者側が指定したフォントを表示できるのが特徴。」と濱田氏は説明する。フォントには伝統的なもの、現代的なもの、カジュアル、上品、力強いものや優しいものなど、いろいろなものがあります。紙のデザインではこれらを駆使していましたが、Webでは画像にするしかなかった。クラウドフォントは、フォントを提供者(サーバー)からダウンロードしてくるので、環境による見え方の差を少なくできます。これがクラウドフォントの力です。クラウドフォントの基本的な仕組み。ユーザーのPCに搭載されたフォントではなく、クラウド上からダウンロードした指定のフォントを使って文字を表示する。実はクラウドフォント自体は新しい技術ではない。記号や特殊文字を入れても250文字しかない欧文書体と異なり、日本語では数千から一万数千もの文字をフォントとして用意しなければならない。そのため、著作権フリーのフォントが少なく、フォントファイルのデータサイズも大きくなるという問題があった。」と濱田氏は強調する。Webサイト制作者として、クラウドフォントを採用するメリットはどこにあるのか。濱田氏は次の3点を挙げる。テキストデータの強みを最大限に発揮1点目は、テキストデータの強みを最大限生かせること。クラウドフォントを用いれば、画像データを用いなくても多彩なフォントを利用したデザイン表現が可能だ。ドロップシャドウ、グラデーションといった文字装飾、字間の調整もCSSで実現できる。今まで画像で作っていた見出しなどを、テキストに置き換えられる。これにより、検索性が向上し、ユーザビリティ向上(コピー&ペーストが可能になるなど)、アクセシビリティ向上にもつなげられる。マルチデバイス対応に適している2点目は、デバイスに依存しないため、マルチデバイスへ対応しやすいことだ。画面サイズにマッチした表示にするため、PC用、スマホ用と、見出し画像を別々に用意しているケースも多いだろう。クラウドフォントでは、前述の通りフォント表示はデバイスに依存しないため、デバイスに合わせた文字サイズの切り替えが容易になる。画像データの制作点数を削減3点目は、前述の2つのメリットとも関連するが、画像データの制作点数を劇的に減らすことができ、生産性の大きな向上が期待できる点だ。デザイン性の高い、見出しやキャッチコピーに画像を多用しているサイトで大きな効果が期待できる。したメリットの実例として、濱田氏は実際にクラウドフォントを活用して制作した、国際舞台芸術フェスティバル「フェスティバル/トーキョー」公式サイトのコンテンツを紹介。約200個の見出し画像を、クラウドフォント採用によってゼロにし、作業工程の大幅圧縮しながらスマホ対応を同時に実現したことを説明した。「フェスティバル/トーキョー」では、独自の世界観を表現するため、見出しや本文にクラウドフォントを活用している。したメリットを説明したうえで、どのようなケースであれば、クラウドフォントのメリットを生かしたWebサイトづくりができるのか、濱田氏は詳細なチェックリストを紹介した。世界観やデザイン重視のサイトを構築したい。プロジェクトに先進性が求められている。印刷物など他のメディアと連動する。見出し画像など、画像でつくられたテキストを多用している。マルチデバイス対応が必要。表示速度への要求がシビアではない。」と濱田氏は提言する。濱田氏は最近の事例で、上記のうち3、5、6を軸に、モリサワのTypeSquareを顧客に提案したという。これに対し、顧客からは「データは重くならないか」「本当にどんな環境でも表示されるのか」「印刷はできるのか」といった質問が寄せられた。濱田氏はこれらのポイントに対し、次のように回答した。データ量ですが、リュウミンというフォントで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との相性も非常に良い。導入リスクが少なく、作業負荷も下げられますから、顧客にどんどん提案していい技術だと思います。(モジカ)スクリプトLLC代表。検索マーケティングを中心としたウェブマーケティングと金融の分野を中心としたライティングで活躍中。講演・セミナー、インタビュー・対談、その他の音声・動画情報をテキストコンテンツ化し、オウンドメディアやコンテンツマーケティングの素材として利用できるようにするサービス「モジカ(mojica)」を提供している。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。ネット広告への強い嫌悪感、テレビや新聞の倍以上に。いいね!伝説のTwitter企業アカウント“中の人”の先駆け。いいね!私は変人コレクター。いいね!「おもてなし」は思考停止ワード。自社サービスのSPプランナー★京都本社★♨リゾート企画で日本を癒せ!京都本社のリゾート事業会社です。アカウントプランナー(プロデューサー)の部長候補を募集します。「おもてなし」は思考停止ワード。各週の人気記事ランキング記事を見るはてなブックマークですべての人気記事を見る今日の用語コンバージョンサイトを訪問した人が、商品を購入したり、資料請求したりすること。2/24~2/28のマーケティング、インサイドセールス、データ分析、EC、SEOなど他社セミナー情報52件Web担編集部がゼロから学ぶ、Tableau「BI講座」。Patterns』を3名様にプレゼント!【受付終了】企業がDXに向かう取り組み方を考える『デジタルファースト・ソサエティ』を3名様にプレゼント!すべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。