css nite okayama 関口浩之...~uiを彩るwebフォントの活用~...
TRANSCRIPT
![Page 1: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/1.jpg)
![Page 2: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/2.jpg)
~UIを彩るWebフォントの活用~Webフォント最新事情2017
2017年11月25日
2
ソフトバンク・テクノロジー株式会社関口浩之
![Page 3: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/3.jpg)
文字が好き
Webフォント エバンジェリスト
1960年 群馬県桐生市生まれ 1980年代 電子メーカーでワープロの製品開発 1990年代 Yahoo! JAPAN サービス 開発リーダー 2000年代 ECサイト構築・運営コンサルタント 現在 Webフォント「FONTLUS」エバンジェリスト
関口 浩之ソフトバンク・テクノロジー株式会社
天体観測・天体写真が好き
3
![Page 4: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/4.jpg)
マイナビ「IT Search+」でWebフォント講座を連載中検索 👉 Webフォント講座
4
![Page 5: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/5.jpg)
検索 👉 Webフォント基礎
オンライン学習動画「schoo」でWebフォント基礎を開講
5
![Page 6: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/6.jpg)
検索 👉 フォントおじさん
「HTML5 Expert.jp」 フォントおじさんが誕生するまで
6
![Page 7: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/7.jpg)
7
Web制作におけるUI/UXを さまざまな角度から学びました
![Page 8: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/8.jpg)
・顧客体験価値、ファン作り ・ワイヤーフレームと呼ばない、星の目 ・言葉探しから始めるUI ・予期的UX
8
![Page 9: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/9.jpg)
9
フォントも UI/UXの要なのです
![Page 10: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/10.jpg)
10
Webフォント、 すごく身近な存在になりました
![Page 11: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/11.jpg)
11
![Page 12: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/12.jpg)
12
![Page 13: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/13.jpg)
13
![Page 14: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/14.jpg)
14
![Page 15: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/15.jpg)
15
![Page 16: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/16.jpg)
16
![Page 17: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/17.jpg)
17
![Page 18: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/18.jpg)
18
![Page 19: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/19.jpg)
19
![Page 20: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/20.jpg)
20
![Page 21: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/21.jpg)
21
![Page 22: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/22.jpg)
22
![Page 23: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/23.jpg)
23
![Page 24: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/24.jpg)
24
![Page 25: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/25.jpg)
25
![Page 26: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/26.jpg)
26
![Page 27: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/27.jpg)
27
![Page 28: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/28.jpg)
28
![Page 29: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/29.jpg)
29
えっ、 そういうウェブサイト、 前からあったよね…
![Page 30: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/30.jpg)
30
![Page 31: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/31.jpg)
31
数年前までは デザイン書体のボタンは イラレ、フォトショの
一択でした
![Page 32: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/32.jpg)
32
今は、HTMLとCSSで どんな書体も
テキストで表現できる
![Page 33: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/33.jpg)
33
Webフォント、今まで、なぜ使えなかったの? 理由は、20年前に遡ります…
![Page 34: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/34.jpg)
34
インターネット黎明期 1990年代後半 Netscape Navigator全盛期
![Page 35: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/35.jpg)
35
インターネット黎明期 1990年代後半 こんなWebサイトあったよね
![Page 36: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/36.jpg)
1990年代は通信速度が遅かった…
WindowOS/MacOSの搭載フォントは少なかった…HDD、メモリー容量も少なかった…
36
![Page 37: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/37.jpg)
1990年代は通信速度が遅かった…
WindowOS/MacOSの搭載フォントは少なかった…HDD、メモリー容量も少なかった…
37
Webの世界で、 フォントが
置き去りにされた…
![Page 38: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/38.jpg)
38
Web誕生から約20年を経て、2013年に CSS3 でWebフォント仕様が定義された
![Page 40: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/40.jpg)
40
画像データとテキストデータ
システム フォント
Web フォント
画像 文字
テキストデータ画像データ
(デバイスフォント)
画像なので代替テキスト (alt属性)で内容を説明する必要がある
テキストデータなので代替テキスト(alt属性)で内容を説明する必要がない
http://pr.fontplus.jp/schoo/011/ http://pr.fontplus.jp/schoo/012/Webフォントサンプル画像文字サンプル
![Page 41: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/41.jpg)
41
書体(フォント)を 意識して街中を歩いてみよう!
![Page 42: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/42.jpg)
質問です! この道路標識の中の文字の書体は?
42
![Page 43: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/43.jpg)
止まれ
明朝体? マティスEBで表現してみた… なんか違う
43
![Page 44: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/44.jpg)
止まれ
ゴシック体? ヒラギノ角ゴで表現してみた… ちょっと違う
44
![Page 45: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/45.jpg)
止まれ
これじゃないよね? 古印体で表現してみた…
45
![Page 46: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/46.jpg)
丸ゴシック体でした! 「止」の横角が斜め上を向いてる!
46
![Page 47: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/47.jpg)
人間の脳は 何かを前にした瞬間に 0.1秒くらいで
それが何であるか、好きか嫌いか を決めちゃってる
47
![Page 48: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/48.jpg)
フォントは インフォメーションにおける 重要なインターフェース
なのです
48
![Page 49: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/49.jpg)
書体には、 使って欲しい場面と
そうでない場面があります
49
![Page 50: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/50.jpg)
引用:netgeeck 怖すぎる卵が見つかった!なぜそのフォントを選んだの… 2013.10.15 http://netgeek.biz/archives/1341
怖すぎる卵が見つかった! なぜ、古印体?
50
![Page 51: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/51.jpg)
どのフオントを使っている病院で手術受けたいですか?
51
![Page 52: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/52.jpg)
フォントの適材適所
52
![Page 53: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/53.jpg)
いろいろな病院のフォントを調べてみた
53
![Page 54: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/54.jpg)
いろいろな病院のフォントを調べてみた
9割が丸ゴシック体
54
![Page 55: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/55.jpg)
サインシステム(案内板)は角ゴシック体
55
![Page 56: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/56.jpg)
「ふんわり」を文字を含むポスターを探索してみた…
5656
![Page 57: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/57.jpg)
57
![Page 58: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/58.jpg)
58
9割が明朝体
![Page 59: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/59.jpg)
ゴシック体 見やすさ 視認性
明朝体 読みやすさ 可読性
59
![Page 60: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/60.jpg)
吾輩は猫である。名前はまだ無い。 どこで生れたか頓と見當がつかぬ。
60
吾輩は猫である。名前はまだ無い。 どこで生れたか頓と見當がつかぬ。
![Page 61: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/61.jpg)
吾輩は猫である。名前はまだ無い。 どこで生れたか頓と見當がつかぬ。
61
吾輩は猫である。名前はまだ無い。 どこで生れたか頓と見當がつかぬ。
明朝体のでこぼこ感がリズム感を生む 長い文章を読んでも疲れない
![Page 62: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/62.jpg)
「フォントの適材適所」を 意識して
Webサイトを見てみよう
62
ノンデザイナー の方こそ
![Page 63: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/63.jpg)
Webフォント導入事例 2017 関口チョイス 5選
63
![Page 65: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/65.jpg)
65
クラフトマルシェin円頓寺本町実行委員会
![Page 66: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/66.jpg)
66
クラフトマルシェin円頓寺本町実行委員会
![Page 67: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/67.jpg)
味の素
67
SNS非公開
![Page 68: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/68.jpg)
68
味の素 SNS非公開
![Page 69: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/69.jpg)
ユニ・チャーム ペット
69
SNS非公開
![Page 71: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/71.jpg)
ツム顔メーカー
71
SNS非公開
![Page 72: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/72.jpg)
72
ツム顔メーカー SNS非公開
![Page 73: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/73.jpg)
日本語Webフォント 百花繚乱
73
![Page 74: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/74.jpg)
本スライドにて記載されている会社名、製品名、サービス名は、当社または各社の商標もしくは登録商標です。
当たり前のようにWebフォントを利用する時代へ
74
![Page 75: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/75.jpg)
Webフォントあるある Q&A
75
![Page 76: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/76.jpg)
日本語Webフォント、導入が難しんじゃね?
76
![Page 79: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/79.jpg)
日本語はデータが重い?
79
明朝体だとフルセットだと10MB以上
約12MB
FONTPLUSのケース
79
![Page 80: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/80.jpg)
じゃあ、必要な文字だけ、都度、貰えばいいじゃん
80
■もじもじトーク[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文字 ありますが…→ ダイナミックサブセッティング方式
FONTPLUSのケース
![Page 81: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/81.jpg)
81
容量は50KB
http://bit.ly/2nc4XdMグリフ数カウントツール
名寄せ後は400文字(グリフ) ※かな、カナは重複が多いので
FONTPLUSでは、Webフォント要求するとき、ASCIIコード順にソートしてからリクエスト
■もじトーク[02]Webフォン基本講座(1)/関口浩之。前回、デジリビュしまたですは「タルが豊富に手入る時代」と題て文字の持つ情報伝達力いそ化よっ広表現お話を今テマな?方思ずパ送りか的知スくださ笑●シム画像こ二バナサプ見比べん懐ね月曜日書れ川合イベ<htp:/go.lfr3s> ←jLYIB原寸示同えせ拡大みほうギザきら!ブラウ法一般通あひソコやレッど編集作成わざちゃけ素朴疑問ご覧yKuDRCぎキャチピ出気ボ制語登場OSョ搭載数体ゴ明朝MacXヒノindw78メオ標準ア筑紫U新NT配信ばワEAP利用使許諾範囲外セ上探置形式変換考ょ~5ぜ-J6例万千以何種類FVG分自仕組年ぐ対応社提供開始めqズぱ料金掛各カ含安心ペ必要容量軽記事総ユニ重複計算:,9約※ロダぉ結構実際m発ツド確注部稿整理閲者視点ホ訪読人少欲・店名住所電番号商品ゲづケ僕グ付保存多張宿泊宅紙モ先家族忘性損エ向最後会無版興味度試次導予定
,-./012356789:<>A!()/:?[]BCDEFGIJKLMNOPR※STU←VWXY■●abcdefghijlmnopqrstuwy 、。「」~あいうえぉおかがきぎくぐけこごさざしじすずせぜそただちっつづてでとどなにねのはばぱひべほまみめもゃやょよらりるれわをんアイウエォオカキギクグケゲコゴサザシジスズセソタダチッツテデトドナニノバパヒビピフブプベペホボマムメモャュユョラリルレロワン・ー一万上之予事二人今仕付代以会伝住体何作使例供保信像僕先入出分利制前力化千原口号各合同名向含味品商問回囲基報場変外多大始字存宅安定実家容宿富寸対導少川年広店度座式張形後心必忘応思性情懐成所手拡持掛探提換損搭数整文料新方族日明時曜書最月朝本朴構標次欲比気泊法注浩準点無版現理用画番疑発登的知確示社種稿笑筑算範約紙素紫組結総編置考者自興般表複要見視覧計記訪許試話語読諾講豊軽載送通達部配重量金開関閲際集電題類
FONTPLUSのケース
![Page 83: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/83.jpg)
日本語Webフォント、遅くね?ダイナミックサブセッティング方式でも高速表示
83
http://bit.ly/2ADlqO9
FONTPLUSのケース
![Page 84: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/84.jpg)
rest APIサブセット取得 + CDN配信
84
FONTPLUS独自機能
更に高速表示させるための新提案①FONTWORKS書体での商用サービス
![Page 85: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/85.jpg)
85
rest APIサブセット取得 + CDN配信の採用事例 SNS非公開
![Page 86: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/86.jpg)
rest APIサブセット(CSS base64符号化) +ダイナミックサブセッティングのハイブリット配信
86
① 従来のスマートライセンス http://pr.fontplus.jp/base64_sample/1_fpsample_smart.html
更に高速表示させるための新提案②
② h1とh2がCSS直接書き+body本文がスマートライセンス http://pr.fontplus.jp/base64_sample/2_fpsample_b64_t.html
③ h1もh2もbodyも全てCSS直接書き http://pr.fontplus.jp/base64_sample/3_fpsample_b64_a.html
④ WebAPIで取得したWOFFを、そのまま配信 http://pr.fontplus.jp/base64_sample/4_fpsample_api.html
「Body要素の全文字数:3,653文字、ユニークグリフ数:444文字」のケースで表示速度比較 ※ ①でも決して遅くないですが、②と③は、世界最速のWebフォント配信手法と思われます。
FONTWORKS書体での 商用サービス
FONTPLUS独自機能
![Page 87: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/87.jpg)
87
文字詰めなし FONTPLUSのケース
![Page 88: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/88.jpg)
ページの全要素を文字詰め
88
FONTPLUSのケース
![Page 89: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/89.jpg)
見出しのみ文字詰め
89
FONTPLUSのケース
![Page 90: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/90.jpg)
費用はどのくらい掛かるの?
90
FONTPLUSの場合
1ライセンスで登録ドメイン数は無制限!1ライセンスで何サイトでも使える
FONTPLUSの利用サイト 約3万サイトの99%は 月1,000円(月10万PV)
約1,000書体がすべて使える フォントワークス・イワタ・モトヤ・ 白舟書体・モリサワ・砧書体製作所・ SCREEN・大日本印刷・凸版印刷・ 方正・Yoon Design・Jangle System
![Page 91: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/91.jpg)
Windowsで綺麗に表示できないんじゃね?
91
http://bit.ly/2nc1ZpK
丸明オールド 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
[ font-family入力例]
FONTPLUSの場合
Windows環境で表示品質を試してね!
![Page 92: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/92.jpg)
どう提案したらいいの? その①
92
・SEO対策・多言語対応
・制作効率向上・ブランディング向上
・読み上げ対応
Webフォント導入メリットTOP5
![Page 93: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/93.jpg)
93
どう提案したらいいの? その①どう提案したらいいの? その②
✓ えっ、Webフォント使わないの?
✓ 他社、みんな、使ってますよ!
✓ Webサイトが素敵になるフォント、 入れておきました!
![Page 94: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/94.jpg)
94
どんな書体を使ったらいいの?どんな書体を使ったらいいの? FONTPLUSのケース
![Page 95: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/95.jpg)
95
どんな書体を使ったらいいの?どんな書体を使ったらいいの? FONTPLUSのケース
![Page 96: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/96.jpg)
知っておくと便利なTIPS
96
![Page 97: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/97.jpg)
ウエイトを活用しよう マティス L/M/DB/B/EB/UB
97
岡山が好き
![Page 98: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/98.jpg)
98
岡山が好き
ウエイトを活用しよう マティス L/M/DB/B/EB/UB
![Page 99: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/99.jpg)
99
岡山が好き
ウエイトを活用しよう マティス L/M/DB/B/EB/UB
![Page 100: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/100.jpg)
100
岡山が好き
ウエイトを活用しよう マティス L/M/DB/B/EB/UB
![Page 101: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/101.jpg)
101
岡山が好き
ウエイトを活用しよう マティス L/M/DB/B/EB/UB
![Page 102: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/102.jpg)
102
岡山が好き
ウエイトを活用しよう マティス L/M/DB/B/EB/UB
![Page 103: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/103.jpg)
font-familyの記述についてfont-family: "FOT-ロダン Pro M" , RodinPro-M, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif
font-family: "FOT-ロダン Pro M" , "ヒラギノ角ゴ ProN W3", "Hiragino Kaku
Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif
font-family: "FOT-ロダン Pro M"
日本語Webフォントサービス「FONTPLUS」スマートライセンスの場合
103
または、
日本語表記と英語表記の両方を記述すると
例: FOT-ロダン Pro M" , RodinPro-M,
フォントを2回取りにいってしまう
![Page 105: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/105.jpg)
ちょこっとPR
105
![Page 106: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/106.jpg)
106
FONTPLUSノベルティをメタボ対策にお役立てください
![Page 107: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/107.jpg)
107
入会金0円キャンペーンにやってるよ!http://bit.ly/2BkSAyp
FONTPLUSに関するご質問、ご要望などございましたら、下記までお問合せください。
ソフトバンク・テクノロジー株式会社 エバンジェリスト 関口浩之Mail: [email protected]: https://www.facebook.com/hiroyuki.sekiguchi.8 Twitter: @HiroGateJP
[キャンペーン申込先] キャンペーン申込期限 2018年1月15日迄
FONTPLUSサポートセンター [email protected]
本書はソフトバンク・テクノロジー株式会社が運営する日本語Webフォントサービス「FONTPLUS」の入会金10,800円(税込)が無料になるキャンペーン申込書です。
入会金無料キャンペーン申込書(セミナー参加者限定)
1. FONTPLUSの「個人情報・利用規約」に同意の上、お申込みください。https://webfont.fontplus.jp/users/terms2. 本書にてお申込みすることで、入会金無料でFONTPLUS正式会員になれます。なお、そのままでは、有効なライセンスがありませんので、ログイン後にライセンス(スマートライセンスまたはバリューライセンス)をお買い求めください。導入が簡単で、複数サイト(利用できるサイト数は無制限)に使用できて、利用書体数に制限がないスマートライセンス(例: 10万PV/1ヶ月有効 = 1,080円)がおすすめです。
1. 本書に必要事項のご記入・ご捺印(担当者認印可)の上、PDFデータまたは画像データ(写真可)FONTPLUSサポート窓口( [email protected] )へメールにてお送りください。
2. メール件名は「FONTPLUS入会金無料キャンペーン」とし、メール本文にシグニチャ(会社名/氏名/郵便番号/住所/電話番号/メールアドレスのテキストデータ)をご記載いただけますようお願いします。3. メール受領後、2営業日以内に、 FONTPLUSサポート窓口より、パスワードのご案内が届きます。導入ガイドは、フォローアップページ( https://goo.gl/wnLuj3)からダウンロードできます。4. 本キャンペーンは2017年11月25日開催「CSS Nite inOKAYAMA, Vol.7」来場者限定キャンペーンです。本キャンペーン内容を、FacebookやTwitter等のSNS掲載はご遠慮ください。5. 本キャンペーンに申し込んでも自動的に課金することはございません。本書は入会金が無料になる申込書です。入会金無料キャンペーンでご入会後、1ヶ月以内にライセンスをお買い求めくださいますようお願いします。
[特記事項]
[お申込み方法、お願い]
とりあえず、入会金0円の権利を 申し込んで、案件がでてきてから、 ライセンスを購入でもいいですよ。 (SNSでは書かないですね)
![Page 108: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/108.jpg)
まとめ
108
![Page 109: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/109.jpg)
109
Webフォントって
![Page 110: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/110.jpg)
コンテンツの美観 情報の重み付け 情緒表現
110
![Page 111: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/111.jpg)
情報を的確に伝えるための重要なUI/UX
111
![Page 112: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/112.jpg)
ありがとうございました
Facebook Twitter Mail
https://www.facebook.com/hiroyuki.sekiguchi.8/ @HiroGateJP [email protected]
112
![Page 113: CSS Nite OKAYAMA 関口浩之...~UIを彩るWebフォントの活用~ Webフォント最新事情2017 2017年11月25日 2 ソフトバンク・テクノロジー株式会社 関口浩之](https://reader036.vdocuments.us/reader036/viewer/2022062914/5e7814cb55248d7eb830dbb6/html5/thumbnails/113.jpg)