シンプルなボタンを作るコツ

Jun 1, 2010

グラデーションの奇麗な、派手ボタンもいいですが、作るボタンが全てが派手だとなんかアホっぽいですよね。今回は、小奇麗なサイトでよく見かけるような、シンプルなボタンを作るコツをご紹介します。

ポイント

・グラデーションは、本当にさりげなく(上から下へ、少しずつ暗く)
・枠の色も、コントラスト抑えめに(グラデーションの一番下の濃い色くらいでOK)
・フォントはHelvetica系(ちょい太めのゴシック)
・背景が暗い場合は、文字を白、黒のドロップシャドウを左上方向に
・背景が明るい場合は、文字を黒系、白のドロップシャドウを右下方向に

今回例として作成したこのシンプルボタンは、FireworksPNGデータで以下よりダウンロード出来ますので、ぜひ、色々いじってみてくださいね。

download the source(78KB, Adobe® Fireworks® CS4)

白坂翔
白坂翔

東京のWEB制作会社の代表をしています。デザイナー兼ディレクター。
JELLY JELLY CAFEというお店のオーナーでもあります。MORE

LINE@やってます

'stats.label.addfriend' (MISSING TRANSLATION)

あわせてどうぞ

星ツールだけを使って、ギザギザWeb 2.0風バッジを作る方法