長い間、このブログの更新が滞っており、沢山の皆様から激励のメールなどをいただきました。
いろいろとご心配をおかけいたしまして申し訳ございません。少しずつではありますが、更新を続けていきたいと思っております。

これからもデザインウォーカーをどうぞよろしくお願いいたします！

今回の、テーマはついついクリックしたくなるボタンのデザインをまとめてみました。

ボタンひとつでクリック率やコンバージョンが大きく変わってしまうので、ボタンのデザインや配置はとっても重要ですね。

ボタンのデザインを変えたら、とたんに問い合わせ、売り上げが伸びたりすれば、デザイナー冥利につきますね。

皆さんも、ついついクリックしたくなるボタンのデザインを沢山見て、参考にしてみてくださいね。

“Call to Action” Buttons: Guidelines, Best Practices and Examples

色やサイズ、テキストやアイコン等さまざまな工夫をこらしてデザインされたボタンが沢山紹介されています。特に英語のボタンばかりですが、英語がわからない方でもクリックしたくなってしまうボタンが、やっぱりデザインが優れいてると言う事なんでしょうね…。

Button Design Showcase | Vandelay Design Blog

ボタンデザインのショーケースです。とってもきれいなボタンが沢山集められていますよ。

Call to Action Buttons: Examples and Best Practices

配置や大きさなどにこだわったボタンデザインが開設されています。眺めているだけでもとっても参考になりますよ。

A Look into Registration Buttons in Web Design

ついついクリックしたくなる登録ボタンが沢山集められています。ボタンのデザインひとつで登録数が大きく左右されるので、ボタンデザインはとても重要です。

Web Design Trends: Call To Action Buttons

色、配置、文言、サイズ、余白がとっても重要なボタンデザイン。こちらもきれいなボタンが沢山です。

Good Call-To-Action Buttons | UX Booth

ボタンの配置を変えるとサイト全体の印象も大きく変わります。

4 Design Elements Behind a Good Call to Action | letscounthedays

こちらも沢山の魅力的なボタンが集められています。とても参考になりますね。

10 techniques for an effective ‘call to action’ « Boagworld

ボタンのクリック率をアップさせる10のテクニックが紹介されています。

25 Examples of Convincing Call-To-Action Buttons | Design Shack

25種類のきれいなボタンが紹介されています。

Web Design Trends for 2010: Call To Action Buttons – FrancescoMugnai.com

こちらも沢山のボタンが集まってます。

40+ Effective Call to Action Buttons

40種類の効果的なボタンデザイン。

Call To Action Buttons: Does Size Matter?

複数のボタンのデザインを同時に掲載してクリック率を集計して比べてみるのも面白いですよね。

Create Clean and Fresh Call-to-Action Button + Embossing Text Effect in Photoshop

Photoshopを使って効果的なボタンをデザインするチュートリアルです。

ウェブサイトでもっとも重要なデザイン要素といっても過言ではないボタン。

このボタンのデザインが良くないと、ユーザーにクリックしてもらえなくなっています。

今回は、Photoshopファイルなどで、ダウンロードして使えるボタン素材をいろいろと集めてみました。

WEB UI Treasure Chest v 1.0

ボタンやバッジ、ラベルなどの詰め合わせセット。どれもとってもきれいに作られていますよ！

Buttons PSD by ~El3ment4l

立体感と光のバランスが絶妙のボタンファイル。

Free Button Pack by ~celerayted

とても美しい丸ボタンを3色セットで。

Glowing Web Buttons by ~Mac002

光り輝く4色のボタンです。

Aero Avatar and SIG by =FastNFurious

透明感のある美しいボタン

Vista Button. by ~Uribaani

Vista風のボタン

windows_button.psd by ~vicing

windowsの丸ボタンセット

Vista Button by ~mjarkin

こちらもVista風のボタン

2 Button .psds by =easydisplayname

光沢のあるボタンセット

GreenLightOrb, GUI.S Resource by ~VidarWestfelt

光り輝く丸ボタンですね。

Web Buttons by ~ahmadhania

とってもシンプルですが、カラフルでいろいろ使い道がありそうなボタンセット

Glowing Styles by *Nanie-nyo

こちらもシンプルなボタンセット

PSD file – navigation for web by ~Bartas1503

立体感のある3色ボタンセット

Glass Video Playback Buttons by ~birofunk

ビデオプレーヤーに使えるボタンセット

Website Navigation Menu by ~MericG

こちらはボタンと言うよりはナビゲーションメニューですが…。

Stylish 3D Buttons by ~ahmadhania

メタル風なボタンセット

dsgnstdy02 firstsession sample by ~woopsdez

シンプルなボタンセット

dA UI Button Pack 1 by ~Proxone

こちらもシンプルなボタンですね。

button-download.com

沢山のボタンがダウンロードできるサイトもあります。

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

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

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

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の小さめサイズのアイコンがまとめられております。

今では、かなりたくさんのクオリティの高いアイコン素材が無料で配布されていたりします。

