2021.11.20 2024.06.18

【注意】安易なAdobe Webフォント利用はやめたほうがいい理由【Webデザイン】

雑記,Adobeフォント,WEBデザイナー,フロントエンド,WEBデザイン

ネット上やSNSの記事だと、

  • 「Webフォントを使いたいならAdobeフォントで決まり!」
  • 「AdobeフォントはWebフォントとしても使えて便利!」
  • 「AdobeフォントをWebフォントとして使う方法をまとめました」

と、Webデザイナーの人たちがAdobeのWebフォント(以下、Adobe Webフォント)推奨する記事が数多くあります。

しかし、コーダー目線や管理の側面から見ると、

AdobeフォントをWebフォントとして使うのはちょっと待ってほしい。

フキダシ2

となるんですが、これは安易にAdobeフォントをWebフォントに使うのは、規約に抵触する可能性があるからです。

なぜ安易に使うべきではないのか、コーダー目線でWebフォントのメリット・デメリットを踏まえつつ、参考にしていただけますと幸いです。

2020年以降、上記注釈をせずAdobe Webフォントを勧める記事があれば無責任な内容を拡散していると言えるね。

フキダシ2
  • 正確な情報を求む

    誤りがあればご連絡ください

安易に使うべきではない理由とリスク

背景

確かに便利だけど…

なぜ安易に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

ウェブフォントはGoogle Fontsに決まり!|コキャクル

Webフォントの利点と欠点

背景

Webフォントにも
欠点があるよ

Adobe Webフォントを安易に使うべきではないのは、規約の問題が一番大きな要因です。

ただそれだけではなく、SEO(特にUI・UXの部分)まで考えると、安易にポンポン使うような代物ではないことを、Webデザイナーは最低限知ってほしいところです。

次からは、Webフォントのメリット・デメリットをご紹介します。

Webフォントのメリット

Webフォントは「すべてのデバイスで同じフォントが表示される」が最大のメリットです。

よくある話で、Android端末では明朝体が入っていないため、もしサイト内で明朝体を使いたいのであれば、Webフォントは必要になります。

また游明朝・游ゴシックはMacやWindowsにはあっても、AndroidやiOSには入っていません。

スマホでサイトを見る人が8割以上の時代ですから、デザイン性や平等の表示のみならず、可読性(読みやすさ)の向上という意味でも、Webフォントは重宝されますね。

明朝を使うならWebフォントは絶対必要。

フキダシ2

Androidで明朝体フォントを表示させる方法|will style .

Webで游ゴシックをiPhoneやAndroidで表示できない?表示するには?|Qiita

インターネットの利用環境は「スマホのみ」が最多 60代はスマホ利用者が7割超に【LINE調査】|MarkeZine

Webフォントのデメリット

一方、Webフォント、特に日本語のフォントはデータ量が多く、重たい代物です。

サブセット化(使用する漢字や記号を減らし、内容を軽量化)されていない日本語Webフォントは、2種類だけでも読み込み・表示に1〜2秒増えることがあります。

日本語ってひらがな、カタカナ、漢字、英数字を内包している特殊な言語だからね。

フキダシ2

読み込みに2.5秒以上かかるサイトは離脱率が急激に上がり、機会損失が大きいと言われています。

Webフォントはその2.5秒のうち、半分近くも占めるおそれがあるんですね。Adobe Webフォントはライセンスの問題から、自前でサブセット作業をおこなうことは基本的にできません。

サブセット化されたフォントはあるものの、日本語フォントはダイナミックサブセットという仕様上、JavaScriptで動かす形式になってしまい、このあたりは融通がききにくいですね。

この読み込み時間の考えかた、最適化をWeb業界では『LCP』といいます。

フキダシ1

Webサイトの読み込み順がよくわからないので少し調べた話|Qiita

Webページの読み込み時間、3秒が限界か – 5秒になると直帰率激増|マイナビニュース

DTPデザインとWebデザインは違う

背景

DTP≠Webデザイン

