ネット上やSNSの記事だと、
Webフォントを使いたいならAdobeフォントで決まり！
AdobeフォントはWebフォントとしても使えて便利！
AdobeフォントをWebフォントとして使う方法をまとめました。
と、Webデザイナーの人たちがAdobeのWebフォント（以下、Adobe Webフォント）推奨する記事が数多くあります。
しかしコーダー目線や管理の側面から見ると、
AdobeフォントをWebフォントとして使うのはちょっと待ってほしい。
となるんですが、なぜ安易に使うべきではないのか、コーダー目線でWebフォントのメリット・デメリットを踏まえつつ参考にしていただけますと幸いです。
正確な情報を求む
誤りがあればご連絡ください
安易に使うべきではない理由とリスク
確かに便利だけど…
なぜ安易にAdobe Webフォントを使ってはいけないのか。その理由を簡潔にまとめるならば、
- 【JSで動く】日本語フォントは実装にJava Script（JS）が必要。
- 【管理が大変】抱える案件が増えれば管理コストがかかる。
- 【解約すると解除される】Adobe CCを解約すると一気に使えなくなる。
- 【やりとりも大変】コーダーやディレクターの手間が増える。
- 【多くても2種類が限度】日本語Webフォントは重いデータの宝庫。
- 【規約変更】顧客のサイト制作の場合、顧客も使用料を支払わないといけない。
特に最後の規約変更が一番の理由で、
利用条件では、2019 年 12 月 31 日以降の再販は許可されていません。それ以降にフォントライセンスや web フォントホスティングが中断されないようにするには、クライアントの web サイトは、独自の Creative Cloud サブスクリプションから Adobe Fonts を読み込む必要があります。（中略）
クライアントは、web フォントプロジェクトを転送する前に Creative Cloud サブスクリプションを設定する必要があります。完全なフォントライブラリは、ほとんどの有料の Creative Cloud サブスクリプション（例外あり）に含まれています。
フォントのライセンス｜Adobe
つまり、どういうことなのかというと、
CHECK!
Adobe Webフォントを使用する場合、顧客側もライセンス購入してCCに加入してもらわなければならず、その旨を事前に説明しなければならない。記事でAdobe Webフォントの使いかたを述べるのであれば、上記の注釈は必ず書いておかないと無責任な行為になります。
問題はWebフォント化であって、バナーやビジュアルなど、「画像」として使うならAdobeフォントの利用は問題ないよ。
ダイナミックサブセットと Web フォント提供｜Adobe
Webフォントの利点と欠点
Webフォントにも
欠点があるよ
Adobe Webフォントを安易に使うべきではないのは、規約の問題が一番大きな要因です。
ただそれだけではなく、SEO（特にUI・UXの部分）まで考えると、安易にポンポン使うような代物ではないことを、Webデザイナーは最低限知ってほしいところです。
次からは、Webフォントのメリット・デメリットをご紹介します。
Webフォントのメリット
Webフォントは「すべてのデバイスで同じフォントが表示される」が最大のメリットです。
よくある話で、Android端末では明朝体が入っていないため、もしサイト内で明朝体を使いたいのであれば、Webフォントは必要になります。
また游明朝・游ゴシックはMacやWindowsにはあっても、AndroidやiOSには入っていません。
スマホでサイトを見る人が8割以上の時代ですから、デザイン性や平等の表示のみならず、可読性（読みやすさ）の向上という意味でも、Webフォントは重宝されますね。
明朝を使うならWebフォントは絶対必要。
Androidで明朝体フォントを表示させる方法｜will style .
Webフォントのデメリット
一方、Webフォント、特に日本語のフォントはデータ量が多く、重たい代物です。
サブセット化（使用する漢字や記号を減らし、内容を軽量化）されていない日本語Webフォントは、2種類だけでも読み込み・表示に1〜2秒増えることがあります。
日本語ってひらがな、カタカナ、漢字、英数字を内包している特殊な言語だからね。
読み込みに2.5秒以上かかるサイトは離脱率が急激に上がり、機会損失が大きいと言われています。
Webフォントはその2.5秒のうち、半分近くも占めるおそれがあるんですね。Adobe Webフォントはライセンスの問題から、自前でサブセット作業をおこなうことは基本的にできません。
サブセット化されたフォントはあるものの、日本語フォントはダイナミックサブセットという仕様上、JavaScriptで動かす形式になってしまい、このあたりは融通がききにくいですね。
この読み込み時間の考えかた、最適化を業界では『LCP』といいます。
Webサイトの読み込み順がよくわからないので少し調べた話｜Qiita
Webページの読み込み時間、3秒が限界か – 5秒になると直帰率激増｜マイナビニュース
DTPデザインとWebデザインは違う
DTP≠Webデザイン
DTP（チラシ・ポスターなどの印刷物）デザインとWebデザインはぜんぜん違うものですし、この違いを理解しないデザイナーは、結果としてチームにも迷惑をかけます。
DTPなら入稿ガイドラインを守れば、Adobeフォントなどを比較的自由に使えます。しかしWebサイトはコーディングの制限やGoogleのガイドライン、表示速度の問題などの考慮は必須です。
WebデザインとDTPはそれこそ緑茶と紅茶、焼きそばとカップ焼きそばぐらいに違います。原材料こそ一緒ですが、シチュエーションや使いどきがぜんぜん違うんですね。
安易に勧める記事を書くのは、コーディングできないWebデザイナーの印象。できるWebデザイナーはDTPと同一視しない。
最後に：絶対悪ではない
使いどころが問題
ここまで、Adobe Webフォントを悪く言う感じになっていますけれど、使いたがるWebデザイナーは無能だとか、絶対悪だから金輪際使うなと言っているわけではありません。
- 【仕様確認】Adobe Webフォントの仕様をしっかり理解する。
- 【要件定義】どの案件で使うのか、管理の問題も考慮しているか。
- 【顧客説明】顧客のサイトに使う場合、その旨を説明する必要がある。
理解と使いどころの問題であり、上記をしっかり考えていて、
- 自社（EC）サイト
- 趣味のホームページ
このような条件下であれば、Adobe Webフォントを使ってもいいと思いますし、
- 顧客に納品するサイト
- SEO重視のサイト
このような場合は本当にAdobe Webフォントを使うべきなのかを、社内のみならず、顧客とも検討を重ねて考えないといけません。
上記注釈・注意点を書かずにAdobe Webフォントの導入方法を書く記事は、コーダー知識や規約を調べず無責任に言っているか、規約改定前の2020年以前の記事のどちらかです。
本当にここをデザイン段階で考えないと、自社やコーダーなどのみならず、顧客側にも迷惑がかかるリスクがあります。
WebサイトとDTPデザインは違うこと、Adobe Webフォントの性質・仕様を理解した上で、最終的に使用するかどうかを判断してください。
できるデザイナーはどこでWebフォントを利用するかの使いどころ・選定を理解しているよ。