そういったアイコンを利用するのも良いのですが、やはり実際にどうやって作られているのかが気になります。

また、自分でアイコンを作ってみたいと思っている方には結構参考になるかもしれません。

今回は、アイコンのチュートリアルをいろいろとまとめてみました。

Create a Custom Mac OSX Style Ring Binder Address Book Icon

かなり手の込んだ、Mac風のアドレス帳アイコンの作り方です。細部にまでしっかりこだわって作られています。

The Making of an Icon

手書きのスケッチから、仕上げまでテキストエディターのアイコンを作るチュートリアルです。

Create a Jaguar Style Folder Icon

ジャガーのフォルダアイコンの作り方です。質感があっていいですね。

Creating a Cool Yellow Helmet Icon

工事現場の黄色いヘルメットのアイコンのチュートリアルです。実物のヘルメットの写真をなぞって作っているので、とてもわかりやすいです。

Keyfob: Anatomy Of An Icon

下書きから仕上げまで車のキーのアイコンの作り方。

How to Turn Glasses into a Great Geek Icon

実際のメガネの写真から、アイコンを作る方法が説明されているチュートリアルです。

Create a High-Gloss Graduation Hat Icon Design

かなり光沢のある卒業生がかぶる帽子のアイコンです。

Illustrate a Traffic Cone Icon in Photoshop

工事現場などで見かける三角コーンのアイコンチュートリアルです。影や光沢のつけ方など参考になります。

Icon Design Tutorial: Drawing A Pencil Icon

下書きから仕上げまで、鉛筆アイコンのチュートリアルです。

How to Create a Super Shiny Pencil Icon

光沢のある鉛筆アイコンのチュートリアル。

Pencil Icon | Web Design Belfast

かわいらしい鉛筆アイコンのチュートリアルです。

Design a Detailed Compass Icon in Photoshop

方位磁石のアイコンチュートリアルです。

Making digital watch icon

いろいろ使い道のありそうな時計のアイコンのチュートリアルです。

World Icon Tutorial

キラキラがとってもきれいな地球アイコンのチュートリアル。

Create a Shiny Lock Icon Design

光沢のある鍵アイコンのチュートリアルです。

iTune Icon

iTunesのアイコンのチュートリアルです。

Create a TinyTux with Photoshop

ベタなイラストに、光沢をつけて立体感を出してアイコンに仕上げる方法が説明されているチュートリアル。

Safety Icon Design

道路標識のようなアイコンの作り方が説明されています。

How to Make a Folder Icon

一般的なフォルダのアイコンチュートリアル。

以下、さらに追加したアイコンチュートリアルです。

Adobe Photoshop CS3 Style Icons

Make a Handy 3D Vector Calendar Icon

How I Created Turqua: 3d Isometric Vector Icon Tutorial

Photoshop design USB portable speaker logo icon in Photoshop

Create a Vector Film Slate Icon

Photoshop design paint brush logo icon in Photoshop

Photoshop Tools Website Hammer Icon

How to Create a Transparent Battery Icon

Create a Vector Lock Icon Design

Create a Speed Gauge and Watch Icon in Photoshop

Carbon Style Icon

Create An Aperture Style Camera Lens Icon

Mac Os X Mail Icon Style

Icon Design Tutorial – Designing a New Icon In Illustrator

How to Create a Vector Safari Compass in Illustrator

Adobe Bridge Icon

Photoshop website skype icon design in photoshop

先日、人気を集めていたQbrushesさんのエントリー『40+ Free Vector Graphics and Photoshop Brushes For Commercial Use』

40+ Free Vector Graphics and Photoshop Brushes For Commercial Use

商用利用も可能な、ベクター素材とPhotoshopのブラシをまとめられていました。

今回は、まだまだある、商用利用可能なベクター素材をまとめてみました。

Free Vector Art & Graphics

商用利用可能なベクター素材をいろいろな所から集めたギャラリーサイト。大量にありますね。

Free Vector Graphics: Original Vectors Free For Commercial Use

こちらのサイトも、すべて商用利用可能なベクター素材ばかりがカテゴリーに分けて並んでいます。

Commercial Use | Qvectors Free Vector Graphics

こちらは、ベクター素材のギャラリーサイトから、商用利用OKなカテゴリへリンクしてます。

Free Vector Art

このサイトに掲載されているベクター素材すべてが、商用利用OKなわけではないので、ライセンスを確認しないといけませんが…。Licenseの項目にcommercial Useと書いてあれば利用可能です。

I Heart Vector

こちらもすべてではないですが、掲載されているほとんどのベクター素材が商用利用OKでした。こちらもライセンスの確認が必要です。

KEEP DESIGNING

質の高いベクター素材がいっぱいです。

Graphics: Free Smashing Vector Icon Set – Milky

120種類もの、かわいらしいアイコン素材が利用可能です。

Bright! – a free icon set

こちらは148種類のアイコンがベクター形式で公開されています。もちろん商用利用可能。

Best collection of free vector graphics at free-vectors.com

こちらにも、たくさんのベクター素材が公開されていました。

