記事の詳細

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を選択)

⑩完成!

以上です。

まとめ

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

 

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

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

The following two tabs change content below.
小林紗絵

小林紗絵

Web制作担当をしています。Adobeソフトを使用したデザインやコーディングを中心にサイト制作に携わっております。今後はWordpressのテーマ作成やマーケティングなど少しずつできることを増やしていきたいと思います!

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

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

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

AD

ページ上部へ戻る