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

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

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

と、WEBデザイナーの人たちがAdobeのWEBフォント(以下、Adobe WEBフォント)太鼓判を押すかのごとくオススメする記事が数多くあるものです。

しかし、コーダー目線や管理の側面から見ると、「安易にAdobe WEBフォント、特に日本語フォントを使うのはちょっと待ってほしい」もので、WEBデザイナーだからこそ、しっかり考えてほしいなと思う次第です。

ここを語るにはコーディングだったりSEOの知識も必要になるので、そこも簡単に踏まえつつ、なぜ安易に使うべきではないのかを解説します。

正確な情報を求む 情報に誤りがあればご連絡ください

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

確かに便利だけど…

なぜ安易にAdobe WEBフォントを使ってはいけないのか。その理由を簡潔にまとめるならば、

  • JSで動く】日本語フォントは実装にJava Script(JS)が必要。コードも長く、メンテナンス性が少し悪い。
  • 管理が大変】Adobe WEBフォントは一案件ごとに管理する。抱える案件が増えれば管理コストが大変。
  • 解約すると解除される】Adobe CCを解約すると、関わったサイトすべてのWEBフォントが一気に使えなくなってしまう。
  • やりとりも大変】外注や他社移管を行う際にも、正確に伝えなければならないため、コーダーやディレクターの手間が増える。
  • 多くても2種類が限度】日本語WEBフォントは重いデータの宝庫。多用は論外。
  • 規約変更】Adobeの利用規約が変更され、顧客側も使用料をAdobeに支払わないといけない可能性がある。

特に最後の規約変更は大変な事態ですよね。公式サイトの記載ですが、

利用条件では、2019 年 12 月 31 日以降の再販は許可されていません。それ以降にフォントライセンスや web フォントホスティングが中断されないようにするには、クライアントの web サイトは、独自の Creative Cloud サブスクリプションから Adobe Fonts を読み込む必要があります。(中略)

クライアントは、web フォントプロジェクトを転送する前に Creative Cloud サブスクリプションを設定する必要があります。完全なフォントライブラリは、ほとんどの有料の Creative Cloud サブスクリプション(例外あり)に含まれています。

フォントのライセンス|Adobe

つまり、

CHECK!

Adobe WEBフォントを使用する場合、顧客側もライセンス購入して、CCに加入してもらわなければならず、その旨を事前に説明しなければならない。

ということです。

今のところ、2020年以前の案件にも適用されるかは不明確で、顧客側がライセンス料を支払わず、規約違反で問題なったという話は聞きませんが……

守らないよりかは守ったほうがいい

無用なトラブルを避けるなら守ったほうがいいですし、このように、Adobeはいきなりこういった規約変更をすることがあるんですよね(事前連絡もなく、自社都合でいきなりCCのCS6を使えなくしたりとか……)。

無料で使用できるフォントもあるにはありますが、ほとんど英語フォントばかりで、Googleフォントでも使用されているものがほとんど。

2021年現在、実用的な無料日本語フォントは皆無(かいむ)です。

ダイナミックサブセットと Web フォント提供|Adobe

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

WEBフォントの利点と欠点

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

Adobe WEBフォント以前に、WEBフォントのメリットとデメリットを知っておかなければなりません。

特にSEOまで考えると、安易にポンポン使うような代物ではないですからね。

WEBデザイナーにSEO知識までは求めるかはともかく、知らないよりは知っておいて損はないでしょうし、その点を踏まえながら、簡単ながら以下に記載します。

WEBフォントのメリット

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

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

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

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

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

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

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

WEBフォントのデメリット

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

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

さらにJava Scriptで読み込むタイプだと、WEBフォントの読み込みに影響が出てしまう可能性が拭いきれません。Adobeだと日本語フォント(ダイナミックサブセット)が該当します。

SEOの世界では、読み込みに2.5秒以上かかるサイトは離脱率が上がり、機会損失が発生すると言われています。WEBフォントはその3秒のうち、半分近くも占めるおそれがあるんですね。

なお、1〜2秒というのは、過去の当サイトをGoogleのページ計測した際のデータです。さすがに問題でしたので、フォントはサブセット化作業を行い、現在はページの読み込み時間を従来より1〜2秒近く抑えることができました。

