「CSS Nite LP61「フォントとウェブ組版を考える日」」

こちらは、CSS Nite LP61のフォローアップページです。

Facebookイベントページ

Twitterやブログなど

ツイートは下記にまとめました。

次のブログなどにて取り上げていただきました。

公開ポリシー

このページは、本イベントの参加者（およびフォローアップ参加者）限定のコンテンツです。 ただし、90日を目安に一般公開する予定です。

基調講演
関口 浩之（ソフトバンク・テクノロジー）

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

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

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

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

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

Twitter
@HiroGateJP

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

アンケートの質問

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

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

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

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

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

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フォントの出番になります。

ダウンロード

Webフォントを120%活用するための基礎知識＆最新動向
松田 直樹（まぼろし）

ご参加いただきましたみなさま、大変ありがとうございました。そして、長丁場お疲れ様でした。

私のセッションで紹介いたしましたとおり、OpenTypeそしてCSSの進化によって、Webにおける文字表現の制限は取り払われつつあり、紙と同等の表現が可能になってきています。フォントサービスや和文書体数も充実し、スクリーンタイポグラフィの自由度が大幅に増しました。

まさに、文字を文字そのものとして、好きな書体を選んで実装できる、ということです。スクリーンでの書体表現をより豊かなものにしていければ、と思っております。

ただ「Webフォントを使う」というのは、デザインの手段であって目的ではありません。「その書体を使うことによって、ユーザーが何らかのベネフィットを得られる」ことが目的であります。重いフォントを読み込んでなお、メリットがなければいけません。
また、その書体表現を見ることができない人・状況・環境があります。それらについても考慮することができる、というのがWebが紙と圧倒的に異なる特性でもあります。

デザイナーが思い描く書体表現をそのまま実装できるメリット・デメリット、それら双方をよりよいバランスで考えていきたいと思いますね。
改めまして、みなさんありがとうございました。

【訂正】

セッション中、スクリーンに最適化されたフォント事例としてHelvetica Nowなどを紹介しましたが、その中での「Display」書体はスクリーン専用というものではなく、「見出しに適する」書体として用意されているものでした。訂正いたします。

【アンケートでの質問への回答】

Q. Variable Fontで文字が読みにくくなることはないのでしょうか？

A. Variable Fontにおける可変である特性や可変の具合というのは、フォントごとに異なりますので、確かに、一概に良いものだとは言えないでしょう。ただ、デザインする側、またはユーザーに選択肢をもたらす機能としては大変効果のある仕様だと考えます。

例えば、行政系のサイトにはよく「文字を大きく/小さく」するUIが設けられています。これと同じように「文字を濃くする/薄くする」のようなUIも実装することができる、ということです。文字サイズはブラウザ側の機能で変更することができるのでサイズ変更UIの実例は減ってきていますが、この文字を太く/細く、微調整できるというのは、CSSとVariable Fontの組み合わせでのみ実現できることです。

読みやすくする工夫の土台になりうる、ということですね。

ダウンロード

ウェブコンテンツでの組版について考える
鷹野 雅弘（スイッチ）

ご参加ありがとうございました！

今回のセッションでは「なぜ、そのようなルールがあるのか」の基本からと、紙、ウェブの違いを、その経緯を踏まえて「知識を均す（ならす）」に重きをおいて組み立てました。

実は、用意したコンテンツの1/4くらいを捨てていまして、もっともっとお伝えしたいことがありますし、本来であれば、事例やサンプルファイルを用意すべきでしたら、それも割愛しました。今回の準備にあたり、膨大な資料や資料をひっくり返しましたが、プリントメディア向けのものは些末なところに行き過ぎ、体系立てて、必要最小限から解説されているものは少ない印象でした。

プリントメディア向けですが、無料でダウンロードできる鈴木一誌さんの『ページネーションのための基本マニュアル』を一読されることをオススメします。これのウェブ版を作ってみたいな、と妄想しています。

お詫び

セッションの最後に紹介したOn-Screen Typography Day 2019ですが、タッチの差で満席になってしまったようです。直前に空席が出るような可能性もありますので、TwitterやFacebookなどをウォッチされるとよいかもです。

リンク集

追って、カテゴリごとに整理します。

ダウンロード

クロストーク：書体デザイナー
木龍 歩美（砧書体制作所）、山田 和寛（nipponia）、吉田 大成（アドビ）、越智 亜紀子（フォントワークス）

吉田 大成さん（アドビ）から

アドビの吉田です。クロストークにご参加いただき、ありがとうございました！
私はまだ経験が浅く、学生の時の制作の話がほとんどでしたが、書体デザイナーを目指している学生がどういう活動をしていたか、どういう経緯で携わることになったかなど、珍しい話ができたかと思います。1つの書体を完成させるとなるとハードルが高く感じてしまうものですが、仮名だけのフォントや、少ない文字セットのフォントも世にはたくさん存在します。今回のクロストークで書体デザインに興味を持っていただいた方にはぜひ、挑戦してみてほしいです。フォントに対する考え方、使い方も少し変わるかもしれません。

