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