ウェブフォントの魅力とこれから～ウェブ制作現場にくるか！？ 日本語ウェブフォントの実際～

バスタイム フィッシュ 村岡正和
ソフトバンク テクノロジー 関口浩之

-1-Webフォントでコンテンツの世界が変わる
今までデザイン文字をWebで表現するには、文字を画像化する必要がありました。しかし、ウェブフォントを利⽤することで、画像化せずにタイポグラフィを生かしたWebコンテンツが簡単に作成できるようになりました。

画像で作成された文字だと・・・

拡大表示

Webフォントで表現すると・・・
拡大しても綺麗！

-2-

国内Webフォントサービス一覧
サービス名

会社名

FONT+
（フォントプラス）

ソフトバンク・テクノロジー株式会社

TypeSquare（タイプスクウェア）

株式会社モリサワ

デコもじ

シーサー株式会社

アマナイメージズ
WEBフォント株式会社
アマナイメージズ

もじでぱ

緑屋電気株式会社

2012年7月1日現在
600書体以上利⽤可（モリサワ、フォントワークス、モトヤ、イワタ、白舟）※初の外国語：方正（中国語）にも対応

New! モリサワと業務提携発表 リュウミンや新ゴなども使える！ 2012.6.20※フォント業界最大手の直販サイト-3-海外Webフォントサービス一覧
サービス名

URL

Google Web Fonts

http://www.google.com/webfonts

Fonts.com

http://webfonts.fonts.com/

Typekit

http://typekit.com/

Fontdeck

http://fontdeck.com/

Webtype

http://www.webtype.com/

WebINK

http://www.webink.com/

Typotheque

http://www.typotheque.com/webfonts/

Web Type (Ascender)

http://www.ascenderfonts.com/webfonts/

Fonts Live

http://www.fontslive.com/

TypeFront

http://typefront.com/

Kernesthttp://kernest.com/

Font Me Up

http://fontmeup.com/-4-様々なコンテンツがウェブフォント活用へ進む
JPG PNG

タブレット向け
Webコンテンツ

FLUSH

パソコン向けWebコンテンツ

スマホ向け
Webコンテンツ

PDF

電子新聞
電子書籍
電子カタログePUB

キオスク端末HTML5＋CSS3＋Webフォント デジタルサイネージ

Internet
常時接続家電ゲーム
コンテンツ（テレビ、レコーダー、他）

組込
フォント

他-5-無限に広がるWebフォントの世界！
日本語Webフォントの適用範囲は無限に広がっています。キャンペーンページ、ブログ、ゲーム、放送、出版等の分野で活用が開始されました。Webフォントという新しい素材をどう調理するかはアイデア次第です。

[注]
事例によっては、推奨ブラウザが異なります。
http://pr.fontplus.jp/sample/02/
ご自身のTwitterIDを⼊⼒！

http://kuri.nifty.com/seesea/index.htm
漢字をクリックすると魚の説明が表示！

http://www.hylind.net/greatfont/index.html
読み手が書体を選択できる！

http://colamune.com/typomap/[統計]ボタンで面積や人口など選択可能！

http://www.kotonoca.com/
Webフォントの上⼿な活⽤例！

-6-スマートデバイス向けWebページ制作
スマートフォンやスマートパッドにおけるWebフォント活用の効果をいくつかご紹介します。
■Webアクセシビリティの向上

スマートフォンやスマートパッドにおいては端末毎にシステムフォントが異なっています。
iPhoneやiPad等のiOS系デバイスではヒラギノ書体が標準のシステムフォントとして使用されています。
Android系デバイスでは、メーカー毎にシステムフォントが異なるようです。
Webアクセシビリティ観点では、どんなデバイスからWebページを⾒ても同じ書体で表⽰されることが求められます。Webフォントがその解決策のひとつかもしれません。

[システムフォントの搭載事例]

iPhoneAndroid（SH-03C)

ヒラギノ

モリサワ 新ゴ R■拡大表示における可読性、視認性の向上

