制作現場に根付いてきた
日本語Webフォントとはソフトバンク・テクノロジー株式会社
Webフォント エバンジェリスト
関口 浩之
2016年2月8日
日本マイクロソフト 中四国支店（広島） セミナールーム関口 浩之Webフォント エバンジェリスト

1960年
1980年代1990年代2000年代現在

群馬県桐生市生まれ
日本語ワープロ、DTPシステム、プリンタの製品開発
Yahoo! JAPAN検索エンジンDataBase開発プロデューサ
ECサイト構築/運営コンサルタント
Webフォントサービス『FONTPLUS』エバンジェリスト

文字オタク

天体観測オタク

テニスオタク2日刊デジタルクリエイターズ『もじもじトーク』月2回連載

もじもじトーク
3

FONTPLUS DAY 定期開催

『文字とデザイン』がテーマ

http://fontplus.connpass.com/

4

質問です

5

このフォント、知ってますか？

6問1. 何という書体（フォント）か知ってますか？

第伍話

シックスアパート広島
PowerCMSクラウド
使
襲来襲来襲来徒、7マティスEB

フォントワークス

http://www.lets-member.jp/about/feature/2/

第伍話

シックスアパート広島
BE
PowerCMSクラウドス
ィ使テ
マ
襲来襲来襲来徒、8

問2. 何という書体（フォント）か知ってますか？

9

ラグランパンチ

フォントワークス

https://webfont.fontplus.jp/service/fontdetail/-bAfnBDoDyY%3D

チン

パン

ラ
グラ

10

問3. 何という書体（フォント）か知ってますか？
WBS（ワールドビジネスサテライト）のテロップ文字を今夜、確認してみてください。

11モード明朝フォントワークス

http://fontworks.co.jp/news/2010/100100384.html

WBS（ワールドビジネスサテライト）のテロップ文字を今夜、確認してみてください。

朝明

ドーモ

12

Webコンテンツにおける文字が占める割合は？
13

95％以上https://ia.net/know-how/the-web-is-all-about-typography-period

14Webフォントって？

15このバナーは何で作りますか？

画像文字
http://goo.gl/t1bsof

Webフォントhttp://goo.gl/m64Fzn

この番付表の文字はWebフォントで表示しています
http://webfont.fontplus.jp/data̲sample/ex03.html

17なので、修正作業は簡単です！

18

システムフォントの話

19デバイスやOSバージョンごとに搭載フォントが異なる

Mac OS ・ iOS

Windows

Android

ヒラギノなどメイリオ / MS P ゴシックなど

新ゴ, マルベリなど

Webフォントを活用すれば全てのデバイス環境で書体が統一できる！

20

Webフォント
基礎講座

21

デモンストレーション

http://goo.gl/3yQHCK

http://goo.gl/ZJMhwe
22

FONTPLUSスマートライセンスは導入がカンタン！
① 使用するドメインを登録（URL登録無制限）<!DOCTYPE html>② FONTPLUSのJavaScriptタグをコピペする<html lang="ja">③ font-familyで書体指定<head><meta charset="UTF-8"><title>宇宙兄弟 ¦ システムフォント</title><link rel="stylesheet" href= style.css"></head><body><div class="box̲a"><h1>宇宙兄弟の天体観測</h1><div class="box̲b"><h2><a id="dosei">東京のマンションベランダから天体観測</a></h2><br /><img src="doseimokusei.jpg" alt="土星と木星" /><br><p class="msg">
東京の空は夜空も結構明るいけれど、お月様や惑星とかは天体望遠鏡を使えば、そこそこ楽しめるんですよ〜☆ 〜中略〜 赤道儀と追尾モーターはビクセンです。<br />
</p>
<hr>
<div>関口浩之の個人レンタルサーバのモックです。</div></div></div></body></html>23

