ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > Webデザイン > Adobe Fontsの使い方を学ぼう

Adobe Fontsの使い方を学ぼう

Webデザイン

2022/07/17

2023/05/08

Adobe Fontsの使い方を学ぼう

この記事では、「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でフォントを探そう

ここまでの学習お疲れ様でした!

これからデザインを制作する上でたくさん利用することになるサービスになります。

今回の記事で学んだことを活かして、デザインに使いたいフォントを探してみましょう!

\ 学んだことをSNSでシェアしよう /

おすすめのタグ

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから