無料で使えるアイコンはいくつあっても困りませんね。

クオリティのかなり高いアイコンが無料で公開されているアイコンサイトが大量にありますね。

今回はそんな使えるアイコンサイトをまとめてみました。

Iconfinder | Icon search made easy

おなじみアイコンサーチIconfinder

Icon Seeker

キーワードとサイズで絞り込めるアイコン検索

Very Icon

20,000点を超えるアイコンストックから検索ができます。

Icons Search Engine

こちらもキーワードとサイズで検索できます。

ICONlook.com

とっても見やすいアイコン検索

Easy Icon Finder

検索結果の表示の仕方がユニークなアイコン検索

iconlet.com – icon search engine

小さいサイズのアイコンがいっぱいです。

Challenger – Breaking boundaries

こちらもたくさんあるアイコン検索

VistaIcons.com World

VISTA向けに作られたアイコンがいっぱいです。

Icon Easy, free download ico png icons, desktop icons, vista icons

15,000点を超えるハイクオリティなアイコンが紹介されています。

Free Icons Web

こちらもアイコン登録数15,000を超えるアイコンサイトです。

Icon Archive

こちらは23,800点を超える巨大アイコンサイトです。

Free Icons Download

ロイヤリティフリーのアイコンがたくさん

:: Ganato.com :: FREE Stuff for Web Design :: Psd Icons

24セットのアイコンがフリーでダウンロードできます。

Pixelgirl Presents Free Icons

Mac用、Windows用に分けてかわいらしいアイコンがたくさんです。

PixelPressIcons

かなりクオリティの高いアイコンが公開されています。

Iconfactory : Freeware

可愛いアイコンがたくさん公開されています。

Free Icon Downloads / OS X & Windows XP Icons

個性的なアイコンが公開されています。

iconPot – totally free icons

丸みのある柔らかいアイコンがたくさんです。

Free Icon set – Icon Eden

かわいらしいアイコンがフリーでダウンロードできます。

IconsPedia – Free Icons

カテゴリーに分けられてアイコンがたくさん掲載されています。

Yellow Icon : Free icons

かなりハイクオリティなアイコンが公開されています。

Websiteicons

こちらもたくさんのアイコンが公開されています。

Free Icons – Download Free Mac OS X Icons and Flags | Icon Drawer

アイコンのショップから無料で公開されているハイクオリティのアイコンセット

iconaholic.com | downloads

ブログ形式でアイコンが更新されています。

Iconbulk

かわいいアイコンがたくさんあります。

Fast Icon – Free stock icons

こちらもアイコン有料サイトから公開されている無料アイコンです。

CrystalXP.net

しっかり作り込まれたアイコンがたくさん。

InterfaceLIFT

更新は長く止まっているようですが、掲載数はたくさんあります。

IconBuffet | Free Delivery, Free Icons

かわいらしいアイコンがたくさんありますね。

Zyotism:Aesthetics

とってもきれいなアイコンセットです。

famfamfam.com: Icons

かわいらしい小さめのアイコンをお探しなら。

IconTexto

無料アイコンが公開されるアイコンブログ。

www.fordesigner.com

ベクター形式で公開されているアイコンがたくさんです。

Smashing Magazine

おなじみ人気ブログSmashingMagazineさんでもたくさんの無料アイコンを公開されています。

Eyecandy for your KDE-Desktop – KDE-Look.org

こちらもかなりたくさんのアイコンが掲載されています。

DHTML Site – Free 16×16 Icons

16×16の小さめサイズのアイコンがまとめられております。

手書き風な要素をウェブデザインに取り入れたサイトが多くなってきていますね。

ちょっとしたポイントに手書き風な要素を加えると、柔らかい印象になっていいですよね。

かといって、マウスやペンタブレットなどを使って自分で手書きしてみても、なかなかいい感じが出せない方が多いのではないでしょうか？

手書き風デザインは、あまり上手すぎてもダメだし、かといってめちゃめちゃへたくそだと、それはそれで微妙ですよね。いい感じのうま下手感が出したいですよね。

今回は、手書き風のデザインに使えそうなサイトをインスピレーション、ブラシ、チュートリアル、フォント、アイコンなどいろいろと集めてみました。

インスピレーション編

まずは、手書き風のサイトをたくさん見て、お勉強。インスピレーション編です。

100+ Resources & Inspiration for Hand Drawn Design

これだけで、結構お腹いっぱいになってしまいそうなくらいです…。手書き風の要素を上手く取り入れられたウェブサイト、ブラシ、フォント、テクスチャなどがたくさん集められております。

