SEO対策なら株式会社ペコプラ > Webサイト制作 > Webデザイン > Adobe FontsならWebフォントOKの日本語書体が無料！？Typekitとの違いと使い方

Adobe FontsならWebフォントOKの日本語書体が無料！？Typekitとの違いと使い方

Webサイト制作

Webデザイン

2020.08.27

長年Webデザイナーをしていると、「フォントは年単位で契約するモノ」という常識にとらわれていました。AdobeCCのリリース時も特に気にしていなかったので、まさか無料でこんなに便利な機能が付随していたなんて…！そこで本記事では、本当にAdobe Fontsは無料なのか、具体的な使い方と合わせてまとめてみました。

1 Adobe fontsとは？
2 Adobe fontsは本当に無料？
3 フリーフォントなのに商用利用OK！Adobe Fontsの利用範囲
4 無料プランを使用する際の注意点！
5 改善点がいっぱい！Typekitからの変更点5つ
6 Adobe fontsの使い方
7 Webフォントとして使用する際の注意点3つ
8 無償プランでもOK！おすすめの日本語フォント5選
9 Adobe cc有償メンバーなら追加料金なし！無料の日本語フォントパック一覧
10 Adobe fontsのメリット5つとデメリット3つ
11 まとめ

Adobe fontsとは？

「Adobe Fonts」とは、米Adobe社（日本法人はアドビシステムズ株式会社）が提供しているフォントライブラリサービスの一つで、2018年10月15日に「Typekit」という名称から改名されました。

今回の改名に伴い、Typekitのころは複雑だったライセンスや料金システムが簡略化され、ユーザーにとってネックになっていた利用制限も撤廃されました。

とはいえ、Adobeソフトに限らずWebフォントとしても使える、個人だけでなく商用としても利用できるという長所は維持されています。

Adobe fontsは本当に無料？

大前提として、Adobe FontsはAdobe CC（Creative Cloud）に付随しているサービスです。

そのため、Adobe Fontsを利用するには予めAdobe CCに登録する必要がありますが、だからと言って必ずしも有料という訳ではありません。

Adobe CC の無償メンバー：フォントの基本セットが無料で利用できる
Adobe CC の有償メンバー：全プラン追加料金なしで全フォントが利用できる

つまり、フォントの基本セットだけならAdobe IDさえ取得すればOKですし、有償プランの内一つでも契約している人なら実質無料で利用できるのです。

フリーフォントなのに商用利用OK！Adobe Fontsの利用範囲

利用範囲の広さこそ、Adobe Fontsが世界中のWebデザイナーに選ばれている最大の理由と言っても過言ではありません。

確かに、Web上では数多くのフリーフォントが簡単に入手できます。

とはいえ、中にはある程度の制限が設けられているケースもあり、用途に合わせてイチイチ確認するのが面倒でした。

その点、Adobe Fontsなら個人利用に限らず幅広い分野での使用が認められており、数あるフリーフォントの中でも自由度の高さが際立っているのです。

▼Adobe Fontsの利用範囲

商品パッケージやバナー広告への埋め込み、書籍などあらゆる商用利用
YouTubeや映画、ビデオコンテンツなどの動画
Flashファイルへの埋め込み
ロゴなどの商標登録、著作権による保護
PDFファイルや EPSファイルの生成
JPEGなどのビットマップファイルの生成
アウトラインなど、フォント外観の変更

なお、利用範囲については公式サイトの「フォントのライセンス」にて詳しく解説されています。

無料プランを使用する際の注意点！

無料プランでもデザイン性に優れたフォントが手軽に入手できるうえ、さまざまな用途に利用できるのがAdobe Fontsのおすすめポイント。

ただし、無償プランの方は用途やフォントのタイプを問わず180日ごとにライセンスを更新する必要がありますので、注意が必要です。

改善点がいっぱい！Typekitからの変更点5つ

今回リニューアルされたのは名称だけではありません。

サービスの内容自体もシンプル化され、よりユーザーが使いやすい仕組みへと改善されています。

「無償」と「有償」の2プランのみ！違いはフォント数だけ

Typekitのころも無償と有償プランの両方があり、どちらも利用可能でした。

しかし、有償の場合は3種類のプランの中で更にライセンスが細分化されており、Typekitに対しても適用されていたのです。

そのため、同じ有償でもプランやライセンスの種類によって利用できるフォント数が異なるのはもちろん、商用で使えるフォント数にも違いがありました。

一方、リニューアル後はAdobe Fontsの利用に限り無償と有償の2プランのみとなっています。

しかも、有償であれば月額5,680 円のコンプリートプランであろうと980 円のフォトプラン単体であろうと、同じフォント数が利用できるようになったのです。

無償プランと有償プランの違いは、フォントに対する「利用制限の有無」という1点だけになります。

▼利用できるフォント数の違い

無償プラン：6,000フォントまで利用可能
有償プラン：17,000フォントが利用可能

無償プラン対象フォントが4倍の6,000種類に増量！

「ブログを始めてみようかな」「Webデザインに挑戦してみようかな」という初心者に嬉しいのが、無償プラン対象のフォントが一気に増量されたという点でしょう。

▼無償プラン対象フォントの種類

Typekit：約1,500フォント
Adobe Fonts：6,000フォント