<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title>宇宙兄弟 ¦ システムフォント</title><link rel="stylesheet" href= style.css ></head><body><div class="box̲a"><h1>宇宙兄弟の天体観測</h1><div class="box̲b"><h2><a id="dosei">東京のマンションベランダから天体観測</a></h2><br /><img src="doseimokusei.jpg" alt="土星と木星" /><br><p class="msg">
東京の空は夜空も結構明るいけれど、お月様や惑星とかは天体望遠鏡を使えば、そこそこ楽しめるんですよ〜☆ 〜中略〜 赤道儀と追尾モーターはビクセンです。<br />
</p>
<hr>
<div>関口浩之の個人レンタルサーバのモックです。</div></div></div></body></html>24

<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title>宇宙兄弟 ¦ システムフォント</title><link rel="stylesheet" href= style.css ><script type="text/javascript" src=“//webfont.fontplus.jp/accessor/script/fontplus.js?
xxxxxxxxxxxxxxxxx&aa=1&delay=２” charset=“utf-8"></script></head><body><div class="box̲a"><h1>宇宙兄弟の天体観測</h1><div class="box̲b"><h2><a id="dosei">東京のマンションベランダから天体観測</a></h2><br /><img src="doseimokusei.jpg" alt="土星と木星" /><br><p class="msg">
東京の空は夜空も結構明るいけれど、お月様や惑星とかは天体望遠鏡を使えば、そこそこ楽しめるんですよ〜☆ 〜中略〜 赤道儀と追尾モーターはビクセンです。<br />
</p>
<hr>
<div>関口浩之の個人レンタルサーバのモックです。</div></div></div></body></html>25

<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title>宇宙兄弟 ¦ システムフォント</title><link rel="stylesheet" href= style.css ><script type="text/javascript" src=“//webfont.fontplus.jp/accessor/script/fontplus.js?
xxxxxxxxxxxxxxxxx&aa=1&delay=２” charset=“utf-8"></script></head><body><div class="box̲a"><h1>宇宙兄弟の天体観測</h1><div class="box̲b"><h2><a id="dosei">東京のマンションベランダから天体観測</a></h2><br /><img src="doseimokusei.jpg" alt="土星と木星" /><br><p class="msg">
東京の空は夜空も結構明るいけれど、お月様や惑星とかは天体望遠鏡を使えば、そこそこ楽しめるんですよ〜☆ 〜中略〜 赤道儀と追尾モーターはビクセンです。<br />
</p>
<hr>
<div>関口浩之の個人レンタルサーバのモックです。</div></div></div></body></html>26

@charset "utf-8";
body {
font-family: "NUDモトヤアポロ Std W3";
font-size: 1.2em;
line-height: 100%;color: black;}h1 {margin: 1.2em 0 1.1em 0;
font-family: "FOT-コメット Std B";
font-size: 4.0em;
line-height: 0.1em;
color: blue;}h2 {font-family: "モトヤstアポロ Std W6";
font-size: 1.6em;
line-height: 0.2em;
color: black;}27

font-family の記述について⚫ font-familyの一般的な記述
ゴシック体
font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
明朝体
font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;⚫ font-familyのベストな書き方2015年度版
http://sole-color-blog.com/blog/design/246/

28

海外のWebフォント事情29

海外サイトではWebフォント利用が当たり前
http://store.nike.com/us/en̲us/pw/kids-girls-tech-pack-collection/7pwZ7pxZclb

http://www.3m.com/3M/en̲US/company-us/
30フォントの調べ方
Firefoxでの操作例

画像文字は調査できません。システムフォントかWebフォント（リモート）の場合

文字を摘んで右クリックして [要素を調査] をクリック

http://store.nike.com/us/en̲us/pw/kids-girls-tech-pack-collection/7pwZ7pxZclb

31

海外のWebフォントサービス
サービス名
Google Web Fonts

URL
http://www.google.com/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/

Kernesthttp://kernest.com/

Font Me Up

http://fontmeup.com/
32

日本語Webフォント事情

33

日本のWebフォントサービス
サービス名
FONTPLUS(フォントプラス)
フォントメーカー１０社と業務提携

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

百貨店型Webフォントサービス

TypeSquare(タイプスクウェア)

モリサワ

