やるとなったらうちらは早いし、とことんです。「フォントメーカーを横断したWebフォントサービスを作りたい」という構想を練り、日本のフォントメーカーの皆さんにご協力をお願いしまくって、なんとかでき上がったのがFONTPLUSです。今ではFONTPLUSは、1,000書体近くを扱えるWebフォントサービスになりました。DTPデザイナーさんやグラフィックデザイナーさんはかなり記憶してらっしゃると思います。ないと仕事になりませんから。Webデザイナーさんは、まだそのレベルまで仕事で必要とされてる段階には至ってない方も少なくないと思います。Webでよく見かけるフォントに関しては、かなり詳しくご存知ですよね。すごいなー!ぼくもスライドとか作る時、できればフォントにこだわりたいと思うのですが、元となる知識が少なすぎて、めちゃくちゃ時間かけた挙句に選べないんですよね。そのうち「こんなに時間かけてられない」って諦めて、一般的なフォントに落ち着いちゃう。適切なフォントを素早く選ぶ知識やセンスは、今後どんどん重要になっていくスキルだと思っています。人間って、何かを前にした瞬間に、実は0.1秒くらいで好きか嫌いかを決めちゃってるじゃないですか。その一瞬の判断に、フォントが及ぼしている影響ってすごく大きいと思うんです。「吾輩は猫である」をいろんなフォントで表示してみると、こんなに印象が違うんですよ。...とまあ、こんな感じで、今はフォント自体のことをお話することが多くなってきまして。いやー、ぴったりなあだ名ですね。Conferenceのセッションでは「Webフォント最前線」というお話をされるとのことですね。はい、Webフォントを活用されている企業さんの事例や、縦書きCSSの事例、Webフォント界隈の最新事情などをお話しようと思っています。鬼怒川金谷ホテルさんのサイトは、全面的にWebフォントを使ってらっしゃいます。文字を表示するのにほとんど画像を使用していないので、テキストとして選択可能です。普段見かけないような書体もあって「画像かな?」と思うようなところも、だいたいテキストですね。おかげで、拡大しても綺麗に表示されますしね。ここで使われているWebフォントは、上品さと伝統と感じさせる「筑紫明朝」という明朝体です。面白いのが、住所とか電話番号とかが選択可能なことを宿泊客の方に褒められたことがあるそうです。「住所を選んでコピーできるのがありがたかった」って(笑)。そんなところ、褒められることってあるんですね(笑)。ほかに挙げられる事例としては、小田原市のHPとかでしょうか。このサイトでは、「ハミング」というフォントを活用しています。明朝体ほど装飾性は高くなく、まじめな印象を与えつつも、少し遊び心と柔らかさのあるフォントになってます。絶妙なかわいらしさですね。このサイトは、徹底的にWebフォントとアクセシビリティにこだわった結果、サイトのほとんど全てがやはりテキストで構成されています。おかげで、Google翻訳でサイトのほぼ全体を多言語化できているんですよ。ほんとだ、エスペラント語なんてのもある。機械翻訳に頼っているので、完璧ではありませんが、かなりコストを抑えて多言語対応できています。観光の入り口になるサイトとしてはかなりのアドバンテージになりますよね。それだけじゃなく、自治体のサイトとしてのアクセシビリティも担保できていますし、Webフォントを使用したおかげでサイト自体も美しい、素晴らしい例だと思います。Webフォント自体は、技術としてはそれほど理解が難しいものではないので、ポイントとなる部分は絞られるかと思います。Webフォントと聞くとやはりこうした印象を抱く人が沢山います。そこは現在だいぶ改善されつつある。あとは文字詰めの問題ですね。Webフォントを使う大きな理由は、やはりテキストを美しく見せたいというところでしょう。なるとやはり文字詰めにもこだわりたいですよね。一つ目の遅さ、ちらつきのお話からお聞きしていいですか?先程の小田原市のサイトを見ても、Webフォントの遅さやちらつきをほとんど感じませんでした。今は、FONTPLUSを初めとした配信側の努力もあって、Webフォントの表示はかなり高速化されているんです。フォントのサブセット化をサービスとしてサポートしています。サブセット化というと、限られた文字のフォントのみ使うということですよね。サイトで実際に使用している文字だけをJavaScriptで抽出し、そのグリフだけが入ったサブセットデータをダウンロードするんです。!DOMの読み込みが完了してから、JavaScriptでWebフォントの適用範囲内にある文字を抜き出すというわけですね。ぼくのブログページを例にとって説明しますが、Webフォントを適用しているbody要素に2,600文字あったとします。サブセットを取得する際、JavaScriptでユニークグリフ化(文字の名寄せ)を行った結果、このケースでは約400グリフになります。CSSで記述されたfont-familyのサブセットデータを閲覧者のブラウザに適した形式で配信しているわけです。やってデータ量を削減するんですね。FONTPLUSはサービス開始時の6年前から、サブセット配信は行っていました。この6年間、高速に表示できるよう、サーバー側の構成や処理も相当チューニングを繰り返し、改善してきたのです。FONTPLUSの場合は、Webフォントのダウンロードが完了するまで、JavaScriptでテキストを非表示にすることで対応しています。非表示にする範囲は、Webフォントの適用範囲に限ることも、サイト全体を非表示にすることもできます。Webフォントがダウンロードされるまで、ブラウザがテキストをレンダリングする方法は、ブラウザによってまちまちなのですが、その差異を吸収しています。ちらつきを抑えるのにも、JavaScriptを駆使しているわけですね。言っても、FONTPLUSをお使いのユーザーは、JavaScriptコードを書く必要はありません。FONTPLUSのscriptタグで指定するURLに、delayっていうパラメーターを付けるだけです。このように、URLパラメーターで高度な処理をON/OFFできるのは、文字詰めの件でも同様の設計を行っています。ポイントの二つ目、文字詰めですね。中黒(・)やかぎ括弧や丸括弧等の約物を含む文字列、および、拗音や促音といった小さい文字(ゃゅょっ)等を含む文字列を普通に表示すると、文字と文字の隙間が空いて見えてしまうんです。した隙間を詰めて表示するのが文字詰め。カーニングとも呼ばれます。お恥ずかしながら、全然知りませんでした。FONTPLUSでは、カーニングを有効にするため独自の対応を行っています。先ほどと同様に、script要素のURLにパラメータでpm=1と付けることで、プロポーショナルメトリクス情報を使って文字詰め配信をすることができます。プロポーショナルメトリクス情報が入っていないフォントデータもあります)。いう、「h1要素は文字詰めしたいけど、body要素は文字詰めしたくない」というようなご要望にお応えする機能も最近リリースしたんですよ。{pm}セレクタを付けると、特定の要素のみを文字詰め配信できます。そんな機能もあるんですね!Webフォントサービスは、フォントの配信が主な機能だと思っていたので、思ったより機能が多くてびっくりです。3」の実装が進められているのと並行して、ちらつき対策や文字詰め対応などは、独自の対応も行っているという状態です。他にも、ブラウザやOSごとに異なる細かい挙動を吸収したり、実装時に調整しやすいよう、リセットすることもできます。完全にコントロールできるようにする機能もあります。した豊富な機能を使って頂けるかどうかは、デザイナーやマークアップエンジニアの皆様にお任せするしかありませんが、技術の選択肢がたくさんあることは重要だと思ってます。機能改善や新機能追加は今後も積極的に行っていきたいと考えていますので、ご要望やツッコミは常に大歓迎です。「Webフォントおじさん」でもあり、「フォントおじさん」でもある関口さんに、最後の質問をお願いしたいのですが。先程も申し上げたように、フォントには個人的にこだわりたいと思いつつ、知識と検討する時間がなくて諦めてしまうんです。前提として、1,000種類近くあるフォントを把握するだけでも至難の業です。あれば、まずは人気のフォントをいくつか覚えるところから始めてはいかがでしょうか。今はデータが古い(2016年10月度)のですが、FONTPLUSではフォントの利用状況をランキングで発表してますので、上から20くらい眺めて特徴を把握するだけでもいいと思います。自動化したいとは思っているんですが、中々手が回らなくて。最近忙しいので、つい更新が滞っちゃいました。なんというフォント愛...。フォントという「美しいもの」のために働けるって幸せですよね。今日の関口さんを見ていてそう思いました。