ちょっと前までWebサイト制作のデザインで、Photoshop、Illustratorをメインで使うことが多かったですが、今はラフを手書きでしてからAdobe XDで進めることがほとんどになってます。Photoshopは写真補正程度しか使っていない気がしますね。
理由は色々ありますが、1番は動作が軽いのでストレスなく作業できることです。
そんなAdobe XDはプラグインも豊富で制作を加速させるものもたくさんあります。ですが、今回はプラグインではなくてWebフォントで有名なFont Awesomeを使えるようにして、Webサイトでよく使えそうな矢印アイコンなどをさっくりデザインに取り入れられるようにしてみましょう！
Contents
Font Awesomeをダウンロード
まずはFont Awesomeをダウンロードしていきましょう。
Font Awesome（https://fontawesome.com/）
ダウンロードが完了したら、ファイルを開きます。ファイルの中に「otf」という拡張子の3つがあるのでそれぞれをダブルクリックすると、フォントがインストールされます。
基本的な前準備はここまでです。
使いたいフォント（アイコン）を探す
早速使いたいアイコンを探していきましょう。ICONページを開くと多くのアイコンが表示されていますね。
使えるアイコンはFont Awesomeの全てではないので、左の項目をこのようにした状態で検索をかける方法が早いかと思います。
アイコンをAdobe XDで表示する
ホームページ制作で使うアイコンは色々ありますが、試しに「mail」で検索すると様々なものが表示されました。
今回は赤枠で囲ったものを使ってみましょう。
まず左上のアイコンをクリックで、Unicode Glyphをコピーします。また、右に表示されているSolidやRegularのどれになっているかも確認してください。
続いてAdobe XDで利用したいデータを開きます。編集からペーストを選ぶと、こんな感じの「？」と表示されるかと思いますが、テキストパレットのフォントをFont Awesomeにして先ほど確認したアイコンは「Regular」だったので同じようにすると、きちんとメールアイコンが表示されましたね！
フォントサイズを変更すればアイコンの大きさも変わりますので、デザインにあわせて調整してみてください。
今回のまとめ
どんな用途のアイコンも揃うわけではないですが、よく使われるようなフォントは一通りあるかと思いますので、活用していけばデザイン制作もスムーズになるのでオススメです。
では、また！