私がアイドルマスターシンデレラガールズで 課金しちゃった ......私がアイドルマスターシンデレラガールズで 課金しちゃった理由。
私たち企業がアクセシビリティに...
Transcript of 私たち企業がアクセシビリティに...
![Page 1: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/1.jpg)
1
私たち企業がアクセシビリティに 取り組む理由
Sekiguchi Hiroyuki SoftBank Technology Corp.
May 17th, 2018
本資料のURLや画面キャプチャ(一部除く)をクリックすると、そのサイトへリンクします
![Page 2: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/2.jpg)
Webフォント エバンジェリスト(フォントおじさん)
1960年 群馬県桐生市生まれ 1980年代 電子メーカーでワープロ/DTPの製品開発 1990年代 Yahoo! JAPAN 検索エンジンDB 開発リーダー 2000年代 ECサイト構築・運営コンサルタント 現在 Webフォント「FONTPLUS」エバンジェリスト
関口 浩之ソフトバンク・テクノロジー株式会社
自己紹介
天体観測おじさん
2
![Page 3: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/3.jpg)
検索 👉
フォントおじさん
「フォントおじさんが誕生するまで」 HTML5Experts.jp
3
![Page 4: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/4.jpg)
本日のテーマ
4
Machine Readability
Fonts✖
(フォント・文字) コンピュータにとってアクセシブルな 体系化された文字コードの集合体
![Page 5: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/5.jpg)
5
今から22年前、1996年に 私が携わったプロジェクト Yahoo! JAPAN ローンチ
![Page 6: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/6.jpg)
6
1996年、もっとも使われていたブラウザは?
![Page 7: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/7.jpg)
7
1996年、ネスケが最強のブラウザでした!
Netscape Navigator(ネスケ)
![Page 8: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/8.jpg)
8
1996年4月1日のYahoo! JAPAN トップページ 懐かしいね…
![Page 9: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/9.jpg)
大学生300名アルバイトで雇って 16台のパソコンを並べて 2ヶ月間で5万件のサイトを 1件1件、サーフィングして メタ情報をデータベースに
手入力しました 9
![Page 10: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/10.jpg)
10
とても Machine Readableな
お仕事でした…
![Page 11: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/11.jpg)
Webフォントのお話
11
![Page 12: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/12.jpg)
12 12
このランディングページ、どうやって作りますか?
http://bit.ly/demobear
![Page 13: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/13.jpg)
数年前まで デザイン書体のブラウザ表現は イラレ、フォトショで 制作してました
13
![Page 14: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/14.jpg)
今は、HTMLとCSSで さまざまな書体が ブラウザに直接 テキスト表現できる
14
Webフォント化フォント : マティスEB
補完
画計
![Page 15: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/15.jpg)
Web誕生から約20年を経て、2013年に CSS3 でWebフォント仕様が定義された
15
![Page 16: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/16.jpg)
16 16
タイトルバナー差し替えたいけど… えっ、デザイナーお休み…
![Page 18: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/18.jpg)
Webフォント導入事例
フォントおじさん おすすめTOP5
18
![Page 22: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/22.jpg)
味の素 イワタUDゴシック
22
![Page 32: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/32.jpg)
自治体の導入事例
32
![Page 33: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/33.jpg)
33
33
小田原市 ハミング
![Page 34: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/34.jpg)
34
スキップ上田市
![Page 35: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/35.jpg)
35
筑紫ゴシック四街道市
![Page 36: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/36.jpg)
小田原市
上田市
四街道市/四街道市地域振興財団
親近感と可愛らしさ
親近感と可愛らしさ
モダンで柔らかなゴシック
フォントの情感で、お堅いイメージのお役所と市民との距離が近くなったかも…
ハミング(フォントワークス)
スキップ
筑紫ゴシック
(フォントワークス)
(フォントワークス)
36
![Page 37: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/37.jpg)
2018年4月時点で、 日本語Webフォント導入した サイトは5万サイトを超えた
37
フォントおじさん調べ
![Page 39: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/39.jpg)
39
![Page 40: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/40.jpg)
40
![Page 41: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/41.jpg)
41
![Page 42: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/42.jpg)
42
![Page 44: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/44.jpg)
44
Webフォントは、 とてもマシーンリーダブルだけど それでだけでいいのか?
![Page 45: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/45.jpg)
情報の重み付け 情緒表現
コンテンツの美観 45
![Page 46: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/46.jpg)
1. ウエイトを活用しよう
46
![Page 47: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/47.jpg)
ウエイトを活用しよう UL/EL/L/R/M/DB/B/E/H/U
47
神戸が好き
![Page 48: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/48.jpg)
ウエイトを活用しよう UL/EL/L/R/M/DB/B/E/H/U
48
神戸が好き
![Page 49: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/49.jpg)
ウエイトを活用しよう UL/EL/L/R/M/DB/B/E/H/U
49
神戸が好き
![Page 50: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/50.jpg)
ウエイトを活用しよう UL/EL/L/R/M/DB/B/E/H/U
50
神戸が好き
![Page 51: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/51.jpg)
ウエイトを活用しよう UL/EL/L/R/M/DB/B/E/H/U
51
神戸が好き
![Page 52: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/52.jpg)
ウエイトを活用しよう UL/EL/L/R/M/DB/B/E/H/U
52
神戸が好き
![Page 53: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/53.jpg)
ウエイトを活用しよう UL/EL/L/R/M/DB/B/E/H/U
53
神戸が好き
![Page 54: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/54.jpg)
ウエイトを活用しよう UL/EL/L/R/M/DB/B/E/H/U
54
神戸が好き
![Page 55: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/55.jpg)
ウエイトを活用しよう UL/EL/L/R/M/DB/B/E/H/U
55
神戸が好き
![Page 56: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/56.jpg)
ウエイトを活用しよう UL/EL/L/R/M/DB/B/E/H/U
56
神戸が好き
![Page 57: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/57.jpg)
フォントの太さ(ウエイト)
情報の重み付け
57
=
![Page 58: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/58.jpg)
58
緊急地震速報
![Page 59: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/59.jpg)
59
緊急地震速報
![Page 60: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/60.jpg)
2. フォントが持つ情緒表現力
60
![Page 61: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/61.jpg)
この道路標識に使われている書体はどんなフォント?
61
![Page 62: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/62.jpg)
止まれ
明朝体? マティスEB(エヴァフォント)
62
![Page 63: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/63.jpg)
止まれ
ゴシック体? ヒラギノ角ゴ
63
![Page 64: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/64.jpg)
止まれ
古印体? なんか、怖い…
64
![Page 65: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/65.jpg)
丸ゴシック体でした! 「止」の横角が斜め上を向いてる
65http://www.mag2.com/p/news/18554
![Page 66: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/66.jpg)
人間の脳は 0.1秒で
それが何であるか、どんな感情か 判断しています
66
![Page 67: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/67.jpg)
書体が変わると印象が変わる
67
![Page 68: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/68.jpg)
どの書体を使っている病院で手術受けたいですか?
なんか怖い?
痛そう?
こども向け?
くるりんぱ?
ゆるかわいい?
おじいちゃん?
http://bit.ly/2AfHA8a 68
![Page 69: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/69.jpg)
69
font-family:"FOT-万葉古印ラージ Std B”;
font-family:"FOT-コミックレゲエ Std B”;
font-family:"FOT-マティスえれがんと Pro DB”;
font-family:"FOT-筑紫アンティークL明朝 Std L";
font-family:"FOT-ベビポップ Std EB”;
69http://bit.ly/2AfHA8a
![Page 70: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/70.jpg)
9割が丸ゴシック体
70
![Page 71: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/71.jpg)
シーンにあった書体選びが重要context × fonts(文脈) (書体)
71
![Page 72: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/72.jpg)
ゴシック体 見やすさ 視認性
明朝体 読みやすさ 可読性
72
![Page 73: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/73.jpg)
3. 文字組みを意識しよう
73
![Page 74: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/74.jpg)
亀戸駅で見つけた駅名標(サインシステム) なんか変……?
74
![Page 75: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/75.jpg)
亀戸駅で見つけた駅名標(サインシステム) なんか変……?
75
![Page 76: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/76.jpg)
欧文を半角等幅で文字を組むとネイティブの 外国の人には、不自然な単語に見えてしまう こんな日本語に映るらしいです…
76
![Page 77: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/77.jpg)
77
Shin-koiwaShin-koiwa
Helvetica Neue
Futura
半角等幅で組むと読めるけど不自然だし美しくない…
![Page 78: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/78.jpg)
1. 情報の重み付け 2. 情緒表現 3. コンテンツの美観
78
フォント(文字)には、こんなUX機能も備わっているのです
![Page 79: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/79.jpg)
まとめ
79
![Page 80: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/80.jpg)
80
フォント(文字)って
![Page 81: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/81.jpg)
Machine Readable
Human Readable 81
✖
(情感・美観・情報の重み付けなど)
![Page 82: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/82.jpg)
情報を正確に伝えるための
重要なインターフェース
82
![Page 83: 私たち企業がアクセシビリティに 取り組む理由fontplus.sakura.ne.jp/20180517/accfes2018webfonts.pdf2018/05/17 · 1 私たち企業がアクセシビリティに](https://reader036.fdocument.pub/reader036/viewer/2022063002/5f31d613e54bf12f6362a821/html5/thumbnails/83.jpg)
ありがとうございました
Facebook Twitter Mail
https://www.facebook.com/hiroyuki.sekiguchi.8/ @HiroGateJP [email protected]
83