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

WEB制作・開発実例・コラム
2020.08.27

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

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サイトへの使用は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制作会社のアカウントを使用した場合

  • 自社サイト:ライセンス契約とWebフォントの有効期限が切れていなければ問題なし
  • 受託制作したクライアントのWebサイト:ライセンス違反

アカウントの所有者とWebサイトの所有者が一致していなければ、Webフォントは使えません。

制作を依頼されたサイト上でAdobe Fonts のWebフォントを使用するなら、制作会社の法人アカウントや担当Webデザイナーの個人アカウントではなく、最初からクライアントにAdobe CCのアカウントを取得してもらいましょう。

長期使用ならAdobe CCの継続契約が必要!

そもそも、Adobe Fontsの使用権はAdobe CCのライセンスに含まれています。

したがって、下記のようなケースではサイト上で使用していたWebフォントが表示されなくなってしまうのです。

▼Webフォントが非表示になるケース

  • Adobe CCの契約更新をしない
  • 契約中にサービスの利用を停止した場合

特に、あまりにも小規模な制作会社に一からWebサイトの作成を依頼する場合は注意が必要です。

ある日突然フォントが非表示になり、いざ対処しようと思っても「担当していたWebデザイナーが離職していた」「そもそもAdobe CCの契約更新が必要だったことを知らなかった」というクライアントも珍しくありません。

アクティベート後の有効期限は180日間!

一度アクティベートしたwebフォントには有償・無償にかかわらず有効期限があり、180日ごとに再度アクティベートし直さなければなりません。

うっかり180日の有効期限が切れてしまうと、たとえAdobe CCの契約期間中であっても非表示になってしまうので注意が必要です。

無償プランでもOK!おすすめの日本語フォント5選

「良質な日本語フォントって何を基準に選べばイイの?」「種類が多すぎて選べない!」と迷っているなら、まずはヘビロテ必至のシンプルデザインから取得してみましょう。

無償プランにも含まれている下記の5種類なら、誰でも今すぐ利用できます。

貂明朝

ほんのり丸みがかっているのが特徴で、女性向けのWebサイト用として高い人気を誇っているフォントです。シンプルさの中に遊び心を感じさせてくれます。

FOT-クレーPro

明朝体ながら、どこか手書き風の優しさが漂うフォント。とはいえ崩れ過ぎていないので、上品さを残しつつ文章に柔らかさをプラスしたい時におすすめです。

DNP秀英角ゴシック金 Std

親しみやすいオーソドックスなゴシック体。タイトルや見出しなどにも使いやすいベーシックさが魅力です。

筑紫A丸ゴシック

柔らかい印象を与えつつ、しっかりと伝えたいことがアピールできる丸ゴシック。均一の取れた丸みによって「可愛らしさ」と「大人っぽさ」を共存させています。

A-OTF じゅん Pro

日本が誇る「モリサワ」の代表フォント。絵本にも使われている丸ゴシックで、子供向けや子育て関連のWebサイトなどにおすすめです。

Adobe cc有償メンバーなら追加料金なし!無料の日本語フォントパック一覧

フォント選びに迷った時におすすめしたいのが、テーマごとに最適化されたデザインフォントがセットになっている「日本語フォントパック」です。

ここでは、特におすすめしたい定番2種類と2019年末に追加された7種類についてご紹介します。

▼定番の日本語パック2つ

  • アドビ日本語フォント基本パック
  • 日本語ディスプレイパック

▼2019年末に追加された日本語パック7つ

  • 名刺パック
  • 春の入学・オープンキャンパス用パック
  • 動画用パック
  • 夏祭り用パック
  • カフェメニューパック
  • 新春初売りパック
  • 年賀状パック

まずは、「公式サイトのフォントパック一覧」で実際のフォントを確認してみましょう。

Adobe fontsのメリット5つとデメリット3つ

Adobe fontsのメリットとデメリットについて、特筆すべきポイントをピックアップしてみました。

▼メリット

  • 無償プランでも商用として利用できる
  • adobe ccの有償プランに加入していれば、17,000種類のフォントがインストールできる
  • CCプランに加入していれば17,000種類のフォントがインストールできる
  • Webフォントとしても使える
  • Adobeソフトに限らずワードやパワーポイントでも使える

▼デメリット

  • ネット環境がないと使えない
  • シェイプ化しないと文字化けする
  • 無料で使う場合、180日ごとの更新が必要

まとめ

リニューアルされて一段と使い勝手が良くなったAdobe fonts。プロであるWebデザイナーの間でも「もうフォントは買わなくても良いのでは?」と話題に上がるほどです。フォントはUIに直結する重要な要素ですから、Adobe fontsを使って魅力的なWebデザインを目指してみてはいかがでしょうか。

SEOやWEB制作に関する情報を検索

コラム

ピックアップコラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)