当サイトや業務ではGoogleフォントを使用していて、Adobe WEBフォントはライセンスの問題から、自前でサブセット作業を行うことは基本的にできません。

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

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

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

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

DTP≠WEBデザイン

DTP(チラシ・ポスターなどの印刷物)デザインとWEBデザインはぜんぜん違うものだと理解せねばなりません。

DTPなら基本的に入稿ガイドラインを守っていれば、Adobeフォントといったフォントを比較的自由に使えるものです。

しかしWEBサイトはデザインするとき、画像表示の部分以外だとSEO、コーディング、制限の問題なども考慮し、WEBフォントも使用するなら、さきほど述べたことも頭に入れないといけなくなります。

別に「DTPなんてお気楽でその程度」と卑下(ひげ)しているわけではないですし、WEBサイトも「デザイン」ですから、フォントまでこだわるのは間違ったことではありません。

とはいえ、WEBデザインってDTPとはぜんぜん違うってことを知らないと、多方面に迷惑をかけてしまうのは、WEBデザイナーなら考えていただきたいものです。

最後に:絶対悪ではない

使いどころが問題

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

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

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

  • 「どの案件で使うのか?」
  • 「管理の問題も考慮しているか」
  • 「顧客側にも説明した上で使うのか」

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

  • 自社(EC)サイト
  • 趣味のホームページ
  • SEOをあえて重視しないサイト
  • 管理案件が少数
  • 期間限定のサイト(ランディングページ:LPサイト)

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

  • 新規制作案件のサイト
  • SEO重視のサイト
  • 管理案件が多い

このような場合は、本当にAdobe WEBフォントを使うべきなのかを、社内のみならず、顧客とも検討を重ねて考えるべきです。

「見栄えがいいから」「かっこいいから」という安易な考えでAdobe WEBフォント使うのは、自社のみならず、顧客側にも迷惑がかかるリスクがあります。

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

当サイトはみなさまのご支援で、広告なしの実現やコンテンツ維持を行っています。情報がお役に立てたり、気に入った作品がございましたら、ご支援をお願いいたします。

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

クリック・タップで記事URLをコピーできます

利用規約

個人情報保護

当サイトや赤竹ただきち(以下、当管理者)宛に送られたメールの内容や差出人、アクセス解析で得た個人情報などは、差出人・閲覧者当人の承諾がない限り、当サイト内やほかのサービスで公開することはいたしません。

絵や記事のシェア

当サイトの絵や記事をシェアされる場合、個人サイト・ブログ・サービス・SNSなどを問わず、URLなどを記載して、出典元を明記ください。明記していただければ、ご自由にシェアしていただいて構いません。

ただし、記事の場合は下記の『禁止行為』のとおり、記事を読まない、特定のワードに反応したようなシェア行為はお断りいたします。

記事の引用(転載)ルール

記事内の文章を引用(転載)される場合、URL元を明記した上で引用要素(blockquote)内に記載してください。掲示板やSNSの場合は、文頭に「>」などをつけ、オリジナルコンテンツ(コピーコンテンツ)ではないことを明確にしてください。

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

メールの内容・取り扱い

メールはご意見・ご指摘・ご感想・依頼・営業メールのみ受けつけますので、あらかじめご了承ください(当サイトを利用した宣伝・委託行為はお断りいたします)。

下記の『禁止行為』のとおり、メール内容に当管理者や他者へのヘイト行為といった、誹謗中傷が見られた場合、返信を控えさせていただくほか、悪質と判断した場合は法的処置をとる場合があります。

禁止行為

以下の行為が見られた場合は、法的処置などといったしかるべき対応をとらせていただく場合があります。

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

二次利用・加工・改変行為の例外
シェアや引用(転載)のルール遵守など、社会通念上問題がないケースや、または要約のための文章改変・紹介や参考、プレビュー画像としてのスクリーンショット撮影・トリミング(切り取り)しただけの場合は例外として扱う。

安易な拡散行為の禁止
特定のキーワードや単語に反応し、記事を読まないままの安易な拡散行為の禁止(誤った解釈のみならず、〈自他問わず〉いわれなき風評被害や誹謗中傷につながる恐れがあるため)。

