無料でも使えるアイコン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運用の情報や考え方などを発信するブログ「ふにろぐ」を定期的に更新し、情報配信をしています。
また、Googleアナリティクス認定資格を取得しているので、アクセス解析を用いた分析などの手法でお客様のホームページの成功をサポートしています。
本社のある大阪府高槻市で「ふにすWeb相談所」を開設し、
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
Webの運用に関するお悩みや、ホームページで成果が出せないお悩みをお持ちでしたら、お気軽にご相談ください。
お問い合わせはこちら

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

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

ふにろぐとは?

でぐち

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にホームページの運営をしている企業のご担当者様向けに、「ホームページ/Webサイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。

このブログについて

ふにす株式会社

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

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

ブログ内検索

サービス

ふにすWeb相談所

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

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

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

お問い合わせ

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

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

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

LINE@

最新記事

カテゴリ別記事一覧

月別記事一覧