この記事では、「Adobe Fonts」の使い方について説明していきます。
デザインを作成するには、フォント選びが欠かせません。
ただ、デザインに合ったフォントを見つけるのは至難の技です。
フリーで使えるフォントを探したり、有料フォントを探すのにインターネットを徘徊することとなるでしょう。
そんな迷える子羊のデザイナーを助けてくれるのが「Adobe Fonts」なのです。
目次
Adobe fontsについて学ぼう
それではAdobe Fontsについて学んでいきましょう。
Adobe Fonts とは
![]()
Adobe Fontsは、Adobe社が提供するWebフォントサービスです。
和文・欧文問わず、ハイクオリティでおしゃれなフォントが見つかる画期的なサービスです。
Adobeアカウントを持っていれば使用することができるので、普段のデザイン作成やWebサイト制作でお世話になります。
Adobe Fonts の特徴
次にAdobe Fontsの特徴について学んでいきましょう。
フォントが探しやすい
Adobe Fonsの良いところはフォントが探しやすいところです。
「フォントパック」でデザインに合ったフォントが探せる
![]()
Adobe Fontsには、「フォントパック」というデザインに合った雰囲気のフォントをまとめたパッケージが用意されています。
作りたいデザインに困ったら、とりあえず雰囲気に合いそうなフォントパックを見つけて探すことができます。
おすすめのフォントを紹介してくれる
![]()
また、Adobe公式が「トレンド」「掘り出し物」「スタッフのおすすめ」などのカテゴリーからフォントをおすすめしてくれます。
商用利用可能
Adobe Fonts の良いところはまだまだあります。
なんと、Adobe Fontsで提供されるフォントは、商用利用することができるのです。
なので、Webデザインやバナー作成などに安心して使用することができます。
Adobe製品で連携可能
また、Adobe Fontsで提供されるフォントは、Adobeのデザインツールでの連携が可能です。
1度使用できるようにしたフォントはアカウントに紐づいているので、
同アカウントで使用しているAdobe XD 、Adobe Illustratorなどでも同時に使用することができます。
それぞれのデザインツールにフォントを1つ1つ読み込ませる必要がないので楽なのです。
無償プランと有償プランがある
Adobe Fontsには、「無償プラン」と「有償プラン」があります。
それぞれ使用できるフォントや機能に制限があるので、注意が必要です。
・無償プランの特徴
Adobeアカウント(Adobe ID)を登録すると使用可能。 使用できるフォント数に制限あり。
・有償プランの特徴
Adobe Creative Cloud の有償プランを購入していると使用可能。 使用できるフォントは無制限。
![]()
無償プランで使用できないフォントは、上記のように表示されます。
Adobe Fonts の使い方
次はいよいよAdobe Fontsを使ってみましょう。
Adobe Fonts を使ってみよう
ここからは授業で扱うため、Adobe Fontsについての使い方を説明していきます。
今回は、HTML,CSSの授業でも使用した「Noto Sans JP(源ノ角ゴシック JP)」をAdobe Fontsで使えるようにしていきます。
授業でも使用するフォントなので、一緒に作業していきましょう。
Adobe Fonts の公式ページにアクセスする
![]()
まずは、Adobe Fonts の公式サイトにアクセスします。
今後多く利用するサービスになるので、ブックマークに登録しておくことをおすすめします。
ページが開けたら、画面右上のログインボタンをクリックしましょう、
Adobeアカウントでログインする
![]()
次に、Adobeアカウントでログインをしましょう。
Adobeアカウントでログインしないと、Adobe Fontsは使えません。
フォントを検索する
![]()
次に、Adobeの検索欄から使用したいフォントを検索しましょう。
Adobe Fonsでは、「Noto Sans JP」が「源ノ角ゴシック」という名前に変わっているので注意してください。
使いたいフォントをアクティベートする
![]()
検索結果が表示されたら、「源ノ角ゴシック」を見つけましょう。
トグルボタンをクリックして、フォントをアクティベートしましょう。
(アクティベートとは、フォントを使えるように有効化することです。)
フォントが使えるか確認する
![]()
最後に、デザインツールでAdobe Fontsで有効化したフォントが使えるかを確認しましょう。
(画像ではAdobe XDで確認してます。)
ここまでできれば大丈夫です。 Adobe Fontsの使い方の説明は以上となります。
・欧文フォントもアクティベートにしておく
![]()
源ノ角ゴシックをアクティベートしたついでに、 授業の教材のデザインでも使用する「DIN2014」というフォントも使えるようにしておきましょう。
こちらの「DIN2014」というフォントは、有償プランのXDで使用することができます。(2022年4月現在)
Adobe Fontsでフォントを探そう
ここまでの学習お疲れ様でした!
これからデザインを制作する上でたくさん利用することになるサービスになります。
今回の記事で学んだことを活かして、デザインに使いたいフォントを探してみましょう!