日本語Webフォントで変わる、
Web表現の未来
～ブランディングやSEO対策で注目されるWebフォントとは？～
ソフトバンク・テクノロジー株式会社
Webフォント エバンジェリスト 関口浩之
せきぐち
ひろゆき
関口 浩之
ソフトバンク・テクノロジー株式会社
1960年 群馬県桐生市出身
1984年 電子機器メーカーにて日本語DTPシステムやプリンタの製品開発
1995年 ソフトバンク技研（現 ソフトバンク・テクノロジー）へ入社
1996年 大手インターネット検索サービスの立ち上げプロデューサ
1997年 インターネット黎明期に大手インターネットサイトの運営責任者
2001年 インターネット決済センターの立ち上げプロジェクトリーダー
2006年 携帯アプリ、iPhone/iPadのビジネスアプリなどのプロデューサ
現在
Webフォントサービス『フォントプラス』エバンジェリスト
Webフォント エバンジェリスト
フォントオタク
ITオタク
天体オタク
テニスオタク
パソコンは漢字トークやMS-DOS、パソコン通信の時代から勤しむ
直訳すると…
プレグレッシブ英和中辞典より
＋
文字を観たことがありますか？
雑誌の表紙は
さまざまな美しい書体で
表現してます！
ファッション雑誌を
観察してみましょう
デザイン美
を
テレビのテロップ文字を
観察してしてみましょう
言葉の
ニュアンス
に合った
書体で表現しています！
コミックレゲエ
スーラ
ロウディ
スランプ
くろかね
文字(Font)って
を
に
伝えるため
重要なデザイン構成要素
http://www.city.odawara.kanagawa.jp/
事例：
http://www.w3.org/TR/css-fonts-3/
HTML5登場で
ブラウザ上に直接
様々なフォントが
表示できる！
日本語Webフォント開始当初の代表例
ご自身のTwitterアカウントまたは有名人アカウント
を入力してみてください。TwitterAPIでタイムライ
ン取得し、いろんな書体でモーションタイポグラフィ
を表現しました。文節分析し文字サイズ変更したり、
３Dで表示したり、読むのが楽しくなります。書体名
も表示されますのであわせてお楽しみください。
※ Internet Explorerでは3Dに対応していません。魚の泳ぐ様子をウェブフォントで表現しました。魚
をクリックすると詳細説明が表示されます。魚の特
徴に応じた書体選択と文字の動きが感動ものです。
上下左右にスクロールすると多彩な魚がどんどん出
現しますのでじっくり楽しんでください。魚は画像
ではなくWebフォントなのです！
※ Webフォントアワード2011最優秀作品http://kuri.nifty.com/seesea/
http://pr.fontplus.jp/sample/02/
Webフォントアワード 2011最優秀賞
主催者作品例 マイナビ & SBT
システムフォントのお話から
Mac OS や iOS
Windows
Android
ヒラギノ
MS P ゴシック / メイリオ
新ゴ, マルベリなど
Webフォントを
利用すると…
例）font-family: “FOT-筑紫明朝 Pro D”;端末/OS毎に内蔵しているフォントが異なるので、
導入はむずかしいの？
マークアップ方法は次ページにて
システムフォント
http://p.tl/zw7g
Webフォント（コメット, アポロ, ニューシネマを使用）
http://p.tl/M4hL
基本は２ステップです。
① FONTPLUSで発行するタグを
貼り付ける。
② Font-familyを指定する。
詳細はこちら：
（導入ガイド）
http://bit.ly/1p8DIXS
h1 { font-family: ”MatisseElegantoPro-DB”; }
あなたのWebサーバ
HTML, CSSなど
Webフォント 配信フォーマット〇〇フォントください
と
FONTPLUS
クラウドサービス
必要な文字(グリフ)だけ
Webフォント配信
配信方式は二通り
(スマート / バリュー)
Webフォント（クラウドサービス）概要図
…
海外のWebフォント事情
海外ではWebフォントが当たり前のように使用されています。
http://www.nike.com/us
/en_us/
グローバルナビやバナー上の文字が
www.houseind.com/
海外のWebフォントサービス一覧
サービス名
URL
Google Web Fonts
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/
Kernest
http://kernest.com/
Font Me Up
http://fontmeup.com/
日本語Webフォントサービス一覧
サービス名
会社名
FONTPLUS
(フォントプラス)
有名フォントメーカ書体(約700書体)
が全部使える百貨店型サイト
ソフトバンク・
テクノロジー株式会社
TypeSquare
(タイプスクウェア)
フォントメーカ最大手モリサワ直営店
株式会社モリサワ
デコもじ
シーサー株式会社
アマナイメージズ
WEBフォント
株式会社
アマナイメージズ
http://fontplus.jp/2011年
アーリーアダプター期
2012年
先端技術好きな制作会社が
特設サイト等で活用
2013年
表示速度の大幅改善で
日本語Webフォントが注目し始める
大手企業も導入開始
2014年4月
WinXPサポート終了
コーダー主導
テクニカルな活用デザイナー主導
スペシャルコンテンツディレクター主導
グローバルナビや見出しサイトオーナー層
ブランディング2014年
日本語Webフォントを
あたり前に利用する時代へ
モダンブラウザ化加速！
2011年夏「FONTPLUS」始動
遅れること２年…
海外Webフォントサービスに
大幅な速度改善実施
「FONTPLUS」は
2013年5月15日に
日本語Webフォント変遷
日本語Webフォントの表示速度が高速化された後、様々
な業界の企業様や官公庁様などにおいてFONTPLUSの
導入が加速しております。
http://www.kelloggs.jp/
日本ケロッグ様
サイトリニューアルに際し、画像テ
キストをできるかぎり廃止し、グロ
ーバルナビゲーションや見出しに
Webフォントを導入。メインビジュ
ルのキャッチコピーもWebフォント
（丸ゴシックのスーラ）を採用した
ところ、サイト全体が美しくなりま
した。ブランディング、SEO対策、
Web制作効率化が同時に実現できま
した。ローテーションのメインビジ
ュアルのキャッチはコピペできます
ので実際にお確かめください。
http://www.city.odawara.kanagawa.jp/
小田原市様
2014年12月、小田原市公式ホームページのサイトリニューアルに際し、市町村公式ホーム
ページとして日本で初めて日本語Webフォントを導入しました。
Webアクセシビリティ向上のための[文字色変更]や[文字サイズ変更]機能の実現において、
画像文字ではなくテキスト（Webフォント）を採用したことで格段に使いやすくなりまし
た。また、Google翻訳APIを活用し多言語対応しました。画像テキストだった箇所を限り
なくWebフォントに置き換えたことで、ブランディングを向上しつつ、テキスト読上げ
日本広報協会
全国広報コンクール
2014 入選！！
■ 大江戸温泉物語様 グローバルナビゲーションや見出し、 キャッチコピーにWebフォント（筑 紫明朝）を採用。サイトブランディン グとSEO対策、作業効率化を実現。 http://www.ooedoonsen.jp/ http://www.kinugawakanaya.com/ ■ 鬼怒川金谷ホテル様 ※バリュー方式 ホテル名、住所や電話番号を画像文字か らWebフォントに置き換えたら住所がコ ピペができる、電話がタップしてできる 。お客様から喜ばれました。 http://www.nicho.co.jp/ ■ 日本調剤様 サイト全体に優しさを出すためにモト ヤマルベリ（丸ゴシック体）を採用。 ブランディングの向上に加え、”お薬” ”処方箋”が身近に感じられるようにな りました。 http://ynn.jp/ ■ よしもとクリエイティブエージェンシー様 Webフォントを使用すれば様々な書体 で楽しさをアピールできます。動画サ ムネイル＋キャッチコピー併記でコン テンツ内容が的確に伝わります。 http://www.hotoku.co.jp/wedding/ ■ 報徳会館様 メインビジュアルのムービーやパララ ックスのキャプション文字にライラを 採用。神前結婚式場にマッチした書体 ですね。可読性も抜群です。
FONTPLUS（クラウド）導入事例
事例掲載の許諾をいただいたサイトの一部です。 http://eiganokotoba.jp/ ■ 20世紀フォックス ジャパン様 映画に相応しい書体と言えば字幕用フ ォントです。Webフォント適用部分 を限定（映画キャプションのみ）させ ることで映画の世界観を見事に表現。■ タイポマップ（こへ様） Webフォントでタイポマップ。プルダ ウンメニューで言語や文字（1文字or 単語）の切替、面積や人口等の切替も 可能。文字をクリックすると詳細も。 http://colamune.com/typomap/ http://www.hylind.net/greatfont/ ■ 読者が書体選択（サリーちゃんのパパ様） ブログ読者が自由に書体選択できる斬 新な実験サイト。例えば「くるくるか わいい」を選択し[切り替える]ボタン をクリックしてください。 http://novelsphere.jp/ ■ ノベルゲーム（言語社様） ※バリュー方式 Webフォントを使用している作品は 「森川空のルール」シリーズです。タ イトルクレジット後の小説本文は日本 語Webフォントです。 http://soyandco.com/ ■ SOY&CO.様 観光ガイドやレシピ本を読む感覚で読 むことができます。Webフォントが 高速化されたので全文Webフォント 適用しましたがストレスありません。 http://anatani-aitai.com/ ■ あなたに会いたい！（千貫りこさん） Webクリエイター千貫りこさんのブ ログサイト。女性ならではの感性で 各業界で活躍している方々を取材。 使用している書体が素敵ですね。 ■ ピクシィブ様 デザイン性と見やすさの観点で導入 を検討。FONTPLUSは導入企業が 非常に多いですし価格も予算内だっ たので安心して導入できました。 http://recruit.pixiv.net/
FONTPLUSエンタープライズ版の事例
FONTPLUSエンタープライズ版は、Webフォント変換サーバをOEM提供したり、独自APIで高度なシステム
連携を実現するための仕組みです。下記2つは業務提携して新たなビジネスモデルを一緒に構築した事例です。
利用者がCSSやプログラミングの知識一切なしで日本語Webフォントを利用できるよう、システムを共同開発
しました。レンタルサーバ事業者、ソーシャルメディア事業者やゲーム事業者、大規模サイトを運営している企
業、および自社書体（コーポレートフォント）を所有している企業様等にてご利用いただいてます。
通常のFONTPLUSクラウド版（Webオンライン決済でお申し込み）の仕様や価格とは異なりますので、詳細
は弊社までお問合せください。
② デジタルステージ ホームページ作成ソフト『BiND7/6.5』『LiVE2』がWebフォントに対応
デジタルステージのレンタルサーバのバックエンドにフォントプラスを設置することでバリューライセン ス（サブセット方式）とスマートライセンス（オーサリングプレビュー）をシステム連携しました。利用 者はCSS3やプログラム知識は一切不要で、プロフェッショナル書体が200書体以上 ご利用できます。丸 明オールドで有名なカタオカデザインワークスの書体と、筑紫明朝やマティス、ラグランパンチ等で有名 なフォントワークスの書体に対応しています。 http://www.softbanktech.co.jp/corp/news/press/2013/067/ いままでのサイネージシステムは動画ファイルを液晶画面等に動画ビューアで再生するのが一般的でした。 今回のHTML5ベースで開発したオーサリングシステムでは、キャンペーンに適した装飾書体をWebフォン トで誰でも簡単に綺麗にコンテンツ制作できます。コンテンツがHTML５ベースですので、閲覧端末は液晶 テレビではなく、AndroidやiPadなどのタブレットのブラウザで再生できる仕組みです。お手軽かつ低コ ストで新世代のデジタルサイネージが実現しました。① ACCESS
HTML5対応デジタルサイネージ『SIGNESS』がWebフォントに対応
http://www.digitalstage.jp/webfont/ http://internet.watch.impress.co.jp/docs/interview/20130520_599186.html 取材記事： プレスリリース： 特設サイト：お役立ち情報
http://p.tl/NKiX
FONTPLUSインタービュー記事
2014年1月開催のデベロッパーカンファレンス
『MTDDC名古屋』でのインタビュー記事です。
Web制作会社の立場で複数案件でWebフォントを
導入するケースもご説明しています。
TIPSサイト "FONTPLUSTIPS"
コーディングチップスが満載。また書体や文字組
みに関する詳しい解説なども掲載しています。タ
イプデザインやWebエンジニアで活躍している大
谷秀映氏が出稿しています。
http://www.fontplustips.com/
http://p.tl/tzu9
新旧FONTPLUSの速度比較
左が旧FONTPLUS（2013年5月14日まで）、
右が現行のFONTPLUSです。以前はシステム
フォントが表示された後、一呼吸してから
Webフォントが表示されていました。
現行のFONTPLUSではシステムフォントの
表示が感じられないケースも多くなりました。
（注）表示速度はそのページのコンテンツ構成
やお客様のWebサーバのコンディション、閲
覧者ブラウザのレンダリング性能などに左右さ
れます。
2013年5月14日までの
旧フォントプラス
2013年5月15日以降の
現行フォントプラス
日本語Webフォントを利用したいけど表示が遅いからなぁ…と思ってい
る方が多いのではないでしょうか？
ご存じの方がまだ少ないのですが、昨年、FONTPLUSはWebフォント
の表示速度を大幅に改善しました。下記の動画でお確かめください。
日本語Webフォントは高速表示の時代へ
■ 通常モード（文字詰めなし）
② 余白なし詰め + LetterSpacing
&t=0タグ
http://p.tl/aNrn
http://p.tl/ijou
① プロポーショナルメトリクス
&pm=1タグ
この方式ではIE8以前のブラウザではプロポーショナルメトリクスは動作しませんが通常のWebフォント表示になります。http://p.tl/AXYf
http://fontplustips.com/item/23-proportional.html プロポーショナルメトリクスの詳細 →→モック：
■ 文字詰め機能は二種類
文字詰め機能リリース（新機能）
モック：
モック：
ヒラギノ書体追加リリース（新書体）
FONTPLUSは国内外有名フォントメーカと提携し、約700書体が使える
百貨店型Webフォントサービスです。これだけのプロフェッショナル書体
がWebフォントとして使えるのはFONTPLUSだけ！
今後もフォントメーカとの提携を増やしてゆきます。
Windowsマシン上のブラウザで ヒラギノ書体が表示できる！ 2014年2月に大日本スクリーン 製造と業務提携しヒラギノ書体 がFONTPLUSで使用できるよ うになりました。http://p.tl/h191
2014年2月
ヒラギノ書体を追加リリース
モック：HTML, CSSなど 中国語 韓国語 Webフォント形式
