この記事を読んでほしい方
- 社内にWebデザイナーがおらず、サイト内にアイコンやイラストが挿入できない
- イラストの著作権が曖昧なままWebサイトを利用している
- 自社のページにぴったりな、ちょうどいいイラストやアイコンが手に入らない
この記事では、どなたでも利用可能なビジネスに使えるフリーアイコン素材の概要・メリット、おすすめサイトをご紹介します。自社のWeb制作にご活用ください。
▼Webサイト制作やSNS運用を効率化！タスカルのサポート事例をチェック
＼月額2.75万円（10時間）でデザイン制作が依頼できる「タスカル」🤗／
オンラインアシスタント「タスカル」は、バナーや画像制作、Webサイト・SNSなどのデザイン業務を丸投げOK！初期費用なし＆低コストの月額で始められるので、一人社長やフリーランスに選ばれています。
フリー素材のアイコンとは？
フリー素材のアイコンとは、制作者が無償で配布しているアイコン素材のことです。フリー素材は制作者の厚意から無償配布となっています。アイコンはWebサイトはもちろん、アプリやバナーなど、多方面で利用されています。
アイコンの種類
以下の表で、アイコンの主な種類を見てみましょう。
| フリーアイコンの種類 | |
| アウトライン | 輪郭のみが描かれ、中身が塗りつぶされていないアイコン。 軽やかでミニマルな印象を与える。 |
| 塗りつぶし | アウトラインアイコンの中が塗りつぶされているアイコン。 アウトラインアイコンよりも視認性が高く、強調して情報を伝えたい場合に適している。 |
| シルエット | 影絵のように、モノトーンで塗りつぶされたアイコン。 誰にとってもわかりやすい設計を意味する「ユニバーサルデザイン」に適している。 |
| ピクトグラム | 意味や概念を表す図記号のこと。 言語が異なっていても理解しやすく、公共施設や国際イベントなどで用いられている。 |
| フラット | 立体感を省いた、平面的なデザインのアイコン。 シンプルでわかりやすい。 |
Webサイトでアイコンを使うメリットとは？
アイコンは、Webサイト上でどこをクリックすればどこに誘導されるのかをイメージとして示します。このため、アイコンを利用すればユーザーの視覚的な誘導が容易になるメリットがあります。
たとえば、ECサイトにおいて、単に「お会計」とテキストで書くだけでなく、「商品カゴのアイコン」や「円マークのアイコン」などを使うと、ユーザーに購入箇所をわかりやすく伝えることが可能です。アイコンの選択は、コンバージョン（CV）の増加に大きな影響を与えると考えられています。
また、Webサイトでテキストが多くなると単調な印象を与えてしまいます。Webサイトにいくつかアイコンを入れることで、より見やすくて魅力的なページになります。
▼タスカルでは、Webサイトの運用やSNSの運用もサポートしています。SNS運用サービスの詳細はこちら！
フリーアイコン利用前に知っておきたい著作権の基本
フリーアイコンの利用は、著作権にも大きく関わってきます。利用前に確認しておきたい著作権の基本を解説します。
著作権とは
著作権は、写真や動画、小説などの作品に関する権利です。作品を創作した者に与えられる権利で、創作者を守る目的や著作物の利用について著作者が決定できるようにする目的があります。著作者は、著作物について条件付きで使用を許可したり、使用自体を拒否したりすることが可能です。
著作権は、著作物の創作により自動的に発生します。日本には、取引の安全を目的として、登録制度も設けられています。
著作権侵害とは
著作権侵害とは、著作者の許可を得ずに著作物を無断で利用することや、無断で修正を加えて利用することです。新たに制作したものであっても、著作物に類似性の高いものを制作して許可なく使用する行為も著作権侵害にあたります。
例えば、有名人やキャラクターの画像をSNSのアイコンとして使用したり、他者の動画をあたかも自分が撮ったもののようにしてSNSなどに掲載したりする行為などが該当します。
著作権侵害は違法行為です。著作権者の申告により刑事罰が成立し、著作権や出版権などの侵害は、10年以下の懲役または1000万円以下の罰金が科せられることがあります。法人が侵害した場合は、3億円以下の罰金となり、より罰則が重くなります。民事上では、損害賠償の請求などを受ける可能性があるため、著作物の取り扱いには注意が必要です。
なお、著作物の個人的な利用（自宅で印刷して自分で見るためだけに利用するなど）は著作権侵害にはあたりません。
著作権フリーでも注意が必要
フリーアイコンサイトでは、「著作権フリー」と表記されていることがあります。著作権フリーの記載があっても、完全に著作権が放棄されているとは限らないため注意が必要です。
後述するように、フリーアイコンサイトでは、著作権フリーの記載があっても、利用範囲に制限が設けられていることがあります。よくあるのが、商用利用不可や改変不可、二次利用不可などの制限です。利用前には、利用規約の十分な確認が必要です。
フリー素材のアイコンを利用する際に確認すべきポイント
フリー素材のアイコンをWebサイトなどで利用する際、いくつか確認すべきポイントがあります。
【ポイント1】利用の範囲
利用の範囲とは営利目的を伴うかどうかで区別されます。つまり、収益を上げる目的でアイコンを利用すれば「商用利用」に該当し、収益が目的でなければ「私的利用」に該当します。商用利用にあたるケースとしては、商品販売や広告収入目的のサイト運営があります。これらは商用利用として禁止される場合があり、利用規約の確認が必要です。
【ポイント2】クレジット表示の必要性
クレジット表示とは（C）マークのことです。フリー素材のアイコンの中にはクレジット表示をしなければならないものがあり、注意が必要です。具体的には、（C）株式会社Aと記載します。簡易な記載ではありますが、自社のサイトに他社名が入ってしまいます。これを避けるためにはクレジット表示不要の素材を使わなければなりません。
【ポイント3】加工・改変の可否
アイコンを使用する際、自社サイト向けにカスタマイズすることがあります。具体的には、アイコンの色やサイズを変えたり、文字を加えたりすることが該当します。
ただし、利用規約によっては、利用者が素材に手を加えることを禁止しているケースがありますので注意しましょう。トラブル予防のためにも、事前に加工や改変ができるのか、できる場合は範囲はどこまでか、利用規約の確認が必要です。
【ポイント4】再配布の可否
再配布とは、デジタルデータを著作権者以外がコピーして第三者に交付することです。著作権法上、 違法コピーとされます。 許諾がない場合に著作権者に無断でコピーすると違法となるので注意が必要です。
【ポイント5】ファイル形式
フリー素材のアイコンは複数のファイル形式で提供されており、 利用者が用途に応じて選びます。一般的にはPNGとJPGが多いでしょう。他にもSVG、GIFなどのファイル形式もあります。なお、AI、EPS、PSDは、そのままではWebサイトにアップできませんので注意が必要です。
【ポイント6】競合他社の使用状況
フリーアイコンをWebサイトに使用する際は、競合他社の使用状況をチェックしましょう。同じサイトからフリーアイコンをダウンロードしている場合、デザインが被ってしまうからです。
フリーアイコンは無料で手軽に使えるため、多くの人が利用していると考えられます。競合他社と同じフリーアイコンを利用していると、Webサイトで自社の特徴を出せない可能性があるので、事前にしっかりと確認しておくことが大切です。
ビジネスに使えるフリーアイコン素材サイト15選
続いて、ビジネスに使えるフリーアイコン素材サイトを15種類紹介します。
商用利用・加工改変ができ、クレジット表記なしの素材サイトを主にピックアップしているので、気になるサイトがあれば、ぜひ利用してみましょう。
(1) ちょうどいいイラスト
サイト名の通り「ちょうどいい」イラストが800点以上使える素材サイトです。無料で商用利用でき、クレジット表記も不要です。ただし、素材の再配布や販売行為は禁止されています。
| ＜ファイル形式＞ EPS、PNG |
(2) loosedrawing
統一感のある、かわいらしいイラストが提供されています。ビジネスから時事ネタまで幅広いジャンルの素材を網羅している点が特徴です。会員登録不要で利用できるのも、嬉しいところです。
＜ファイル形式＞ |
(3) ICON BOX
柔らかいタッチのアイコンが多いです。どのアイコンもクオリティが高く汎用性があります。 パスデータを編集できる状態で提供されています。アイコンの検索性も高く、線が「太い・細い」などテイスト別に検索できます。カテゴリーも「ビジネス・金融、人物、文具・雑貨、記号・マーク・矢印、建物・自然、乗物」と幅広く網羅しています。
| ＜ファイル形式＞ PNG、SVG |
(4) unDraw
unDrawは海外サイトのため、英語で表示されています。「Search」に英単語を入力して、欲しいアイコンを検索します。ページトップに色を変更できるボタンがあり、アイコンの色を自由にカスタマイズできる機能が利用可能です。
| ＜ファイル形式＞ PNG、SVG |
(5) Material icons
Google社によるフリー素材のサイトです。Google FontsというGoogle社が運営するページに、多種多様なアイコンが用意されています。見ただけで直感的に内容をイメージできるアイコンが多く、希望のデザインがきっと見つかるでしょう。
| ＜ファイル形式＞ PNG、SVG |
(6) FLAT ICON DESIGN
カテゴリー別にフラットデザインのアイコン素材が揃っています。アイコンの種類も日用品から人物、イベントなど多様です。アザラシやバッファローなど個性的なアイコンがあります。また、罫線やピクトグラムなどのビジネス系のアイコンもあります。利用に際しては、背景色の変更も柔軟に行えます。
| ＜ファイル形式＞ JPG、PNG、SVG、Ai、EPS |
(7) Icooon Mono
6,000種類以上のフリーアイコンが、ジャンル別に用意されています。わかりやすく、見やすいアイコンが多いです。選択した素材を一括でダウンロードできるのも嬉しい特徴です。モノトーンの素材が中心で、幅広いジャンルのサイトで利用できます。なお、アイコンをダウンロードする前にサイト上で、アイコンの色やサイズの変更が可能です。
| ＜ファイル形式＞ JPG、PNG、SVG、Ai、EPS |
(8) iconmonstr
クオリティの高い素材が多く世界中で人気を集めています。難点は、海外のサイトであるため、英語で検索しなければならないことです。もっとも、操作性はシンプルでIT初心者でも迷わずにダウンロードまで行えるでしょう。
| ＜ファイル形式＞ PNG、SVG |
(9) icon-rainbow
全てのアイコンが商用利用可能です。モノトーンのアイコンで構成され、Web制作で幅広く利用できます。ジャンル別にアイコンが揃っており、用途に応じて適切なアイコンを選択可能です。人物アイコンや企業アイコン、ファッションのアイコン素材などがあります。アイコンのサイズや色は変更できます。自社のWebサイトに合ったアイコンにアレンジできるでしょう。
| ＜ファイル形式＞ JPG、PNG、SVG、Ai、EPS |
(10) flaticon
フラットデザインのアイコンをダウンロードできるサイトです。アイコンの数は31,400以上です。ビジネスからプライベートで活用できるアイコンまで用途別に見つけることができます。使用時はクレジット表記が必要です。
| ＜ファイル形式＞ PNG、SVG、EPS、PSD ※CSSフォーマットも配布 |
(11) Icons8
モノクロからカラーまで、多種多様なアイコンを無料で利用できるサイトです。仕事やエンタメ、オフィス、人々、記号など、豊富なカテゴリーから希望のアイコンを検索できます。ただし、使用する際はリンクを追加する必要があります。Webサイトにリンク設定ができない場合、月額15ドルのProプランに申し込まなければなりません。
| ＜ファイル形式＞ PNG、Favicon、Link、Base64は無料 SVG、PDFなどは有料 |
(12) SILHOUETTE DESIGN
動物や魚、植物、乗り物などのシルエットアイコンを無料で利用できます。サイズや色もカスタマイズできる機能が搭載されているため、好みのアイコンに仕上げられます。家紋や忍者、侍など、遊び心のあふれるシルエットも用意されているので、ぜひチェックしてみましょう。
| ＜ファイル形式＞ JPG、PNG、SVG、Ai |
(13) ハンコでアソブ
可愛らしいハンコを押したようなアイコンを利用できる素材サイトです。手書き風のデザインで、暖かい印象を与えるものばかりです。ファッションやアンティーク、家具など、多様なカテゴリーが用意されています。カフェや美容サロン、雑貨屋など、優しい雰囲気のWebサイトを制作したい場合、利用してみましょう。
| ＜ファイル形式＞ PNG |
(14) OWL STOCK
モノクロやカラーのアイコン、さらにはイラストやフレームも無料で利用できる素材サイトです。モノクロアイコンはアウトラインが太めで、存在感があります。カラーのアイコンはフラットデザインが多く、シンプルなデザインを求めている人におすすめです。
| ＜ファイル形式＞ JPG、PNG、Ai |
(15) HUMAN PICTOGRAM 2.0
ユニークなピクトグラムだけでなく、顔や帽子、ヘアスタイルなどのアタッチメント素材も無料で配布されています。基本となるピクトグラムに、髪の毛やアイテムなどを加えることで、オリジナルのアイコンを生み出せます。
| ＜ファイル形式＞ JPG、PNG、Ai |
フリーアイコン素材の選び方
自社のホームページやSNSなどに適したアイコンを選ぶには何を基準にしたらよいのか、フリーアイコン素材の選び方のポイントを3つ紹介します。
わかりやすいものにする
アイコンには、機能そのものを表す役割や装飾の役割などがあります。特に、機能そのものをアイコンで表したいときに意識したいのが、わかりやすさです。ユーザーが考えなくても、アイコンを見るだけでどのような機能をもっているのか理解できることが大切です。例えば、印刷機能であれば印刷機のアイコン、検索機能であれば虫眼鏡のアイコンなど、共通認識として広く利用されているデザインで、機能がすぐにわかるようなアイコンを利用するようにしましょう。
利用目的にあったものにする
アイコンは、利用目的に適したものを選択することも重要です。アイコンのデザインと利用目的がずれてしまうと、ユーザーに誤解を与えてしまうかもしれません。アイコンを乱用せずに、必要に応じて別の方法で情報を伝えることも検討しましょう。
また、SNSで利用するアイコンは、アカウントを一目で認識できること、インパクトなどが重要になります。SNSの種類によって適したアイコンのデザインは異なるため、SNSごとの使い分けも必要です。
統一感をもたせる
優れたデザインのアイコンを取り入れても、統一感がないと、会社やブランドのイメージが伝わりません。統一感のあるデザインを選ぶことが重要です。デザインに一貫性を持たせることで、会社やブランドの世界観を伝えやすくなります。
フリーアイコン素材をうまく選べない場合
著作権に注意しつつ、ホームページやSNSにマッチするフリーアイコン素材を選ぶのは難しいと思われる方もいるかもしれません。実際に探してみても、うまくいかないこともあるでしょう。
フリーアイコン素材をうまく選べない場合は、「タスカル」へのご依頼もおすすめです。タスカルでは、WebサイトやSNSの運用もサポートしています。
▼タスカル公式サイト
▼タスカルでは、さまざまなバックオフィス業務をサポートしています。タスカルの活用に役立つ最新の導入事例はこちら
フリー素材では表現しきれない“独自性”への対処法
無料で利用できるフリーアイコン素材は、ホームページなどを装飾するのに便利です。しかし、フリー素材のため広く利用されており、独自の世界観を表現しにくい面もあります。
アイコンにオリジナリティを出したい場合は、クリエイターにアイコン素材の制作を依頼する方法もあります。使いやすさやコストなども踏まえて、自社に合った選択肢でアイコンを用意しましょう。
まとめ：フリーアイコン素材を使ってWeb制作のクオリティを上げよう
この記事ではアイコンのフリー素材のメリットやおすすめサイトを紹介しました。アイコンを使うと、視認性が高くなりユーザーが使いやすくなるので、ぜひ利用してみましょう。
オンラインアシスタント「タスカル」でも、アイコン素材を活用して企業のWebサイトやLP制作・更新を手がけています。低コストで制作外注を考えている方は、是非一度「タスカル」をご検討ください。
▼Webサイト制作やSNS運用の手間を削減！タスカルのスタッフによるサポート事例集
