皆さんは、Webサイトを閲覧する際に、サイトごとに設定されているアイコンを見たことがありますか？
何となく眺めている多くのホームページにも、アイコンが設定されており、ホームページの印象作りに役立っています。
今回は、ホームページにアイコンを設定することで得られるメリット、設定する際に活用したい無料サイトをご紹介します。
ホームページのアイコンとは？
ホームページに使用されるアイコンは、正式には「 ファビコン 」という名称があります。
WebブラウザでWebページを開く際にタブ上に小さく表示されたり、ブックマークをした際にもアイコンとして表示されたり、Webサイトの顔にもなる部分です。
この「 ファビコン 」がきちんと設定されていると、ホームページのブランディングに役立ちます。
アイコンに使える！おすすめの無料素材サイト15選
実際にホームページのアイコンを設定しようと思っても、どのような素材を使えばいいのか悩んでしまうものです。
アイコンを作成した経験がない方でも、無料の素材サイトを活用しながら、ご自身でアイコンを用意することは可能です。
ここでは、ホームページのアイコン素材として活用できる無料の素材サイトを15個ご紹介します。サイトごとの使用条件をしっかり確認しながら、ご自身の目的やイメージに合う素材を探しましょう。
1.FLAT ICON DESIGN
「 FLAT ICON DESIGN 」は、WEBデザインやスマートフォンのUIなどで注目されているフラットデザインのアイコン素材を紹介しているサイトです。
ビジネス領域から日常系、イベント系まで、幅広いジャンルのイラストアイコンを無料で使用することができます。
| URL | http://flat-icon-design.com |
| 商標利用 | 使用条件に違反しない限りOK |
| クレジット表記 | 不要 |
| ファイル形式 | JPG、PNG、Ai、EPS、SVG |
2.Icon-rainbow
「 Icon-rainbow 」は、商用利用可能なアイコンがダウンロードできる無料のサイトです。カテゴリーが詳細に分けられており、素材探しが簡単におこなえます。
シンプルテイストのイラストが特徴的で、複数色の中から選び、好みの色で活用できます。
| URL | https://icon-rainbow.com/ |
| 商標利用 | 使用条件に違反しない限りOK |
| クレジット表記 | 不要 |
| ファイル形式 | JPG、PNG、Ai、EPS、SVG |
3.ICOON MONO
「 ICOON MONO 」は、WEBデザインやDTPのほか、ビジネスシーンで活用できるアイコン素材をストックしているサイトです。
いいものを正確に伝えられる「 わかりやすさ 」を大切にしており、シンプルで使いやすいアイコンが数多く紹介されています。
| URL | http://icooon-mono.com |
| 商標利用 | 使用条件に違反しない限りOK |
| クレジット表記 | 不要 |
| ファイル形式 | JPG、PNG、Ai、EPS、SVG |
4.icon ｍonstr
「 icon ｍonstr 」は、アイコンに使用できるイラスト素材を無料で配布している海外のサイトです。
全て英語表記のサイトですが、さまざまなバリエーションの素材が豊富にあるため、目的に合う素材を見つけやすいです。
データが重くならないように軽いファイルで作成することにもこだわっています。
| URL | https://iconmonstr.com |
| 商標利用 | OK |
| クレジット表記 | 不要 |
| ファイル形式 | SVG、EPS、PSD、PNG |
5.Streamline
「 Streamline 」は、30,000以上ものアイコン素材を配布しているサイトです。
無料で使用可能なアイコンは、PNG形式で配布されています。全てのコンテンツを活用したい場合は、有料のパッケージプランに登録する必要があります。
| URL | https://www.streamlineicons.com/ |
| 商標利用 | OK |
| クレジット表記 | 全てのページにリンクを表記させる
※プレミアムプランに加入すると非表示でOK |
| ファイル形式 | PNG |
6.Icons8
「 Icons8 」は、無料プランでHTML埋め込みによる素材利用ができるサイトです。有料プランに登録すると、全ての素材をダウンロードして使用できるようになります。
全ての素材を一つのチームで作成しているため、素材に統一感があります。いくつかの素材を組み合わせて使用すると、サイト内のデザインを統一することが可能です。
| URL | https://icons8.jp/ |
| 商標利用 | OK |
| クレジット表記 | 無料プランはリンクの表記が必要 |
| ファイル形式 | - |
7.HUMAN PICTOGRAM2.0
「 HUMAN PICTOGRAM2.0 」は、標識などで使われるピクトグラムをストックしているサイトです。くだけたポーズのピクトグラムも多く集められており、さまざまなシーンで活用できます。
よく目にする絵文字をアレンジして使いたい際におすすめのサイトです。
| URL | http://pictogram2.com/ |
| 商標利用 | OK |
| クレジット表記 | 不要 |
| ファイル形式 | PNG、JPG、Ai |
8.ハンコでアソブ
「 ハンコでアソブ 」は、透過のPNG素材を配布しているサイトです。ハンコで押したかのようなアイコン素材が特徴となっています。可愛らしいイメージのホームページ・Webサイト作りで活躍します。
| URL | http://hankodeasobu.com/ |
| 商標利用 | OK |
| クレジット表記 | 不要 |
| ファイル形式 | PNG |
9.シルエットデザイン
「 シルエットデザイン 」では、影絵の素材に特化している無料素材サイトです。ホームページのアイコンだけでなく、Webサイト内や資料でも活用できるシンプルな素材が数多くストックされています。
商標登録するロゴとしての使用は禁止されているので、注意しましょう。
| URL | https://kage-design.com/ |
| 商標利用 | NG（ロゴとしての使用禁止） |
| クレジット表記 | 不要 |
| ファイル形式 | JPG、PNG、SVG、Ai |
10.SVG PORN
「 SVG PORN 」は、SVGの素材がダウンロードできるサイトです。海外の企業や有名サービスなどのロゴ・アイコンをダウンロードできます。アイコンの参考にしたいデザインを探す際に使いやすいサイトです。
| URL | https://kage-design.com/ |
| 商標利用 | OK |
| クレジット表記 | 不要 |
| ファイル形式 | SVG |
11.Font Awesome
「 Font Awesome 」は、Webアイコンフォントを配布しているサイトです。Webアイコンフォントとは、HTMLやCSSを埋め込み、簡単にWebサイト上にアイコンを表示できるサービスです。
サーバーへの負担を減らせるというメリットがあります。Webアイコンフォントを提供する中でも、高い人気を持つのが「Font Awesome」です。
「 これまでに簡単なアイコンを作成したことがある 」「 もっとカスタマイズしたアイコンが作りたい 」という方はぜひ使用しましょう。
| URL | https://fontawesome.com/ |
| 商標利用 | OK |
| クレジット表記 | 不要 |
12.Material Icons
「 Material Icons は、マテリアルデザインを生んだGoogle自身が運営するサイトです。マテリアルデザインのアイコンを素材として紹介しています。
直感的な操作性を追求するマテリアルデザインをホームページ内に取り入れたいと考えている方に、ぜひチェックしてほしいサイトです。
| URL | https://material.io/ |
| 商標利用 | OK |
| クレジット表記 | 不要 |
| ファイル形式 | SVG、PNG |
13.Metrize Icons
「 Metrize Icons 」は、円形のアイコンを配布している素材サイトです。近年、スマートフォンなどのモバイル端末で使用しやすいように、円形ボタンが導入される傾向があります。
当サイトでは、ユーザーが使いやすくなるように考えられた素材が紹介されているため、シンプルかつ使いやすいホームページ作りに活用できます。
| URL | http://www.alessioatzeni.com/metrize-icons/ |
| 商標利用 | OK |
| クレジット表記 | 不要 |
| ファイル形式 | PSD、SVG、EPS、Ai、PDF、Web Font |
14.orion Icon Library
「 orion Icon Library 」は、6,000以上もの素材がストックされている海外の素材サイトです。素材は「 線 」「 塗りつぶし 」「 カラー 」「 フラット 」の4つのカテゴリーから選択できます。
線の太さや色まで、簡単にカスタマイズできるため、さまざまなシーンで使用できます。もちろんホームページのアイコン素材としても、自由度が高く使いやすい点が魅力的です。
| URL | https://orioniconlibrary.com/ |
| 商標利用 | OK |
| クレジット表記 | 不要 |
| ファイル形式 | SVG、PNG |
15.アイコン配付中！
「 アイコン配付中！」は、リアルアイコンとシルエットアイコンの2パターンで素材を配布しているサイトです。
素材サイトにはイラストを使ったシンプルなものが多い中、当サイトではリアルな印象を与えてくれる素材がストックされています。
シルエットアイコンと合わせて、幅広い種類の中から使いやすい素材を見つけることが可能です。
| URL | http://icon.touch-slide.jp/ |
| 商標利用 | OK |
| クレジット表記 | 不要 |
| ファイル形式 | Ai、PSD、PNG、Fireworksのパスデータ |
アイコンを設定する3つのメリット
まず、ホームページのアイコンを設定するにあたって、どのようなメリットが得られるのか理解しておきたいものです。ホームページのアイコン設定によって得られる3つのメリットをご紹介します。
1.サイトにイメージを持たせることができる
ホームページのアイコンはそのWebサイトにおけるシンボル的な存在で、ユーザーはアイコンからホームページに対するイメージを抱きます。
アイコンは画像であるため視覚的なインパクトを与えやすくするので、ユーザーに持たせたいブランドイメージをアピールする場として役立ちます。
視覚的な情報からユーザーに対して好印象を与えることができると、サイトのコンバージョンに繋がります。
2.ブックマークやホーム画面でも判別しやすい
お気に入りのホームページやよく閲覧するWebサイトをブックマーク登録して開きやすくするユーザーは多くいます。
ブックマークで表示する際に、ホームページのアイコンを設定していると判別がしやすくなります。
登録しているホームページ名だけでなく、視覚的にどのWebサイトか判断できるため、アクセスするまでの時間が短縮できます。
また、近年ではスマートフォンのホーム画面にWebサイトのアイコンを設定することも増えています。
ホーム画面にホームページのアイコンが表示されていると、視覚的にそのWebサイトの印象を持つようになります。
判別しやすくするだけでなく、ホームページのブランドイメージを与えることも同時にできるのです。
3.全体にアクセントを加えることができる
ホームページのアイコンは、Webサイト全体におけるデザインのアクセントとしても活用できます。
ホームページのデザインは、全体に統一感を持たせる必要があったり、データが重くなりすぎないように注意したりと、結果的に単調なものになりがちです。
アイコンは、ホームページ全体にアクセントを加える役割も担うため、ユーザーを飽きさせることなくWebサイトを活用してもらえるようになります。
ユーザーがデータ量を気にすることなくホームページの閲覧を楽しんでくれるように、アイコンによってデザインを工夫させることも、ホームページ運営において大切なポイントです。
アイコンに無料素材を使用する際の3つの注意点
ホームページのアイコン作成にあたって無料素材を使用する際には、必ずチェックし注意すべき点があります。「無料だから 」といって好き勝手に使用することはNGです。
無料素材を使う際に気をつけるべき3つのポイントをご紹介します。
1.再配布をしない
素材サイトからダウンロードした素材を再配布するのは基本的に禁止されている行為です。サイト内の記載を必ずチェックし、禁止となっている場合には絶対に再配布をおこなってはいけません。
無料とはいえ、素材の著作権はサイト側が所有しています。許可なく素材を再配布した場合は、著作権違反となりかねません。サイトのライセンスをチェックすることが重要です。
2.クレジット・リンクの記載義務をチェック
素材サイトから取得したアイコンを使用する際、クレジットやリンクの記載を義務付けているサイトは多いです。
「 クレジット表記 」とは、素材の制作に関わった個人・団体の名称を表記することを指します。また、リンクの記載は、素材を提供しているWebサイトのURLを表記することです。
無料でダウンロードできたとしても、クレジット表記・リンクの表記をした上でOKとしている素材サイトもあるため、確認した上で使用しましょう。
3.利用規約を守って活用する
これまでにご紹介した2つの注意点は、多くのサイトで気をつける必要があるポイントです。
これ以外にも、「 直リンクはしない 」「 素材の編集はしない 」など、サイトごとに設定されている規約は数多くあります。
規約は使用したい素材を提供しているサイトごとに異なるため、それぞれのサイトが取り決めている規約には必ず目を通しましょう。
規約を踏まえた上で、ルールに反することなく素材を使用することは、大前提として大切にすべきことです。
アイコンに最適なファイルの選び方
アイコン素材を各素材サイトからダウンロードしようとすると、サイトごとに配布しているファイル形式が違うことが分かります。「 なんとなく 」で選択せず、目的に合ったファイル形式で選択しましょう。
また、まずご自身が求めているファイル形式を把握した上で、その形式での素材配布をおこなっているサイトから素材を探すと、アイコン作成のスケジュールを効率よく進められます。
一般的に使用しやすい「 PNG 」と「 SVG 」は、どちらも透過データに対応しています。
「 JPG 」は耳にすることが多いファイル形式ですが、ホームページで使用する際にはデータが大きくなりやすいため、
注意が必要です。
「 Ai 」「 EPS 」「 PSD 」などは、素材をそのままアップロードできません。変換が必要になるため、作業段階を考慮した上で選択しましょう。
ホームページのアイコン作成に役立つ3つの無料ツール
最近は、アイコン作成未経験の方でも、ご自身で簡単にアイコンが作れるツールが登場しています。無料で使えるものを活用し、楽しみながらアイコン作りに挑戦してみましょう！
ここでは、ホームページのアイコン作成時に活用したい3つのツールをご紹介します。
1.favicon.cc
「 favicon.cc 」は、サイト上に表示されるドットを使って画像を描いていくツールです。
操作は非常に簡単で、ご自身が描きたいものを感覚的に作成できます。作成している最中にプレビュー表示ができるため、自分が作っているものがどのような形で完成するのか分かりやすく見られます。
アイコンを作成する際、画像は「 ico形式 」に変換する必要がありますが、当サイトでは変換の手間も省くことができます。手軽にサクッとアイコンを作りたい方におすすめのツールです。
初めてのアイコン作成に取り組む方、短時間で簡単に作りたい方は、チェックしましょう。
URL：favicon.cc
2.Font Awesame
「 Font Awesome 」は、Webアイコンフォントのサービスです。
無料の素材サイトとしてもご紹介しましたが、画像としてではなく、HTMLやCSSを埋め込むことで、アイコンを簡単に表示させることが可能となります。
画像として挿入するよりも難易度は上がりますが、その分自由度も上がります。無料プランでもアイコンの種類は2,000種近くも用意されており、カスタマイズもおこなえます。
当サイトを利用するためには、会員登録が必要です。無料でも利用できるため、まずは登録してみましょう。
URL：Font Awesame
3.Canva
「 Canva 」は、無料で使えるデザイン制作ツールです。無料であることに加え、簡単な操作性が人気となり、PhotoshopやIllustratorの代わりとしても使われています。
テンプレートは無料でも数多く用意されており、誰でも簡単にアイコンが作れます。マウスだけで簡単に操作できるため、デザイナー以外の方にもおすすめのツールです。
おしゃれでこだわりのあるアイコンを簡単に作りたいと考えている方は、無料登録をして使ってみましょう。
URL：Canva
まとめ
ホームページのアイコン作成は、未経験の方でもご自身でチャレンジできます。無料で使える素材サイトを有効活用することで、アイコン作成のハードルも手間も一気に下げることが可能となります。
ホームページアイコンを作成する際には、以下の注意点に気をつけましょう。
- どのような目的のためにアイコンを設定するのか理解する
- 素材サイトは利用規約に則った上で正しく活用する
- 素材のダウンロード形式を確認する
より良いホームページ運営のために、ホームページのアイコン設定に挑戦しましょう。
合わせて読みたい
・【初心者必見】HPの管理はどうしたらいい？費用や管理方法を詳しく解説！
・【HP作成】リニューアルの手順を徹底解説！リニューアルのメリットと注意点