SF – web design style: sketchy

こちらもきれいな手書き風サイトがたくさん集められておりました。

Design Meltdown § Sketchy

こちらも、インスピレーションサイトです。こちらから、まとめて見ることが出来ます。

ブラシ編

実際に描くにはちょっと難しい…。というあなたは、ブラシを使えば簡単に手書き風デザインが作れますね。

Collection: Sketchy Brushes

かわいい手書きキャラクター系のブラシがまとめられています。

Freebies: Sketchy Doodles Photoshop Brush Pack | Arbenting

子供が書いたようなかわいらしい矢印や記号などのブラシです。

Freebies – Sketchy Arrow Photoshop Brush Pack | Arbenting

手書き風矢印のブラシです。いろいろ使えそう。

Design Blurb » “Sketchy” Design Resources

ブラシやアイコン、テクスチャなど、手書き風まとめです。

deviantART

deviantARTにも、手書き風ブラシがたくさんありました。

チュートリアル編

実践編です。手書き風デザインにいろいろ挑戦してみましょう。

Advanced CSS Menu

手書き風なメニューを作るチュートリアルです。

Create a Sketchy Hand-Drawn Camera Illustration in Illustrator – VECTORTUTS

Illustratorで描く手書き風カメラのチュートリアル。

Create a Sketchy Work of Art in Just 10 Steps – psdfan.com -

写真をもとに手書き風のイラストを描く方法を10ステップで紹介されていました。

フォント編

手書き風フォントもいろいろ使い道がありますよね。

Janko At Warp Speed | 10 sketchy fonts for web designers

こちらは、手書き風の欧文フォントが１０種類。

!Sketchy Times, Regular – Abstract Fonts

手書き風なフォントが豊富な、フォントダウンロードサイトです。

フリーで使えるいい感じの手書き風フォント特集（日本語も）*ホームページを作る人のネタ帳

ネタ帳さんで、いい感じの手書き風フォントをまとめられておりました。手書き風な日本語フォントはいろいろ使えますね。

Fontifier – Your own handwriting on your computer!

自分で書いた文字をフォントにしてくれるサイトです。

アイコン編

手書き風のアイコンはかわいいものが多いですね。

Collection: Sketchy Icons | Resource Pile

微妙なうま下手感がたまらない、かわいいアイコンを１０種類まとめられてます。

Hand-Drawn Blogging Icon Set – psdfan.com -

こちらもいい感じの手書き風アイコンですね。

約１年前に書いた『リストに使える小さいサイズのアイコン素材集 ５サイト』

小さなアイコンをリストに使うだけでも見栄えは全然違いますね。

１年前に、見落としていたサイトや、新しく更新されたサイトなどなど、まだまだリストに使えそうなアイコンがたくさんあったので、まとめてみました。

websiteicons.com

カテゴリに分けられていて、とっても見やすいアイコンサイト。リストだけでなく検索やカートのアイコンも使えそう。

websitebullets.com

無料で使えるリスト用のアイコンサイト。透過GIFになっているので、サイトの背景の色を気にせず使えますね。

Icon Bee - Gorgeous Free Icons

リストだけでなく、無料のアイコンを紹介してくれるサイト。きれいなサイトですね。

FreeIconsWeb.com

いろいろ使えそうな矢印アイコンがいっぱいです。

pooliestudios.com

ファイル系のアイコンが豊富です。

Crystal Clear – Wikimedia Commons

SVG形式でアイコンが公開されています。

QBullet Legend· Michael Herrick

マウスオーバーすると、アニメーションになっているアイコンなどもあります。

stemplate.com

こちらも、シンプルな矢印アイコン。

Sweetie | Cute and clear icons

数は少ないですが、とってもかわいいアイコンです。

famfamfam.com: Mini Icons

とってもかわいいアイコンがたくさんあります。

先週、GoogleのFaviconが変更されましたね。

One Fish, Two Fish, Red Fish, Blue Fish

これまで、8年半使われていた以前のFaviconを一新。シンプルですっきりとしたFaviconに変更されました。iPhoneや、その他のモバイル系にもきれいに表示させる為の変更だそうです。

この新Faviconに決定されるまで、300パターン以上のデザインを作って検討されたそうです。とっても小さなアイコンで、一見、簡単そうなデザインですが、さすがいろいろと検討されてしっかり作り込まれているんですね。

本日は、Faviconのインスピレーションです。たくさんのFaviconを参考にして、みなさんも是非こだわりのFaviconを作ってみてくださいね。