デコもじ

シーサー

アマナイメージズ WEBフォント

アマナイメージズ

もじでぱ

緑屋電気
34

日本語Webフォントサービスの変遷

35

日本語Webフォントは遅い？

36日本語のWebフォント、遅いよね？
めちゃくちゃ、速くしました！

2013年5月14日までの旧FONTPLUS

2013年5月15日以降の現行FONTPLUS

表示速度比較動画（約5MB） http://goo.gl/6HeEu4
サーバー切替日に新旧のFONTPLUSにて、iPadを2台並べて同一のWebページで表示速度を比較しました37

欧文フォントはフルセットでも重くない
だって100文字ないし…
でも、日本語フォントの容量はでかい！
１万文字以上あるので…
38約12MB39

フォントサブセット配信40

サブセッティング配信でデータ軽量化
例えば、この文章は2,600文字 ありますが…

■もじもじトーク［02］Webフォント基本講座（1）／関口浩之。前回、デジクリデビューしました関口浩之です。前回は「デジタルフォントが豊富に手に入る時代」と題して、文字の持つ情報伝達力について、そしてデジタルフォント化によって広がる表現力についてのお話をしました。今回のテーマはWebフォントです。「Webフォントってなに？」って方もいると思いますので、まずは「Webフォントの基本講座パート1」をお送りします。かなり基本的なお話ですので、知ってるよって方はスルーしてください（笑）●システムフォントと画像文字、そして、Webフォントまず、この二つのバナーサンプルを見比べてください。おっ、なんか、懐かしいバナーですね。月曜日にデジクリ書かれてる川合さんとこのイベントです。<http://goo.gl/gfhr3s> ← 画像文字<http://goo.gl/jLtYIB> ← Webフォント原寸表示だと同じに見えるかもしれませんが、拡大表示してみてください。画像文字のほうは、拡大すると文字がだんだんギザギザしてきますよね。Webフォントのほうは、いくら拡大してもギザギザにならずにきれいですよね！ブラウザに文字を表示させる方法は、一般的に二通りあります。まずひとつはパソコンやタブレットなどに入っている、システムフォントで表示させる方法です。もうひとつは、画像編集ソフトなどで作成した画像文字を表示させる方法です。「えっ、なんでわざわざ文字を画像で作らなくちゃいけないの？」と素朴な疑問をお持ちの方はいませんか？ そんな方はこちらのバナーサンプルをご覧ください。<http://goo.gl/yKuDRC> ← システムフォントなんかあっさりしすぎですよ......。やはり、キャッチコピーや見出しには、お気に入りのフォントで表現したいですよね。なので、画像編集ソフトでボタンやバナーをせっせと制作してました。日本語Webフォントが登場するまでは。●日本語Webフォント
サービスの登場システムフォントは、プラットフォームやOSバージョンによってまちまちです。搭載されてるフォントは数書体（ゴシック体と明朝体）なのが一般的です。
MacOSXにはヒラギノ書体、Windows7や8ではMSゴシックやメイリオなどが標準搭載されています。ブラウザはアウトラインフォントが表示できるんだから、筑紫明朝とかUD新ゴNTとかを、Webサーバから配信すればいいじゃんと思ってましたが、フォントワークスLETSやMORISAWAPASSPORTでは、そのような利用方法は使用許諾範囲外です。
では、ライセンス上そのような使い方が許諾されているフリーフォントを探して、Webサーバーに置いて使える形式に変換して利用することを考えてみましょう。でも、フォントをフルセット配信すると3〜15MBと大きなフォントデータになってしまいますね。なぜなら、日本語はAdobe-Japan1-6（Pr6）を例にとると2万3千文字以上あるからです。
また、Webフォントフォーマットは何種類もあって（WOFF/EOT/SVG/OFT/TTF）、ブラウザごとにデータを出し分けしないといけないのです。自分でWebフォント配信する仕組みを作るのは、かなりしんどいですね。そこで、3年ぐらい前から日本語対応したWebフォントサービスが5社から提供開始され始めました。FONTPLUS、TypeSquare、デコもじ、アマナイメージズWEBフォント、もじでぱの5つです。PV数などに応じて料金が掛かりますが、Webフォントサービスの料金には各フォントメーカーのWebフォント使用許諾料が含まれているので、安心して使用できます。また、そのページで使用している必要な文字だけを配信するので、フォントデータ容量が軽くすみます。この記事の総文字数とユニー文字数（重複文字は1文字で計算）、Webフォントデータサイズを計算してみました！総文字数：2,568文字ユニーク文字数：397文字配信データサイズ：約50KB ※ロダンNTLGのWOFF形式おおぉ、ひらがなとかは結構重複しているので397文字しかないのですね。このページをWebフォントで作成してみました。書体はロダン
NTLGです。実際にChrome開発ツールなどでダウンロード容量を確かめてみてください。たしかに約50KBですよね......。重くない......。<http://goo.gl/5yeMB6>注：編集部が原稿整理しているので、まったく同一ではありません●Webフォントって何がいいの？（閲覧者視点）あなたのホームページの訪問者にとっては、文字が画像で作られているか、Webフォントで作られているかを気にして読んでいる人は少ないと思います。なぜなら、そのサイトに欲しい情報があるかないかのほうが重要だからです。でも、こんなことでイライラしたことありませんか？・お店の名前や住所がコピーできない・電話番号をタップしても電話がかけられない・商品名をコピペしたかったけどコピーできなかった・ナビゲーションの文字や見出しの文字が読みづらいそうです。このようなケースは、文字は画像文字なのです。僕は気に入ったフレーズをWebサイトで見かけるとコピペしたくなるのですが、マウスでドラッグしてコピーしようとしたら、「名前を付けて画像を保存」と出てきてコピペできないことが多いんですよね。あと、僕は出張が多いので、宿泊するホテル名と住所を自宅にメールしようとしたら「あれ〜、画像文字じゃん」てことで、紙でメモしてからメールすることも少なくありません。前もって宿泊先を家族に伝えることを忘れているのも問題なんですが......。Webフォントを利用すれば、デザイン性を損なうことなく、文字をテキスト化することができます。なので、ユーザーエクスペリエンスの向上につながります。最後に、自分の会社のWebフォントサービスのPRになってしまいますが、FONTPLUSの無料トライアル版の利用方法ページを記載しますので、ご興味のある方は、一度、実際に試してみることをおすすめします。<http://goo.gl/jmwlWp次回は、WebサイトオーナーやWeb制作会社にとっての日本語Webフォントの導入メリットをお送りする予定です。

