ボタンのデザインを変えるだけでもサイトの印象は大きく変わるのではないでしょうか。

本日は、ボタンやバッジのデザインに関するサイトをいろいろとまとめてみました。

ButtonBuilder – Web Button creation for Mac OS X

ボタンを作成するソフトです。あらかじめ用意されている50種類のボタンのスタイルから選んで、文字をのせるだけ。PNG、JPGで保存できます。とってもシンプルなんですが、結構使えるMac用のフリーソフト。

ジェネレータ

ButtonBoost – The Button Generator

現在150種類ほど、かなり豊富なスタイルが用意されているボタンジェネレータです。

Buttonator

きれいなボタンがいろいろなジェネレータ。

My cool button

とってもシンプルなボタンジェネレータです。

Free Web Button Maker – ButtonGenerator.com

中には、有料のメンバーのみのボタンもありますが、無料でコーディングされたファイルをダウンロードできます。

Web 2.0 Badges

とってもきれいなバッジジェネレータ

Fresh Badge Generator

こちらもバッジのジェネレータです。

ベクターダウンロード

77 Vector Buttons hot off the press.

とってもきれいな77種類のベクターボタンがダウンロードできます。

165 Vector Icons, Now in 5 Colours

こちらは、アイコンも含まれていますがボタンもいろいろあります。

Free Vector Buttons and Icons – Metal and Glass

グラスの感じがきれいなボタン素材です。

72 Free Vector Glass Buttons and Bars

シンプルなボタン素材。

Free Vector Badges – Glass

きれいなバッジもベクターでどうぞ。

チュートリアル

39 Photoshop Button Tutorials You Should Have in Your Arsenal

39種類のきれいなボタンを作るPhotoshopのチュートリアルがまとめられています。

45 Photoshop Tutorials for Better Navigation

こちらは、ナビゲーションのチュートリアルですが、ボタンっぽいものも多かったので、ご紹介。

Photoshop Button Maker

とってもリアルなバッジを作るチュートリアルです。

Flag Button Devkit

国旗のバッジを作るチュートリアル。

Handy Web 2.0 Icons In Photoshop

かわいいバッジを作るPhotoshopのチュートリアル。

How to design a cool web 2.0 button in Illustrator and Photoshop

質感のあるボタンをIllustratorで作るチュートリアル。

Toxiclab.org – Web buttons tutorial

シンプルなボタンを作るPhotoshopのチュートリアルです。

インスピレーション

107 Add to Cart Buttons of the Top Online Retailers

いろいろなサイトの｢カートに入れる｣ボタンが集められています。ご参考に。

凝ったデザインのブログやサイトを作りたいけど、何もないところから、スタートするのは結構大変ですよね。

そんな時には、テンプレートジェネレータがおすすめです。

今回は、なるべく感覚で使えそうなウェブデザインのテンプレートジェネレータをいくつかまとめてみました。

Wix.com – Make free flash websites

こちらのサイトは、flashのサイトを作るときに使えるジェネレータです。残念ながら、まだClosedBetaバージョンで、ログインすることができなかったのですが、既に、いろいろとテンプレートが公開されていて、なかなか期待できそうなサービスですね。正式オープンが楽しみです。

dotemplate.com – Free online web template generator

こちらは、XHTMLとCSSのテンプレートを生成してくれます。サンプルからテンプレートを選んでカスタマイズできます。

Weebly – Create a free website and a free blog

デザインを選択して、エレメントをドラッグ&ドロップしていくだけで、きれいなサイトが出来上がっていきます。

Movable Type Design Assistant

Movable Typeをお使いの方には、便利なデザインアシスタント。

TypePad Design Assistant

こちらは、TypePad版のデザインアシスタントです。

cssez.com – 無料のホームページ・ブログ用デザインテンプレート作成ツール

感覚で使えても、やっぱり日本語で使える方がうれしいですね。。。日本の主要なブログにも対応しているのも便利ですね。

YAML Builder | A tool for visual layout development of YAML based CSS layouts

ポップアップしているウインドウから、いろいろと設定していくと、テンプレートが完成していきます。

Web2.0 – templatr – Template Generator

編集したい部分をクリックして、個別に細かく設定していくことができます。

PsycHo: Free Template Generator

こちらも、templatr同様にクリックして、個別に設定していくタイプ。

Letterpop

こちらのサイトはウェブデザイン用ではありませんが。。。ニュースレター用のジェネレータです。そのまま、送信までできます。一回の送信で25通まで年間250メールまでの送信は無料です。