CSS Nite LP61 「これからのフォントとウェブでの組版を考える日」フォローアップ（1）関口 浩之さん

2019年5月18日に大崎ブライトコアホールで開催したCSS Nite LP61 「これからのフォントとウェブでの組版を考える日」のフォローアップとして、関口 浩之さん（ソフトバンク・テクノロジー）の『基調講演』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップ

フォントおじさんこと、関口浩之です。ご参加いただき、ありがとうございました。

基調講演では、イベントテーマである「フォントを愛でて楽しく学ぶ一日」への想い、そして、日本語ウェブフォントを取り巻く環境と導入事例の最新トレンドをお話しました。

• スライド　フォントを愛でて楽しく学ぶ一日

ウェブフォントの楽しさをもっと伝えたいので、Webフォント勉強会の直近スライド「現場で役立つWebフォント講座2019」（全119ページ）も共有します。Webフォントを基礎から学びたい、導入事例をもっと知りたい、ウェブではどんな書体が人気あるの？等々を学びたい方、ご一読ください。

• スライド　現場で役立つWebフォント講座2019

Webフォントに関して、知りたいことや質問があれば、適宜、ご相談に乗ります。FONTPLUS以外の質問でもお答えします。また、お会いできることを楽しみにしています。

Facebook
https://www.facebook.com/hiroyuki.sekiguchi.8/

Twitter
@HiroGateJP

FONTPLUS
Webフォント・サービス FONTPLUS

アンケートの質問

アンケートの質問にお答えします。これ以外の質問があれば、いつでもお気軽に、フォントおじさんこと関口浩之までご相談ください。

FONTPLUS以外のことでもいいですよ。

縦書きウェブが普及しつつあるとのことですが、もっと詳しく知りたいのです。

縦書きのみのウェブサイト事例は少ないのですが（電子書籍のブラウザ版は除く）、縦書き横書き混在の好事例がどんどん増えています。縦書き文化が存在するのは日本と台湾だけなんです。中国はほとんど縦書きは使用しなくなったそうです。そんな中、総務省とW3C/慶応との縦書き普及ワーキンググループで、3年連続で「たてよこWebアワード」を開催しました。特設サイトをご紹介します。

• 特設サイト　第3回たてよこＷｅｂアワード
• 第1回たてよこアワード最優秀賞　鈴乃屋

クライアント提案時のカンプ方法について

IllustratorやPhotoshopでカンプする場合はPCにローカルフォントが必要です。XDではAdobe fontsと連携してカンプできます。では、それ以外の書体の場合ですが、最近は、Webフォントサービスのためし書き機能やトライアル版でブラウザカンプする制作会社も増えてきました。フォント選定でカンプする場合、ピクセル単位で正確にカンプするよりも、ブランディング観点、コーポレートフォントの検討も含めて、そのクライアントにあった書体選定のディスカッションすることをおすすめします。

Google Fonts、Adobe Fonts、Webフォント各サービスの使い分けについて

オープンソースのWebフォント利用、アプリに付帯しているWebフォント利用、有償Webフォントサービスの利用など、選択肢がここ5年で一気に広がりました。書体選定と合わせて、使用許諾をしっかり理解して使うことも大事です。HTML/CSSサンプルを使って、ステージング環境にて、各社サービスのトライアル版を活用した実装テストすることをお勧めします。

クライアントにWebフォントの導入事例を紹介したいのですが。

基調講演の事例と勉強会資料の事例の多くはメインビジュアルの中のテキストもWebフォントを利用しているケースが多いです。テキストがマウスで掴めるか確かめてください。「要素を調査」で、フォント名やWebフォントサービスがどこであるかなどを確認できます。実際のサイトを見せて、事例紹介をするのがおすすめです。

見出しだけでなく本文で使っても遅くならないでしょうか。

キヤノングローバルや小田原市は、見出しだけでなく本文もすべてWebフォントを利用していますが、遅いと感じることはないと思います。Webフォントを導入したけど遅いという場合は、ウェブページのパフォーマンスが悪いケースや、サイト特性に合ったWebフォントを選択していない場合が多いです。Webフォントの表示タイミングはブラウザのタスク処理の中で一番最後なので、フォントデータ取得は終わっててもレンダリング開始が遅れるので、チラついて遅いと感じることが多いです。基調講演45～49ページの速度考察のスライドもご参照ください。

アクセシビリティとフォント関係について

アクセシビリティは、マシーンリーダビリティ（コンピュータがウェブページを正確に理解できること）と同義語です。テキスト情報を画像データで表現する場合、代替テキスト（alt属性）をきちんと記述しないと、ボイスオーバーの読み上げが機能しません。デザイン性の確保、視認性の向上、ブランディングの訴求等で、書体のニーズがある場合は、Webフォントの出番になります。