41

名寄せ後はこれだけ※重複文字が多いので名寄せ後のグリフは400文字■もじトーク［02］Webフォン基本講座（1）／関口浩之。前回、デジリビュしまたですは「タルが豊富に手入る時代」と題て文字の持つ情報伝達力いそ化よっ広表現お話を今テマな？方思ずパ送りか的知スくださ笑●シム画像こ二バナサプ見比べん懐ね月曜日書れ川合イベ<htp:/go.lfr3s> ←jLYIB原寸示同えせ拡大みほうギザきら！ブラウ法一般通あひソコやレッど編集作成わざちゃけ素朴疑問ご覧yKuDRCぎキャチピ出気ボ制語登場OSョ搭載数体ゴ明朝MacXヒノindw78メオ標準ア筑紫U新NT配信ばワ
EAP利用使許諾範囲外セ上探置形式変換考ょ〜5ぜ-J6例万千以何種類FVG分自仕組年ぐ対応社提供開始めqズぱ料金掛各カ含安心ペ必要容量軽記事総ユニ重複計算：,9約※ロダぉ結構実際m発ツド確注部稿整理閲者視点ホ訪読人少欲・店名住所電番号商品ゲづケ僕グ付保存多張宿泊宅紙モ先家族忘性損エ向最後会無版興味度試次導予定