スマートデバイスの特徴として、拡大・縮小の操作を誰でも簡単に⾏うことができます。
画像文字は拡大すると画像の劣化が⽣じますが、Webフォントで表現された文字は拡大しても非常にきれいです。
スマートフォンやスマートパッドでは、アウトラインフォントの変換処理が⾮常に優れており、Webフォントとの相性は抜群です。
-7-

■テキストコピー、単語検索機能の活⽤

Webフォントで作成したテキストは、コピーすることができます。
重要なメッセージや住所などを画像文字（装飾デザイン文字）で表現していると、カット＆ペーストできません。Web訪問者は、気になる文章やメッセージをコピペしたいというニーズは高いと言えます。
※画像文字はコピーしようすると、”画像を保存”（例）と表⽰されます。

また、Webフォントで表現すれば、単語検索機能にも対応します。

■読み上げ、翻訳への対応
ユニバーサルデザインに配慮したWebページも、これからは⼤切です。Webフォントを活⽤すれば、デザイン性の⾼い⾒出しやキャッチフレーズをWebフォントで表現できます。
テキストなので、視覚障害の方々への読み上げ機能の提供もしやすくなります。もちろん、翻訳にも簡単に対応できます。

読み上げ機能は、スマートデバイスだけでなく、今後、デジタルサイネージ等の店頭や公共における端末での利⽤シーンが増えてくると思われます。ユニバーサルデザイン観点から、Webフォントが注目されています。
-8-

修正が入っても作業が楽
文字修正の際、画像で表現している場合、画像編集ツール上で修正を⾏いますが、Webフォントなら、該当箇所のテキスト編集で更新作業が⾏えます。
【修正例】
例えば、左図の「ハンバーグ」と「唐揚げ」を入れ替える際は、htmlエディタで文字修正するだけです。

-9-

SEO対策にもフレンドリー
検索エンジンは、常にサイトテーマを理解しようと努めています。なぜならば、検索キーワードに最もマッチするサイトをユーザに教えてあげることが検索エンジンの役割だからです。
検索エンジンへの外的SEO対策は、さまざまな書籍やサイトで紹介されていますが、これをやれば確実というものはありません。ただし、テキストで表現しない限り、ワード検索に認識してもらえませんので、画像のalt属性に記載するのが通例でした。
画像文字をWebフォント⽂字に置き換えたからと⾔って検索結果がすぐに上位になる
わけではありませんが、対策をしないでいると、本来ヒットするべきページがヒットせず、集客面で大きな機会損失を招く可能性が高くなります。チリも積もれば・・・の観点で、⾒出し要素やキャプションなど、キーワードと関連性の⾼い情報はテキストで表現することがSEO対策の基本になります。Webフォントがその解決策のひとつと言えます。

-10-

⽂字が本来持っている表現⼒
文字は、感情や感性を表現するための重要な素材です。Webフォントを活用すればページの表現⼒が格段にUPします。
Sample①[モトヤ 装飾アポロ6]

font-familyで書体指定[ デバイスフォント：MSゴシック]

Sample②[白舟 白雨]Sample③[FONTWORKS
スーラキャピー]-11-

リキッドレイアウトに対応（文字だからリフローします！）[Media Queries（メディアクエリ）を使用して作成されたWebサイト]

ブラウザ幅を変更
するとリフローする•••

Media Queries（メディアクエリ）とはディスプレイサイズによって表示方法（CSS）を切り替える技術です。
画像も大きさを可変にできますが、文字が画像で作成されていると縮小の際に文字まで小さくなってしまいます。
Webフォントを活用すれば、表現はそのままに、文字なので折り畳むことができます。

-12-

Webフォント関連おすすめサイトなど
フォントブログフォント/Webフォント/書体/文字/タイポグラフィの情報ブログです。
山田 晃輔
PETITBOYS
Webデザイナー・ライター
フォントブログ で検索

Web Designing 2012年4月号「Webフォント百花繚乱」の記事が掲載されています。

2011年10月号～12月号では“Webフォント連載記事（3誌連載）-13-