Typekitの頃と比べると4倍も増えており、かなり太っ腹なリニューアルだったことが伺えます。

フォントの同期制限が撤廃された！

Webデザインの主力ツールであるPhotoshopやIllustratorなど、Adobeソフトのヘビーユーザーに喜ばれているのが同期制限の撤廃です。

無償または有償の範囲内ではあるものの、今後は必要なフォントを好きなだけアクティベートできるようになりました。

▼同期制限の比較

Typekit：最大100フォントまで
Adobe Fonts：無制限

Webフォントのページビューとドメイン制限が撤廃された！

ページビュー数や1ドメインあたりのフォント数など、プランごとに設けられていた細かい制約はWebコンテンツ利用者にとってネックでしたが、こちらも撤廃されています。

▼月間ページビュー数とドメイン数の比較

Typekit：プランによって上限が異なる
Adobe Fonts：無制限

「Webのみフォント」の利用制限が撤廃された！

TypekitではWebでしか使えないフォントがありましたが、Adobe Fontsでは全てのフォントがWebでもデスクトップでも利用できるようになりました。

なお、TypekitからAdobe fontsへのリニューアルに伴う変更点については、Adobe公式サイトにて詳しくアナウンスされています。

Adobe fontsの使い方

ここからは4つプロセスに分けて解説しますので、用途に合わせて参考にしてください。

IDの取得からログインまでの手順

Adobe fontsを使用する前に、アカウントページからAdobe IDを取得しておきましょう。

続いてAdobe fontsのフォント一覧へアクセスすると下記画面が表示されます。

上記画像の赤枠、フォント一覧の右上にあるボタンからログインし、同じく右上にある「日本語モード」を選択しておきましょう。

フォントの選び方

フォント数が膨大なAdobe fontsでは、検索をスムーズに行うために2種類の方法が用意されています。

下記画像の赤枠部分、左側のサイドバーにあるフォントタイプからソートする、または画面上部にある検索窓口に特定のフォント名を入力してみましょう。

表示されるサンプルの文字を変更したい時は、緑色の枠で囲ってある「サンプルテキスト」にお好みのフレーズを入力して下さい。

グリット表示からリスト表示に切り替えると下記画像のように比較しやすくなります。

ローカルPC上での使い方

「個別」または「ファミリーごと」に行えるのが特徴で、「アクティベート」スイッチをオンにするだけでPhotoshopやIllustratorなどのAdobe系ソフトだけでなく、ワードやパワーポイントでも使えるようになります。

例題として、左側のサイドメニューからゴシックを選択した時の画面を見てみましょう。

表示された22個のフォントファミリーの中から一つを選び、赤枠で囲ってある「ファミリーを表示」をクリックすると、下記の画像が表示されます。

ファミリーごと取得したい時は赤枠、個別に取得したい時は緑枠のアクティベートをオンにしましょう。

Webフォントとしての使い方！h1 タグのCSS記述例

気に入ったフォントファミリーを選び「ファミリーを表示」をクリックすると、下記の画面が表示されますので、赤枠で囲ってある「Webプロジェクトに追加」をクリックして下さい。

下記画像のようなポップアップが表示されたら、赤枠部分で必要なフォントを選択し、続いてWebプロジェクト（フォントリスト）の設定を行います。

初めて使用する場合は、緑枠に新しいプロジェクト名を入力してから右下の「作成」をクリックして下さい。

次のポップアップを見てみると、赤枠にHeadタグに追加する「script」が、緑枠にはCSSに記述する埋め込みコードが表示されています。

後は、コピーした埋め込みコードを指定された場所に貼り付ければ完成です。

▼h1 タグへ反映させるCSSの記述例

h1 {
  font-family: a-otf-jun-pro, sans-serif;
  font-weight: 300;
  font-style: normal;
}

Webフォントとして使用する際の注意点3つ

Adobe Fontsは、基本プランであれば個人・商用利用を問わず無料で使える優秀なフリーフォントですが、必ずしも万能とは言い切れません。

中でもトラブルに繋がりやすいのが、商用として利用するシーンが多い「Webフォント」です。

この段落では、Adobe FontsをWebフォントとして使用する際、注意すべき3つのポイントについて解説します。

その他のフリーフォントをWebフォント化する方法は下記の記事で解説しています。

フリーフォントをwebフォント化する方法！サブセット化の手順とCSS事例

Webフォントサービスはデザイン性に優れているフォントが簡単に使える反面、種類が少なくて物足りない…と思っていませんか？そこで本記事では、和文で…

受託制作したクライアントのWebサイトへの使用はNG！

ユーザーがコンテンツを閲覧する際、サイト制作者側が用いたフォントがインストールされていないPCからでも支障なく、全く同じビジュアルで表示されるのがWebフォントならではの強みです。

ただし、所有権を持たないWebサイトへの使用は要注意！以前は認められていたWebフォントの「再販」ですが、利用条件が変更されて2019 年 12 月 31 日以降はライセンス違反と見なされます。

Web フォントを顧客の Web サイトに使用することはできますか。

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

引用：Adobe公式サイト「フォントのライセンスFAQ」

事実、下記の通り2020年8月時点では「アカウントの所有者」と「Webフォントを使用する対象サイト」の関係性によって、全く異なる判定結果が下されてしまうのです。

▼Web制作会社のアカウントを使用した場合