fineicons.com

かわいらしいFaviconがたくさんですね。

thefavicongallery.com

マウスオーバーすると、右側に拡大表示してくれるFaviconギャラリーです。

flavicon.com

シンプルな物から、ちょっぴり凝ったFaviconまでいろいろ集まってます。

iconj.com

ダウンロードもできる、Faviconのシェアサイト。

deltatangobravo.com

更新日はかなり昔ですが…とってもきれいにFaviconが並んでいます。

favicon.co.uk

Faviconジェネレータもついているギャラリーページ。

julian-bez.de

１ページに大量のFaviconが並んでいます。読み込むのに少し時間がかかるかも。。

faviconize.com

Faviconギャラリーです。シンプルでとっても見やすいですね。

MpP Favicon Gallery

カテゴリに分けられてFaviconがずら〜っと並んでいます。

SmashingMagazine

SmashingMagazineのFaviconまとめは、現在第６弾。毎回きれいなFaviconをまとめられております。

Favicon ジェネレータ

ここからは、ジェネレータです。ギャラリーサイトでお気に入りのFaviconを見つけたら、早速自分でもつくってみましょう！

favicon.ico Generator

ピクセルごとに色を塗って、お絵描き感覚でFaviconが作れるジェネレータです。下にプレビューが表示されるので、仕上がりがどんな感じになるか確認しながら、お絵描きできます。

Favicon Editor

こちらもお絵描きタイプのFaviconエディター。

Genfavicon

アップロードした画像をトリムてきます。サイズも16×16, 32×32, 48×48, 64×64, 128×128の４種類から選択できます。

favikon.com

こちらもアップロードした画像の一部を切り抜いてfaviconを作ってくれます。

Free Favicons

こちらも画像をアップロードするタイプ。テキストを入力するとテキストがスクロールして表示される、アニメーションfaviconが作れます。

早いもので、１月も既に終わってしまいましたね・・・。

２月のイベントといえば、やっぱりバレンタインデーです。

アメリカでは、男女問わず（というかむしろ男性の方が女性に）プレゼントを送ります。

本日は、バレンタイン・デザインに使えそうな、Photoshopのチュートリアル、ブラシ、そしてアイコンをまとめてみました。

Photoshopチュートリアル

Saint Valentine Creations

ちょっぴり大人な感じのバレンタイン・チュートリアル

Rose for Saint Valentine´s Day

中央のバラがとってもきれいなチュートリアルですね。

Valentine´s day hearts

こちらはポップな感じ。

Splash My Heart Wallpaper

ハートがはじける？

Creating a flower bouquet with heart

こちらも、なかなかきれいですね。

Valentine Day Background

グラデーションがとってもきれいです。

Vector Valentine Heart, Beginner – Intermediate

矢がハートに突き刺さる～。

Glossy Heart Photoshop Tutorial

光沢のあるハートが作りたいときは

Photoshopブラシ

Photoshop Heart Brushes Collection

こちらは、ハートのブラシがいっぱい紹介されています。

↑こちらのまとめの中から、いくつかピックアップ

Free Photoshop brushes: Hearts

きれいなハートのブラシがいっぱいです。

My Vintage Valentine – Free Valentines Photoshop Brush Set

ビンテージな感じのブラシ

Valentine Brush Set

こちらもきれいなブラシが沢山

Valentastic Valentine

こちらのブラシもとってもかわいいですね。

アイコン

Valentine’s Day Icons (5 Icons)

とってもかわいいアイコンですね。でも、ハートが血を流してます・・・

Fruity Hearts Icons by Flamelia Design

フルーティなハート型アイコン。

Heart by tea00

ハートを使った、透明感のあるアイコン。

RSS heart PNG Icons

ハート型のRSSアイコンです。

先日ご紹介した、和風なPhotoshopのブラシ。

Photoshopのブラシもとっても便利ですが、カスタム・シェイプも無料でたくさん配布されているので、いろいろ使えそう。

デフォルトでも矢印や簡単なイラストなどが、たくさん入っているので、シェイプツールを活用されている方は多いのではないでしょうか。

お気に入りのシェイプを見つけて、あらかじめPhotoshopにインストールしておけば、いつでも、すぐに使えますね。

本日は、そんなPhotoshopのカスタム・シェイプをまとめてみました。

1. Ladyoak

こちらは、シェイプツールが大量にリストされてました。シェイプの内容も見れるので、簡単にお気に入りのシェイプが見つかりそう。

2. Foliage Shapes (Huge master set) | Dezignus.com

