物足りない時にちょっとだけ工夫するとデザインは一気に良くなる＜ボタン編＞

ワンパターン化しがちなボタンのデザイン。
四角の中にテキストを入れるだけのシンプルなボタンではなにか足りない…と行き詰まってしまった時に、チョイ足しでできるアイデアを集めてみました。

真四角→角にアールをつける

フラットデザインが主流の今、四角い要素が多いので、角を少し丸くするだけでも差別化し、目立たせることができます。

日本語から英語にしてみる

日本語のボタンは読みやすくユーザーに優しい、という利点はもちろんありますが、本文などが日本語の為、日本語ボタンのデザインがシンプルな場合などは、埋もれてしまう危険性も。
簡単な単語であれば、あえて英語にするのも一つの方法です。
日本語は文字数が多くなりがちなので、英語にすることで余白が生まれ、ボタンデザイン自体もスッキリさせることができます。

矢印や吹き出しでボタンに導く

ボタンのまわりに余白が必要となりますが、「ここにボタンがあるよ！」と主張するイラストや吹き出しをプラスしたレイアウトデザインです。

いっそ丸にしてみる

最初に角丸にする案をだしましたが、その発展型です。
四角いボタンがほとんどなので、いっそのこと丸にしてしまうのはどうでしょうか。インパクト大です。
遊び心のあるサイトでは使えそうなアイデアです。

グラデーションをかける

フラットなボタンが埋もれてしまう、そんな時はグラデーションで変化をつけてみてはどうでしょうか。
センスのいいグラデーションパターンを生成することのできるサイトもありますから活用してみてください。

おすすめのグラデーション生成サービス

GradPad
http://www.ourownthing.co.uk/gradpad.html
直感的に操作できるグラデーション生成ツールです。
上部のボタンからCSSを吐き出すことが可能です。
また、ギャラリーにはすでに多数のグラデーションパターンが登録されているので、それを呼び出しベースにして自分好みに変更することも可能です。

Gradient Background Colors
とにかくたくさんのグラデーションパターンを見たい、そんな時にはこれです。
卵型のパレットが満載です。
卵の右下の「Copy CSS」でコードのコピーが可能です。

ボタンにアイコンを入れる

文字だけのアイコンに一つアイコンを挿入するだけで、印象はかなり変わります！
すでにあるボタンを少しの回収で改善したい場合におすすめ。

ゴーストボタンにしてみる

ボタンといえば背景に馴染んでしまわぬようしっかり区別化するのが￥基本的なセオリーですが、あえてあまり主張せず、デザインに寄せたゴーストボタンにしてみるのはいかがでしょう？
デザインを邪魔しないのは魅力ですね。

人物を横に配置してみる

色や形を工夫することで目をボタンへ引きつけようと工夫してきましたが、人間が一番目を引くものってなんでしょうか？
それは「人間の顔」！！
ボタンの横に人物を配置すると、嫌でも人間の目はそこに引きつけられてしまいます。

CSSで動きをつける

マウスオーバーした時に少し動きがあると、それだけでもボタンらしさがグッと増します。
押し込む動きや、揺れる動きなど、いろいろCSSが用意されています。

Button

まわりの要素をひかえめにする

ボタンを目立たせようと色々と工夫して来ましたが、原点に立ち戻ってまわりのデザインを確認してみましょう。
ボタン以上に情報が多すぎたり、画像が溢れかえったりしていませんか？
まわりの要素を控えめにすることで、本来のボタンを目立たせる、という見方も一度してみましょう。

こちらの記事も合わせてどうぞ！
→ 押したくなる！？ユーザーに優しいボタンを考える