本記事は、アーカイブに保存されている過去の記事です。最新の情報は、公益社団法人日本印刷技術協会(JAGAT)サイトをご確認ください。
株式会社モリサワ
マーケティング部 案西 稿志 氏
本日は2011年のIGASで最初の発表をし、2012年2月21日にスタートしたクラウドフォントサービス、TypeSquareについて説明する。
これまでのWebにおけるフォントの利用は、バナーや見出しなど、目立つ部分に目立つ書体を使う利用方法であった。これを行う場合は、基本的には書体を画像にして利用する方法である。こういった用途でのモリサワパスポートのご契約は多数いただいている。
しかし、昨今Webフォントという技術が発達してきた。Webフォントとは、Webサイトの制作者側が意図した書体を、その書体がインストールされていないマシンでWebを閲覧する閲覧者側に表示させることができる仕組みである。サイトの閲覧者とはパソコンに限らず、スマートフォンやタブレット、Webブラウザを搭載したあらゆるデバイスに表示させることが可能である。
もともとはCSS3の仕様に組み込まれており、2009年頃から実装が始まった。最初はFirefox3.5が対応したが、それ以降、現在ではInternetExplorerやMacの標準のブラウザであるSafari、Googleが作っているChrome、それからFirefoxなど、主要なブラウザで既にWebフォントを表示する仕組みは実装済である。
表記の仕方は至って簡単で、CSSを書くときに@font-faceというプロパティで、フォント名、ここで言うとfont-familyのところにフォント名を指定して、src、ソースというところでurl、Webサーバ上にあるフォントを指定するという仕組みになっている。
Webフォントが使えるフォーマットは、標準のTrueType、OpenType、Webフォント用に作られたフォーマットのWOFF、それから従来はグラフィックス用途で使われていたSVG、マイクロソフトの独自形式であるEOTというフォーマットが使用できる。
これまで、テキスト情報のみで構成されていたWebサイトでは、特徴的な書体を使う際には画像化しなく
てはならなかった。また、本文書体はOSに搭載されている書体しか利用できず、決して可読性が高いとは言えなかった。
それが、Webフォントを使うことによって、タイトルやバナー、見出しなどに特徴的な書体をそのまま使うことができ、本文にはユニバーサルデザイン書体など、可読性の高い書体を使うこともできる。
モリサワがWebフォントではなくクラウドフォントと呼んでいる理由だが、現在のWebフォントの仕組みではWebブラウザだけにフォントを配信する決まりだが、これをWebブラウザ以外のあらゆるインターネットに接続するデバイスやアプリケーションから利用可能にするために、クラウドフォントと呼んでいる。
それから、Webブラウザに関しても、現在は静的なページで使われることがほとんどで、静的なページに合わせた仕組みになっているが、これをJavascriptでどんどん書き換えていく動的なページにも使えるように作っていこうと考えている。
(図1)(図2)(図3)(図4)
▲図1
▲図2
▲図3
▲図4
まず、テキスト情報がそのまま保持されるので、画像の裏側にテキスト情報をメタデータとして設定する必要がない。
また、画像にしてしまうので、文言修正の場合には画像の再作成の必要があったが、これを行わなくても良くなった。実際、表示している「酔仙酒造」にモリサワのTypeSquareを利用していただいているので、見てもらいたい。東北の酒屋さんだが、このあたりにモリサワの黎ミンという書体を使っているのを、そのままテキストとして表示することができている。
テキスト情報が保持されるので、SEO対策になり、自動翻訳や音声読み上げなど、テキスト情報と連動したWebで使える機能に対応することが簡単になる。それから、iPadやiPhone、スマートフォンなどのデバイスで見る場合、どうしても文字が小さいのでピンチイン、ピンチアウトして拡大縮小を行う。その場合、拡大すると、画像なので文字にジャギーが出てしまったりするが、これはきれいに見ることができる。
実際にiPadで見てみたい。クラウドフォントオフとなっているが、これを拡大すると、画像にジャギーが出てしまう。フォントは、iPadなので結構きれいに見えるが、標準のフォント、ヒラギノが出ている。
これを、クラウドフォントオンにすると、見出しを拡大しても、アウトラインがきれいに出るし、本文のところはモリサワの黎ミンという書体を使っているが、可読性が高く保たれることになっている。
それから、ブランドイメージの統一では、これまでは紙でさまざまな書体を使っていてもWebでなかなか使える書体がないので、どうしても紙とWebのデザインの違いが出て来てしまった。
これまで日本でビジネスをしていなかったグローバル企業が日本でビジネスする際に、コーポレートフォントなどを持っているため、イメージを統一するために合った書体を選びたいが、どうしてもデバイスに搭載されている書体しか選べないこともあった。
こういうブランドイメージの統一でモリサワ書体を使いたいという要望が今まであったが、なかなか使える現状がなかった。これをWebフォントによって解決することができた。
世界中でどれくらいWebフォントが使われているかというと、欧米ではたくさんのサービスが出ている。Typekitは2011年Adobeに買収されてAdobeのサービスの一環として提供されることになったものである。
それから、モノタイプがやっているfonts.com、GoogleがやっているGoogle Web Fonts、フォントベンダーのフォントビューローがやっているWebtypeなど、2007年頃からいろいろサービスが出てきている。
これはTypekitのデータだが、2011年11月に月間40億ビューとなっている。40億ビューとはフォントの配信した数である。他にもいくつかデータがあるが、ここ1-2年で爆発的に伸びてきている。
実際にWebフォントを活用した例としては、Typekitを利用したニューヨークタイムズの社説のページがある(図5)。これはニューヨークタイムズが古くから使っている自社フォント、ニューヨークタイムズのフォントを利用したページになっている。それから、車の会社の、フォードテクノロジーのページで、Webtypeというフォントビューローのフォントを使っている(図6)。
日本でもいくつかサービスが出てきている。2011年頃から、デコもじ、もじdeパ、Font+など、いろいろ出てきている。ただ、日本の場合はフォントの容量の問題などがあって、大規模な利用にはまだ至っていない。日本のWebフォントの利用が本格化するのはこれからだろう。(図5)(図6)
▲図5
▲図6
TypeSquareのサービス紹介をしたい。まず、図7のTypeSquareのトップページだが、「ウェブデザインは新たな表現力を手に入れる」と、まずはデザイン方面から使っていただきたいというメッセージを込めている。Typesquare.comというURLでアクセスできるので、是非見ていただきたい。
実際にサイトを見ると、「TypeSquareとは」というページでTypeSquareの利点をまとめている。デザインがよくなる、クラウドフォントとは何か、テキスト情報が保持されるのでいろいろなことに向いていると書かれている。
それから、価格のページ。使える書体一覧。今は154書体くらい使える。導入事例はまだ掲載できていないが、よくある質問でFAQを掲載しているので、わからないことがあったら、まず、ここを見ていただきたい。
TypeSquareの利用環境だが、配信書体数は154書体で、2004字形の35書体もあるので、それを合わせて189書体を利用することができる。また、表示対応ブラウザは、InternetExplorer8.0以降、Safari5.0以降、Firefox3.6以降、Google Chromeの10.0以降である。
選定基準は、Web標準のフォントフォーマットであるWOFFに対応したものとさせていただいている。
それから、当然、モバイルデバイスの搭載ブラウザも表示することができる。iOSは4.2以降、Androidは2.2以降の、それぞれ標準のブラウザで表示することができる。おそらく、他のモバイルブラウザでも表示可能なものがあると思うが、検証し切れていないので、今のところ、こういう表記にしている。
配信するフォーマットは、基本的にはTrueTypeフォント及びWOFFを配信し、場合によってはEOTを配信
する。フォントに関しては、Webに最適なものが得られるように、若干チューニングしている。
TypeSquareのご利用申込みは、先ほどのトップページの右上にある申込みボタンから見ていただくことができる。(図7)
▲図7
TypeSquareの利用フローを見ていただきたい(図8)。まず、ご契約いただき、TypeSquareを利用するWebページのURLを登録する。登録するとhtmlタグというJavascriptを呼び出す1文が発行されるので、これを自分のHTMLに記入してもらう。
記入したものと合わせて、書体を指定してWebサーバにアップロードすると、閲覧者がそのサイトを見るときにTypeSquareを呼び出してフォントが配信される仕組みになっている。
課金の単位は、1ページビューという単位になっている。これはWebサイトを表示した回数である。具体的にはJavascriptのタグを呼び出した回数である。今のところ、いろいろな問題があって、フォントをキャッシュに残すことはしていない。利用のたびに1ページビュー、カウントされるということである。
ただし、フォントが実際は呼び出されていない場合や、検索エンジンのクローラーなどがアクセスに来た場合には、カウントしない仕組みになっている。テストサイトは、今のところカウントされる。図10がTypeSquareのプランである。無料トライアルの1,000PV/1ヶ月を除いて、入会金をいただくことになっていて、入会金が10,500円でベーシックプランとライトプラン、アドバンストプランを用意している。
それぞれ有効期限の付いたページビューのチケットを買っていただくというイメージで、上限PVが切れそうになったり、有効期限が切れそうになったりした場合には、メールにて自動でご連絡するような仕組みになっている。
もしPVや有効期限が切れてしまった場合、単純にTypeSquareからフォントが配信されなくなるだけで、Webサイトのテキストが表示されなくなるなどはない。ただ、フォントに合わせたデザインをされているサイトの場合、デザインが崩れてしまう可能性はある。
契約に関しては、1つの契約でドメインやサイトは幾つでも登録できる。登録されたサイト、ドメイン、URLなどの消費ページビューの合算に合わせて消費されていく形になっている。
制作会社が契約者になっても、クライアント企業が契約者になっても、どちらでも構わない。契約者からは利用者アカウントを発行することができ、イメージとしてはクライアント企業が契約者になって利用者アカウントを制作会社に発行する流れが自然だと思う。(図8)(図9)(図10)(図11)
▲図8
▲図9
▲図10
▲図11
今回、TypeSquareを作るにあたっては、Webフォントのことを知ってもらうために、クラウドフォント・シミュレータを用意した。
「フォント変更ボタン」を押すとフォントがいろいろ変更できる。更に、各箇所のサイズを変更してみたり、本文の行間を広げてみたり縮めてみたり、実際どんなイメージで書体が利用できるかのデモンストレーションのサイトになっている。
TypeSquareで今配信しているすべてのフォントを載せることはできなかったので、現在は8書体ずつの5つのカテゴリーで40書体体験できるようになっている。こちらのテキストは、今はエディットできないが、後々改良していく予定ではある。(図12)(図13)
▲図12
▲図13
申込みは、プランを選択して、利用規約を読んで、同意して、各種の情報を入力して、そして契約していただくという形になっている。契約すると、確認のメールなど、何回かやりとりをして、アカウントが発行されるので、ログイン画面に行く。
ログインすると、マイページが来る。マイページからいろいろなものが確認できるが、重要なものだけ紹介したい。プランの購入履歴がある。それから、URLの登録ページ、それから今のところのページビュー、どのくらい消費されているか。今回はデモ用のサイトを既に登録しているが、サイトの登録は「新規サイト登録」にURLを入力してもらう。
それから、導入方法、ステップを踏んで導入方法をご紹介している。先ほど言ったhtmlタグである。これをコピーしてURL、自分のサイトのHTMLに記入してもらう。フォントの指定をしてもらう。そうするとTypeSquareからフォントが配信されるようになる。
実際に、デモ用に作っているものがあるので、見てもらいたい。今、「ウェブデザインは新たな表現力を手に入れる」が、ヒラギノのゴシックで、何もなしに表示されている。これを今からTypeSquareを利用する形にしていきたい。
書体はエリアルを指定していて、スクリプトは何も張っていない。この箇所にスクリプトタグをヘッドタグの中に記入したいので、ここの文面に先ほどのソースをコピーして、貼る。
わかりやすいので、モリサワの丸フォークという書体を使う。保存して、先ほどのデモサイトをリロードしてみると、うまく反映できた。URLを登録して、スクリプトを取得して、HTMLに記入する、この3ステップで表示が可能になる。
使える字種は、印刷業界だと印刷標準のAdobe Japanという規格を使っているが、HTMLの世界では基本的にはユニコードが使われる。したがって、Adobe Japanとユニコードのクロスした部分が現在表示可能な字種になっている。だいたい16,000くらいである。
それから組版関連の情報、OpenTypeの細かい情報、詰め情報や異体字の情報などは、現在フォントに含めていない。これに加えて、ブラウザからの印刷だが、ブラウザの仕様に若干ばらつきがあり、ブラウザから印刷する場合にはフォントがうまく反映されない場合がある。PDFへの埋め込みも同様で、文字がうまく入らない場合がある。
TypeSquareの現状の課題は、Windowsでの表示があまりきれいではないことである。これはフォント側で解決できることであればモリサワは取り組んでいく所存である。
それから、表示スピードが、一瞬デフォルトのフォントが表示された後にWebフォントが適用されるというのがブラウザの仕様でもあり、サーバ側での処理は200ミリセック以内と、ほとんどストレスにならない速さで行っているが、通信環境やブラウザの実行速度に依存してしまうので、現在ばらつきがある。これの処理を速くしたり、もう少し制御できる仕組みを入れるたりなどこちらでも考えているので、改善次第、TypeSquareのサイトで紹介する。
今後は、中国語フォント、韓国語フォントを追加する。かな書体は、時期は未定だが、追加する。InDesignなどで使える組み合わせ書体のような形で指定する方法で考えている。それから、グループ企業のフォントもTypeSquareに載せていきたいと思っている。
質問:TypeSquareについて伺いたい。ブラウザからの印刷の項目で、文字抜けなどが発生する場合があるとのことだが、具体的にどういうブラウザでどういうことが抜けたという事例があれば教えていただきたい。
また、PDFのフォント埋め込みでも同様に抜けがあるとのことだが、そもそもTypeSquareで表示したフォントをPDFに埋め込んで二次利用するというのはやってもいいことなのか。
案西氏:まず、後半の質問からお答えすると、PDFに埋め込むこと自体は制限しない。というか、ブラウザが勝手に書き出してしまうので、制限はできない。特にサポートはしない。是非使ってくださいという書き方ではないが、使っても問題ないという使用許諾になっている。
前半の質問だが、現在確認しているところでは、Internet Explorerの8や7という低いバージョンで文字抜けが発生している。どの文字かまでは調査していない。全部抜ける場合もあるし、一部抜ける場合もあった。それから、低いバージョンのFirefoxなどでも発生している。
質問:文字の抜けが発生したとき、それを検出するようなツールは用意しているのか。あるいは、予定はあるのか。
案西氏:用意していない。今後も予定はない。
質問:フォントを例えば1,000文字くらいダウンロードしたとき、ベクトルデータも配信されると、サーバから取ってくると思うが、そうするとデータ量が増えるのではないか。
案西氏:配信するフォントは必要な文字だけのサブセットになっているので、サイズは非常に小さい。
質問:例えば1,000文字送信した場合には、モリサワのフォントを使わなかった場合と使った場合とで何キロぐらい要るのか。
案西氏:使わなかった場合は0バイト、使った場合は、1,000字種の場合だと、使用書体によってもかなりばらつきがあるが、一番大きいものでも1メガバイトはいかないくらいである。400字種程度だと、一番小さいフォントなら200キロバイトくらいに収まっている。
2012年2月29日TG研究会page2012注目製品「web電子出版システムとクラウドフォント・組版編集ソフトウェア」より(文責編集)