Free Vector Icons Pack, 85 Icons Set | instantShift

使い勝手の良さそうな、ボタン系ベクター素材が公開されています。

LogoTemplater.com

このまま使っても、自分でアレンジしても良い、ロゴのテンプレートがベクター形式で利用可能です。

Free Vector Cliparts | N.DESIGN STUDIO

かわいらしいアイコン素材が公開されています。

Chadlonius.com – Free Vector Resources – Free Vector Illustrations

結構、手の込んだベクター素材がたくさん公開されています。

Round Pixel

使えそうなベクター素材がいろいろありました。

VectorJungle – Free Vector Art, Vector Graphics and Backgrounds

かわいらしいベクター素材がたくさんありますね。

Vector Freeware

シンプルなものから、ちょっと変わったものまで、個性的なベクター素材がいろいろあります。

これで、とうとう３度目の小さいサイズのアイコンシリーズです。

『リストに使える小さいサイズのアイコン Part2』でもご紹介しております。その前の記事はリンク先からどうぞ…。

小さいサイズのアイコンは、リストに使ったり、タイトルの横に添えてみたりと使い道はいろいろありますね。

今回は、幅広いデザインに対応できそうなシンプルなアイコンをまとめてみました。

mIcons – Kostenlose Icons

種類も豊富で、なにかと使えそうなアイコンが公開されています。

bwpx.icns : Paul Armstrong Designs

こちらもモノクロのアイコンがいっぱいですね。色を付けて使っても良いかもしれませんね。

Bitcons | SOME RANDOM DUDE

赤がきれいなアイコンいろいろです。

ShopDev Website Design Blog

ショッピングサイトに使えそうな、かわいらしいアイコンが２セット。

Marko’s Place In Cyberspace

３サイズ、４色のアイコンセットです。

Iconfinder – Search for: Bullet

IconfinderでBulletと検索すると、リストに使えそうなアイコンがいろいろ見つかりました。

Kleines Weblog Iconset

シンプルだけど、質感のあるきれいなアイコン。

Mini Icons Pack 1 – Free icons!

こちらもミニサイズのアイコンセット。

graphicPUSH

有料のアイコンの下に無料のアイコンがいくつか公開されていました。

ちょっとしたデザインのアクセントに矢印素材はとっても便利ですね。

リストに使ってみたり、タイトル部分にさりげなく飾ってみたりと、いろいろ使い道があります。

本日は、矢印の素材をいろいろと集めてみました。

Website Bullets

リストなんかに使えそうな矢印や小さなアイコンがいろいろあります。サイトのデザインもシンプルでかわいいですね。

56 Free Arrow Symbols & Icons

ベクターで56種類のシンプルな矢印素材がダウンロードできます。これは便利

FreeIconWeb.com

小さめの矢印素材がいっぱいです。

Dingsbums Bats Font | dafont.com

こちらは、矢印のフォントです。PCでもMacでも使えます。

deviantART

Photoshopの矢印ブラシもいろいろと使えそう。deviantARTで検索したら、いろいろ見つかりました。

Arrows by ~mezoomar on deviantART

こちらは、きれいなベクター素材。

300 Images From 1800 Sites

こちらは、いろいろなサイトから矢印アイコンを集められています。参考になりますね。

Bullet Madness – free bullets project at Stylegala

リストに使えそうな小さめなアイコンがいっぱいです。矢印以外にも豊富。

Mini Arrow Icon Collection

小さな矢印アイコンコレクション。右クリックでダウンロード。

Iconfinder

矢印アイコンが豊富なIconfinder

Arrow Icons | IconsPedia

こちらもきれいな矢印アイコンがいっぱいです。

Arrows Custom Shapes

前回ご紹介した、とってもかわいいPhotoshop用の矢印シェイプ

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

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

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

本日は、バレンタイン・デザインに使えそうな、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アイコンです。

ショッピングサイトをデザインする際に必ず必要になってくるショッピングカートのアイコン。

サイトをデザインしている時は、『最後に付ければいいやぁ～』っと思っていて、
一通りのデザインを作って、カートアイコンをつけてみると、そのアイコンがデザインに合わなかったり。。。

っちゅうわけで、本日はショッピングカートのアイコンをまとめてみました。。ご参考までに。

1. BartelmeDesign
これは、ものすごいクオリティの高いアイコンですね。。
サイトやアプリケーションなどで、このアイコンを利用する場合は、作者の方に連絡すれば、たいていの場合はOKだそうです。。。

2. 300 Images from 1800 sites
以前にもご紹介しましたが・・・とにかく豊富でとっても参考になります。。

3. Get Elastic
こちらは、カートに入れるボタンがいっぱい。。有名サイトからカートボタンを集められています。。あくまでも参考までに・・・

4. iStockphoto
こちらは、有料になりますが、クオリティの高いアイコンがそろってます。

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

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

1. Bullet Madness

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

2. 300imagesfrom1800sites

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

3. Xbiz studio

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

4. Free Graphics World

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

5. Free Tiny Small Mini Icons Bullets

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