FONTPLUSへWebフォント配信依頼するときはコード順ソートしてリクエスト,-./012356789:<>A！（）／：？［］BCDEFGIJKLMNOPR※STU←VWXY■●abcdefghijlmnopqrstuwy 、。「」〜あいうえぉおかがきぎくぐけこごさざしじすずせ
ぜそただちっつづてでとどなにねのはばぱひべほまみめもゃやょよらりるれわをんアイウエォオカキギクグケゲコゴサザシジスズセソタダチッツテデトドナニノバパヒビピ
フブプベペホボマムメモャュユョラリルレロワン・ー一万上之予事二人今仕付代以会伝住体何作使例供保信像僕先入出分利制前力化千原口号各合同名向含味品商問回囲基
報場変外多大始字存宅安定実家容宿富寸対導少川年広店度座式張形後心必忘応思性情懐成所手拡持掛探提換損搭数整文料新方族日明時曜書最月朝本朴構標次欲比気泊法注
浩準点無版現理用画番疑発登的知確示社種稿笑筑算範約紙素紫組結総編置考者自興般表複要見視覧計記訪許試話語読諾講豊軽載送通達部配重量金開関閲際集電題類

文字数（ユニークグリフ）

400文字

グリフ数カウントツール

容量は50KB

http://goo.gl/6bAlcv
42

全文Webフォントの導入事例

SOY&CO.様

http://soyandco.com

43Webフォントは文字詰め(カーニング)できるの？

FONTPLUSなら文字詰めにも対応！
■ 通常モード（文字詰めなし）

モック：

http://goo.gl/NzbFJG

モック：

http://goo.gl/zQ6ukF■ 文字詰め機能は二種類① プロポーショナルメトリクス &pm=1タグ

FONTPLUS配信時にプロポーショナルメトリクス値を解釈し、X軸方向の文字間調整して字幅を調整しています。

② 余白なし詰め + LetterSpacing&t=0タグモック：

http://goo.gl/0fmE6K

文字の字面の両側余白を削除して、letter-spacingで調整する方式もご用意しています。IE6/7/8でも動作します。

http://pr.fontplus.jp/kerning/
2015年10月、部分指定して文字詰めできる新機能もリリース

http://www.softbanktech.co.jp/corp/news/press/2015/078/

ピンポイント文字詰め機能

http://goo.gl/NbEfxn@charset "utf-8";
body {
font-family: "FOT-筑紫明朝 Pr6N RB";
font-size: 1.3em;
line-height: 120%;color: black;}h1 {margin: 1.2em 0 1.1em 0;
font-family: "FOT-筑紫Bオールド明朝 Pr6 R{pm}";
font-size: 2.3em;
color: purple;}h2 {font-family: "FOT-筑紫明朝 Pr6N RB{pm}";
font-size: 1.5em;
letter-spacing: 0.05em;
color: black;}
プロポーショナルメトリクス対応フォントリスト

ピンポイント文字詰め（新機能）
font-familyの書体名のあとに{pm}セレクタを指定すると その要素のみ文字詰めできる
同一ページ内の同じ書体でも、要素が異なれば個別に文字詰めする/しないの使い分けが可能

http://fontplustips.com/&pm=1/list.html

Windows環境の表示品質は？

Mac環境でのWebフォント表示はきれい！

13インチ MacBook Air 13
1440×900

13インチMacBook Pro Retina
2560×1600
iPad Retina

Windows環境でも綺麗に表示できるの？

Window８マシン IGZO液晶搭載機

2560×1440

Window８マシン ４K液晶搭載機

3840×2160FONTPLUSならWindows環境でも綺麗！
FONTPLUSではWindows環境でも綺麗に表示できるようレンダリング調整して配信しています。
Windows環境でも綺麗に表示できる書体は日本語書体800書体のうち約8割が対応しています。
対応書体一覧 http://fontplustips.com/&pm=1/list.html※プロポーショナルメトリクス対応書体がアンチエイリアス処理配信にも対応しています

また、横解像度が2000ドット以上のディスプレを積んだWindows7以降のパソコンだと小さい文字もMac Retina同様に非常に綺麗です。