誹謗中傷行為の禁止
当サイト・他者・企業などを誹謗中傷する目的での引用行為。また、当管理者あてのメールやSNSのメッセージ・コメントなどにおいても、意見・指摘ではなく誹謗中傷目的のもの。当管理者や他者の人格・風評を著しくおとしめる行為。

著作権

当サイトは著作権の侵害を目的とするものではありません。スクリーンショットや二次創作物の知的所有権はそれぞれの著作者・団体に帰属しており、各利用規約を確認した上で掲載しています。

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

オリジナル作品や当サイトのレイアウトデザイン・掲載文章の著作物は当管理者が有しており、『禁止行為』のとおり、シェア・引用(転載)のルールが守られていないもの、悪意ある二次利用・改変行為を禁止します。

トラブル

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

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

リンクについて

当サイトはリンクフリーですが、バナー画像以外の画像直リンク行為や、インラインフレーム表示は固くお断りいたします。

制定日:2017/2/24
改定日:2022/3/3

シェア・引用をされる前にご一読ください(内容に同意したものとみなします)

  • 赤竹ただきち
  • 赤竹ただきち  Tadakichi Akatake

評論ができる人と評論家気取りの違いは、対比するとよくわかるよ。

評論できる人は論理的で言葉を選ぶ。評論家気取りは感情的で言葉を選べない。

評論できる人は正しい批判ができる。評論家気取りは文句や悪口を批判だと思っている。

評論できる人はリテラシーが高い。評論家気取りはリテラシーが低い。

評論できる人は意見される覚悟がある。評論家気取りは意見されると逆上する。

評論できる人は思いやりがある。評論家気取りはただの自己満足。

評論できる人は実生活でもはっきりと意見を言える。評論家気取りはネット・SNSの世界でしか主張しない。

自分のいる会社はちゃんと評論ができて、自分の意見を持っていないと働けないから、本当にいい訓練になる。

イラストレーター・ライター・フロントエンドエンジニア・WEBデザイナーの京都生まれなウサギ好き。性別問わず好きなタイプは「反省から学ぶ能動的な人」。物事を定義づけし、見解を交えてわかりやすく解説するのが得意なため、各所でご好評の声を頂いております。

ご依頼・お問い合わせ
雑記

内容・ジャンルをタグで探す

ATARIAVGNElite Beat AgentsGソニックMacMacintoshMADWORLDMGRMGSMGS4MGSPWMGSVmoonR-15WordPressあつまれどうぶつの森お役立ちきみのためなら死ねるくすぐりとびだせどうぶつの森どうぶつの森どうぶつの森 ポケットキャンプアイドルマスターアイドルマスターシンデレラガールズアズレンアズールレーンオリジナルキズナアイグロゲームコロコロアニキコロッケ!ゴッドオブウォーサイバーモーフサウスパークスカイウォードソードスターウォーズスマブラSPスーパーマリオ64スーパーマリオギャラクシースーパーマリオサンシャインゼルダの伝説ソウルキャリバーソニックソニックXソニックと暗黒の騎士ソニックアドベンチャーソニックオリジンズソニックカラーズソニックジェネレーションズソニックトゥーンソニックヒーローズソニックフォースソニックフロンティアソニックブームソニックロストワールドソーシャルゲームチームソニックレーシングテッドバンジョーとカズーイの大冒険バーチャルYouTuberパンチアウト!!ピカブイピクミン3ホロライブポケットモンスターポケモンポケモンBW2ポケモンXYポケモンマスターズポケモンレジェンズポケモン剣盾ポーズマニアックスマックスアナーキーマリオマリオ&ソニックマンガミニ四駆ムジュラの仮面メタルギアメタルギアライジングヤンこれヤンデレヤンデレーンリョナリングフィットアドベンチャー創作名探偵ピカチュウ喧嘩番長喧嘩番長6大乱闘スマッシュブラザーズ押忍!闘え!応援団新ソニ星のカービィ映画模写死.tv海外アニメ爆走兄弟レッツ&ゴー!!百合考察艦これ艦隊これくしょん色彩検定解説超速グランプリ遊戯王遊戯王ARC-V遊戯王SEVENS遊戯王ゴーラッシュ!!雑記風のタクト魁!!クロマティ高校
  • お問い合わせ
  • #R-15

    R-15

ENTRIES

RANKINGS

PICK UPS

PATRON

COMMISSION