【Adobe Fonts】アドビフォントの使い方|フォントの追加から商用利用まで初心者向けに解説

【Adobe Fonts】アドビフォントの使い方|フォントの追加から商用利用まで初心者向けに解説

デザインの印象を大きく左右するのがフォント選び。同じレイアウトでも、フォントが変わるだけでデザインの雰囲気はガラッと変わります。

ただ、フォントメーカーのフォントは1書体で数万円するものもあって、初心者にはなかなか手が出しにくいですよね。

そんなときに活用したいのが、Adobe Fonts(アドビフォント)です。

Adobe Fontsは、Adobe Creative Cloudに含まれているフォントサービスで、追加料金なしで20,000以上のフォントが使い放題!日本語フォントだけでも500書体以上あるので、デザインの幅がぐっと広がりますよ。

この記事では、Adobe Fontsの使い方を初心者向けにわかりやすく解説します。フォントの追加方法から、検索のコツ、おすすめの日本語フォント、商用利用のルール、うまく反映されないときの対処法まで、この1記事ですべてカバーしています。

おもち

デザイン制作に欠かせない、おすすめフォントも紹介するよ!

目次

Adobe Fontsとは

Adobe Fonts(アドビフォント)は、Adobeが提供しているフォントサービス

Adobe Fonts(アドビフォント)は、Adobeが提供しているフォントサービスです。

世界中のフォントメーカーが作成した20,000以上のフォントが収録されていて、日本語フォントだけでも500書体以上。モリサワやフォントワークスなど、プロのデザイナーが実務で使うフォントメーカーのフォントも多数含まれています。

使い方はとてもシンプルで、気に入ったフォントを『アクティベート』するだけ。むずかしいインストール作業は必要ありません。アクティベートしたフォントは、Illustrator、Photoshop、Premiere Proなど、すべてのAdobe製品で共通して使えるのもうれしいポイントです。

フォントライブラリは定期的にアップデートされていて、新しいフォントも随時追加されています。

Adobe Fontsの料金

Adobe Fontsの料金体系はとってもシンプル。

結論から言うと、Adobe Creative Cloudのどのプランに入っていても、追加料金なしでAdobe Fontsの全フォントが使えます。

IllustratorやPhotoshopを単体で契約している方も、コンプリートプランの方も、フォトプランの方も、全員同じように全フォントが利用可能です。

Adobe CC契約者なら、Adobe Fontsのために別途お金を払う必要はまったくありません。

無料プランでも使える

Adobe IDを持っているだけ(CCを契約していない状態)でも、約6,000書体の欧文フォントが無料で利用可能です。

ただし、無料プランで使えるのは基本的に欧文(英語)フォントがメイン。日本語フォントを本格的に使いたい場合は、Adobe CCのいずれかのプランに加入する必要があります。

プラン料金の目安Adobe Fontsの利用範囲
無料(Adobe IDのみ)0円約6,000書体(欧文メイン)
CC単体プラン月額1,180円〜全フォント使い放題
フォトプラン月額2,380円全フォント使い放題
コンプリートプラン月額7,780円全フォント使い放題

IllustratorやPhotoshopをすでに使っている方は、何もしなくてもAdobe Fontsが使える状態なので、とくに追加の手続きはいりません。

Adobe Fontsの使い方【フォントを追加する2つの方法】

Adobe Fontsのフォントを使うには、使いたいフォントを『アクティベート(有効化)』する必要があります。

アクティベートの方法は2つあります。

方法1:Adobe Fontsのサイトからアクティベートする

Adobe Fontsサイトからフォントを追加する方法 ステップ1:まずは Adobe Fonts をひらく

いちばん基本的な方法です。

まずは Adobe Fonts をひらきましょう。

Adobe Fontsサイトからフォントを追加する方法 ステップ2:画面右上にある『ログイン』ボタンをクリックする

サイトがひらいたら、画面右上にある『ログイン』ボタンをクリック。

Adobe Fontsサイトからフォントを追加する方法 ステップ3:登録済みのAdobeアカウントでログインする

すでに登録済みのAdobeアカウントでログインしてください。

Adobe Fontsサイトからフォントを追加する方法 ステップ4:Adobeフォントにログインできました

Adobeフォントにログインできました。

Adobe Fontsサイトからフォントを追加する方法 ステップ5:検索窓に追加したフォント名を入力する

検索窓に追加したフォント名を入力。

おもち

今回は『源ノ角ゴシック』と入力してみるね!

Adobe Fontsサイトからフォントを追加する方法 ステップ6:『検索』ボタンをクリックする

