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

![catch.png](https://qiita-image-store.s3.amazonaws.com/0/26299/b7902260-3ca3-c168-f91c-a72516f78fb2.png)

@shsh0310 です。
この記事は[Livesense - 関 Advent Calendar 2017](https://qiita.com/advent-calendar/2017/livesense-kan) 第10日目のための記事です。

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

ということで、[デザイナードラフト](https://designer-draft.jp)のお仕事で、11月28日（水）にAdobe MAX Japan 2017に行ってきた __レポートの余談__ をお届けします。
※本レポートは[こちら](https://designer-draft.jp/articles/29)でご覧いただけます。

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

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

そう、__貂明朝__。

<img width="567" alt="スクリーンショット 2017-12-07 11.31.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/26299/db40733a-fea3-7ac0-3e79-b74b34fa4258.png">

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

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

## Let's 導入
導入したページがこれ↓
[貂明朝といままでの明朝体 - Webサイトにおける明朝体の今昔 -](https://designer-draft.jp/articles/38)

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

## 導入方法
### [Adobe Typekit](https://typekit.com)で、導入したいフォントを選び、自分専用のフォントキットを作成。
※ 詳細はAdobeのヘルプがありますので[こちら](https://helpx.adobe.com/jp/typekit/using/add-fonts-website.html)へ。
### htmlに埋め込みコードを貼り付ける
これを`<head>`のいい感じのところに貼り付けます。

```html
<script src="https://use.typekit.net/#{kit_id}.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
```
### styleを適用させる
html上の適用させたい箇所に、

```css
.tk-ten-mincho
```

を付与するか、

```css
h1 {
  font-family: "ten-mincho";
}
```
のようにcssに追加しようと案内されています。

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

みんなをしあわせに。

## 計測
[Lighthouse](https://developers.google.com/web/tools/lighthouse/)やら[WebPageTest](https://www.webpagetest.org)でそれぞれ見てみます。

### Lighthouseで比較
#### 結果
![lighthouse_before.png](https://qiita-image-store.s3.amazonaws.com/0/26299/98a120f5-0cf2-e788-a9be-838c49dbd6e0.png)
![lighthouse_after.png](https://qiita-image-store.s3.amazonaws.com/0/26299/a8bea2f3-abf6-36a9-1e03-49cb6e59ec3a.png)
結果は、 __58__→__42__ と __Webフォント入れてないケースのほうが高スコア__ でした。
スコアには納得だよなぁという感想もありつつ、__Beforeでも58（赤点）...だと..?__ という声が聞こえてきそうで怖いです(´・ω・`)

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

- [First Interactive](https://developers.google.com/web/tools/lighthouse/audits/first-interactive)
- [Consistently Interactive](https://developers.google.com/web/tools/lighthouse/audits/first-interactive)

でした。

今回導入したAdobe TypekitのWebフォントは[ダイナミックサブセット](https://blog.typekit.com/alternate/typekit-j-announce-jp/)ですので、Webフォントがサイト上に適用されるまでに、

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

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

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

### WebPageTestで比較
![webpagetest_before.png](https://qiita-image-store.s3.amazonaws.com/0/26299/52c5c45f-b037-dcf5-4a11-b1b422a562b2.png)

![webpagetest_after.png](https://qiita-image-store.s3.amazonaws.com/0/26299/019b3256-ea93-4e6f-e3e3-037311307d2b.png)

## 結果
WebPageTestでもlighthouseと同じような結果でした。`Loadtime`や`Fully Loaded Time`も`0.5sec`くらい差がありますが、`Visually Complete`が`1.433sec`→`2.900sec`と倍以上の数値になっています。

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

日本語Webフォントは用法用量を守って正しくお使いください。
![ojigi.png](https://qiita-image-store.s3.amazonaws.com/0/26299/a1f43ea1-c531-2ffb-f427-637e4d0b31ce.png)