WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： スーザン
カテゴリー： デザイン >Photoshop

最近では、当たり前のように使用されているWebアイコンフォント。
メジャーなアイコンはほとんどカバーできるので、デザイン作成時にPhotoshop上でもよく使用しています。
おさらいの意味も込めて、Photoshopなどのデスクトップ上デザインとして使用する際の手順をまとめました。

今回は無料で使用できる「Font Awesome」のご紹介です。

fontデータをダウンロードする

Font Awesomeサイトからfontファイルをダウンロードします。

「Start Using Free」ボタンをクリックする

「Desktop」ボタンをクリックする

「Font Awesome Free for the Desktop」をクリックする

こちらをクリックすると、ファイルのダウンロードが始まるのでしばしお待ちを。
今回使用しないファイルも一緒にダウンロードされるので、ファイル数は多目です。

ダウンロードされたらファイルをインストールします。

otfsフォルダの中の以下3ファイルを全てインストールします。
・Font Awesome 5 Brands-Regular-400.otf
・Font Awesome 5 Free-Regular-400.otf
・Font Awesome 5 Free-Solid-900.otf

ファイルをダブルクリックし、インストールボタンを押せば完了です。
不要なファイルは削除してOKです。

Photoshop上で使用する

チートシートからアイコンをコピーする

チートシートサイトで使用したいアイコンをコピーします。

今回は「address-book」アイコンをコピーします。
青枠に囲まれているアイコン部分を選択し、通常通り「ctrl+c」でコピーをします。

アイコンをペーストする

先程コピーしたアイコンをそのまま、Photoshopレイヤー上にペーストをします。
テキスト選択した状態で、通常通り「ctrl+v」ペーストでOK。

このとき画像のような×印で文字化け表示になりますが、次のステップで解決しますのでご安心を。

フォント選択部分で「Font Awesome 5 Free　solid」に変更してください。
すると、アイコン表示に変わります！

テキストと同じ扱いなので、フォントのカラー選択で色変更も一瞬で可能！

更に便利！「アイコン検索」

チートシート上からアイコンを探していると、多すぎてなかなか見つからない。
車などのわかりやすいものであれば「car」などで検索すればすぐに引っかかるのですが、どのように検索したらいいか分からないアイコンもあると思います。

そんな時にとても役立つのが
「Search for Font Awesome」という検索サイト。

英語だけでなく、日本語やカタカナ検索が出来るところも高ポイントです。

今回は矢印という単語で検索してみました。
矢印に関するアイコンがずらりと下に出てきます。

関連アイコンが一気に出てくるので、デザインに合うものを比較しながら選択できるところも便利です！

チートシートで検索

上記で使いたいアイコンを決めたら、先程と同じようにチートシートからアイコンをコピーします。

「fa-location-arrow」というアイコンを使用したい場合は「location-arrow」でブラウザの検索機能（ctrl+f）で検索をするとアイコンの場所が分かりやすくなります。

大体「fa-」を除いた名前で検索していただくとでてきます。
たまに「fa-address-book-o」などの「-o」がついているものだと、上手く検索に引っかからない場合があるので
、その際は検索範囲を広げていくことをオススメします。（address-bookやaddressなど単語を減らして検索してみてください。）

まとめ

アイコンフォントは、ピクセルズレのないアイコンを瞬時に表現できるのが魅力です。
アイコンを1から作成する手間も省け、コーダーさんもHTML上で同じ表現が簡単に出来る点も便利です。
Illustratorではもちろんですが、WordやExcelなどでも使用可能なので、ワイヤーフレームなどに使用することも効率的でオススメです。