ブラウザのタブやブックマークに表示されるファビコンや、ホームページに設置するアイコン、スマホのホーム画面に作られるショートカット用のアイコンなどは、ユーザビリティを高める上で重要な存在です。

→ダウンロード: Canvaの使い方無料基礎ガイド

【ブラウザのタブに表示されるファビコン(Favorite Icon)】

【スマホのホーム画面に作られるショートカットアイコン】

一目見ただけでなにを表しているかがわからないと、ユーザーを迷わせてしまうことになります。それだけに、どんなデザインにしようか悩むWeb担当者の方も多いはず。表示サイズは小さいため、シンプルでかつ分かりやすくしなければなりません。デザインの技術がないと0から自分で作成するのはかなり難しいですよね。

そこで今回は、無料で使えるアイコン素材を提供しているサイトをご紹介します。後半では、デザインにおけるポイントやアイコンやファビコンの設定方法なども解説しますので、ぜひ参考にしてみてください。

無料で使える!デザイン作成ツールCanvaの使い方基礎

ホームページのアイコン素材サイト19選

無料で、かつ商用利用可能なアイコン素材を提供するサイトをまとめました。早速見ていきましょう。
 

1. ICOOON MONO

【おすすめポイント】

  • 分かりやすいシンプルなアイコンが豊富
  • 色を自由に調整できる

「ICOOON MONO」は、小さなサイズでも容易に判別できるぐらい分かりやすいアイコンを数千個も掲載しています。

パッと見たところモノクロだけかと思うかもしれませんが、下のように色の変更を自由にできます。画像のサイズも拡張子も種類が多く、何かと使い勝手が良いですね。

  • 商用利用:可
  • クレジット表記:不要
     

2. FLAT ICON DESIGN

【おすすめポイント】

  • 高クオリティなフラットデザインが豊富
  • ダウンロード前に背景色を変更できる

「FLAT ICON DESIGN」は、その名の通りフラットデザインのアイコンが揃うサイトです。視認性が何よりも重要なホームページアイコンは、演出が少なくミニマルにまとまったフラットデザインとの相性が良さそうです。

サイト上で背景色を変更でき、ダウンロード後にわざわざ加工する必要がないのも魅力的です。

  • 商用利用:可
  • クレジット表記:不要
     

3. Icon-rainbow

【おすすめポイント】

  • 汎用的な素材に加え、記号やマークといった珍しいアイコンも揃っている
  • 色を自由に調整できる

「Icon-rainbow」には、細部まで描き込まれているにも関わらず見やすいアイコンが多数収録されています。デザインの作り込みの参考にもなるでしょう。

こちらもダウンロード前に色を自由に変更できる仕様になっています。

  • 商用利用:可
  • クレジット表記:不要
     

4. Icons8

【おすすめポイント】

  • 更新頻度が高く、新しいアイコンがどんどん追加されている
  • モノクロアイコンからカラーのものまで種類が豊富

「Icons8」は、12万点以上という大ボリュームを誇る海外の素材サイトです。アイコンのジャンルも色のラインナップも多種多様で、目当てのものがきっと見つかるでしょう。

ただ一点、無料利用の場合はクレジットとリンクの表記が必要な点に注意してください。

  • 商用利用:可
  • クレジット表記:必要(有料プランなら不要)
     

5. iconmonstr

【おすすめポイント】

  • 同じアイコンでも「太め」と「細め」の2種類から選べる
  • コードをコピーしてサイトに埋め込める

たった1人のドイツ人クリエイターによって運営されている「iconmonstr」。4,000種類以上の素材があり、ボリュームは充分です。

大きな特徴は、ダウンロードの際に「太め」と「細め」の2種類から選べる点です。微調整できるので、アイコンをホームページのテイストに馴染ませやすくなります。

  • 商用利用:可
  • クレジット表記:不要
     

6. ICON HOIHOI

【おすすめポイント】

  • 精巧に描き込まれたアイコンが多い
  • サイズと色も豊富

「ICON HOIHOI」の魅力は、デザインの精巧さです。細かい点にこだわりつつ、視認性も確保できていて使いやすくなっています。
サイズと色も豊富で、ダウンロード後すぐに使えるでしょう。

  • 商用利用:可
  • クレジット表記:不要
     

7. Metrize Icons

【おすすめポイント】

  • 丸枠のシンプルなアイコンが多数揃っている

丸枠のアイコンがほしいなら「Metrize Icons」がおすすめです。300種類と、他サイトに比べ数こそ少ないものの、シンプルで分かりやすいアイコンを一括ダウンロードできます。

  • 商用利用:可
  • クレジット表記:不要
     

8. ハンコでアソブ

【おすすめポイント】

  • かわいいハンコ風アイコンを多数掲載

「ハンコでアソブ」は、名前の通りハンコ風のアイコンを扱うサイトです。手作り感・手書き感を出せるのは、他ではなかなか見かけないポイントです。

  • 商用利用:可
  • クレジット表記:不要
     

