【デザイン学生必見!】
ポートフォリオをゼロから作ろう!

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

記事内にプロモーションを含む場合があります
Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

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

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

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

AdobeFontsとは?

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

正直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を学習する上で、プロが作成した生データを研究する事は重要です。

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

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


例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします!
厳選!ポートフォリオ用テンプレート40選


デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い!
相手に舐められない名刺テンプレート50選


バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選


紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう!
デジタル媒体向けポートフォリオテンプレ素材35選


制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬!
様々なモックアップテンプレート57選


良質な素材をもっと見る
上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください!

おわりに

以上、AdobeFonts(アドビフォント)の魅力と使い方についてでした。

フォント探しは時間と手間がかかります。
そして実際のテキストを当てたイメージが事前に確認できるのが非常に便利!

フォント探しの第一歩はGoogle検索ではなく、AdobeFontsが断然オススメですよ。

ではまた!

ノーコードでポートフォリオサイト制作
AdobePortfolio(アドビポートフォリオ)を活用すると面倒なポートフォリオサイトが簡単に作れます。自身の作品を魅力的な方法で公開してみませんか?
ゼロから始めるシリーズ

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!