フォントが入力できたら『検索』ボタンをクリック。

Adobe Fontsサイトからフォントを追加する方法 ステップ7:フォント名に『源ノ角ゴシック』が含まれるフォントが表示されました

フォント名に『源ノ角ゴシック』が含まれるフォントが表示されました。

Adobe Fontsサイトからフォントを追加する方法 ステップ8:7個のフォントが含まれているこちらの『源ノ角ゴシック』を追加する

今回は、7個のフォントが含まれているこちらの『源ノ角ゴシック』を追加していきます。

Adobe Fontsサイトからフォントを追加する方法 ステップ9:7個のフォントとは、太さ(ウェイト)の違う源ノ角ゴシックが7種類含まれているという意味

ちなみに、7個のフォントとは、太さ(ウェイト)の違う源ノ角ゴシックが7種類含まれているという意味です。

おもち

特定の太さだけを選んで、アクティベートすることもできるよ!

Adobe Fontsサイトからフォントを追加する方法 ステップ10:『ファミリーを追加』ボタンをクリッする

『ファミリーを追加』ボタンをクリック。

Adobe Fontsサイトからフォントを追加する方法 ステップ11:フォントが追加できました

これでフォントが追加できました。

Adobe Fontsサイトからフォントを追加する方法 ステップ12:『OK』ボタンをクリックする

メッセージ内容を確認して『OK』ボタンをクリック。

Adobe Fontsサイトからフォントを追加する方法 ステップ13:アクティベート完了

これで、アクティベート完了です。Creative Cloudを通じて自動的にパソコンに同期されるので、すぐにIllustratorやPhotoshopで使えるようになります。

方法②:IllustratorやPhotoshopから直接アクティベートする

AdobeフォントをIllustratorやPhotoshopから直接追加する方法 ステップ1:Illustratorでは作業しながらそのままAdobe Fontsを追加できる

Illustratorでは、作業しながらそのままAdobe Fontsを追加できます。

AdobeフォントをIllustratorやPhotoshopから直接追加する方法 ステップ2:フォントを変更したいテキストを選択する

フォントを変更したいテキストを選択。

AdobeフォントをIllustratorやPhotoshopから直接追加する方法 ステップ3:プロパティパネルの真ん中にある『文字』の下向き矢印をクリックする

プロパティパネルの真ん中にある『文字』の下向き矢印をクリックすると、フォントメニューがひらきます。

AdobeフォントをIllustratorやPhotoshopから直接追加する方法 ステップ4:右側にあるバーを下まで移動する

右側にあるバーを下まで移動。

AdobeフォントをIllustratorやPhotoshopから直接追加する方法 ステップ5:『その他のフォントを見る』をクリックする

『その他のフォントを見る』をクリック。

AdobeフォントをIllustratorやPhotoshopから直接追加する方法 ステップ6:追加したいフォントが選べる

こちらで追加したいフォントが選べます。

AdobeフォントをIllustratorやPhotoshopから直接追加する方法 ステップ7:お好きなスタイルをクリックする

お好きなスタイルをクリックすると、

AdobeフォントをIllustratorやPhotoshopから直接追加する方法 ステップ8:似たようなスタイルごとにフォントが表示される

似たようなスタイルごとにフォントが表示されます。

AdobeフォントをIllustratorやPhotoshopから直接追加する方法 ステップ9:追加したいフォントにカーソルをもっていき『雲(追加)』マークをクリックする

追加したいフォントにカーソルをもっていき『雲(追加)』マークをクリック。

AdobeフォントをIllustratorやPhotoshopから直接追加する方法 ステップ10:『OK』ボタンをクリックする

メッセージ内容を確認して『OK』ボタンをクリック。

AdobeフォントをIllustratorやPhotoshopから直接追加する方法 ステップ11:アクティベートは完了

これで、アクティベートは完了。フォントを追加することができました。

この方法のいいところは、実際のデザインにフォントを当てはめながらプレビューできること。『このフォントにしようかな』と迷ったときに、画面上で見比べながら選べるのでとても便利です。

PhotoshopやPremiere Proにもフォント追加のボタンはありますが、Illustratorのようなリアルタイムプレビュー機能はありません。Adobe Fontsサイトへのショートカットとして使う形になります。

Adobe Fontsでフォントを検索する方法

Adobe Fontsには20,000以上のフォントが収録されているので『どうやって目当てのフォントを見つければいいの?』と迷うこともあるかもしれません。

いくつか便利な検索方法を紹介します。

フォント名で検索する

Adobe Fontsでフォントを検索する方法【フォント名で検索する】

