※当ブログではアフィリエイト広告を利用しています。
イラストやブログのアイキャッチ画像のために、アイコンを簡単に使う方法はないかな？
この記事ではこんな疑問を解決します。
アイコンフォントの Font Awesome を使えば、この記事のアイキャッチ画像のようなイラストを簡単に作ることができます。
この記事では以下を解説します。
- Font Awesome をダウンロード・インストールする方法
- 無料ソフトの GIMP を使って簡単なアイキャッチ画像を作る方法
5分でインストールして、オシャレなアイコンをいろいろなイラストに使えるようになります。
Font Awesome とは？
Font Awesome は人物のシルエットやモノなどのアイコンや、Twitter などのブランドのロゴが簡単に使えるフォント集です。
ウェブサイトでは以下のように Web フォントで使われることが多いです。
しかしウェブサイトだけでなく、パソコンにインストールして Photoshop や GIMP などの画像編集ソフトで使うこともできます。
Font Awesome Free のライセンス
無料で使えるとはいえ、画像などに使って問題ないのかは気になるところですよね。
Font Awesome は Free と Pro 版でライセンスが分かれていますが、結論としては Free 版のフォントをデザインに使ってよいと解釈できます。
これは Font Awesome Free が SIL OFL 1.1 License で配布されているためです。公式サイトからの抜粋は以下です。
Fonts — SIL OFL 1.1 License
In the Font Awesome Free download, the SIL OFL license applies to all icons packaged as web and desktop font files.
あらゆる種類のデザイン作業にフォントをそのまま使えることは、SIL OFL 1.1 License のサイトの FAQ（よくある質問）の 1.1 に記載されています。
Answer: Yes. You are very welcome to do so. Authors of fonts released under the OFL allow you to use their font software as such for any kind of design work. No additional license or permission is required, unlike with some other licenses.
ほかにも SIL OFL ライセンスの参考訳はOpen Source Group Japan Wikiに記載されています。
ただし Facebook や Twitter などのブランドのロゴについては、各ブランドが定めるガイドラインを別途チェックしたほうがよさそうです。
Font Awesomeのダウンロードとパソコンへのインストール方法
ダウンロードからインストールまで、5分もあれば終わります。
Font Awesomeのダウンロード
Font Awesome は公式サイトのダウンロードページから手に入れることができます。
右側にある Desktop の「Free for Desktop」を選びます。
ファイルはfontawesome-free-5.11.2-desktop.zipのような名前です。（バージョンは変わる可能性があります）
Font Awesomeのインストール
ダウンロードした zip ファイルを解凍すると3つのフォルダが出てきます。otfsを開きます。
解凍すると以下の 3 つのフォントファイルが出てきます。
- Font Awesome 5 Brands-Regular-400.otf
- Font Awesome 5 Free-Regular-400.otf
- Font Awesome 5 Free-Solid-900.otf
これらを右クリックして「インストール」します。
インストールが終わると、ソフトウェアから使うことができるようになります。
例：画像編集ソフト「GIMP」で Font Awesome を使う
例として無料の画像編集ソフト「GIMP」で Font Awesome を使ったイラストを作ることができます。
GIMPはGIMP公式サイトから無料でダウンロードできます。
「ファイル」→「新しい画像」から 640*320 ピクセルで新しい画像を作ります。
メニューから「テキスト」を選び、「Font Awesome 5 Free」を選びます。
画面の中央あたりをクリックすると入力できるようになります。「cat」と入力し、Ctrl+Aでテキストをすべて選択して「太字」をクリックします。
文字が猫のアイコンに変わりました。太字にしないとアイコンに変化しないので、そこだけ注意が必要です。
デザイナーではない素人でも、簡単にオシャレなアイコンを使った画像を作ることができます。
この例では「cat」と入力しましたが、ここに入力する文字とアイコンの対応は Font Awesome のアイコンギャラリーから確認できます。
Twitter などのブランドロゴのアイコンを使いたい場合、フォントは「Font Awesome 5 Brands」を選択します。
おわりに
この記事をまとめます。
- Font Awesome はパソコンに簡単にダウンロード・インストールできます
- 無料ソフトの GIMP を使って、アイコンを使ったイラストも簡単に作れます
ブログのアイキャッチ画像や SNS のヘッダー画像など、用途はたくさんあります。参考になれば嬉しいです。