ご参考URL 〜W3C関連とWebフォント〜
1. W3C関連リファレンス
http://www.w3.org/TR/css3-fonts/
http://www.w3.org/TR/WOFF/
http://www.bathtimefish.com/html5/webfonts/eikoseisui.html
2. ウェブアクセシビリティ・ユニバーサルデザイン
http://www.soumu.go.jp/main_sosiki/joho_tsusin/w_access/index_02.html
http://profile.allabout.co.jp/ask/q-26353/
http://www.city.osaka.lg.jp/
3. Webフォント活⽤事例
http://pr.fontplus.jp/2011/winner/layout.html
http://son56.power-studio.com/
http://www.fontplus.sakura.ne.jp/manifes/index2.html
http://pr.fontplus.jp/sample/02/
http://kuri.nifty.com/seesea/index.htm4. 日本の主なWebフォントサービスサイト
http://webfont.fontplus.jp/
http://typesquare.com/
http://amanaimages.com/font/web/index.aspx
http://decomoji.jp/
http://mojidepa.com/login
-14-

講師紹介

-15-

フォントプラス
ご紹介-16-フォントプラスの特徴
国内有名フォントベンダーのフォント600書体以上が利⽤可能
フォントプラスは印刷業界で⻑年の実績をもつ⼀流フォントベンダーが協⼒しており、2012年6月25日現在「フォントワークス」「モトヤ」「イワタ」「白舟書体」「モリサワ」「方正」のWebフォントが利⽤できます。

読み込みもスムーズ！

独自のサブセット化技術

フォントのサブセット化とは、特定の文字のみを抽出して新しいフォントを作成することで、フォントファイルのサイズを小さくし、Webフォントに適したサイズにする仕組みです。

OS/ブラウザ/デバイスなどさまざまな環境へ対応！
スマートフォンやタブレット等のブラウザにも対応

Windows/Mac の両OS に対応し、ブラウザは InternetExplorer、FireFox、Safari、Chrome 等の主要ブラウザに対応しています。
パソコンのみならず、スマートフォンや スマートパッド等 のブラウザにも対応。

-17-

今年が⽇本語Webフォント普及元年■Webフォントのニーズの高まり
ブラウザで表示できる文字（画像文字を除く）は、ウェブサイトを閲覧するパソコンやスマーフォン・タブレットにインストールされているデバイスフォントに依存してました。
Webフォントを活用すれば、デバイスにフォントがインストールされていなくても、さまざまなデザイン文字を自由に表示させることができます。HTML5/CSS3時代のWeb制作おいては必須アイテムになりつつあります。

■日本語Webフォントが今まで利⽤されなかった理由
欧米フォントは1書体あたりのフォントデータの容量は数⼗キロバイトにすぎませんが、日本語は漢字・仮名文化ですので文字数が非常に多彩であり、1書体あたり数メガ〜数⼗メガバイトのデータサイズになってしまいます。そのため、ページにアクセスする度に日本語フォントを読み込んでいてはサーバに負担がかかるうえ、閲覧者にも大きなストレスとなっていました。近年、サブセット化技術により、この問題が解決されたのです。

■サブセット化

フォントプラスでは、日本語フォントをWebフォントとして扱うために、すべての文字をダウンロードさせる方式ではなく、Webページ内で使われている文字だけを抽出し、必要な文字のみのフォントデータを配信します。

※フォントプラスでは二つの配信方式があります。リアルタイムでサブセットを取得する方式の『スマートライセンス』と、事前バッチ処理でサブセットを取得する⽅式の『バリューライセンス』です。Webサイトの特性にあわせて選択してください。

-18-

フォントプラスサービスの種類
フォントプラス・クラウドサービスには、二つのライセンス方式があります。
導⼊⽅法は次ページ以降でご説明します。

・スマートライセンス（ダイナミック取得）
・バリューライセンス（事前サブセット取得）
Webフォント適応モック

スマート方式はこちら
バリュー方式はこちら ※チラツキなし