木の葉を集めたシェイプセットです。下のサンプルのような画像が簡単に作れますよ～！

3. BioRUST.com

いろんなカスタムシェイプがいっぱい集められております。

4. Photoshop Custom Shapes | deviantART

よくご紹介させていただいているdeviantARTさん。カスタムシェイプも豊富ですね。

5. Custom shapes for Photoshop

こちらでも40セットを超えるカスタムシェイプがまとめられております。

6. Free Photoshop – Free Photoshop Shapes and demos for download

以前にもご紹介した、ページです。

7. Over 10000 free Photoshop shapes | Mike’s Quarter

10000種類を超えるカスタムシェイプをどうぞ。。

8. Free Photoshop Layer Styles and Shapes by Shelby Kate Schmitz | About.com

ちょっぴりゴージャスな？装飾系カスタムシェイプを150種類。

インストールの方法がわからない方は、以前このブログでご紹介した『Photoshopの無料シェイプを使って簡単にアイコンを作る方法』からどうぞ～。

リストについてる小さいポッチを画像にしてみるだけでも、いい感じになりますね。。

っちゅうわけで、本日はリストに使えそうなアイコンにしぼって集めてみました。。

1. Bullet Madness

200個のリストに使えそうなアイコン素材が並んでおります。。

2. 300imagesfrom1800sites

サイト名の通り、300個のアイコンが並んでおります。そのうち、リストアイコンに使えそうな、やじるしアイコンなど多数。。

3. Xbiz studio

こちらも、やじるし系を中心に小さめアイコンがいっぱい。

4. Free Graphics World

こちらは、ちょっと大きめですが・・・Photoshopなどで小さくすれば、使えそう。。

5. Free Tiny Small Mini Icons Bullets

小さいアイコンを集めたサイトですね。。

先日、このブログの読者の方からメールをいただきまして。。。

その方はアイコン素材をお探しとの事でして・・・

既に色々なところで無料アイコン素材をまとめられているので、今回は大きめアイコン(32 x 32以上。。。)にしぼって、まとめてみました。。

マック風のアイコン中心ですね。

こんなアイコンを自分で一から作ろうと思うと一日仕事になりそう・・・しかも、どれもクオリティの高いものばかり。。

そんなアイコンをクリックひとつでダウンロードできちゃうんですね。。。

1. The Yellow Icon

2. Fast Icon

3. Leo’s Icon Archive

4. Xi4Dox

5. Icon-King

6. Free Icons

7. silvestre

8. Ganato

9. Tango Icon Gallery

10. ColorCons

先日、たまたまかっこいい、3Dのアイコンを作って配布されているサイトを発見いたしました。

どうやら、作者の方は中国人？の方のようです。
なかなかかっこいいアイコンですねぇ。

っちゅうわけで、わたくしも、このアイコンパクって・・・
はてなブックマークの3Dアイコンを作ってみました。。。

う～ん。。。なんだかイマイチ？

まぁ、せっかく作ったので、とりあえず、無料で配布しま～っす。

ここからダウンロードしてくださいな。

ついでに、このブログのアイコンも作ってみた。。誰も使わんか。。。

デザインblogランキング

これって、意外と知らん人多かったんですねぇ。

こんなんですわ↓

ブラウザのURLの横っちょに出てくるアイコンですわ。
お気に入りに追加したときにも出てくる小さいアイコン。

英語では、favorite icon略して、favicon（ファビコン）って呼ばれとります。

では、では、今日は簡単なファビコンの設定のお勉強ですわ。

16px×16pxで作られるのが一般的なようで・・・

拡張子はicoで作ってくださいな。う～ん。

なんだか、めんどくさそうですなぁ。。。

っちゅうわけで、簡単にファビコン作ってくれるサイトをまとめてみたのじゃ。

Dynamic Drive
ファイルをアップロードするだけで、favicon.icoを作成してくれる便利サイト

favicongenerator
ここもファイルをアップロードするだけで、favicon.icoを作成してくれる便利サイト

degraeve
こちらは、点に色を塗っていってfaviconを作るツール。塗り絵みたいでおもろいかも。

MpP Favicon Gallery
faviconのデザインに迷ってしまう方はこのギャラリーでサンプル見放題！

こんな感じで作ったfavicon.icoをＦＴＰでサーバーにアップロードして・・・

↑のコードをコピーして、ドメイン名を書き換えて、htmlファイルの<head>～</head>の間に貼り付けたら出来上がり～！ですねん。

デザインblogランキング