見栄えの良いボタンを作るための4つのポイント

Webデザインやアプリデザインには付き物のボタンのデザイン。様々な色・形・大きさのボタンがありますが、見栄えの良いボタンを作るにはどうしたら良いか、押さえるべきポイントはどこにあるのかを考えてみました。

ボタンデザインの4つのポイント

  • 見慣れた色を使う
  • 文字を見やすくする
  • ボタンの目的を考える
  • サイトのテイストに合わせる

最低限、上記の4つをおさえておけばクオリティの低いボタンにはならないかと思います。

見慣れた色を使う

pic_bt_p11

パッと見た時に目に付くボタン本体の色はボタンデザインにおいて重要な要素の一つです。

彩度の高すぎる色や急激な変化のついたグラデーションは扱いが難しく、見栄えの悪いデザインに繋がりやすいように感じます。逆に、無彩色や淡い色、適度に鮮やかな色、緩やかなグラデーションは扱いやすく、見栄えが良くなりやすいです。

この「扱いにくい色」と「扱いやすい色」を分けている物が何なのかを考えると、おそらく、人間は現実世界で見慣れていないものには違和感を覚えたり不快に感じたりするのではないかと僕は考えています。

では地味な色しか使えないのかというとそうではなく、「扱いやすい色」の方にもショッキングピンクがあるように、自然の世界にも花の色など鮮やかな色はたくさんあります。ただし、左上のビビッドすぎる緑や青はあまり見かけないのではないでしょうか?

そういった事から、基本的には「現実世界(主に自然)で見慣れた色を使う」というのが見栄えの良いボタンを作るポイントの1つかなと考えました。

文字を見やすくする

pic_bt_p2

文字は読めなければ意味がないので、読みやすくなるようにコントラストをつける必要があります。基本的には、暗い背景色には明るい文字色、明るい背景には暗い文字にしておけば大丈夫かと思います。

更にもう一工夫するとすれば、目立たせたい時は境界線、洗練させたい時はドロップシャドウを使います。

境界線を入れることで、文字色・境界線・ボタン色の3段階で色を変えることができ、そのコントラストによってより目立たせる事ができます。ただし、コントラストのつけすぎはチープな印象も与えかねませんので、とにかく目立たせれば良いというものでもありません。

逆に、ドロップシャドウや光彩を使うと境界部分のコントラストが和らげられ、文字がボタンに馴染んで洗練された印象を与えます。ここでも大事なのは現実世界で見慣れているかどうかという所で、現実世界では見慣れない不自然な影の付け方は違和感を生みます。

ボタンの目的を考える

pic_bt_p3

ボタンのデザインであろうと、サイト全体のデザインであろうと、デザインする上で大事なのはいつも「それが何の目的で作られるか」という事です。

何のボタンか?ということを抜きにしてボタンをデザインする事はできません。

そのサイト内、ページ内でのボタンの役割を把握した上で、それを達成するのに最適な形を理屈で考えて探るわけです。

気をつけたいのは、同じ種類のボタンでも、状況によって最適な形は異なるという事です。例えば、アプリを紹介するサイトのトップページではダウンロードしてもらう事こそが目的なので、ダウンロードボタンは大きく扱われるかもしれません。

しかし、同じ「ダウンロードボタン」でも必ず扱いを大きくする必要があるという訳ではありません。

ダウンロードボタンが複数並ぶような状況では、先ほどの例と同じく大きく扱ってしまうと、隣接したボタン同士が強烈に主張し合う酷いデザインのページになってしまいます。

サイトの雰囲気に合わせる

pic_bt_p4

上のサンプルではあまりバリエーションを出せなかったのですが、サイトによって様々な雰囲気があるので、それに合わせたボタンデザインが必要になってきます。

極端な例を出すと、ふわふわした可愛い感じのサイトに、重厚でメタリックなボタンは合いませんよね。全体的に淡いトーンで抑えたサイトにビビッドなボタンも合いません。必ずサイトの雰囲気に合ったボタンデザインが求められます。

以上4点をおさえることで、理屈に基づいて見た目がそれっぽいボタンを作れるようになるかと思います。

コメントを残す

メールアドレスが公開されることはありません。