Twitterでブログ更新情報を配信中

Font Awesome 5のアイコンをIllustratorやXDで使う方法!UIデザインにおすすめ!

WebアイコンフォントのFont Awesome。表示にはHTMLやCSSが必要な「サイトを作るためのツール」として認識されているかもしれません。その場合は、以下の記事のようにhead内に読み込んでから利用しますよね。

Font Awesome 5のアイコンをCDNとダウンロードデータで指定してブラウザに表示

今回ご紹介するのは、IllustratorやXDで「デザインツール」として使う方法になります。Webサイト制作のデザインカンプはもちろん広告やバナーを作るときにも役立ちますよ!

Adobeソフトの操作に慣れていれば5分、初心者の方も10分程度あればすぐにできるので、ぜひ試してみてくださいね。

フォントデータをダウンロード

Font Awesomeの公式サイトにアクセスし、Start for Freeをクリックします。

Font Awesomeの公式サイト

デスクトップ用のアプリで使うので、Desktopをクリックします。

Desktopメニューを選択

Download Font Awesome Free for the Desktopをクリックします。

データをダウンロード

ダウンロードしたデータを展開し、otfsフォルダをクリックします。

データからotfsフォルダを選択

フォルダ内にある3つのファイルを一つずつインストールしていきます。任意のファイルをクリック。

3ファイルをインストール

インストールをクリックします。

インストール画面

アイコンを選ぶ

Font Awesomeでアイコンを選びます。今回は無料版なのでFreeにチェックを入れて、検索ボックスにキーワードを入力。

アイコンを公式サイトで検索

アイコンのページに進み、Unicode Glyphをクリックします。この時、左にあるスタイルを確認しておいてください。例ではRegular Styleとなっています。

Copy Unicode Glyphでコピー

デザインツールで表示するには

Illustratorで表示する

Illustratorにアートボードを用意して、文字ツールにしましょう。Ctrl+Vでコピーしていたアイコンが貼り付けられます。ここで選択ツールに持ち替えます。

イラストレーターにコピー&ペースト

フォントツールでFont Awesomeと検索するとインストールした3種類のフォントが出てきます。例のアイコンはRegular Styleなので、Font Awesome 5 Free Regularを選択。

Font Awesome 5 Free Regularのフォントを選択

バウンディングボックスで拡大縮小したり、色の変更もできるので、お好みで調整してくださいね。

スタイルを調整

Adobe XDで表示する

Adobe XDも同じように文字ツールにしたままペーストし、フォントからFont Awesome 5 Freeを選びます。XDの場合は、FreeもしくはBrandsのどちらかになります。基本的に、BrandsスタイルはYouTubeやTwitterなどのロゴが中心です。

Adobe XDにコピー&ペースト

IllustratorとXDでFont Awesomeを使う方法を解説しました。表示されないときは、アイコンのページに戻って、スタイル(Solid、Regular、Brands)と齟齬がないか確認してくださいね。

また、XDではスタイルがFreeもしくはBrandsのどちらかになるので、使うツールによってフォントの種類が変わることも併せて覚えておきましょう。