源ノ角ゴシックの「たいと」という漢字については、以前アドビのブログで制作体験の記事を書いたので、興味のある方はぜひご一読ください。「アドビ 入社早々に総画数84画の漢字を作った話」
https://blogs.adobe.com/japan/taito/

また、私が使っていたフォント制作ツール「Glyphs」の使い方についても同じくアドビのブログで記事を書きました。会社でもこのツールを使って制作しています。https://blogs.adobe.com/japan/serialization/adobefonts-glyphs/

他のイベントなどで見かけましたら気軽に声をかけていただけると嬉しいです。ありがとうございました！

吉田大成
アドビ
書体デザイナー
Twitter: https://twitter.com/yoshi_typo

木龍 歩美（砧書体制作所）

砧書体制作所の木龍です。先日はご参加いただきありがとうございました。

フォントをつくる人たちもいる、とフォントを使うときに片隅に思い出してもらえれば嬉しいです。

話の中にありました、芯の実例はこちらです。
『星野リゾート　界』
https://kai-ryokan.jp/

言いそびれたこととして、制作ソフトは吉田さんと同じくGlyphsを使用しています。また、山田さんが「ひとりファンダリー」に対して砧書体制作所は「ふたりファンダリー」です。片岡朗と木龍でやっております。ですので同様にフォントを買って使ってもらえることが次の制作につながります。何卒！

イベントでは紹介しきれなかったフォント、たくさんありますのでお手元の見本帖と合わせてHPもぜひご覧ください。
砧書体制作所（旧 カタオカデザインワークス）
http://www.moji-sekkei.jp/

以下からもリリースやキャンペーンなど動向をお知らせしております。よろしくお願いします。
Facebook: https://www.facebook.com/kinutafont
Twitter: https://twitter.com/KDW_moji
これからも使いたいと思ってもらえるフォントを作れるよう、精進します。ありがとうございました。

木龍歩美
Twitter: https://twitter.com/kiryumi

山田 和寛（nipponia）

nipponiaの山田です。トークにお越しいただきありがとうございました。みなさまにお目にかかれて光栄です。

近年、若い学生から書体デザイナーになりたいという声をかなり聞くようになりました。フォントはこれまでもこれからも作られ続けるでしょう。

一方、我々や彼らを取り巻く環境というのは厳しいと言わざるを得ません。数多のデジタルフォントがすでに市場に出回ってる現代に於いては、独立系の書体デザイナーが幸せに生きていくために持続・発展可能な状況を我々世代が構築していく必要があり、しかしそれが今後の楽しみのひとつでもあります。

最新情報はnipponiaのツイッター、ホームページをチェックして下さい。

Twitter（nipponia）: https://twitter.com/nipponia_np
Twitter（山田）: https://twitter.com/ymdkzhr
HP: https://www.nipponia.in/
登壇した吉田氏、木龍氏、越智氏ともどもよろしくお願いいたします。

山田和寛

越智 亜紀子（フォントワークス）

フォントワークスの越智 亜紀子です。この度はご参加いただきありがとうございました。
フォントを作り上げるのってすごく大変でしょ！とよくお声かけされます。
確かに『パルラムネ』や『パルレトロン』もそれぞれたくさん悩んでデザインしました。
でも、後から振り返ると「悲しい悩み」では残っていないんです。
「やってやったぜ！　はー！　大変だったけどよかったよかった！」と清々しい気持ちが心に残っているんです。
不思議ですよね～。
きっとあれは「好きで楽しいから悩む」だったんですね。
これからフォントデザインに挑戦しようとする方々は、きっと色々な事があると思います。
でも皆様の中にある「好き」という気持ちが支えになってほしいと願っております。
これからも皆様にときめいてもらえる書体デザインに励みます。ありがとうございました。
『パルラムネ』については
フォントワークスのコラムでまとめていますので、ぜひご覧ください。
https://lets-site.jp/fontstory/column/archives/10
『パルレトロン』7月リリースです
今年は色々な書体がでますのでお楽しみに。
https://fontworks.co.jp/column/archives/34

フォントワークス
越智 亜紀子
Twitter: https://twitter.com/shirogoma1213

ダウンロード

筑紫書体のこれまで、と、これから
藤田 重信（フォントワークス）

この度、ご静聴ありがとうございました。

筑紫書体は、文字もの書籍用に筑紫明朝、ビジュアル雑誌用に筑紫オールド明朝、装丁等タイトル見出し用にアンティーク、ヴィンテージ、Q明朝と開発してまいりました。

ゴシック体、丸ゴシック体もそれらに歩調を合わせ、リリースは開発中です。紙媒体時代からオンスクリーンディスプレイ興隆期にいい感じで書風が合致しているが筑紫書体なのかもしれません。

今後はオールドゴシック、アンティーク明朝の順でウエイトファミリー化し、書体充実度向上と考えており、皆様の仕事で無くてはならぬ書体となるよう頑張ります。

今後ともよろしくお願い致します。ありがとうございました。

藤田重信
Twitter：https://twitter.com/Tsukushi55

ダウンロード

  • スライド（PDF）（非公開）
  • 動画

お問い合わせ

ご不明点やお気づきの点がありましたら、フォームからご連絡ください。

お問い合わせ

このページの上部に戻る