導入事例

50

小田原市公式ホームページ様
日本広報協会
全国広報コンクール
2014 入選！

http://www.city.odawara.kanagawa.jp/

アクセシビリティとデザイン性を両立、自動翻訳にも対応！
ナビゲーションや見出しに親しみ感のある「ハミング」を採用したことで市民との距離が近くなりました

51

博報堂様

京都造形芸術大学様

http://seikatsusoken.jp/teiten2014/

http://www.kyoto-art.ac.jp/t/植彌加藤造園様

日本情報産業様

http://ueyakato.jp/http://www.nii.co.jp/

52大江戸温泉物語様

鬼怒川金谷ホテル様

http://www.ooedoonsen.jp/

http://www.kinugawakanaya.com/

日本調剤様

SNOWSTEEZ様

http://www.nicho.co.jp/

https://www.snowsteez.jp/
53

ガトーフェスタ ハラダ様

コトノカ様

shop.gateaufesta-harada.com/shop/

http://www.kotonoca.com/

四街道市様

SOY & CO.様

http://www.dramaticyotsukaido.com/

http://soyandco.com/

54

報徳会館様ピクシィブ様http://www.hotoku.co.jp/wedding/

http://recruit.pixiv.net/

イントリックス様

タイプマップ（こへ様）

http://www.intrix.co.jp/2012/

http://colamune.com/typomap/

55

あなたに会いたい（千貫りこ様）

ふにろぐ（出口伸也様）

http://anatani-aitai.com/

http://funnis.net/blog/

データファーム（勝又孝幸様）

金沢の坂道（いちがみトモロヲ様）

http://datafarm.jp/

http://kanazawasaka.com/

56

FONTPLUS料金体系

57

FONTPLUSはシンプルな料金体系が魅力
プロ用フォント800書体がWebフォント使い放題！
2016年1月時点の提携先フォントメーカーは10社（今後も増える予定）

1ライセンスで複数サイトで利用可能、ドメイン登録数無制限！
10万PV月1,000円から１年間有効の120万PV（12,000円）がおすすめ

FONTPLUSスマートライセンス
・スマートライセンスは1契約で複数ドメイン利用できます。つまり、購入したPV数は複数ドメインで分け合えます！ 登録ドメイン数に制限はありません。
・制作会社で契約の場合、自社サイトおよび複数のクライアントワークでご利用することも可能です。企業契約の場合、コポレートサイト、サービスサイト、関連会社でご利用することも可能です。
お申し込みからご利用開始までに要する日数は？
・クレジット（Web申し込み）の場合、即時利用開始できます。クレジットですと追加購入忘れが防止できる自動更新も可能です。振込（Web申込）の際は入金確認まで１週間程度かかる場合があります。
・ご要望により、弊社と口座開設の上、注文書・請求書ベースのお取り引きも可能です。詳しくは担当者までお問い合わせください。

58

FONTPLUS購入アドバイス
個人契約の場合、月1,080円（有効期限1ヶ月の10万PVスマートライセンス）のクレジット決済/自動更新で購入する方が多いです。自動更新にすると、もし月間10万PVを超えた場合でもWebフォント配信が停止することはありません。でも個人サイトで月間10万PV超えたらすごいです…。
なお、法人契約の場合、年12,960円（有効期限1年間の120万PVスマートライセンス）のチケット購入するのが一般的です。「ときどき月30万PV行くけど普段は月間5万PVです」というようい月々
PV数が変動するサイトでは120万PVスマートライセンスが運用しやすいです。個人の継続利用の場合、年一括払い的に考えて120万PVを購入するケースも少なくありません。
良く聞かれる質問で「自動更新設定してない場合、PVが切れたら文字がでなくなるですか？」がありますが、Webフォントが配信されなくなりますがシステムフォントが表示されます。
（注）残PV数が30%/20%/10%を切った時、および有効期間の3ヶ月前/2ヶ月前/1ヶ月前になると、担当者へアラートメールが配信されます。