Webフォント適応なしはこちら

なお、大規模ECサイトやポータル事業を運営している企業様、CMS（コンテンツマネジメントシステム）連携のWebサイトを運営の企業様は、オンプレミス構築型のエンタープライズサービスをご用意しておりますので、別途、ご相談ください。
-19-

Webフォント適用TIPS（スマートライセンス：ダイナミック取得型）
スマートライセンス（リアルタイム取得型）のHTML/CSS適用イメージです。
【例： html をエディタ表示】【例： style.ccs をエディタ表示】FONT+管理画⾯で、Webフォントを適用するドメインを指定します。その際、そのサイトに埋め込むためのJavaScriptタグが発⾏されますので、htmlファイルのhead内に適用してください。あとは、スタイルシート側で、指定したい要素単位に、font-familyを指定するだけです。
複数のドメインを指定できます。ただし、PVに応じて、クラウド利⽤料が異なります。※プリペイド購入方式-20-

Webフォント導入TIPS（バリューライセンス：事前サブセット型）
バリューライセンス（バッチ取得型）では、Webフォント表示させたい文字（サブセット）を事前に公開Webサーバへアップロードする必要があります。
バリューラインセンスのクラウドサービスをご利⽤の際は、FONT+管理画⾯にて、使用するWebサーバのドメインを登録後、Webフォントを適用するHTML・CSSファイルをアップロードしてください。すぐに、HTML・CSSファイルと一緒にサブセットフォントファイルがダウンロードできますので公開Webサーバへ適用してください。

クラウドサービスでは、ページ更新をする都度（Webフォントに関連する記述変更）、FONT+管理画⾯へログインし、HTMLファイルとCSSファイルのアップロード作業およびダウンロード作業が必要です。
なお、エンタープライズ型（オンプレミス導入型）では、Web制作側のシステムと連携させる仕組みを提案し（API機能の活⽤）、効率の良い制作ワークフローをご提供いたします。
-21-

100文字（1書体）をサブセットしたケースのデータ容量-22-

フォントプラスのブラウザ対応表
ブラウザWebフォント対応表
ブラウザ

フォント形式
EOT

TTF

OTF

FONT+
SVG

WOFF

対応状況

Internet Explorer 4〜5○×（非対応）

Internet Explorer 6〜7○○

Internet Explorer 8○○Internet Explorer 9〜○○

Firefox 3.5○○

Firefox 3.6○○

Firefox 3.7

○

○

○

Safari 3.1〜5○○○

Safari 5.1○○○

Chrome 4〜5○○○

Chrome 6〜○○○

iOS 3.x〜4.1
iOS 4.2〜○○

Android 2.2, 2.3, 3.x

○

○

○○

○○○

○
○

○

○
○

○

○

○

○

○

○
○

2012年6月現在-23-フォントプラス クラウドサービス価格表
クラウドサービス「スマートライセンス」(リアルタイム取得型)は複数ドメイン指定が可能です。ウェブフォントが適用されたページ表示回数の総数がカウントされます。購入したPV数残が少なくなると管理者へメールでご連絡しますので、追加でPVチケットをご購入ください。なお、PV数が消化された場合はウェブフォントが適用されませんが、デバイスフォントで表示されます。
「バリューライセンス」(バッチ取得型)は、サブセットをお客様のWebサーバへアップする方式ですので、PV数に応じた料⾦体系ではありませんが、1バリューライセンスが指定できるドメインは1つになりますので、ステージングサーバや複数の商用サイトに適用する際は、複数ライセンスの購入をお願いいたします。
（注）クラウドサービスでは、どちらのライセンスにおいても、1htmlページで変換可能最大文字数は1,000グリフ/1書体です。
『エンタープライス版』について
ポータルサイト運営企業様、アクセス数の多い大規模サイト運営企業様、パフォーマンスを求めるお客様におきましては、専用サーバにフォントプラスエンジンをインストールした構築型（オンプレミス型）をご提案いたします。費用につきましては別途ご相談ください。
※エンタープライズ版（フォントプラスサーバー構築型）の1ライセンス費用は初期200万円〜となります。

