【デザインTips】Adobe XD × Font Awesomeで制作をスムーズに進めよう!

[記事公開日]:2021.6.10

[最終更新日]:2021.6.13

[読了目安:2分]

Pocket


ちょっと前までWebサイト制作のデザインで、Photoshop、Illustratorをメインで使うことが多かったですが、今はラフを手書きでしてからAdobe XDで進めることがほとんどになってます。Photoshopは写真補正程度しか使っていない気がしますね。

理由は色々ありますが、1番は動作が軽いのでストレスなく作業できることです。

そんなAdobe XDはプラグインも豊富で制作を加速させるものもたくさんあります。ですが、今回はプラグインではなくてWebフォントで有名なFont Awesomeを使えるようにして、Webサイトでよく使えそうな矢印アイコンなどをさっくりデザインに取り入れられるようにしてみましょう!

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」だったので同じようにすると、きちんとメールアイコンが表示されましたね!

フォントサイズを変更すればアイコンの大きさも変わりますので、デザインにあわせて調整してみてください。

今回のまとめ

どんな用途のアイコンも揃うわけではないですが、よく使われるようなフォントは一通りあるかと思いますので、活用していけばデザイン制作もスムーズになるのでオススメです。

では、また!

Pocket

Contact to Us

ホームページ制作に関するご相談などございましたら下記のフォームからお気軽にお問い合せください。
※印は入力必須項目です、ご入力漏れのないようお願い致します。
個人情報の取り扱いにつきましては、プライバシーポリシーをご覧ください。

    お問い合わせの種類必須

    お問い合わせ内容必須

    会社名

    お名前必須

    メールアドレス必須

    電話番号

     

    ※送信がうまくいかない場合は、お電話でお願い致します。

    お電話でのお問い合わせ
    048-571-0798