クライアント案件でWeb制作会社が提案する場合や企業が直接契約する場合は、ほとんどのケースが年間有効チケットの120万PVや300万PV、600万PVを購入しています。約半年分のPV数のスマー
トライセンスを購入しておくと、ライセンスが1年間有効なのでPVを無駄しにしないですみます。
料金が高いという事も聞きますが、プロフェショナル向けフォントは無料ではありません。弊社がフォントメーカーにWebフォント使用料を払っています。例えば、月間100万PVのサイトをもっている企業（月間100万PVはかなりの大手だと思います）の場合でも、年間12万円（月換算1万円）の予算を確保するだけです。Web制作効率の向上やサイトブランディング・SEOにも効果があるので、それを説明すると導入企業様から高いという声はいただいておりません。

59

ますます広がるWebフォントの可能性ランディングページのモック実験公開中！
デモ用モック

http://goo.gl/2qGEsw※モックページの下のほうに、なんちゃって管理画面があります。タイトルに「店長涙目バーゲン」と入力してみてください。
※社内用デモモックにつき、すべてのブラウザに対応していません。レイアウトが崩れますのでご了承ください。

ラグランパンチ→
くろかね→【ランディングページの管理画面モック例】

筑紫ゴシック→ポップハピネス→デザイナー不在時でも、ランディングページが作れる！

フォントが泳ぐ！

動きにも注目！

http://goo.gl/EaeXDB
魚の泳ぐ様子を日本語Webフォントで表現。魚をクリックすると詳細説明がでてきます。魚の特徴や習性に応じた書体選びと動きが見事ですし。※ 推奨ブラウザはパソコンChrome/Firefoxです。

Webフォントデザインアワード2011最優秀賞

ニフティ株式会社クリエイティブデザイン部様CSSでここまでできる！ 画像使ってません

http://pr.fontplus.jp/2011/work/award-iwa/index.html
第一回

日本語Webフォントアワード2011

CSS3とHTMLでタイポグラフィ！

http://goo.gl/ddmcbx
自分のTwitter IDで再生してみて！
Twitter APIでタイムライン取得し、形態素解析した後に品詞ごとに文字サイズ変更し３Dでモーションタイポグラフィを実現。※ Internet Explorerでは3Dに対応していません。

Webフォントデザインアワード2011 主催者（FONTPLUS）作品

デジタルサイネージへの活用広がる
HTML5対応デジタルサイネージ『SIGNESS』がWebフォントに対応

秋の夜長にオススメの100冊読書の秋キャンペーン
買えば買うほどポイントGET！

ポイント10倍

http://goo.gl/hqKA09
今までのサイネージシステムは動画ファイルをビューアで再生するのが一般的でした。このシステムではHTML5ベースのサイネージコンテンツが簡単に作成でき、スケジュール配信できます。
HTML５ベースコンテンツなので、AndroidやiPad、HTML5対応ブラウザを搭載した液晶パネルなどで再生できます。お手軽かつ低コストでデジタルサイネージが実現できます。

文字（活字）の歴史
書籍やWebの登場で情報発信革命が起きた

66

印刷技術の誕生
15世紀

20世紀

活版印刷（ドイツ）

活版印刷（日本）

写植（写真植字）

印刷術の発明（活版印刷）で一度にたくさんの書物が配布できるようになった
67

DTP・Web・電子書籍の時代へ
20世紀
DTP21世紀
INTERNET
HTML5 / CSS3

EPUB
EPUB

サイネージ, IoT, etc.

書籍・雑誌・ポスターなどが容易に作成できるようにる

情報革命 〜Information Revolution〜68まとめ69Webフォント導入メリット

・制作効率アップ・SEO対策・ブランディング
・多言語対応・読み上げ対応
・アクセシビリティ
70

文字って71

コンテンツの美観
情緒表現
情報の重みづけ72

文字は人の心を動かす
ブランディングの重要な要素
73

ありがとうございました！
http://fontplus.jp/

本資料にて記載されている会社名、製品名サービス名は、当社または各社の商標もしくは登録商標です。

74