もっとボタンを目立たせてと言われた時の工夫一覧

もっとボタンを目立たせてと言われた時の工夫一覧

Webデザイナーを悩ませる一言「もっとボタンを目立たせて」

シンプルでありながら奥の深いボタン

Webデザインをしていると、よく言われる「もっとボタンを目立たせてよ」という言葉。
なかなかにWebデザイナーを悩ませる言葉です…。

ボタンは、Webデザインの単なる1要素でしかありませんが、とても重要な役割を持っています
ボタンの色や、ちょっとした文言の変更をしただけで、コンバージョン率が大幅にアップした、という事例もありますし、その逆もあります。
いくらキレイなサイトを作ったとしても、ボタンのデザインのせいで、ユーザーを逃してしまうことだってあり得るのです。

シンプルでありながら、奥が深いのが、ボタンのデザインです。

さて今回は、私のWebデザインの引き出しのストックも兼ねて、「もっとボタンを目立たせて」と言われたときのためのアイディア集をまとめていきます。
ボタンのデザインに困っている人は、ぜひ読んでみてください。

もっとボタンを目立たせてと言われた時の対処法一覧

  • カタチを変える
  • グラデーションをつける
  • 影をつける
  • 立体的にする
  • イラスト・アイコンを入れる
  • ホバーエフェクトを加える
  • リップルエフェクトを加える
  • スキューモーフィズム全開にする

カタチを変える

ボタンの形を変えてみよう

四角から円形にしてみよう!

通常、ボタンは長方形が一般的です。
より目立たせたいのであれば、ボタンのカタチを変えてみると良いでしょう。

グラデーションをつける

グラデーションをつける

2色のグラデーションがオススメです!

キレイなグラデーションのボタンは、ユーザーの目を惹きつけます。
過剰すぎず、かと言って、埋もれないような、シンプルな2色のグラデーションがオススメです。

影をつける

影をつけるとボタンぽく見える!

影をつけるとボタンぽく見える!

デザインで困った時の「とりあえずドロップシャドウ」です(笑)。
ただの長方形でも、影をつけるだけで、ボタンっぽく見えてしまうのですから不思議ですよね。。。

立体的にする

立体的にする

立体感を出すと「押せる感」が出る。

ゲームのUIのように、より強い装飾を加えて、立体的に見せるのも一手です。
また、立体的に見せる場合は、ホバー時・マウスダウン時のデザインも併せて用意すると良いです。

イラスト・アイコンを入れる

イラスト・アイコンを入れる

イラスト・アイコンを入れる

テキストだけで味気がない時は、イラストやアイコンを加えましょう。
とある調査によると、「テキストのみ」、「アイコンのみ」、「テキスト+アイコン」の内、ユーザーにとって、最も理解しやすかったのが「テキスト+アイコン」のボタンだったそうです。
サイト内のナビゲーションのボタンとかは、「テキスト+アイコン」のボタンにすると、ユーザービリティが大幅に向上するかもしれませんね。

イラスト・アイコンを入れる時は、とにかくシンプルなモノを選びましょう。
また、線幅やテイストはテキストと合わせたほうが良いです。

ホバーエフェクトを加える

ホバーエフェクトを加える

ホバーエフェクトでインタラクティブに!

インタラクティブな表現は、ユーザーへ「発見のしやすさ」を提供します。
マウスがボタンにホバーした時に、ふわっと浮き上がるようなエフェクトを加えるだけでも、だいぶ印象が変わりますよ。
ただし、過剰なエフェクトは禁物です!

リップルエフェクトを加える

リップルエフェクトを加える

最近、登場したリップルエフェクト

最近、流行っているエフェクトです。
ボタンを押した箇所から、円形の波紋がボタン中に伝わるエフェクトです。マテリアルデザインの理念から登場したエフェクトですね。
実装が少々手間ですが、とても美しいエフェクトなので、導入してみるのも良いでしょう。

リップルエフェクトについては、下記の記事が詳しく解説しています。
波紋が広がるリップルエフェクトボタンの作り方

スキューモーフィズム全開にする

スキューモーフィズム全開にする

Instagramのアイコン。左がスキューモーフィズムを取り入れたアイコン。右が現在のアイコン。

スキューモーフィズムとは「他の物質に似せるために行うデザインや装飾のこと」です。
スキューモーフィズム – wikipediaより引用)

かなりの手間がかかることと、装飾が過剰になりがちなことから、Webサイトのボタンのデザインとして、採用されることはほとんどありません。
しかし、Webアプリやブラウザゲームでは、有効なデザインです。

最近は、フラットデザインやマテリアルデザインが流行っているため、なかなか見る機会がありませんが、もしかしたら、あと数年したら、スキューモーフィズムが復活しているかもしれませんね。

まとめ

この記事のまとめ
・もっとボタンを目立たせてと言われた時の対処法一覧
 ・カタチを変える
 ・グラデーションをつける
 ・影をつける
 ・立体的にする
 ・イラスト、アイコンを入れる
 ・ホバーエフェクトを加える
 ・リップルエフェクトを加える
 ・スキューモーフィズム全開にする

以上、「もっとボタンを目立たせてと言われた時の対処法一覧」でした。
いかがだったでしょうか。ボタンのデザインの役に立ってくれたら、幸いです!

最後に:「もっとボタンを目立たせて」を深読みしよう!

「もっとボタンを目立たせて」と言われて、何も考えずに、過剰な装飾を加えてしまうのは賢いとは言えません。

「もっとボタンを目立たせて」という言葉の裏を考えるようにしてみましょう。
場合によっては、ボタンよりかは周辺の要素を目立たなくする方が正解だったりするかもしれません。
そもそもボタンがボトルネックなのではなく、情報設計を誤っているのかもしれません。

ボタンだけに注目してしまうと、どうしても視野が狭くなってしまいます。
ボタンだけでなく、Webサイト全体のデザインや、情報設計を視野にいれた上で、ボタンのデザインを考えるようにすると良いでしょう。