無料でも使えるアイコンWebfontのまとめ。2015年上半期版

Publish2015/06/24(水)

Update2016/01/31(日)

無料でも使えるアイコンWebfontのまとめ。2015年上半期版

今日は仕事で調べる事があったのでついでにまとめた系記事そのなんぼやろになる感じの、自分とか作る人向けの内容です。
サイトでアイコンを使いたいなという時に、オリジナルで作るよりもすでに公開されているアイコンを使用する事はよくある事かと思うんですが、「あれってどこやったっけ?」ってなりがちなので、よく使うものをまとめておきます。

アイコンWebfontのメリット

この記事を見ている時点で使用するメリットはすでに知っていると思うので、端折ってもいいかと思うんですが一応書いておきます。
一番の理由は、手軽に品質の高いアイコンが使えるという事。
そして、Webfontなのでスマートフォンで見た時にもきれい、cssで書けるので色の変更とかも簡単とかのメリットがあります。
あと、上手く使えばブログの記事書く時とかにclass付けてアイコン付きで記事書いたりとかも出来るようにもなります。
もちろんcssの知識とかないと無理な話なので初心者向きの話ではないですが。

とはいえ、使用するメリットはかなりあるので使うタイミングの方が多いんじゃないかなと個人的には思います。

アイコンWefontのリスト

では実際に使えるものをリストアップしてみましょう。

Font Awesome

Font Awesome
http://fortawesome.github.io/Font-Awesome/

説明する事もないほど有名だと思うんですけど、最もよく使っているところを見かけるサービスですね。
特徴は数の多さと品質の高さかなとは個人的に思えます。
これだけ入れとけばたいていの事は何とかなる感もあって、まず外せないかなと。

Glyphicons

Glyphicons
http://getbootstrap.com/components/

Glyphiconsは元々単独で動いてたプロジェクトですが、CSSフレームワークのBootstrapにバンドルされる事になってさらによく見かけるようになった感があります。
これはBootstrapの普及がそれだけすごい感じになっている事も影響してますね。

Foundation Icon Fonts 3

>Foundation Icon Fonts 3″ /><br />
				<a href=http://zurb.com/playground/foundation-icon-fonts-3

BootstrapがあるのであればFoundationも。
こちらも汎用性の高いアイコンが揃っているので非常に使い勝手がいいです。

Genericons

Genericons
http://genericons.com/

Genericonsは数は少ないんですけど、めっちゃ使う系のところが揃っているので、最小限だけ揃えておこうという時に便利です。
たくさんありすぎて選べないという事がないのは判断を早くする事が出来るのでよい事だと思います。

Paymentfont

Paymentfont
http://paymentfont.io/

Paymentfontはちょっと珍しいクレカとかの支払い用のアイコンが揃っています。
カードのアイコンとかを探して集めて回るのは大変面倒なので、こっちでまとまってるのはすごく助かりますね。

MAKI

maki
https://www.mapbox.com/maki/

MAKIは地図作成サービスのmapboxが提供しているアイコンなので、地図でよく使うものが揃っています。
こういう特化形の括りでまとまっていると差別化できてて選びやすいですね。

ICONIC

ICONIC
https://useiconic.com/

ICONICも汎用性の高いアイコンが多い印象のサービスです。
使い方のガイドも充実しているので使いやすいですね。

Google Material Design icons

Google Material Design icons
http://freebiesbug.com/psd-freebies/google-material-design-icons-svg-png-css/

これに関してはアイコンwebfontというとちょっと違う気もしますが、svgとかも取れるのでwebfontとして使う事も出来なくはないという事で紹介です。
GoogleのMaterial Designのアイコンセットです。

こちらからも取得できます。
https://www.google.com/design/icons/

Typicons

Typicons
http://typicons.com/

Typiconsはちょっとポップな感じのものが多くて、個人的にはけっこう使いどころが難しいなと思ってます。
ただ場合によってはよくサイトになじむ場合もあると思うので、それはやっぱりTPOでということでしょう。

まとめ

