Written by MT

Webサイト制作にあたり、アイコンやピクトグラムのようなものはよく使います。
その都度作るのもいいですが、素材やアイコンフォント等を利用する事により制作時間の短縮を図る事が出来ます。
今回は無償で利用できるものを中心に、簡単に利用できるサービスをいくつかご紹介します。

アイコンフォント

アイコンフォントとは、アイコンをWebフォントとしてアップロードしたもので、文字情報ですので画像ファイルではありません。
アイコンフォントのメリットとして、画像とは違い拡大しても粗くならず、cssで色変更が簡単に出来るというものが挙げられます。
ロールオーバーで色を変えたい場合などには使いやすいです。

Font Awesome

2018年9月現在、バージョン5.3.1として無料で1,341個のアイコンが利用できます。
$60でライセンスを購入をすると、無料版の約3倍にあたる3,978個のアイコンが使えるようになります。

→ Font Awesome

過去バージョンのFont Awesome 4もまだまだ現役で使用可能です。

→ Font Awesome 4

IcoMoon

使うアイコンを自分で選択してアイコンフォントのセットを作るサービスです。
Webフォントは、容量の大きなものを使うと表示が遅くなる場合がありますが、IcoMoonでは必要なアイコンだけのWebフォントを作る事ができるので容量を抑えられます。

→ IcoMoon

素材サイト

素材をダウンロードして、画像として掲載します。
今回紹介するサイトでは、画像だけでなくベクターデータとしてもダウンロードが可能です。
シンプルなアイコンはSVGとして利用するのもお薦めです。

ICOOON MONO

「アイコン」と検索すればWikipediaを差し置いてトップに表示される有名サイト。
シンプルなモノクロのアイコンです。
ひとつダウンロードするのに5秒の待ち時間があります。
ポパイとアンパンマンが混ざったようなキャラクターを見ながら待ちましょう。

→ ICOOON MONO

FLAT ICON DESIGN

フラットデザインに最適なフラットアイコンです。
掲載点数が多いサイトではないので、沢山使いたい場合などに丁度良いものがなければ、テイストを合わせたものを自分で作るなどの工夫が必要です。
こちらも5秒の待ち時間があり、パンダの写真で癒されます。

→ FLAT ICON DESIGN

BALLICONS

フリー版ではあまり点数が多くないですが、良質なフラットアイコンです。
バージョンが3までリリースされていて、3は少しテイストの異なるアイコンです。

→ BALLICONS

→ BALLICONS 2

→ BALLICONS 3

規約の確認を忘れずに

今回紹介したサービスは、どれも個人・商用に利用できるものです。
他にもたくさんのアイコンフォントや素材配布サイトがありますが、利用する際には必ず利用規約を確認するようにしてください。
商用利用は有償の場合や、コピーライトの記載やサイトへのリンクを利用条件にしている場合もありますので注意が必要です。

blog top

Webに関するお問い合わせ、
ご相談はこちら。