日本語Webフォント
最新トレンドソフトバンク・テクノロジー株式会社
Webフォント エバンジェリスト

関口 浩之
2017年5月18日

2ソフトバンク・テクノロジー株式会社
Webフォント エバンジェリスト

関口 浩之
1960年
1980年代1990年代2000年代
現在
文字好き

群馬県桐生市生まれ
日本語DTPシステム / プリンタの製品開発
Yahoo! JAPAN 立ち上げプロデューサー
ECシステム構築 / ECモール運営責任者
日本語Webフォント FONTPLUS 製品担当
天体観測好き3

Webフォントって何？

4このメインビジュアル、どうやって制作しますか？

5多くの人から「イラストレータ・フォトショップで作るよ」と回答いただきました6画像文字とWebフォントの違いを比較してみよう
画像文字

Webフォント

http://pr.fontplus.jp/schoo/011/

http://pr.fontplus.jp/schoo/012/
7

絵の具に例えると…

8

従来の絵の具

9

Webフォント ＝ 新しい絵の具

10画像データとテキストデータ
画像データ

画像文字

テキストデータ

システムフォント

Web
フォント（デバイスフォント）

画像なので代替テキスト（alt属性）で内容を説明する必要がある

テキストデータなので代替テキスト（alt属性）で内容を説明する必要がない

11海外では、Webフォント がすぐに定着しました12海外ではWebフォントが当たり前のように利用されています

13

14

米国と日本におけるWebフォント普及率は？
日経500

90%

5%

15

日本語Webフォント、遅いよね…
日本語は1万文字以上あるし…

16表示速度の大幅な改善が進む
goo.gl/6HeEu4

2013年5月14日までの
旧FONTPLUS

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

FONTPLUSにおける新旧の表示速度比較動画
サーバー切替日にiPadを2台並べて、新旧FONTPLUSサーバに対して同一WebページにてWebフォント表示速度を比較しました。

17

Webフォント、必要なの？

18

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

Mac OS ・ iOS

ヒラギノなどWindows

メイリオ / MS P ゴシックなど

Android

Kindle端末など

新ゴ, マルベリ、Noto Sansなど

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

Window 8.1

OS X Yosemite 10.10.5
iOS 9.2.1

20

Windows環境のシステムフォント
Windows 7
ＭＳ ゴシック
ＭＳ 明朝

ＭＳ Ｐゴシック
ＭＳ Ｐ明朝Windows 10 / Windows 8
游ゴシック

MS UI Gothic

メイリオ（追加分）

Yu Gothic UI

游明朝

21

Mac環境のシステムフォント
Mac OS X v10.5 / Leopard
ヒラギノ角ゴ ProN W3
ヒラギノ明朝 ProN W3

ヒラギノ角ゴ ProN W6
ヒラギノ明朝 ProN W6

OSX v10.11 / El capitan （追加分）
筑紫A丸ゴシック
筑紫B丸ゴシック
ヒラギノ角ゴシック W0
ヒラギノ角ゴシック W1
ヒラギノ角ゴシック W3
ヒラギノ角ゴシック W4
ヒラギノ角ゴシック W6
ヒラギノ角ゴシック W7
ヒラギノ角ゴシック W9
游明朝体+36ポかな

ヒラギノ角ゴ StdN W8
ヒラギノ丸ゴ ProN W4

クレーヒラギノ角ゴシック W2
ヒラギノ角ゴシック W5
ヒラギノ角ゴシック W8

MacOS v10.12 / Sierra （追加分）
凸版文久ゴシック Pr6N R
凸版文久ゴシック Pr6N R/DB
凸版文久見出し明朝 StdN EB
凸版文久見出しゴシック StdN EB
游教科書N M/B（縦組み・国語用） 游教科書N横用 M/B（横組み・理科算数用）
游明朝（+36ポかな）E

22

表示速度が速くなってから企業や自治体が使い出した23

小田原市公式ホームページ

3年前の代表的な日本語Webフォント事例

日本広報協会
全国広報コンクール
2014 入選！

24

ナビゲーション、アイコンの中のテキストは全てWebフォント

25

テキストをどんなに拡大しても可読性、視認性をキープ

26

マシンリーダブルだから、Google翻訳への対応がしやすい

27

四街道市/四街道市地域振興財団

筑紫ゴシックで優しさを演出

28

鬼怒川金谷ホテル

5年前に日本語Webフォントを導入した

29

ホテル名と住所がコピペできる、と褒められた…

30

京都造形芸術大学/通信教育部Webフォント文字詰め配信機能を活用

31

文字詰め配信機能（h要素をピンポイント指定）を活用しデザイン性向上

32

三井不動産大手企業でもWebフォント活用が当たり前になりつつある33グローバルナビを拡大

中黒「・」が綺麗に文字詰めされています

34

日本語Webフォント、むずかしんじゃね問題？

35

例題
BeforeAfter

システムフォント

Webフォント（コメット, アポロ, ロダンNTLGを使用）

36

基本は2ステップ！
Before元のhtmlソース

After
Webフォント導入

JavaScriptタグを</head>前に置く

xxxxxxxxxxxxxxx

37

Before元のCSSソース

After

Webフォント導入後要素にfont-familyを記述する以上です！
38

お金かかるんじゃね問題

39

プロ用フォントはタダではありません

プロが使う国内外の12フォントメーカーの900書体以上のWebフォントが使い放題！
同一ページに何書体使っても1PVです
40

FONTPLUSは1ライセンスで利用ドメイン数は無制限！

導入企業95％のランニングコストは月1,000円（月10万PV）
1年間の有効期限付き120万PV（12,000円）スマートライセンスがおすすめです。

41

こんなアプローチがおすすめです✓ えっ、Webフォント使わないの？
✓ 同業他社も、結構、使ってますよ！
✓ Webサイトが素敵になるフォント、入れておきました…

42

日本語Webフォントのこれから43

鈴乃屋/衣のいのち

44

writing-modeで縦書きもかんたんに表現できる

45

LINEブログ

バックエンドでWebフォントエンジン設置

46

2017年、日本語Webフォントサービス 百花繚乱本スライドにて記載されている会社名、製品名、サービス名は、当社または各社の商標もしくは登録商標です。

47

Webサイト、マシンリーダブルは重要だけど、それだけでいいのか？

48

Webサイトにおける書体の重要性✓ ブランドイメージに合う書体を選ぶ✓ コンテンツに応じた書体を選ぶ✓ 通常、使用する書体は1〜3種類✓ ウエイト（太さ）を活用する✓ 人気書体ランキングを参考にする

49

Webフォントの導入メリット、デメリット
メリット

デメリット

・制作効率アップ

・費用がかかる場合が多い

・SEO対策・システムフォント表示より速く表示させることが難しい

・ブランディング向上
・多言語対応・読み上げ対応

アクセシビリティ
マシンリーダビリティ

・コピペができる50

Webサイトで文字が占める割合は？

51

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

52
52

53

時代の流れとともに新しいメディア、新しいプラットフォームが誕生すると思うが、54

文字（フォント）はこれからも主人公であり続ける55

Webフォントはマシーンリーダブルな新しい絵の具

56ありがとうございました！

Facebook

facebook.com/hiroyuki.sekiguchi.8/
Twitter

twitter.com/HiroGateJP/