DTP(チラシ・ポスターなどの印刷物)デザインとWebデザインはぜんぜん違うものですし、この違いを理解しないデザイナーは、結果としてチームにも迷惑をかけます。

DTPなら入稿ガイドラインを守れば、Adobeフォントなどを比較的自由に使えます。しかしWebサイトはコーディングの制限やGoogleのガイドライン、表示速度の問題などの考慮は必須です。

WebデザインとDTPはそれこそ緑茶と紅茶、焼きそばとカップ焼きそばぐらいに違います。原材料こそ一緒ですが、シチュエーションや使いどきがぜんぜん違うんですね。

安易に勧める記事を書くのは、コーディングできないWebデザイナーの印象。できるWebデザイナーはDTPと同一視しない。

フキダシ2

最後に:絶対悪ではない

背景

使いどころが問題

ここまで、Adobe Webフォントを悪く言っている感じにはなっていますけれど、

  • 「Adobe Webフォントを使いたがるWebデザイナーは無能」
  • 「Adobe Webフォントは絶対悪だし、金輪際使うな!」

……と、言っているわけではありません。理解と使いどころの問題です。

  • Adobe Webフォントの仕様を理解
  • どの案件で使うのか?
  • 管理の問題も考慮しているか
  • 顧客側にも説明した上で使うのか

上記をしっかり考えていて、

  • 自社(EC)サイト
  • 趣味のホームページ

このような条件下であれば、Adobe Webフォントを使ってもいいと思いますし、

  • 顧客に納品するサイト
  • SEO重視のサイト

このような場合は本当にAdobe Webフォントを使うべきなのかを、社内のみならず、顧客とも検討を重ねて考えないといけません。

上記の注釈・注意点を書かずにAdobe Webフォントを勧めるWebデザイナー記事は、コーダー知識や規約を調べず無責任に言っているか、規約改定前の2020年以前の記事のどちらかです。

「見栄えがいいから」「かっこいいから」という安易な考えだけでAdobe Webフォント使うのはよくないね。

フキダシ2

本当にここをデザイン段階で考えないと、自社やコーダーなどのみならず、顧客側にも迷惑がかかるリスクがあります。

WebサイトとDTPデザインは全く違うこと、Adobe Webフォントの性質・仕様を理解した上で、最終的に使用するかどうかを判断してください。

寄付のお願い

フキダシ3 ありがとう
ございます
  • 当サイトはみなさまのご支援により、広告なしの実現やサイト維持をおこなっています。

    記事や作品が気に入りましたら、支援サイトのご支援や寄付をよろしくお願いいたします。

記事・作品をシェア

https://umakose.com/notes/211120-1

クリック・タップでコピーできます

1.シェアについて

赤竹ただきち(以下、当管理者)が運営するウマコセドットコム(以下、当サイト)の内容をシェアする場合、個人サイト・ブログ・サービス・SNSを問わず、URLなどを記載して出典元を明記ください。

明記していただければ、社会通念上の範囲内でご自由にシェアが可能です。

2.記事の引用(転載)

記事内の文章を引用される場合、URL元を明記し引用要素(blockquote)内に記載してください(なおサイト内のコピペは悪用・言い逃げ対策のため不可にしていますので、ご了承ください)。

掲示板やSNSの場合は、文頭に「>」などをつけ、オリジナルコンテンツ(コピーコンテンツ)ではないことを明確にしてください。

要約のための一部改変は、記事の意図を大幅に変えなければ可能とします。

3.キャラクターの使用

当サイトに掲載されているオリジナルキャラクターの使用は、創作性が高い非営利の個人に限り、イラスト・マンガなどに使用できます。非営利・個人の定義はこちらをご参照ください。

制作費・人件費の範囲内であれば、有償配布や支援サイトの掲載も可能としますが、AIで作成した作品で当管理者の絵だと誤認させる、有償行為をするのはご遠慮ください。

4.当管理者の著作権

当管理者が作成した文章・画像・デザイン・オリジナルキャラクターや作品などについては原則、ご依頼であっても著作権は当管理人に属します。

