名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

ホームページのデザインを制作する際、アイコンを使用してボタンをデザインすることがあると思います。一見テキストだけでは伝わりにくい情報でもアイコンを使うことで視覚的・直感的に情報を伝えることができます。特に電話ボタンやお問合せボタンなどのコンバージョンボタンで使用することで、その効果を発揮します。
現在では、ホームページで使用できる無料のアイコンを提供しているサイトが数多くあります。今回のコラムでは、WEBデザインを制作する際に役立つアイコンの提供サイトを5つ紹介していきます。

素材サイトのアイコンを使用する上での注意点

アイコンに限らず、ネットで配布されているイラストなどを使用する際には、著作権に気をつけて使用するようにしましょう。無料であっても、クレジット表記が必要な場合や、データを改変して使用することが禁止されている場合があります。サイトごとにそのルールは異なる為、アイコンを使用する際には必ず利用に関する表記を確認してから使用するようにしましょう。
また、アイコンを使用する際は画像を書き出して使用する場合がほとんどですが、後述のFont Awesomeというサイトで配布されているアイコンは、CDNを利用してアイコンを表示することができます。デザインを制作する際には、どのようにアイコンを表示させるべきかを事前にエンジニアなどに確認しておきましょう。
また、アイコンのデザインによっては見栄えが悪くなってしまう場合があります。特に複数のサイトでダウンロードしたアイコンを一つのホームページで使用する場合は、アイコンのテイストや、線と塗りの分け方が異なり、ちぐはぐのデザインになってしまう事があるため注意しましょう。

関連記事：ホームページデザイン時にアイコンを使用する際のポイント
https://onca.co.jp/column/column/p7416/

無料で使えるアイコン素材サイト5選

ここからは無料で使えるアイコン素材サイトを5つ紹介していきます。どのサイトも現時点では無料で使えるアイコンを提供していますが、サイト上の規約が変更になる場合もあるので、必ず利用時の規約を確認してから使用するようにしてください。

Font Awesome

WEBデザイナーであれば覚えておきたい、ホームページ制作の業界では有名なサイトです。無料版と有料版があり、無料版だけでもかなり多くのアイコンを使用する事ができます。
Font Awesomeで配布しているアイコンを利用する場合、CDNを利用するパターンかサーバーにファイルを置いておくパターンか選べます。一長一短なので、エンジニアと相談してどのように使うか確認しておくことをおすすめします。
またFont AwesomeのアイコンはWEBアイコンフォントと呼ばれる、CSSでデザインの調整ができるものなので、様々な使い方ができるというのも大きな特徴です。

Font Awesome：https://fontawesome.com/

ICOOON MONO

商用利用可能なアイコンを数多く取り揃えるアイコン素材サイトです。
アイコンはベクター形式がビットマップ形式か選ぶ事ができ、様々な利用シーンで役立ちます。カテゴリ分けや検索が便利なので、豊富な素材の中から目当てのアイコンを探すのも簡単です。サイトが日本語で、使いやすいのも嬉しいポイントです。

ICOOON MONO：https://icooon-mono.com/

icon-rainbow

こちらも商用利用可能な無料のアイコンを数多く取り揃える素材サイトです。一見シンプルなアイコンに見えますが、細かなところにも装飾が施されています。気に入ったアイコンを一覧から選択し、一括でダウンロードできる使い勝手の良さも嬉しいポイントです。

icon-rainbow：https://icon-rainbow.com/

ハンコでアソブ

サイト名の通り、ハンコ風のアイコンが揃う素材サイトです。制作するホームページのテイストによるので、使用できるシーンは限られるかもしれませんが、可愛らしいアイコンはパーツの装飾にも使えるのでおすすめです。手書きのテキストを使用したWEBデザインに馴染むアイコンです。

ハンコでアソブ：http://hankodeasobu.com/

Material Icons

最後はGoogleが提供するアイコンです。Material Icons ではGoogleが推奨するマテリアルデザインで使えるアイコンが数多く揃っています。マテリアルデザイン以外の多くのWEBデザインにも馴染む上に、WEBアイコンフォントとして提供されているので、ホームページ制作で使いやすいアイコンです。

Material Icons：https://fonts.google.com/icons

今回のまとめ

今回はWEBデザイン制作時に役立つ無料で使えるアイコン素材サイトを5つ紹介しました。今回紹介した素材サイト以外にもネット上に多くの素材提供サイトがあります。WEBデザインを制作する際には、今回紹介した素材サイトなどを活用して分かりやすく使いやすいWEBデザインを心がけましょう。