まとめてみて改めて思いましたが、ここで紹介しているのってすでに何年も運用されているものが多くて、目新しいものが特にない面白くない感じになってしまった感があります。
個人的には、こうやってまとまってバラバラしているからこうやって探さなくちゃいけなくて非常に大変なので、どっかでまとめて使用できるようなプロジェクトがあるとうれしいなと思うんですよね。
最後はたわごとでしたが、こうやって使わせてもらえるのは非常にありがたい事ですね。感謝感謝。

記事の著者:ふにすでぐち

ふにすでぐち

1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、Web運用サポート、Webサイトの構築などを行っています。
5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。
Web活用の情報や考え方などを発信するブログ「ふにろぐ」を不定期更新中です。
2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
サイトの運用や活用にお困りの方、Web運用やブログ更新などの講演のご依頼など、お気軽にご相談ください。
お問い合わせはこちら

LINEでWebに関する質問にお答えしています。

ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。

関連記事

  • 無料で使えるベクターアイコンまとめ無料で使えるベクターアイコンまとめ 今回は釣りタイトル臭い感じになってプンプンしてますが、ちょっと調べる機会があったのでついでに紹介しましょう。 無料で使えるアイコン(使用範囲はもちろんサイトを確認してね)を配布しているサイト10個です。 Free Vector Icons Free Vector Icons シンプルなアイコン。 ダウンロード形式はai ARROW […]
  • SublimeText3のアイコンを探した旅:2014年冬SublimeText3のアイコンを探した旅:2014年冬 この記事はSublime Text Advent Calendar […]
  • ハロウィン用の無料素材(壁紙・フォント・アイコン)のまとめ2015年版ハロウィン用の無料素材(壁紙・フォント・アイコン)のまとめ2015年版 昨日の記事でも書いたように、ハロウィンに乗っかることにしたので、その時に無料で使える素材を調べてみたのでついでにまとめて公開することにしました。 なお、利用する際はそれぞれの配布元サイトで規約を確認してから使用してくださいね。 時間の経過とともにリンク切れなどが起こる可能性もあります。 こちらで気づいたらその分は変更しますが、漏れてたらご指摘いただけるとありがたいです。 […]
  • 無料でも使えるクラウドストレージサービスのまとめ【2016年4月23日現在】無料でも使えるクラウドストレージサービスのまとめ【2016年4月23日現在】 先日僕も使っているクラウドストレージサービス「Copy」が2016年5月1日でサービスを終了することを発表しました。 Copy and CudaDrive Services will be […]
  • インフォグラフィックスまとめサイトのまとめインフォグラフィックスまとめサイトのまとめ 仕事でもたまにインフォグラフィックス的な事を頼まれる場合がありまして、迷った時とかに参考になるサイトを見てアイデアが閃いたりするっていう事があるわけです。 ミンサガ風に言うとパンチアウトをしていないと明王九印を閃かないのと同じように、良いアイデアや閃きは同じ系統のものを繰り返し自分の中で消化しないと出てこない場合もあると思います。 ちなみにインフォグラフィックスって何かを […]
  • 無料、低価格の写真素材のサイトのまとめ(2015/7/3改訂)無料、低価格の写真素材のサイトのまとめ(2015/7/3改訂) サイトを作るときに、イメージ要素として写真を使う事がよくあります。 サイトに使用する画像は撮影してオリジナルのものを使うか、ストックフォトなどでダウンロード出来る素材写真を使用するかのいづれかが一般的です。 サイトで使用する画像は、撮影した写真データを使用する方がオリジナリティを出す事ができるし、より明確にかつ的確にイメージを伝えやすくなるので基本的には撮影したデータ […]

よく見られている記事

ふにろぐナビ

About

ふにろぐとは?

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。
その他には僕自身の考え方なども書いています。

このブログについて

ふにすのお仕事

このブログを書いている「でぐち」がしている「ふにす株式会社」は大阪と京都の間にある高槻という街で、Webの運用サポートを中心に活動しています。
Webサイトの制作とかもしてますが、ブログを続けるためのサポートとか、会社をどうやってPRすればいいんだろうとか、そういうふわっとした事を相談してください。
どういう内容を相談できるのかをまとめましたので、参考にしていただければと思います。

ふにすにはどんな仕事が頼めるの?

ソーシャルとか。

NewEntry

はてブで人気の記事

PickUP

Webサイトの運用に関する情報

ふにろぐで取り上げたWebサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

Category

Month