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

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

長年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ですし、有償プランの内一つでも契約している人なら実質無料で利用できるのです。

ただし、無償プランの方は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でもデスクトップでも利用できるようになりました。

Adobe fontsの使い方

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

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

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

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

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

フォントの選び方

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

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

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

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

ローカルPC上での使い方

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

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

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

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

Webフォントとしての使い方

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

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

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

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

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

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

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

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

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

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

貂明朝

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

FOT-クレーPro

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

DNP秀英角ゴシック金 Std

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

筑紫A丸ゴシック

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

A-OTF じゅん Pro

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

Adobe fontsのメリットとデメリット

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

▼メリット

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

▼デメリット

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

まとめ

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

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

コラム

ピックアップコラム

最新コラム

人気コラム

過去の記事

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

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

03-5829-9912

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