記事の詳細

IllustratorにFontAwesomeのアイコンを導入しよう!

こんにちは。
本日は、IllustratorでFontAwesomeのアイコンを使う方法について解説します!

WEBサイトでアイコンを使用することにより、わかりやすいデザインを実現できます。
例えば、病院や整骨院などの医療関連、市役所や学校などの公共施設関連といった、
訪れるユーザーの年齢層が広い、またはシニア層が多い業界には大変効果的です。

これを機にぜひ手順を覚えてみてください!

Illustratorへの導入手順 ―10ステップ

https://fontawesome.com/にアクセスし、「For the Desktop」からZipファイルをダウンロードします。2018.09.20時点でファイル名は「fontawesome-free-5.3.1-desktop.zip」となります。

②ダウンロードしたZipファイルを右クリックし、ダイアログ内の「すべて展開」をクリック。

③フォルダ内にある「otfs」をクリックし、「Font Awesome 5 Brands-Regular-400.otf」、「Font Awesome 5 Free-Regular-400.otf」、「Font Awesome 5 Free-Solid-900.otf」があることを確認。

④コントロールパネルからデスクトップのカスタマイズをクリック。

⑤次にフォントをクリック。

⑥PCにインストールされているフォントが一覧で表示されるので、ここに③の3つのデータをコピー&ペースト(移動でも可)。

⑦イラストレーターを起動し、新規アートボードを用意(サイズは任意)。

https://fontawesome.com/cheatsheetにアクセスし、アイコン部分をアートボードに コピー&ペースト。

⑨先ほどアクセスしたチートシートの左上のカテゴリに合わせて3つのFontAwesomeフォントから正しいものを選択。このとき、コピー&ペーストしたアイコンを選択ツールもしくは文字ツールで選んだままにしてください。(今回は「Solid Icons」カテゴリからなので、文字:Font Awesome 5 Free Solidを選択)

⑩完成!

以上です。

まとめ

今後は東京オリンピック等ありますから、多くの方にとって使いやすいユニバーサルデザインを考えることも大切になります。自分でアイコンをつくる際に時間がかかる場合は、今回のような便利な方法もありますのでぜひ一度お試しください。
次回以降、サイトへの表示方法(コーディング)の解説をしていきますので、そちらも合わせてご覧ください!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。


ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る