Button少し前までは思わず押したくなるよう魅力的なデザインのボタンというのは画像を使わないと表現することが難しかった。CSSだけだと古くさ~いデザインになってしまうことは確実だったからだ。
しかしiPhoneのRetinaDisplalyを筆頭とする高解像度ディスプレイを搭載したスマホでネットサーフィンする今となっては、逆に画像を使用するとスマホの高解像度ディスプレイがアダとなり、ぼやぼやのボタンが表示されてしまう。さらなる挙げ句には画像のサイズによりページの読み込み速度にも良くない影響を及ぼしてしまうという状態になってしまった。

かといってもCSS3だけでグラデーションやシャドウをうまく表示するにはプロパティを複雑に組み合わせたり、各ブラウザへ万能に対応するためにけっこう長ったらしいコードを書かなければいけない…。そんな苦悩に悩むWebデザイナーを助けれくれるのがCSSボタンジェネレーター。
ジェネレーターを使うことでこれまで画像で作っていたボタンに近いデザインを簡単に表現する事が可能になり、それぞれが使用しているディスプレイにも自動で最適化されるのでオススメだ。

ボタンジェネレーターおすすめ4選
そこで今回紹介するのはCSS3に詳しくないと表現できないようなボタンを簡単に作成することが出来るボタンジェネレーターを提供してくれるサイト。これを使えばまるでPhotoshopのような感覚でボタンを作成出来るうえ、コードをコピー&ペーストするだけで実装できる。
Webデザイナーなら(手抜きするために)ぜひ覚えておこう!

CSS Button Generator

あらかじめたくさんのテンプレートが既に用意されており、コードのコピーもあっという間。そこまで手の込んでいないボタンデザインならここであっという間に作れるぞ!
CSS Button Generator: Create HTML and CSS Button Styles

ss Gradient Button

グラデーションのかかったボタンをすぐに作れるサイト。即時プレビュー機能もあるが、まったくCSSが分からない人にはちょっと難しいかも。
Css Gradient Button – create css button

Button Maker

サイズやフォント、ボーダーレイディアス(角丸)が直感的に操作できるうえに、色味もカラーピッカーと同じ要領で作れるのでCSSがまったく分からない人でも理想のボタンが作れそう。かなり扱いやすいのでオススメ。
Button Maker

CSS Drive CSS3 Button Generator

すごく独特で派手なボタンを作りたい人にオススメ。シャドウやマウスホバー時の色などもすぐに作れるのでCSSに多少詳しい人は一番自由度が効くかも。
CSS Drive CSS3 Button Generator

これからもどんどん表現の幅が広くなり、古いIEを除けばいろいろな人が見れるようになっていくCSS3。
特にランディングページなどのコンバージョン率はボタンデザイン一つで大きく左右されるので、スマホ全盛の昨今には早めにボタンデザインを刷新しておくのが良い判断かもしれない。

Google Ads