-24-付録： 用語集
HTML5（エイチティーエムエル・ファイブ）とは HTMLの5回目に当たる大幅な改定版である。HTML5はW3C [*3]2008年1月22日にドラフト（草案）が発表された。現在、2014年までの正式勧告を⽬指して策定が⾏われている。改訂の主要目的のひとつとして人間にも読解可能でコンピューターやディバイス（ウェブブラウザ、構文解析器など）にも矛盾せず読解されるとともに最新のマルチメディアをサポートする言語に向上することである。HTML5ではHTML4だけでなくXHTML1やDOM2HTML（特にJavaScript)も加える意向である。
引用元：ウィキペディア
CSS（シーエスエス）は、Cascading Style Sheets（カスケーディング・スタイル・シート）の略語。HTMLやXMLの要素をどのように修飾（表示）するかを指示するW3C [*3] による仕様の⼀つ。⽂書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。また、次のような特徴を持つ。『ページを表示するメディアに合わせてスタイルシートを切り替えることで、メディアごとに表⽰を変化させることができる』『ユーザーエージェント（多くの場合ウェブブラウザ）、ウェブサイト制作者、ユーザがそれぞれ定義したCSSのもたらす効果を重ね合わせる（カスケードする）ことができる』
引用元：ウィキペディア
W3C（だぶりゅーすりーしー）*3 とは、World Wide Web Consortiumの略語。インターネットのWWW（ワールド・ワイド・ウェブ）に関する規格化や標準化などを⾏う団体。W3コンソーシアム、WWWコンソーシアムともいう。
引用元：ニッポニカ・プラス（小学館）
ウェブアクセシビリティ（Web Accessibility）とは、本来、『高齢者・障がい者がウェブを簡単に利⽤できるようにするため、ウェブアクセシビリティの確保・向上を図ること』である。
引用元：ウェブアクセシビリティ基盤委員会 http://waic.jp/
ユニバーサルデザイン（Universal Design、UDと略記することもある）とは、⽂化・⾔語・国籍の違い、⽼若男⼥といった差異、障害・能⼒の如何を問わずに利⽤することができる施設・製品・情報の設計（デザイン）をいう。IT関連のデザイン例としては、『パソコンの操作をキーボードやマウスだけでなく他の⼊⼒⼿段に対応させる』『パソコンの画面表⽰を⾒やすく⼯夫する』『⾳声での出⼒に配慮した画⾯表⽰、構成にする』 などがある。
引用元：ウィキペディア-25-

付録： 日本語活字の歴史
欧州における活版印刷技術の歴史は、15世紀までさかのぼり、ドイツのヨハネス・グーテンベルクが活版印刷機の実用化に成功したと言われています。日本においては日本語の文字数の多さから、鋳造活字の組版の歴史は欧米に比べて、その歴史は浅いようです。
キリシタン版（16世紀）
古活字版、⽊活字印刷（江⼾時代）↓
活版印刷、鋳造活字↓
写真植字（写植）↓DTP（デスクトップ・パブリッシング）↓
Web化、オープン化【鋳造活字】

日本語はその文化の特性上、漢字・ひながな・カタカナがあり、また、日本語字体が持つ美しさから、デジタル化・Webオープン化した後も、フォントに重要性を置くWebクリ―エータも少なくない。昨年後半より、⽇本語Webフォントサービスが各社から開始され、Webの世界においても美しい文字の活用が普及すると考えます。
引用元：ウィキベディア
活字
フォント
字体
書体

http://ja.wikipedia.org/wiki/%E6%B4%BB%E5%AD%97
http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88
http://ja.wikipedia.org/wiki/%E5%AD%97%E4%BD%93

http://ja.wikipedia.org/wiki/%E3%82%BF%E3%82%A4%E3%83%97%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9（タイプフェース）-26-

フォントプラス
http://fontplus.jp/
サービス提供元：

ソフトバンク・テクノロジー株式会社-27-