フォント
パフォーマンス
WebpageTest
Lighthouse
貂明朝

デザイナードラフトで貂明朝つかってみた

catch.png

@shsh0310 です。
この記事はLivesense - 関 Advent Calendar 2017 第10日目のための記事です。

はじめに

テーマが「」だそうです。
全然思いつきません。
「関」で思いつくエンジニアっぽい真っ当なやつは、弊社の優秀なエンジニア陣がまぁやってくれるだろうと思ってアウトローなネタを考えたのですが、思いつく「関」が、「関取」か「関内」くらいなのです。。。
ん?関内?...横浜?...みなとみらい!Adobe MAX

ということで、デザイナードラフトのお仕事で、11月28日(水)にAdobe MAX Japan 2017に行ってきた レポートの余談 をお届けします。
※本レポートはこちらでご覧いただけます。

Adobe MAXとは

Adobe MAXとは、グラフィックデザイン、写真、Web製作、映像製作に携わるクリエイターの方、およびそれらを目指す方を対象にした、Adobeが提供している Adobe Creative Cloudを中心に新製品や新機能、その他サービスなどに関するセッションなどを行う、日本最大級のクリエイターの祭典 です。

会場にはおよそ5000人ほどもの来場者が集まり、大盛況のうちにおわったようです。
当日は、期待の AdobeSensei のデモや、SneakPreviewが行われたり、Bryan Lamkin(ブライアン ラムキン)氏落合陽一氏 の基調講演も話題になっていました。
と、いろいろな声が上がっていたAdobe MAXでしたが、中でもだいぶ会場がザワついた発表がありましたね。

そう、貂明朝

スクリーンショット 2017-12-07 11.31.30.png

発表直後からtwitterトレンド入ったりしてました。

せっかくだし試しに使ってみよう

そこで。
弊社には「デザイナードラフト」というデザイナー向けのサービスがあるんだから、Adobeが発表した新フォントくらいサイト内で使ってないとイケてないよね!
という独断と偏見で 貂明朝をデザイナードラフトに適用しました

Let's 導入

導入したページがこれ↓
貂明朝といままでの明朝体 - Webサイトにおける明朝体の今昔 -

かわいくて妖しい雰囲気でてますね〜。
導入方法は以下の通り。

導入方法

Adobe Typekitで、導入したいフォントを選び、自分専用のフォントキットを作成。

※ 詳細はAdobeのヘルプがありますのでこちらへ。

htmlに埋め込みコードを貼り付ける

これを<head>のいい感じのところに貼り付けます。

<script src="https://use.typekit.net/#{kit_id}.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

styleを適用させる

html上の適用させたい箇所に、

.tk-ten-mincho

を付与するか、

h1 {
  font-family: "ten-mincho";
}

のようにcssに追加しようと案内されています。

しかしまぁ、日本語webフォントってやたらと重い重いと言われがち で、実際に適用するのもムズカシイのでは、、?と捉えられていると思います。
でもまぁなんか最近 ダイナミックサブセット とかあるじゃん!きっと大丈夫!
デザイナードラフトでも日本語Webフォントやってたよ!」というところから初めて、いい感じの雰囲気も作っていきたいので、同時に簡単なパフォーマンス計測くらいはやってみます。

みんなをしあわせに。

計測

LighthouseやらWebPageTestでそれぞれ見てみます。

Lighthouseで比較

結果

lighthouse_before.png
lighthouse_after.png
結果は、 5842Webフォント入れてないケースのほうが高スコア でした。
スコアには納得だよなぁという感想もありつつ、Beforeでも58(赤点)...だと..? という声が聞こえてきそうで怖いです(´・ω・`)

上記の結果以外にも複数回試してみたのですが、わかりやすく結果が違うのが

でした。

今回導入したAdobe TypekitのWebフォントはダイナミックサブセットですので、Webフォントがサイト上に適用されるまでに、

  • 必要なWebフォントを、JavaScriptによりブラウザ側で抽出
  • その結果を、Typekitのサーバに送信して、必要なものをサブセット化する
  • 結果をクライアント側に返し、該当箇所に適用する

という処理が挟まるため、
First Interactive(該当ページで 何かしら のインタラクティブな操作ができるようになるまで)と、Consistently Interactive(該当ページで 全て のインタラクティブな操作ができるようになるまで)が遅くなるのは納得の計測結果だと考えられます。

※ちなみにかの有名な阿部寛さんのホームページでLighthouseみてみたら、初回計測でスコア100を叩き出してびっくりしました。すごいよ阿部寛。

WebPageTestで比較

webpagetest_before.png

webpagetest_after.png

結果

WebPageTestでもlighthouseと同じような結果でした。LoadtimeFully Loaded Time0.5secくらい差がありますが、Visually Complete1.433sec2.900secと倍以上の数値になっています。

所感

日本語Webフォントはサイズが数MB以上もあり、そのダウンロードにめちゃめちゃ時間がかかってたイメージでしたが、その印象に比べて段違いに(・∀・)イイ!!と思いました。
高パフォーマンスであることに越したことは無いけど、ビジュアルの力もそれと同様に重要 だと思います。
Adobeのブログに「貂明朝は、広告コピー、書籍・出版物の タイトル など幅広い用途でご利用いただけます。」とあるように、まずは 一部のページでエッセンスを加えるために適用するくらいは良いのでは と思いました。

日本語Webフォントは用法用量を守って正しくお使いください。
ojigi.png