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

Publish2015/06/24(水)

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

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

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

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

ふにろぐとは?

でぐち

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

このブログについて

ふにす株式会社

ふにす株式会社は大阪の高槻にある「Webを起点に会社の成長を応援するパートナー」をモットーに、Webにまつわるいろいろな問題を解決する、サポートをする会社です。
ホームページでお問い合わせを増やしたい、もっとたくさんの人に見てもらいたいなど、ホームページ/Webサイトを活用したい方向けの活動を行っています。
また、ホームページの作成や、外部パートナーとしての運用サポートなど、幅広くWebにまつわる諸々のことをおこなっております。

ブログ内検索

サービス

ふにすWeb相談所

ホームページの運用お得情報

ホームページ/Webサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

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

お問い合わせ

ホームページを成功させたいとお考えの方はお気軽にご相談ください。
ご相談は、下記の中からお好きなものを選んでいただければ大丈夫です。

  • メールで問い合わせる
  • チャットワークで問い合わせる
  • Facebookで問い合わせる
  • Twitterで問い合わせる

LINE@でも相談を受け付けています。
QRコードから友達登録を行って、メッセージを送ってください。

LINE@

最新記事

カテゴリ別記事一覧

月別記事一覧