Adobe XDでFont Awesomeを使う。

Font Awesome(フォント オーサム)をよく使います。Font Awesomeはピクトをフォントとして表示することのできるツールです。基本、文字と同じなのでサイズを変えたり、色を変えたり、使い方によっては重ねたり、動きをつけることも可能です。

ピクトてのはこんな奴ですね「」「」「」「」

Font Awesome

で、ホームページのデザイン作るときも当然組み込むわけです。デザインする時はPhotoshopかAdobe XDを使います。Photoshopはエクステンションを使って組みこめるのですが、Adobe XDではまだそのようなエクステンションがなかったので調べてみました。結果、スマートではないのだけど利用できるようになりました。XDはこれから拡張機能がいろいろ出てくるらしいのでそれまでの繋ぎとして。

因みに環境はMacです。XDもダウンロードしたFont Awesomeも2018年10月18日時点で最新のものを利用しています。

Font Awesomeのインストール

Font Awesomeのページからフォントをダウンロードしインストールします。

こちらのページの↓のバナーから[fontawesome-free-5.4.1-web.zip]をダウンロードします。ライセンスをお持ちの方はPro版でも結構です。

Getting Started on the Web　

ダウンロードしたzipファイルを解凍すると以下の構成で展開されると思います。

その中のwebfontsフォルダの中の、3つのフォントセットをインストールします。

fa-brands-400.ttf

fa-regular-400.ttf

fa-solid-900.ttf

Adobe XDを開き、フォントリストの中に「Font Awesome 5 Brands」と「Font Awesome 5 Free」があればインストール完了です。インストールしたセットは3つですが、Solidは「Font Awesome 5 Free」の細字のことです。

XDにFont Awesomeを貼り付ける

はりつける作業は単純です。Font Awesomeのサイトで貼り付けたいフォントをコピーし、XDに貼り付けます。コピーするのはユニコードではなくアイコンの方をコピーします。またコピーする場合はフォントの詳細ページではなく、チートシートのページでコピーします。

Font Awesome Free’s Cheatsheet　

↑のページで↓のようにアイコンをコピーします。

で、XDに貼り付け。貼り付けると最初のこのような状態になりますが、

フォントをFont Awesomeのフォントに指定してやるとアイコンが表示されます。

Adobe XD、いいですね。少し前はワイヤーフレームをXDで作成して、画像類をphotoshop&Illustratorで画像を作成する流れでしたが、バージョンを重ねるにしたがってXDから直接画像を吐き出す流れになってきて、作成するサイトの種類によってはデザインの工程が殆どXDで完了するようになってきています。そして何より動作が軽い！「これホントにAdobe製品？」て位です。使っていてストレスを感じないのは大切なことだと思います。機能はシンプルですがこれから拡張機能が追加されてますます便利になってくるでしょう。

ただやはり複雑な画像加工にはまだまだPhotoshop等は必要ですし、こちらの機能もAIを使ったりと凄い勢いで進歩してます。毎月高いお金払ってるんだからドンドン進歩してくれってのが正直な気持ちです。

以上、Adobe XDにFont Awesomeを貼り付ける方法でした。