ただしバーチャルVtuberなど、権利者ご自身のキャラクター、または二次創作元のキャラクターなどの知的財産権につきましては、当管理者ではなく元の権利者に属します。

4.禁止行為

以下の行為が見られた場合は、個別のご連絡や法的処置などといった対応をとらせていただく場合があります。

A.二次利用・加工・改変

当サイトの画像・イラスト・文章・ブログレイアウトなどの悪意ある二次利用・加工・改変行為や、信用毀損・反社会的など、社会通念上問題のある目的での利用。

B.不適切な拡散

特定のキーワードや文面に反応するなど、不適切な拡散行為の禁止(誤った解釈のみならず、〈自他問わず〉いわれなき風評被害や誹謗中傷につながる恐れがあるため)。

C.誹謗中傷

当サイト・他者・企業などを誹謗中傷する目的での引用。また煽り・マウント行為といった、意見・提起・指摘ではなく、人格・風評を著しくおとしめようとする行動も含む。

5.著作権

当サイトは著作権の侵害を目的とするものではありません。

画面のスクリーンショットや二次創作元の知的所有権はそれぞれの権利者・団体に帰属しており、各利用規約を確認した上で掲載しています。

有料二次創作は権利元の創作ガイドラインを厳守するように努めていますが、問題があれば当サイトのお問い合わせよりご報告ください。

6.トラブル

当サイト記事のシェアなどが要因で発生したトラブルなどについては、一切の責任を負いかねます。あくまでも参考・一意見として扱ってください。

当管理者まで直接ご意見・ご指摘を希望される場合は当サイトのお問い合わせからご連絡願います。

制定日:2017/2/24
改定日:2024/3/20

シェア・引用の前に「規約・ポリシー」をご一読ください(同意したものとみなします)。

特定の単語・見出しで拡散、他者を誹謗中傷・マウント・バッシング目的のシェアは固くお断りいたします。

シェア内容が問題だと判断した際、個別にご連絡を差し上げる場合があります。

社会通念上のモラル・リテラシー・マナーを守っていれば、ご連絡をすることはございません。シェア・引用をしていただき、誠にありがとうございます。

プロフィール

    • フキダシ2
    • 赤竹ただきちTadakichi Akatake
  • ドラクエの映画(ユアストーリー)の終盤がメタネタで色々言われたのは有名な話。実は似たことはソニックのゲームにもあって…

    ソニッククロニクルというDS作品で、ラストで急にソニックとテイルスが脈絡のないゲーム開発会社の紹介話をするという謎END。

    しかも続編構想が著作権問題や会社の方針転換で無かったことにされ、海外公式設定集で非正史作品にされたという闇の深さ。

    ユアストーリーとクロニクルは、

    「ラストでいきなりメタネタをぶっこまれて頭ぽかんとなる」

    ぐらいしか共通点がないものの、安直なメタネタは反感を買われるという、マンガ制作でも気をつけたい教訓だね。

イラストレーター・コーダー+WEBデザイナー・ライターの京都生まれなウサギ好き。多様な絵柄を描け、外国人でも絵でわかるマンガ、ウサギと口内描写にこだわりを持つ。

コーディングとWebデザインは両方可能。案件によっては「デザインとコーディングの同時進行」の荒業もおこない、SEOを意識したマークアップも得意。

「自省・リテラシー向上・正しい批判」をライフワークとし、当サイト記事も「中学生でもわかりやすい、気づき・理解・学ぶ」を全体テーマとして執筆。

これは微力ながら閲覧者に考える・学ぶ助力のほか、自身も学ぶ目的も含み、実社会・ネット・SNSでも「わかりやすく参考になった」とご好評の声多数。

「下手でも自分の弱さを認め、自省し学び、その姿勢を相手への敬意として表すことも忘れない人」は、年齢・性別問わず好きなタイプ。

自省についての解説を読む

リテラシーについての解説を読む

正しい批判についての解説を読む