AdobeFontsの魅力と便利な使い方【最強フォントサイト】

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

デザイン制作を行う上でフォント探し・フォント選定は重要な要素です。
そしてフォントを揃えるにはお金が掛かり、探すのも一苦労。

そんな悩みを全て解消してくれるサービスがAdobeFonts（アドビフォント）です。
意外と活用されていない方が多いAdobeFonts（アドビフォント）の魅力や使い方を詳しく解説します。

AdobeFonts（アドビフォント）を知ると、従来のフォント探しには戻れなくなりますよ！

この記事の目次

AdobeFontsとは？

AdobeFonts（アドビフォント）とはAdobe社が提供しているサブスクリプション形式のフォントライブラリです。２万種類以上もの高品質なフォントが使い放題！

正直AdobeFontsがあれば他のフォントサービス無しで問題なく制作できますよ。
AdobeFonts公式サイトで詳細を確認してみましょう。

Adobeアプリ内から即アクセス可

AdobeFontsのサイトだけでなくPhotoshop（フォトショップ）やIllustrator（イラストレーター）など、Adobe製アプリ内から即アクセス可能。

使いたいフォントが手元に無い時など、サクッと探してサクッと利用できるので制作効率を高められます。

商用利用可能な高品質フォント

AdobeFontsで使えるフォントには高価な有料フォントが大量に含まれています。
モリサワなど、有名フォントの利用には多大なお金が必要ですが、AdobeFontsはAdobe製品利用者なら誰でも使い放題！
勿論すべて商用利用可能です。

AdobeCC未導入の方はAdobe公式サイトから入手できます。

AdobeFontsの使い方

アドビフォントの使い方を解説します。

フォントを検索・アクティベート

STEP.1

AdobeFontsにアクセス

AdobeFonts公式サイトにアクセスします。

※利用にはAdobe製品の利用契約が必要です。
事前にAdobe公式サイトで必要なアプリの利用登録をしておきましょう。

STEP.2

フォントを検索

[ すべてのフォントを参照 ] をクリックします。
様々な検索条件でフォントを探せます。

例えば左メニューから
[ 言語および文字体系 ] → [ 日本語 ]
[ 分類 ] → [ デザイン ]
で検索。

5ページ目に表示される [ VDL ロゴJrブラック ] をクリック。

フォントだけでなく書体の説明や書体デザイナー、制作会社などの詳細情報も詳しく記載されています。読み物としても面白いコンテンツですよ。

[ サンプルテキスト ] に好きな文字を入力すると、実際の見え方が事前確認できます。
[ テキストサイズ ] でサイズ変更も可能。

コレが非常に便利です。

STEP.3

フォントをアクティベート

右上の [ 1個のフォントをアクティベート ] をクリックします。
以上でフォント使用の準備が整いました。

FINISH

文字を入力し、変更

PhotoshopやIllustrator等の [ 文字ツール ] で好きな文字を入力し、[ 文字パネル ] でフォントを変更しましょう。

アクティベートしたフォントが利用できますよ。

フォントを管理する

現在アクティブになっているフォントの管理を行う方法です。
フォントの削除やお気に入り管理などが可能。

STEP.1

フォントを管理

AdobeFotnsの右上にある [ フォントを管理 ] をクリックします。
AdobeFonts公式サイトの右上に該当ボタンがあります。

STEP.2

編集する

[ アクティブなフォント ] をクリックすると、今現在アクティベートしているフォントの一覧が表示されます。

青色のトグルボタンをクリックするとディアクティベート（アクティベートが解除）されます。

他に [ 以前アクティブだったフォント ] 、[ Webプロジェクト ] 、[ お気に入り ] 等の管理も可能。

初心者の方はフォントパック

フォントの数が膨大過ぎて、何を入れていいのか分からない。そういった方は [ フォントパック ] の活用をオススメします。

制作物のテーマに応じて複数のフォントを簡単にインストール可能！フォント選びの手間を激減させられますよ。

テキストエフェクトを適用してみよう

せっかくなのでAdobeFonts（アドビフォント）で追加したフォントにPhotoshop（フォトショップ）を使ってエフェクトを適用してみましょう。
エフェクトPSDを使えばノンデザイナー、フォトショ初心者の方にも高品質な加工が1分で可能！

STEP.1

エフェクトPSDをダウンロード

サンプルは Vintage Blur Logo Design Effect を活用。
ヴィンテージな質感の効果が付与できます。

※もちろん商用利用可能です。

STEP.2

PSDを開く

ダウンロードしたPSDを開きます。
ダブルクリックで開けますよ。

※Photoshop未導入の方はAdobe公式サイトから入手しておきましょう。

STEP.3

文字を入力

文字ツールで任意の文字を入力します。

入力後はフォントやサイズを変更。
色は黒にしておきましょう。

※テキストエフェクトは一旦非表示にしています。

STEP.4

エフェクトを適用

レイヤーパネルを開きます。
※非表示の場合は [ F7 ] で開けます。

左図のように [ To personalize change blur gallery ] の下に文字レイヤーを配置。

文字レイヤーを [ 右クリック ] → [ スマートオブジェクトに変換 ] します。

※事前に文字レイヤーを [ Ctrl + J ] でコピーし、オリジナルを非表示にしておくと文字を再編集する際に便利。

[ To personalize change blur gallery ] 右側にある [ スマートフィルター ] を文字のスマートオブジェクトにコピペします。

スマートフィルターのアイコン上にカーソルを合わせ、[ Alt ] を押しながらドラッグするとスマートフィルターがコピー可能。

[ grunge 01を右クリック ] → [ クリッピングマスクを作成 ]

最後に不要なレイヤーを非表示にしましょう。

FINISH

完成

以上でヴィンテージ加工の完成です。
作業時間は1分、不慣れな方でも10分あれば作れるでしょう。

ゼロからテキストエフェクトを作ると時間と手間、そしてPhotoshopのスキルが必要ですが、テンプレートを使えば誰でも簡単にプロの仕上がりが再現できます。

様々なテキストエフェクト

文字を様々な質感に加工できる高品質なエフェクトモックアップを厳選しております。

【Photoshop】高品質＆商用可能なテキストエフェクト【PSD素材】

【Illustrator】商用可能で高品質なテキストエフェクト50選

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。