使いたいフォント名がわかっている場合は、Adobe Fontsのサイト上部にある検索窓にフォント名を入力すれば、すぐに見つかります。

フィルターで絞り込む

Adobe Fontsでフォントを検索する方法【フィルターで絞り込む】ステップ1:画面左上にある『すべてを参照』をクリックする

フォント名がわからない場合は、フィルター機能が便利です。

画面左上にある『すべてを参照』をクリック。

Adobe Fontsでフォントを検索する方法【フィルターで絞り込む】ステップ2:『フォント一覧』ページでは、左側にフィルターが用意されている

『フォント一覧』ページでは、左側にフィルターが用意されています。

Adobe Fontsでフォントを検索する方法【フィルターで絞り込む】ステップ3:興味あるボタンをクリックするだけで、一気に表示を絞り込める

興味あるボタンをクリックするだけで、一気に表示が絞り込まれるので、探しやすくなります。

Adobe Fontsでフォントを検索する方法【フィルターで絞り込む】ステップ4:『筆記体』をクリックする

たとえば『筆記体』をクリックすると、

Adobe Fontsでフォントを検索する方法【フィルターで絞り込む】ステップ5:筆記体のフォントだけを表できる

筆記体のフォントだけを表示できます。

おもち

いろいろ絞り込んで使えそうなフォントを探してみてね!

フォントパックを活用する

Adobe Fontsでフォントを検索する方法【フォントパックを活用する】ステップ1:画面上部にある『フォントパック』をクリックする

『どのフォントを選べばいいかわからない』という方には、フォントパック機能がおすすめです。

画面上部にある『フォントパック』をクリック。

Adobe Fontsでフォントを検索する方法【フォントパックを活用する】ステップ2:テーマごとにフォントがセットになったパックが表示される

テーマごとにフォントがセットになったパックが表示されました。

『レトロなデザイン向け』『ビジネス向け』『かわいい系』など、シーンにあわせたフォントがまとめてパッケージ化されています。

Adobe Fontsでフォントを検索する方法【フォントパックを活用する】ステップ3:気になるパックがみつかったら『パックを表示』ボタンをクリックする

気になるパックがみつかったら『パックを表示』ボタンをクリック。

Adobe Fontsでフォントを検索する方法【フォントパックを活用する】ステップ4:パックを開くと、どんなフォントが含まれているのか確認できる

パックを開くと、どんなフォントが含まれているのか確認できます。

Adobe Fontsでフォントを検索する方法【フォントパックを活用する】ステップ5:『フォントパックを追加』ボタンをクリックする

パック内のフォントを追加したいときは『フォントパックを追加』ボタンをクリック。これでセット内のフォントをすべてアクティベートできました。

おもち

とりあえず使えるフォントを増やしたい!っていうときに便利だよ!

デザインで使える!おすすめフォント7選

Adobe Fontsの中から、デザインでよく使うおすすめのフォントを7つ、ご紹介します。

源ノ角ゴシック(Source Han Sans)

adobeフォントおすすめ7選【源ノ角ゴシック(Source Han Sans)】Adobeが開発したオープンソースのゴシック体で、7種類の太さが用意されている

源ノ角ゴシック(Source Han Sans)は、Adobeが開発したオープンソースのゴシック体で、7種類の太さが用意されています。

adobeフォントおすすめ7選【源ノ角ゴシック(Source Han Sans)】視認性が高く、どんなデザインにも使いやすい万能フォント

視認性が高く、どんなデザインにも使いやすい万能フォントです。迷ったらまずこれをアクティベートしておけば間違いありません。

青いデジタルな背景の前で、キャップをかぶったクールな表情の女性の写真に、『自分の限界超えていけ』という文字を重ねた自己啓発・モチベーション系YouTubeサムネイルの作例。フリーフォントの『源ノ角ゴシック(Noto Sans Japanese)』を使用しています。(バイブデザインのおもち制作)

YouTubeサムネイルの本文やビジネス系のデザインにもよく合います。

源ノ明朝(Source Han Serif)

adobeフォントおすすめ7選【源ノ明朝(Source Han Serif)】源ノ角ゴシックの明朝体バージョン

源ノ明朝(Source Han Serif)は、源ノ角ゴシックの明朝体バージョンです。

adobeフォントおすすめ7選【源ノ明朝(Source Han Serif)】7種類の太さがあり、本文から見出しまで幅広く使える

こちらも7種類の太さがあり、本文から見出しまで幅広く使えます。

青い瞳が印象的な女性の顔のアップに、『感情操作 心の動きをコントロールする』という文字を重ねた心理学系YouTubeサムネイルの作例。(バイブデザインのおもち制作)

上品で落ち着いた印象のデザインに最適。和風テイストのデザインとも相性が良いです。

M Plus Rounded 1c

adobeフォントおすすめ7選【M Plus Rounded 1c】角が丸いゴシック体で、柔らかくて読みやすいのが特徴

M Plus Rounded 1cは、角が丸いゴシック体で、柔らかくて読みやすいのが特徴です。

adobeフォントおすすめ7選【M Plus Rounded 1c】子育て系やライフスタイル系など、やさしい雰囲気のデザインによく合う

源ノ角ゴシックよりもカジュアルで親しみやすい印象になるので、子育て系やライフスタイル系など、やさしい雰囲気のデザインによく合います。

ピザやハンバーガーなど大量のジャンクフードを前にした男性の写真に、『暴飲暴食 10000kcal!』という文字を重ねた大食い系YouTubeサムネイルの作例。フリーフォントの『M PLUS Rounded 1c』を使用しています。(バイブデザインのおもち制作)

太さのバリエーションも豊富なので、見出しにも本文にも使いやすい万能フォントです。

モッチーポップ

adobeフォントおすすめ7選【モッチーポップ】もちっとした丸みのあるポップなフォント

モッチーポップは、名前のとおり、もちっとした丸みのあるポップなフォントです。

adobeフォントおすすめ7選【モッチーポップ】かわいい系やカジュアルなデザインとの相性がよく、楽しい雰囲気を出したいときにぴったり

かわいい系やカジュアルなデザインとの相性がよく、イベント告知やSNS投稿など、楽しい雰囲気を出したいときにぴったり。

モッチーポップを使用したサムネイルデザインの例。「知っておくと得する お米のはなし」というタイトルに、おにぎり・お米・茶碗のかわいいキャラクターイラストを組み合わせたポップなデザイン(バイブデザインのおもち制作)

源ノ角ゴシックやM Plus Rounded 1cとはまた違った個性があるので、デザインにアクセントを加えたいときに使ってみてください。

コーポレート・ロゴ ver2

adobeフォントおすすめ7選【コーポレート・ロゴ ver2】企業ロゴのような端正で洗練された印象のゴシック体

コーポレート・ロゴ ver2は、企業ロゴのような端正で洗練された印象のゴシック体です。

adobeフォントおすすめ7選【コーポレート・ロゴ ver2】文字の端がきれいに揃っていて、整った雰囲気があるのが特徴

文字の端がきれいに揃っていて、整った雰囲気があるのが特徴。

グラフィックデザイナーおもち制作 - 爽やかな男性モデルを使ったメンズスキンケアのYouTubeサムネイル「ニキビ&毛穴を消すNight Routine」

名刺やショップカード、ロゴのベースなど、きちんとした印象を出したいデザインに向いています。

Bebas Kai

adobeフォントおすすめ7選【Bebas Kai】インパクトのある太めの欧文フォント

Bebas Kaiは、インパクトのある太めの欧文フォントです。

adobeフォントおすすめ7選【Bebas Kai】サムネイルやバナーに英語のキャッチコピーを入れるときに重宝する

サムネイルやバナーに英語のキャッチコピーを入れるときに重宝します。

Bebas Kaiを使用したサムネイルデザインの例。黒い背景に赤いリボンのギフトボックスを配置し、「BLACK FRIDAY SALE」の文字を大きく配置したインパクトのあるデザイン(バイブデザインのおもち制作)

文字を大きく配置するだけでデザインが一気にかっこよくなるので、1つ持っておくと表現の幅が広がります。

Cinzel Decorative

adobeフォントおすすめ7選【Cinzel Decorative】ローマ時代の碑文をモチーフにした、格調高い装飾的な欧文フォント

Cinzel Decorativeは、ローマ時代の碑文をモチーフにした、格調高い装飾的な欧文フォントです。

adobeフォントおすすめ7選【Cinzel Decorative】文字の端に繊細な装飾が入っていて、高級感やエレガントな雰囲気を演出できる

文字の端に繊細な装飾が入っていて、高級感やエレガントな雰囲気を演出できます。

夕日に染まる美しい海の写真に、『癒し音 HEALING MUSIC』という文字を重ねたヒーリング・リラクゼーション系YouTubeサムネイルの作例。(バイブデザインのおもち制作)

美容系やジュエリー系のデザイン、ウェディング関連のアイテムなど、特別感を出したいシーンで映えるフォントです。

どのフォントを使えばいいか迷ったときは、まず 源ノ角ゴシック源ノ明朝 の2つをアクティベートしておくのがおすすめ。

この2つがあれば、ゴシック体と明朝体の基本はカバーできます。そこから少しずつ、デザインに合わせて他のフォントも試していくと、フォント選びの感覚が自然と身についていきますよ。

Adobe Fontsは商用利用できる?ライセンスの注意点

Adobe Fontsは商用利用できる?ライセンスの注意点

結論から言うと、Adobe Fontsのフォントはすべて商用利用OKです。

具体的には、以下のような用途で自由に使えます。

  • Webサイトのデザイン
  • 印刷物(チラシ、名刺、ポスターなど)
  • ロゴの作成
  • SNSの投稿画像
  • YouTubeのサムネイル
  • 動画のテロップ
  • 電子書籍の表紙

しかも、クレジット表記(「このフォントは○○を使用しています」のような記載)は不要です。

フリーフォントを使うときにありがちな『これ、商用で使っても大丈夫かな?』『クレジット書かなきゃダメだっけ?』という心配がいらないので、安心してデザインに集中できます。

注意が必要なケース

ほとんどの用途で自由に使えますが、以下の点は注意が必要です。

  • フォントデータそのものの再配布・改変はNG
  • Adobe CCを解約するとフォントが使えなくなる

フォントファイルを他人に渡したり、フォントのデザインを改造したりすることはできません。また、Adobe Fontsのフォントは、CC契約中のみ利用可能です。解約すると、アクティベートしたフォントは使用できなくなります。

Illustratorのデータ(.aiファイル)をクライアントに渡す場合は、相手がそのフォントをアクティベートしていないと、正しく表示されません。

Adobe Fontsが反映されないときの対処法

Adobe Fontsが反映されないときの対処法

『アクティベートしたはずなのに、Illustratorのフォント一覧に出てこない…』ということが、まれに起こります。

そんなときは、以下の手順を順番に試してみてください。

①インターネット接続を確認する

Adobe Fontsはクラウド経由でフォントを同期するため、ネット環境が不安定だとアクティベートがうまくいかないことがあります。Wi-Fiを切り替えてみたり、ルーターを再起動してから、もう一度試してみてください。

②Creative Cloudアプリのログイン状態を確認する

反映されない原因として一番多いのが、Creative Cloudデスクトップアプリからログアウトされてしまっているケースです。

タスクバー(Macの場合はメニューバー)のCreative Cloudアイコンをクリックして、自分のアカウントでログインできているか確認しましょう。

③Adobe Fontsの同期設定を確認する

Creative Cloudアプリの『環境設定』から『サービス』をひらくと『Adobe Fonts』の同期設定があります。ここが無効になっていると、いくらアクティベートしてもフォントが反映されません。

この設定がオンになっていることを確認してください。

④アプリ・PCを再起動する

ログイン状態や同期設定に問題がない場合は、使用しているAdobeアプリ(IllustratorやPhotoshopなど)を一度終了して、パソコンを再起動してみてください。

再起動後にアプリを開き直すと、フォントが正しく反映されているケースが多いです。

⑤ディアクティベートされていないか確認する

以前アクティベートしたフォントが、気づかないうちにディアクティベート(無効化)されていることがあります。とくに、長期間使用していなかったフォントは自動的にクリーンアップされることがあります。

Adobe Fontsのサイトで『マイフォント』を確認して、該当フォントが有効になっているかチェックしてみてください。無効になっていた場合は、再度アクティベートすればOKです。

まとめ

この記事では、Adobe Fontsの使い方を解説しました。

Adobe Fontsは、Adobe CCに含まれているフォントサービスで、追加料金なしで20,000以上のフォントが使い放題になります。すべてのフォントが商用利用OKで、クレジット表記も不要。アクティベートするだけですぐに使えるので、デザインの幅を広げたい方にとって、とても心強いサービスです。

まずは『源ノ角ゴシック』と『源ノ明朝』をアクティベートして、いろいろなデザインに使ってみてください。フォント選びの楽しさがきっと広がるはずです。

公式LINEで『フォント』とメッセージを送信すると、おすすめフォントをまとめた特別資料を無料でお届け

もっと自分のデザインにあうフォントを知りたい方は、公式LINEで『フォント』とメッセージを送ってください。おすすめフォントをまとめた特別資料を無料でお届けします。

おもち

フォントで差をつけちゃおう!

【Adobe Fonts】アドビフォントの使い方|フォントの追加から商用利用まで初心者向けに解説

この記事が気に入ったら
フォローしてね!

  • URLをコピーしました!
目次