9. DOTS DESIGN

【おすすめポイント】

  • ドット絵専門のアイコン素材サイト
  • 10,000以上の素材が掲載されている

「DOTS DESIGN」は、1万点以上ものドット絵アイコンを掲載しているサイトです。

デザインに制限の多いドット絵は、同じくデザインが縛られがちなホームページアイコンに適しています。各素材、複数の色を揃えてくれているので、好みに合わせて選べます。

  • 商用利用:可
  • クレジット表記:不要
     

10. Material Icons

【おすすめポイント】

  • マテリアルデザインのアイコンを多数掲載

「Material Icons」では、名前そのままにマテリアルデザインのアイコンが公開されています。しかも、マテリアルデザインを提唱したGoogle公式のサイトなので、定義から外れることなくアイコンをデザインしていけます。

  • 商用利用:可
  • クレジット表記:不要
     

11. FLATICON

 

【おすすめポイント】

  • 280万以上を超えるボリューム
  • いろいろな種類のフラットデザインが揃っている

「FLATICON」は、今日のホームページデザインで主流となっているフラットデザインを押さえるのに最適な素材サイトです。膨大な量のアイコンがあり、ここでなら求めているものが見つかるはず。

ただし、クレジット表記必須な点には注意してください。

  • 商用利用:可
  • クレジット表記:「designed by 作成者名 from Flaticon」の記載が必要
     

12. IFN(イラスト無料ネット)

【おすすめポイント】

  • シンプルなモノクロアイコンが多く使いやすい

「IFN(イラスト無料ネット)」は、シンプルさに重点を置いたアイコン素材サイトです。アイコン一つ一つに解説が添えられており、製作者の意図を把握したうえで利用できます。

  • 商用利用:可
  • クレジット表記:不要
     

13. アイコン配布中!

【おすすめポイント】

  • リアルなアイコンもシルエットアイコンも、両方を多数掲載
  • スマホサイト向けに画像データを軽量化

「アイコン配布中!」も種類が多くておすすめです。リアルアイコンとシルエットアイコンの両方が掲載されており、さまざまなテイストの素材が手に入ります。

ただし、24時間で12個までのダウンロード制限がある点に注意しましょう。

  • 商用利用:可
  • クレジット表記:不要
     

14. CMAN

【おすすめポイント】

  • 動くアイコン素材も掲載
  • アイコン色、背景色、背景の形、サイズ、アイコンの向きを調整できる

「CMAN」はアイコンの種類が豊富なだけでなく、それぞれの色やサイズ、向きなどを自由にカスタマイズできるサイトです。ダウンロード後に画像編集ソフトを起動する必要がなく、工数削減につながります。

  • 商用利用:可
  • クレジット表記:不要
     

15. ソザイング

 

【おすすめポイント】

  • アイコンセットが多く、デザインに統一感を出せる
  • ECサイト用・スマホサイト用のアイコンも揃っている

「ソザイング」は写真やWeb素材を多数掲載しており、アイコン画像も使いやすいものが揃っています。

ECサイトやスマホサイトに適した素材も多く、この手のサイトを作る際は重宝するのではないでしょうか。

  • 商用利用:可
  • クレジット表記:不要
     

16. 生物アイコンデータ

【おすすめポイント】

  • リアルな生物のアイコンが載っている
  • 細菌から動植物まで、マニアックな素材が多い

使い所は選びますが、220種の生物のアイコンが揃う「生物アイコンデータ」も面白いですよ。リアルで目立ちます。

なお、商用利用にはクレジット表記が必須です。クリエイティブコモンズを理解したうえで使いましょう。

  • 商用利用:可
  • クレジット表記:「CC BY 権利者名」の表記必須
     

17. SILHOUETTE DESIGN

【おすすめポイント】

  • シルエットデザインが豊富
  • サイズや色を自由に変更できる

「SILHOUETTE DESIGN」は、名前の通りシルエットに特化した素材サイトです。人・動物・食べ物・乗り物・地図・記号など、さまざまなアイコンが掲載されています。

サイズや色の変更が自由にでき、目的に合わせた使い方が可能です。

  • 商用利用:可
  • クレジット表記:不要
     

18. SILHOUETTE ILLUST

【おすすめポイント】

  • 10,000点以上のモノクロシルエットアイコンが掲載されている
  • 検索タグが豊富で、求める素材が見つかりやすい

「SILHOUETTE ILLUST」も、名前のごとくシルエット特化の素材サイトです。1万以上という膨大な収録数ですが、検索機能がしっかり整っているため快適に利用できます。

「ヨガの青鷲のポーズ」といったユニークな素材もあって、見ているだけで楽しくなります。

  • 商用利用:可
  • クレジット表記:不要
     

19. Human Pictgram

【おすすめポイント】

  • 人のピクトグラムに特化している
  • アタッチメントも配布されており、素材を手軽にカスタマイズできる

