日本語webフォント - シックス・アパート株式会社 · 2017-09-27 ·...
TRANSCRIPT
ソフトバンク・テクノロジー株式会社 Webフォント エバンジェリスト 関口 浩之
2017年9月22日
日本語Webフォント最新事例と導入効果
1
関口 浩之
1960年 群馬県桐生市生まれ 1980年代 日本語DTPシステム / プリンタの製品開発 1990年代 Yahoo! JAPAN 立ち上げプロデューサー 2000年代 ECシステム構築 / ECモール運営責任者 現在 日本語Webフォント FONTPLUS 製品担当
Webフォント エバンジェリスト
天体観測好き文字好き
ソフトバンク・テクノロジー株式会社
2
マイナビ『IT Search+』でフォント講座を連載中
検索 👉 フォント講座
3
日刊デジタルクリエイターズ『もじもじトーク』
隔週木曜メルマガ連載
検索 👉
もじもじトーク
4
オンライン授業「schoo」の先生やってます日本語Webフォント基礎
5
質問です 「止まれ」は何の書体？
7
止まれ
明朝体？
8
止まれ
ゴシック体？
9
止まれ
古印体？
10
丸ゴシック体です。「止」も字形も特徴あるよね…
11
Webフォント、基本の「き」
12
質問です。このバナー、どうやって制作しますか？
13
多くの人から 「イラストレータ・
フォトショップで作るよ」 と回答いただきました
14
画像文字
Webフォント
画像文字とWebフォントの違いを比較してみよう
http://pr.fontplus.jp/schoo/011/
http://pr.fontplus.jp/schoo/012/15
絵の具に例えると…
16
話は 1990年代半ばに遡って…
19
20
1990年代は通信が遅かった…
WindowOS/MacOSの搭載フォントは少なかった…
Webの世界では、 フォントが置き去りにされた…
HDD、メモリー容量も少なかった…
インターネット黎明期
21
システムフォントのお話
・デバイスやOS環境で搭載フォントが異なる
・パソコン環境におけるシステムフォント一覧
（デバイスフォント）
22
Mac OS ・ iOS Windows
ヒラギノなど メイリオ / MS P ゴシックなど 新ゴ, マルベリ、 Noto Sansなど
Webフォントを活用すれば 全てのデバイス環境で書体が統一できる！
Android
デバイスやOSバージョンごとに搭載フォントが異なる
23
OS X Yosemite 10.10.5 Mac Book Pro
24
Window 8.1
25
iOS 9.2.1 iPhone6Plus
26
システム フォント
Web フォント
画像 文字
テキストデータ 画像データ
（デバイスフォント）
画像なので代替テキスト （alt属性）で内容を正確に 説明する必要がある
画像処理する
テキストデータなので代替テキスト（alt属性）で内容を説明する必要がない
font-family で記述
画像データとテキストデータの違いは？
27
Webフォント導入講座
28
Webフォント、 導入が難しそうな気がする…
29
Webフォントとは
Webフォントとは、CSSを使用してブラウザ上に表示するフォントをインターネット上からダウンロードさせる技術です。閲覧者のシステムフォントに依存することなく、制作者が指定したフォントでディスプレイ（ブラウザ）に表示させることができます。
@font-face Webフォントの名称と読み込むフォントファイルを関連づけるルールの一つです。[記述例] @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ }
ご自身でWebフォント配信の仕組みを構築する際は、ライセンス許諾OKのフォントの用意と各種Web フォント形式変換と@font-faceを理解する必要があります。また、日本語のフルセット配信はデータ 容量が大きくなるのでサブセットする必要があります。
30
Webフォントサービスを 使うと簡単だよ
31
FONTPLUSなら 3分で導入できます
32
Before システムフォント
33
After 「FONTPLUS」使ってみた
34
基本は3ステップ
35
① Webフォントを使用するドメインを登録
http:xxxxxxxxx.co.jp
http と https を間違わないように。両方登録もできます。
36
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title> 日本語WebフォントFONTPLUSサンプル ¦ 吾輩は猫である</title> <link rel="stylesheet" href="style.css">
</head> <body> <div class="box_a"> <h1>夏目漱石、吾輩は「猫」である・にゃん</h1> <div class="box_b"> <h2><a id="neko">2016年7月9日（土） めんたいこ食べたいにゃあ</a></h2> <br /> <img src="chikuwa.jpg" alt="秋葉さん家のちくわ" /><br> <p class="msg"> 吾輩は猫である。名前はちくわといいます。<br> どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。～中略～ それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。<br>
<script type="text/javascript" src=“//webfont.fontplus.jp/accessor/script/fontplus.js?xxxxxxxxxxxxxxxxx&aa=1&delay=2” charset=“utf-8"></script>
② FONTPLUS JavaScriptタグを /head の前にコピペする
37
h1 { margin: 1.2em 0 1.1em 0; font-family: "FOT-ユールカ Std UB{pm}"; font-size: 2.0em; color: purple; }
h2 { font-family: "FOT-ロダンハッピー Pro B{pm}"; font-size: 1.5em; color: black; }
body { font-family: "FOT-ロダンハッピー Pro M"; font-size: 1.0em; color: black; }
③ font-familyにフォント名を設定します
ピンポイント文字詰め （新機能） font-family書体名のあとに {pm}セレクタを指定すると その要素のみ文字詰めできる
font-familyは、日本語表記と英語 表記のどちらかを記述するように。両方記述すると同じフォントサブ セットを2ファイル取得します。 両方併記した場合でも1PVですが。
同一ページで複数書体を指定しても 1PVです。ただし、同一URLでも 非同期コンテンツでフォント再取得した場合はPV数が増えます。
38
3939
でも、日本語は、 データ重そうだし、遅そう？
39
・欧文は1書体、100文字で間にあう （Fonts.comやGoogle fontsなど）
・日本語は1書体で6,000～20,000文字
でも、 2016年、日本語Webフォントが当たり前の時代に… （日本語Webフォントの表示高速化など）
日本語と欧文では文字数がぜんぜん違うよね…
41
テキスト、画像データ等
Webフォント 配信を依頼
ドメイン 認証
Webフォント
日本語Webフォントサービスの登場
6年前から日本語に対応したWebフォントサービスが各社から開始された
あなたに会いたい！ 千貫りこ
42
Webフォントは「リモート」、システムフォントは「システム」と表示されますFirefoxの場合、文字をドラックして右クリックで[要素を調査]
フォント名を調べる方法
43
日本語Webフォント、 いろいろと課題がありました
44
■ 通常モード（文字詰めなし）
■ プロポーショナルメトリクス配信
配信側で高度な文字詰め機能を持っているのはFONTPLUSだけ
<script type="text/javascript" src="http://webfont.fontplus.jp/accessor/script/ fontplus.js?xxxxxxxxxxxx&aa=1&delay=2&pm=1” charset="utf-8"></script>JavaScriptでプロポーショナルメトリクスを指定すると、そのページ全ての要素（Webフォント指定）が文字詰めされます。なので、昨年末に機能追加リリースした「部分指定可能なプロポーショナルメトリクス」（font-familyに{pm} セレクタ付ける）のご利用をおすすめします。詳細は次ページにて。
文字詰め 特定要素のピンポイト指定も可能
46
行サイズ問題 WinとMacの行送り量の差異を解消
47
丸明オールド / FOT-筑紫アンティークS明朝 Std L / 秀英初号明朝 / モトヤバーチ Std W5 I-OTF新聞明朝Pro R / UD新ゴ M / FP-ヒラギノ丸ゴ ProN W4 / HOT-桜花 Std R FOT-ニューシネマA Std D / FOT-コメット Std B
family
[ font-family入力例]
Windows問題 Windowsでも綺麗に表示できる
48
2011年 アーリーアダプター期
2012年 先端技術好きな制作会社が
特設サイト等で活用
2014年4月 WinXPサポート終了
コーダー主導 テクニカルな活用
デザイナー主導 スペシャルコンテンツ
ディレクター主導 グローバルナビや見出し
サイトオーナー層 ブランディング
2015年-2016年 日本語Webフォントを
あたり前に利用する時代へ
モダンブラウザ化加速
2013年 表示速度の大幅改善で
日本語Webフォントが注目し始める 文字詰めにも対応 大手企業も導入開始
2015年12月 IE8サポート終了
日本語Webフォント5年間の変遷（FONTPLUSのケース）
49
日本語って1万文字以上あるし、 データが重くならない？
50
■もじもじトーク［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フォントの導入メリットをお送りする予定です。
例えば、この文章は 2,600文字 ありますが…
51
実際に取りに行ってる文字数は約400文字■もじトーク［02］Webフォン基本講座（1）／関口浩之。前回、デジリビュしまたですは「タルが豊富に手入る時代」と題て文字の持つ情報伝達力いそ化よっ広表現お話を今テマな？方思ずパ送りか的知スくださ笑●シム画像こ二バナサプ見比べん懐ね月曜日書れ川合イベ<htp:/go.lfr3s> ←jLYIB原寸示同えせ拡大みほうギザきら！ブラウ法一般通あひソコやレッど編集作成わざちゃけ素朴疑問ご覧yKuDRCぎキャチピ出気ボ制語登場OSョ搭載数体ゴ明朝MacXヒノindw78メオ標準ア筑紫U新NT配信ばワEAP利用使許諾範囲外セ上探置形式変換考ょ～5ぜ-J6例万千以何種類FVG分自仕組年ぐ対応社提供開始めqズぱ料金掛各カ含安心ペ必要容量軽記事総ユニ重複計算：,9約※ロダぉ結構実際m発ツド確注部稿整理閲者視点ホ訪読人少欲・店名住所電番号商品ゲづケ僕グ付保存多張宿泊宅紙モ先家族忘性損エ向最後会無版興味度試次導予定
容量は 5７KB
コード順ソートして、FONTPLUSサーバーへサブセット配信リクエスト,-./012356789:<>A！（）／：？［］BCDEFGIJKLMNOPR※STU←VWXY■●abcdefghijlmnopqrstuwy 、。「」～あいうえぉおかがきぎくぐけこごさざしじすずせぜそただちっつづてでとどなにねのはばぱひべほまみめもゃやょよらりるれわをんアイウエォオカキギクグケゲコゴサザシジスズセソタダチッツテデトドナニノバパヒビピフブプベペホボマムメモャュユョラリルレロワン・ー一万上之予事二人今仕付代以会伝住体何作使例供保信像僕先入出分利制前力化千原口号各合同名向含味品商問回囲基報場変外多大始字存宅安定実家容宿富寸対導少川年広店度座式張形後心必忘応思性情懐成所手拡持掛探提換損搭数整文料新方族日明時曜書最月朝本朴構標次欲比気泊法注浩準点無版現理用画番疑発登的知確示社種稿笑筑算範約紙素紫組結総編置考者自興般表複要見視覧計記訪許試話語読諾講豊軽載送通達部配重量金開関閲際集電題類
ロダンNTLGのフルセット配信だと2.7MB（FOT-ロダンNTLG Pro DB Adobe-Japan1-4 15,444文字）
52
編集が楽チン
54
Webフォントで制作すると修正作業がラク
差替するだけ
55
FONTPLUS導入事例集
5656
56
5757
学校・自治体導入事例
57
タイ語にGoogle翻訳してみた
61
ハイコントラスモード（文字色変更）の切り替えに画像の出し分けは不要
62
6363
スペシャルコンテンツ
63
65656565
動画作品タイトルを画像文字から テキスト化（Webフォント）した ことでアクセシビリティも向上。 代替テキストの記述漏れ、間違いが なくなった。
65
総務省/W3C 縦書き普及協議会 たてよこアワード
69
開運タテおみくじ 筑紫ゴシック
70
7171
コーポレートサイト
71
日本調剤
74
日本情報産業
75
植彌加藤造園
76
7777
サービスサイト・ECサイト
77
鬼怒川金谷ホテル
78
SOY&CO.1879
79
8080
ブログサイト
80
あなたに会いたい（千貫 りこ）
81
ふにろぐ（出口 伸也）
82
クライアントの説得方法を教えて欲しい… という相談をよく受けます
83
クライアントへの提案方法
お金掛かるじゃん
84
プロが使う国内外の大手フォントメーカーの 約1,000書体のWebフォントが使い放題！ 同一ページに何書体使っても1PVです
プロ用フォントはタダではありません
85
10万PV月1,000円から ※１年間有効の120万PV（12,000円）がおすすめ
FONTPLUSは1ライセンスで利用ドメイン数は無制限！導入企業95％のランニングコストは月1,000円（月10万PV）
86
どう説得するの？
87
✓ えっ、Webフォント使わないの？
✓ 他社、みんな、使ってますよ！
✓ Webサイトが素敵になるフォント、 入れておきました…！
こんなアプローチがおすすめです
88
サイトブランディング、アクセシビリティ、SEO対策等をきちんとご理解いただけるお客様にはご説明ください。 そうでないケースは、上記のアプローチがおすすめです。
89
書体の適材適所
明朝体の仲間でも、それぞれ表情が違うね…
90
20種類のフォントで、いろんな猫を表現しました
91
なぜ、この書体を使った？
92
このパッケージの書体、どうなの…？
93
この場面でポップ書体、どうなの…？
94
Webフォント、 どんな書体が人気あるの？
95
FONTPLUS人気書体ランキング
96
✓ アウトラインフォントだから綺麗
✓ Google検索に優しい
✓ アクセシビリティにも優しい （読み上げ、ハイコントラストモード、翻訳との親和性が高い）
✓ 代替テキスト（alt属性）を書かなくて良い
✓ 修正がラク
だって、文字（テキスト）だもん
Webフォントは、
98
まとめ
99
Webサイトにおける 文字の占める割合は？
100
101
95％以上 https://ia.net/know-how/the-web-is-all-about-typography-period
101
102
コンテンツの美観
情報の重みづけ
情緒表現
103
文字は人の心を動かすブランディングの 重要な要素
104
104
105
Webフォントは
新しい絵の具！ Webサイトの価値を高める
105
ありがとうございました
Facebook https://www.facebook.com/hiroyuki.sekiguchi.8/
Twitter https://twitter.com/HiroGateJP/
106