Page 1 セッション表紙 制作現場で役立つWebフォント最新事情 企業とアクセシビリティ 2019年5月16日 Page 2 登壇者のプロフィール 関口 浩之 セキグチ ヒロユキ Webフォント エバンジェリスト フォントおじさん ソフトバンク・テクノロジー株式会社 1960年 群馬県 桐生市 生まれ Page 3 「フォントおじさん」Google検索で1位を独走! HTML5 Conferenceからの取材記事 フォント素人のWebエンジニアが「フォントおじさん」に聞いてみた! Webフォントの最近の事情とか 白石 俊平(HTML5 Experts.jp編集長) https://html5experts.jp/shumpei-shiraishi/24207/ Page 4 Web担当者Forumからのインタビュー記事 アクセスランキングで2位に https://webtan.impress.co.jp/e/2019/04/04/32138 Page 5 本日のテーマ 「インクルーシブな世界」と「意外と知らないフォントの世界」 Page 6 フォントの役割って? Page 7 情報を正確に伝えるためのインターフェース Page 8 見やすさ(視認性) Page 9 読みやすさ(可読性) Page 10 分かりやすさ(判読性) Page 11 - 12 書体の違いによる「見やすさ」の考察 「SGcoast93806」の文字を「ヘルベチカ」と「フルティガー」の二種類のフォントで看板を作り、霧がかかった状態で、見やすさを比較 フルティガーは「9」「3」「8」「0」「6」が判別しやすい Page 13 アムステルダム・スキポール空港のサインシステムは全面的に「フルティガー」が採用されています。 Page 14 日本のサインシステムも「フルティガー」が増えてきています。数字の「3」と「8」は似ているので、間違わないように、「3」の文字の形の広がりが明確になっています。 Page 15 日本のサインシステムでは、丸ゴシックが使われることも多いです。「止まれ」の標識は丸ゴシックです。 Page 16 日本語においては、明朝体は読みやすさ、ゴシック体は見やすさに重点が置かれた文字と言われています。なので、小説は明朝体が多く、標識や看板はゴシック体が多いのです。 Page 17 伝わりやすさ Page 18 古印体(こいんたい)は怖い書体と、言われていますよね。「いらっしゃいませ」と古印体で書かれているお蕎麦屋さんには行きたくないよね。 Page 19 だけど、古印体は印鑑で使われています。怖い書体というわけではないのです。書体には適材適所があるのです。 Page 20 情報の重み付け Page 21 線が細い、ウルトラライトで「緊急地震速報」と表現してみました。 Page 22 線が太い、ウルトラボールドで「緊急地震速報」と表現してみました。見た目の印象がこれだけ、異なるのです。フォントのウエイト選定も適材適所なのです。 Page 23 Webフォント講座 Page 24 Wedフォントはなぜ、最近まで、注目されなかったのか Page 25 理由は、20年前に遡ります Page 26 インターネット黎明期と言われた、1996年頃のYahoo! JAPANのトップページを、Netscape Navigatorで表示されている画面キャプチャと表示しました。画像バナーとシステムフォント(MSゴシック)のみで構成されています。 Page 27 Windows95や漢字Talk時代は、パソコンに搭載されてきるフォントが少なかったのです。搭載されている日本語フォントは、ゴシック体1フォントと明朝体1フォントの合計2書体ぐらいしかありませんでした。 Page 28 Webの世界では、フォントが置き去りにされたのです。 Page 29 デザイン性を確保したい場合は、デザイン性の高いフォントを、わざわざ画像データに変換して表現していたのです。 Page 30 - 31 可愛らしいフォント「くろかね」「アポロ」「丸ゴシック」を使用したバナーを、イラストレータで作成してみました。 代替テキストとして、 <ここから> 第1回課外授業「天体観測」 土星の輪と木星のガリレオ衛星を観測しよう☆ 望遠鏡と双眼鏡を用意します! 2016年7月9日(土)理科 関口先生 <ここまで> すべて記述する必要があります。 Page 32 Web誕生から約20年を経て、2010年頃から、ウェブ上で様々なフォントがテキストとして表現できるようになりました。 CSS Fonts Module Level 3 日本語翻訳ページ https://triple-underscore.github.io/css-fonts-ja.html Page 33 画像データとテキストデータの違い Page 34 画像データの文字は、画像なので代替テキスト(alt属性)で内容を説明する必要があります。 Webフォントはテキストデータなので代替テキスト(alt属性)で内容を説明する必要がありません。 Page 35 システムフォントで表現すると、デバイスやOSバージョンごとに搭載フォントが異なりますが、Webフォントを活用すれば、全てのデバイス環境で書体が統一できます。 Page 36 Windows環境のシステムフォントは、 Windows 7では、「MS ゴシック、MS Pゴシック、MS UI Gothic、MS 明朝、MS P明朝、メイリオ」が利用できます。 Windows 10やWindows 8では、それらに加えて、「游ゴシック、Yu Gothic UI、游明朝」が追加されています。 Page 37 Mac環境のシステムフォントは、 macOS X v10.5(Leopard)では、「ヒラギノ角ゴ ProN W3、ヒラギノ角ゴ ProN W6、ヒラギノ角ゴ StdN W8、ヒラギノ明朝 ProN W3、ヒラギノ明朝 ProN W6、ヒラギノ丸ゴ ProN W4」が利用できます。 macOS X v10.11(El capitan)では、それらに加えて、「筑紫A丸ゴシック、筑紫B丸ゴシック、クレー、ヒラギノ角ゴシック W0からW9までの9ウエイト、游明朝体+36ポかな」が追加されました。 macOS v10.12(Sierra)では、それらに加えて、「凸版文久ゴシック Pr6N R/DB、凸版文久見出し明朝 StdN EB、凸版文久見出しゴシック StdN EB、游教科書N M/B(縦組み・国語用)、游教科書N横用 M/B(横組み・理科算数用)、游明朝(+36ポかな)E」が追加されました。 Page 38 システムフォントだと標準フォントがまちまちである画面キャプチャ表示 Page 39 Webフォントで各種デバイスに同一書体で表示できる画面キャプチャ表示 Page 40 Webフォント導入事例の代表例 Page 41 小田原市 公式ホームページでは「ハミング」という書体で、すべての見出しと本文をWebフォントで表現しています。ハミングという書体は、かわいらしいけど、ふざけていないフォントなのです。 http://www.city.odawara.kanagawa.jp/ Page 42 画像での文字を廃止したことで、多言語対応しやすいです。 Page 43 英語に翻訳した画面キャプチャ Page 44 ハイコントラスモード(文字色変更)の切り替えに画像の出し分けが不要になりました。 Page 45 Webフォントで表現すると、マシーンリーダブルなテキスト情報に加えて、デザイン性の確保ができます。 Page 46 Webフォントはどんな仕組みなの? Page 47 システムフォントの仕組み 一般的なfont-family記述方法 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; Page 48 Webフォントの仕組み(2パターンの配信方式があります) ・Webサーバ設置式 フォントを自分のサーバーからホスティング配信 ・ダイナミックサブセット式 Webフォントサービスを利用 一般的なfont-family記述方法 font-family: "FOT-ハミング Std M","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; Page 49 Webフォントの実装って難しいの? Page 50 Webフォントを導入してみよう。 Page 51 FONTPLUS JavaScript をhead部にコピペする。 Page 52 CSSで、font-familyを記述する。 Page 53 以上です。 使用するサイトの「URL登録」と使用する書体の「マイフォント登録」は事前におこなってください。 Page 54 - 86 導入事例からみるトレンドと導入効果 Webフォント導入事例を一気にご紹介します。 株式会社デンソー 利用フォント:DENSO TP_2017 https://brand.denso.com/ja/ JAL企業サイト 利用フォント:Helvetica https://www.jal.com/ja/ レクサス 利用フォント:レクサスロダン https://lexus.jp/ MINI Japan 利用フォント:モトヤ丸アポロ https://www.mini.jp/ja_JP/home.html SUN-AD 利用フォント:こぶりなゴシック W6 https://sun-ad.co.jp/ 鈴乃屋オリジナルコレクション/衣のいのち 利用フォント:筑紫明朝 https://www.suzunoya.com/kinu/ キヤノン グローバル 利用フォント:ヒラギノUD角ゴシック https://global.canon/ja/ 味の素 利用フォント:イワタUDゴシック https://www.ajinomoto.co.jp/ 鬼怒川金谷ホテル 利用フォント:筑紫Aオールド明朝 https://kinugawakanaya.com/ ルミネ 利用フォント:筑紫新聞明朝 Pr6 https://www.lumine.ne.jp/lumine_info/ Page 87 Webフォントに関するよくある質問 Page 88 ウェブフォントが重いよね、遅いよ? Page 89 日本語と欧文では文字数がぜんぜん違うよね。 ・欧文は1書体、100文字で間にあう ・日本語は1書体で6,000〜23,000文字 でも、2019年、日本語Webフォントが当たり前の時代になりました。 FONTPLUS導入サイト 3万ドメイン以上 契約社数 2,000社以上 Page 90 海外の Fortune 500 企業サイトでは95%以上がWebフォントを使用しています。例えば、ナイキ グローバルサイトでは、9年前から、全面的にWebフォントを採用しています。 https://www.nike.com/ Page 91 日本語はデータが重い? 明朝体だと書体のフルセット(2万3千文字)だと10MB以上になります。 Page 92 日本語Webフォントにおいては、必要な文字だけ、都度、取得するダイナミックサブセッティング」という方式が主流になっています。 Page 93 2,600文字のブログページでも、かな、カナは重複が多いので、400文字で済みます。その場合、データ容量は50KBになります。 Page 94 クライアントへどう提案したらいいの? Page 95 アクセシビリティやブランディングに理解を示すクライアントには、ちゃんと説明すれば、購入していただけます。 Webフォント導入メリットTOP5 ・ブランディング向上 ・アクセシビリティ ・多言語対応 ・SEO対策 ・制作効率向上 Page 96 理解できないクライアントには、以下を提案しましょう。 ・えっ、Webフォント使わないの? ・他社は、みんな、使っていますよ! ・Webサイトが素敵になるフォント、入れておきました! 99%のクライアントは、月1,000円以下の料金でWebフォントがご利用できます。 Page 97 まとめ Page 98 文字は文字でいてください! Page 99 フォントは、企業の顔であり、ブランディングの主人公なのです。 Page 100 フォントは、情報を正確に、伝えるための、重要なUI/UX Page 101 ありがとうございました! スライドのダウンロード: bit.ly/accfess2019font Page 102 Webフォントをもう少し詳しく知りたい方へ 20ページ、おまけで追加しました。 Page 103 Webフォント、文字詰めできるの? Page 104 文字詰めなしのサンプルの画面キャプチャ 見出しの括弧がパラパラして読みづらい。 Page 105 見出しと本文も文字詰めしたサンプルの画面キャプチャ 本文は詰まりすぎて読みづらい。 Page 106 見出しだけ文字詰め、本文はベタ組みの画面キャプチャ これが一番、バランスがいいね。 Page 107 プロポーショナルメトリクスの実装方法 CSS font-feature-settingsタグを利用してブラウザ側で対応できます。(モダンブラウザで対応可能) FONTPLUSでは、font-familyのセレクタ {pm} で対応できます。(配信側で対応) Page 108 Webフォント、遅い? Page 109 本文と大見出し・小見出しが別書体なので、WOFFデータを3つ、getしてレンダリングしている。この程度のDOMの数であれば、ブラウザが並行処理しているので体感速度も、気にならない。 ブラウザの仕様上、Webフォントのレンダリングは最後なので、DOMの走る数が多くて、オンロードに何秒もかかるWebページでは、チラツキながら最後にWebフォントが表示される。それが遅い、重いと感じる原因である場合が多い。 Page 110 Body要素は全文字数は3,653文字、ユニークグリフ数は444文字。4パターンで表示速度を比較してみました。①でも十分な速度が出ているので、99%以上の案件は標準的なスマートライセンス・プランを利用しています。 カスタマイズ案件では②や③を提案することもあります。CSSにWOFFデータ(Webフォント)をBase64符号化埋込みし、ファーストビューを瞬間表示し、それ以外の動的ページをダイナミックサブセッティング方式の組合せの②でイイトコどり対応できます。静的ページなら③のパターンもあります。 ①ダイナミックサブセッティング方式 https://pr.fontplus.jp/base64_sample/1_fpsample_smart.html ②見出しはCSSにbase64符号化組み込み、本文はダイナミックサブセッティング https://pr.fontplus.jp/base64_sample/2_fpsample_b64_t.html ③見出しも本文もCSSにbase64符号化組み込み https://pr.fontplus.jp/base64_sample/3_fpsample_b64_a.html ④見出しと本文をWebAPIで取得後にサーバーホスティング https://pr.fontplus.jp/base64_sample/4_fpsample_api.html Page 111 REST APIで、サブセット取得するデータレイアウト Page 112 書体たくさんあるけどどれを選んだらいいの? Page 113 過去3年間のウェブフォントランキング推移 1〜10位FONTPLUS調べ フォントワークスの「筑紫ゴシック」「筑紫A丸ゴシック」「筑紫明朝」がウェブでは人気があります。 Page 114 Monotype欧文書体ウェブフォントランキング Page 115 それ以外の質問 Page 116 Windowsで綺麗に表示できるの? FONTPLUSの場合 ttfからwoff変換では綺麗に表示できない場合があるが、oftからwoff変換だとWindows環境でも綺麗に表示できます。 Page 117 お高いんじゃないの? FONTPLUSの利用サイト約3万サイトの99%は月1,000円(月10万PV)で済んでます。 Page 118 - 120 フォント名を調べる方法 ブラウザの「要素を調査」機能を使用するとフォント名が確認できます。 Page 121 あらためまして、ありがとうございました 関口浩之(フォントおじさん)のアカウント Facebook https://www.facebook.com/hiroyuki.sekiguchi.8/ Twitter @HiroGateJP https://twitter.com/HiroGateJP Mail sekiguchi115@gmail.com Page 121 スポンサーのロゴ一覧