「Human Pictgram」では、標識や非常口に書かれている人をモチーフに、さまざまなアイコン画像を作成してます。

このサイトも、ユーモア溢れるユニークな素材が多数掲載されています。もちろん一般的ななアイコンも多いので、実務でも充分活用できるでしょう。

  • 商用利用:可
  • クレジット表記:不要
     

アイコン・ファビコンを無料で作成できるツール3選

ホームページ内に設置するアイコンであれば、ここまで紹介してきた素材をそのまま使うこともあるかもしれません。ただ、デザインにこだわりたい場合や、ファビコンを設定する場合は、取得した素材を加工したり、自分で作ったりする場合もあるはずです。

ここからは、専門知識がなくとも無料でアイコンやファビコンを作成できるツールを3つご紹介します。
 

1. favicon.cc

1つめは「favicon.cc」という、ドット絵の感覚でファビコンを作成できるツールです。右のカラーチャートで色を選び、真ん中のマスへ描いていきます。

実際にブラウザではどう表示されるか、プレビュー画面で確認しながら作業できて便利です。
 

2. Canva

「Canva」はブラウザベースのデザインツールです。テンプレートをドラッグ&ドロップで組み合わせたり、各パーツの色や文字をカスタマイズしたりするだけで、簡単にアイコンやファビコンができあがります。

PhotoshopやIllustratorよりもずっと手軽に使えるツールなので、デザイナー以外の方にもおすすめです。
 

3. ファビコンジェネレーター

「ファビコンジェネレーター」は、会社やブランドのロゴをファビコンにするときに便利な画像変換ツールです。使い方は以下の通りです。

①「画像ファイルを選択」を押して画像をアップ
②「ファビコン一括生成」をクリック
③大量に生成された画像のうち、必要なサイズ・形式のものを取り出す

生成されるファイルの種類について同サイトの中段に解説があるので、それを参考にしてみてください。
 

アイコン・ファビコンの設定方法

最後に、アイコンやファビコンをホームページに設定する方法を解説します。
 

WordPressで設定する方法

WordPressでは、以下の3ステップで設定できます。

  1. 512×512pxの画像を用意する
  2. 外観→カスタマイズ→サイト基本情報→サイトアイコンの順にクリック
  3. 画像をアップロードする

*ver.4.3以降でのみ可能

ちなみに、他CMSでも同じぐらい簡単に設置できるので、Wixなどをお使いの方は一度ヘルプを参照してみてください。
 

HTMLコードを書く方法

次は、Webサイトのheadタグ内にHTMLコードを書く方法です。前掲のファビコンジェネレーターで画像を変換する前提で話を進めますね。

  1. ファビコンジェネレーターで生成された画像のうち、「favicon.ico」と「apple-touch-icon-180x180.png」の2つを取り出す*
  2. Webサイトのディレクトリ内に2つの画像をアップする
  3. headタグ内に以下のコードを記述

アイコン
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon-180x180.png">

ファビコン
<link rel="icon" type="image/x-icon" href="./favicon.ico">

  • favicon.ico
    16px(IE用)・32px(ChromeやSafari用)・48px(Windowsのサイトアイコン用)の3役を1つで兼ねるファビコン画像ファイル
  • apple-touch-icon-180x180.png
    AndroidスマホとiPhoneのホーム画面に表示されるアイコン用。デバイスに合わせて自動でリサイズされる
     

ルートディレクトリに画像を置く方法

Webサイトのルートディレクトリに画像を置く方法もあります。

  1. 先ほどと同じく「favicon.ico」と「apple-touch-icon-180x180.png」の2つを用意する
  2. 2つの画像を、名前を変えずにホームページのルートディレクトリへアップロード

これだけでOKです。ファイル名を変えてはならないことに注意してください。
 

細部にもこだわり、ユーザー体験を高めよう

たくさんのタブやブックマークの中から自社のWebサイトを一瞬で見分けてもらうには、分かりやすく目立つシンボルが不可欠です。ユーザーにとっても、あるかないかで利便性が大きく変わり、ひいてはサイトの満足度にも関わります。

ただ、素材サイトのものをそのままホームページアイコンやファビコンへ流用するのは、あまり望ましくありません。素材のままだと、どこかで見たようなデザインになり、ユーザーの記憶に残らなくなるからです。

よって、素材サイトはあくまで参考に留めましょう。(加工してシンボルマークにするのは、サイトによっては禁止されています)
オリジナルのマークだからこそ、自社サイトを自社サイトとユーザーに強く認識してもらえます。表示が小さいからとないがしろにせず、細かいところまでこだわってみましょう。

HubSpotではこの他にもマーケティングやセールスに役立つ資料を無料で公開していますので、ぜひこちらからご覧ください。

 

無料で使える!デザイン作成ツールCanvaの使い方基礎

 無料で使える!デザイン作成ツールCanvaの使い方基礎

元記事発行日: 2020年6月01日、最終更新日: 2022年5月18日

トピック::

ホームページ